Prototypes and Walkthroughs

1
Prototypes and Walkthroughs

• Steps 3 and 4

2
Prototypes

• For step 3 of A1 you will need to develop low
  fidelity prototypes based on your prioritized
  list of requirements
• So for those of you eager to think about design
  ideas this is where you get to do that

3
Prototypes

• Your prototypes should fulfill the major
  requirements you have specified in step 2
• Hint your prioritized list of requirements will
  give you a good idea of the areas of the
  prototype you need to focus on

4
Prototypes

• Expectations
• Engage in several iterations of prototyping
• At least 2 iterations of prototyping for A1 plus
  1 more prototype which you will use for your
  walkthrough evaluations
• Quantity is important here because we want you to
  explore various design ideas
• But the evolution of the prototypes are also
  important so we want to see how you are improving
  from one prototype to the next

5
Prototypes

• Low fidelity prototypes are prototypes that are
  very quick and easy to create and are
  intentionally very rough so you dont feel
  committed to any of the designs you come up with.
  The idea is to come up with several designs and
  critically evaluate each to decide on which one
  has the most potential.

6
Prototypes

• 3 different ways to create prototypes
• Paper sketches
• Pictive method
• Storyboard method

7
Prototypes

• Paper sketches
• Define rough layout of the interface
• Simple and quick
• But each prototype should still contain the core
  screens that illustrate how the system will look
  as a whole
• Good for layout but limited as to what you can
  show

8
Prototypes

• Paper sketches

9
Prototypes

• Pictive Method
• Good for live demos
• Use transparencies to represent different layers
  of your interface such as windows and drop down
  menus (can also draw on transparencies during the
  demo to show how the interface is changing)
• Use poster boards and sticky notes to represent
  different layers of your interface (i.e. draw
  various views of a button such as when its
  pressed, clicked, and etc. on different sticky
  notes and stick them on the poster board during
  the demo to show how it changes when pressed or
  clicked)

10
Prototypes

• Pictive method

2 transparencies (this sequence shows what
happens when the file menu is clicked)
11
Prototype

• Storyboard method
• Good when no one is there to demonstrate and also
  live but its more work
• You can use poster boards or flip pads for
  representing a series of screens
• Hint if you have a consistent background you can
  photocopy it to save some time

12
Prototypes

• Storyboard method

2 separate frames (this sequence show what
happens when the file menu is clicked)
Note how you have to draw the top menus again for
the second frame
13
Prototypes

• Hints
• Do many paper sketches for initial prototypes
• Explore a variety of ideas (keep an open mind)
• You can use paper sketches to present the 2
  prototype iterations required for A1
• For the version of the prototype you will be
  performing a walkthrough on and present in
  tutorial, use the pictive method for presentation
  and the storyboard method when you write it up in
  A1 (remember I have to be able to understand how
  your prototype works without you there to explain
  it to me so make sure you include appropriate
  comments)

14
Prototypes

• Very important!
• Absolutely no computer assisted prototypes
• Must be hand-drawn
• No interface builders
• No Photoshop

15
Prototypes

• Things to keep in mind
• Try not to focus on prettiness or completeness
• Focus on key parts and general interaction styles
• Each prototype should contain core screens
• Include sample interaction based on key tasks
• Remember we dont expect you to design a perfect
  interface at this stage
• Its more about the exploration of ideas and
  recognizing your design mistakes

16
Prototypes

• Whats required
• Develop several low fidelity prototypes
• Pick promising ones and write brief descriptions
  for each prototype (i.e. how did it improve over
  others)
• Pick 1 for your presentation

17
Walkthroughs

• Walkthroughs are ways to evaluate the usability
  of your prototypes
• You are required to do a walkthrough evaluation
  for each of your task examples
• You need to first convert your task examples into
  scenarios before performing the walkthrough
  evaluation

18
Walkthroughs

• Scenarios
• Do not confuse scenarios with task examples
• A scenario is a step by step description of how a
  user accomplishes the tasks involved in a task
  example using the a prototype interface (see
  library example)

19
Walkthroughs

• Whats required
• For the 1 prototype design you pick, convert your
  tasks to scenarios to perform walkthrough
  evaluations (use the table on the next slide for
  the A1 write up)
• For each walkthrough synthesize and summarize the
  problems, successes, and major areas for
  improvement (this can be done in point form)
• Write a summary paragraph of all the walkthroughs
  to make general comments about the entire
  prototype and walkthroughs as a whole
• Example Problems specific to 1 walkthrough may
  be finding the search patron menu is difficult.
  Then a generalization of this problem in the
  summary paragraph can be this prototype suffers
  from poor organization of menus.

20
Walkthroughs

• Table for A1 presentation

focus on this section and try to be critical
(very important)
dont combine these 2 sections