PostPC Computing

1
PostPC Computing

• Mockups and Prototypes

Prof. Scott Kirkpatrick, HUJI Amnon Dekel,
Bezalel
2
From Analysis to Design

• Creating rough mockups and prototypes

3
What is a Mockup?

• A mockup is an easily made and changeable draft
  of at least part of design.
• Mockups range from extremely low-fidelity
  sketches to extremely high fidelity interactive
  simulations.
• Types
• Sketches
• Sketches with movable objects
• Computer made graphic sketches
• Computer based linear GUI presentations (PPT,
  etc)
• Computer based GUI simulations (Director,
  Supercard, Toolbook, VB) () Some see only this
  as a prototype.

4
Why Prototype?

• Saves money
• Moves ideas in the realm of the concrete
• Fosters alternatives and alterations
• Allows the user to insert real input at the
  design stage

5
Where to Start?

• Your focus may be on
• The flow of screens for major tasks
• The overall metaphor and how it will be carried
  out.
• The screen layout of the basic task screen.
• The screen layouts for all screens.
• Alternative metaphors and other alternative
  design ideas.

6
Paper Prototypes

• Set up a grid.
• Consistency
• Coherency
• Different parts of the application might need
  different grids.
• Try to be consistent across grids.
• Dont insert all details at first.

7
Evaluating Prototypes

• Does the prototype
• Convey a consistent conceptual model?
• Match the users mental model?
• Use the users vocabulary?
• Cover the tasks that users expect to be able to
  do with the product?
• Streamline the task for the users?
• Divide the work well between the user and
  computer?
• Maintains consistency in look and feel across
  screens?
• Maintains consistency in button, icon, and
  navigational element location across screens?
• Maintains consistency in vocabulary across
  screens?

8
Walking through the Prototype

• Take a brief scenario or use flow and go through
  the design step by step.
• Look for potential problems
• Illogical design.
• Misleading design.
• Steps that cannot be accomplished.
• Processes that require too many steps.
• You want to see if users will be able to
  accomplish the tasks easily and quickly given
  your design.

9
User Testing a Prototype

• It is beneficial to do in-team walkthroughs often
  to see if you arent missing something. But only
  doing it with users will give you real answers.
• A basic method is for you to act as the computer.
  
• You act as computer.
• User uses "Talking out loud method"
• Ask questions to get clear answers e.g.
• What would you do? How would you move to the next
  field? Would you press a key? Which key?
• Would you use the mouse? What would you do with
  the mouse?
• Etc

10
Testing Alternative Designs

• Using the paper prototypes you can quickly test
  alternative designs.
• Instead of arguing which design is better, test
  it.
• Testing Navigation Schemes and Hierarchies Make
  sure the users can
• Find what they need.
• Understand what they find.
• Know where they are.
• Know where they came from.
• Know how to get back.

11
Iterate towards completion!

• We have seen that running tests on paper
  prototypes can help you gather a wealth of
  information on where your design is succeeding
  and where it might need redesign.
• Creating higher fidelity prototypes helps you
  gather clearer usability feedback.
• A simulation will generate the most information
  regarding the usability of a design since it is
  closest to the final product.

12
Some Important Points

• Demos are NOT usability tests.
• Looking good is not the same as being useful and
  usable.
• Users may not be able to predict the problems
  they will have.
• Users dont know what they dont know.

13
Example- PSUM
Initial Grid design (Photoshop)
14
Example- PSUM
Initial VB design
15
Example- PSUM
Initial VB design
16
Example- PSUM
Initial VB design
17
Example- PSUM
Final Max design
18
Example- PSUM
Final Max design
19
Example- PSUM
Final Max design