Project - Design Sketches

From Cmsc434_s10
Jump to: navigation, search

(Due: 3/8, 2pm)

Ucd-design-sketches.png

Creating scenarios

For the tasks you’ve identified in the user and task analysis, create imaginary but concrete scenarios. The scenarios should cover at least the top three most important tasks. You can either design one scenario for each task or a long scenario covering all the tasks.

A scenario is basically a short story telling how a typical user may use the system your team is to accomplish a particular task. Each story should be centered on a persona you’ve created. Good scenarios are ones that can reflect crucial components of your task analysis results including the needs, contexts, preconditions, subtasks, frequency, and motivation related to the tasks. When applicable, scenarios can also include occurrences of potential user errors and reasonable strategies for preventing or recovering from the errors. Label these components clearly (as the examples below) so that they can be easily communicated to others (and graded).

As you are working out a scenario, you may discover some problems with the description of the task such as missing preconditions or subtasks that make it hard to create a realistic and convincing scenario for this task. This is perfectly normal. Simply go back and revise the task description, since changes at this early stage cost very little, which is the beauty of the iterative design process.

Below are a couple examples:

Valentine’s day is tomorrow (HIGHLY MOTIVATED). Tom wants to buy an artwork as a gift for his wife from a local art dealer who only takes cash (INFREQUENT). Tom needs some cash because there’s not enough cash left in the wallet (NEEDS). On the way to the campus to teach CMSC 434, he decides to stop by a local convenience store (CONTEXT) and withdrawal some cash from the ATM in the store (TASK). He pulls out his wallet and takes out his ATM card (PRECONDITION). He swipes the card and is asked to enter the password. He enters the password and is presented with three options: deposit, withdrawal, and check balance. He selects deposit and is then prompted to enter an amount. He enters $200 and confirms the amount. He retrieves the cash and starts walking away (SUBTASKS). However, Tom has forgotten to take his bank card with him (ERROR). A beeping sound comes from behind and catches Tom’s attention. Tom realizes his mistake and goes back to the ATM to take his card (ERROR RECOVERY).

Linda opens her drawer and realizes it is overflowing with receipts. She thinks it’s about time to organize these receipts (Needs) before things are getting out of control (somewhat motivated). She heard from a friend about [Your project’s site] that can help her out. She goes online (CONTEXT) to the site to register for a new account (Task 1), and puts in some basic personal information including her email address (Preconditions of Task 1: must have an email address). She is asked to confirm her account via email. After clicking the link in the email, she proceeds to the website to login (Subtasks of Task 1). The registration process only needs to be done once (FREQUENCY: once). Now that she’s registered for an account, she’s ready to upload her receipts (Task 2). After logging in (Preconditions of Task 2), Linda is immediately taken to her home page. Since it’s her first-time visit, she reads the “Get Started Guide” to learn how to upload her receipts. Following the guide, she first clicks the upload link. On that page she selects the receipts she wishes to upload from her computer. Using character recognition, the website helps to fill out the searchable information. She then does this for every receipt (FREQUENCY: recurring) and confirms the information by using the browse feature (Subtasks of Task 2).

Creating preliminary design sketches

For each scenario you’ve created, draw (by hand) at least two alternative design sketches of a user interface that can support the scenario. Annotate the UI elements in each design sketch to indicate their purposes (e.g., to support a particular subtask, to check for a particular preconditions). Since you will need the originals of the sketches for other purposes (i.e., storyboard and paper prototype), it's recommended that you make photocopies of the sketches and annotate the copies. Alternatively, you can scan them in and annotate using a graphics editor.

Creating storyboards

Pick the most important scenario and draw one high-level conceptual comic-strip storyboard and two UI storyboards, one for each design alternative.

Conceptual storyboard

A high-level conceptual storyboard is a comic-strip style set of drawings to visually illustrate a scenario at the high-level. Your conceptual storyboard should have 5-8 panels. Draw each panel with a think pen. Using a thick pen limits the amount of detail that you can add, forcing you to only draw the most important elements of scenario, user, and interface that communicate your ideas. The storyboard is not meant to be an artistic creation, so anyone can draw. Focus on clarity, communicativeness, and innovation instead of aesthetics here.

UI storyboard

An UI storyboard should illustrate how the UI dynamically change and look like at various important points in the scenario. It should be based on your design sketches. For example, for a simple login screen, the first panel in the storyboard can be the empty login screen (a design sketch) and the next panel can be the same login screen (a copy of the design sketch) with the user’s name and masked password entered (written by hand). In addition, you should clearly describe what happen between the two panels.

Submit the panels of your storyboard individually scanned (if on papers) or photographed (if on whiteboards). Use the < gallery > feature to lay the panels out nicely in your project page.