Prototyping the User Interface Sketches, storyboards, mock- ups, scenarios and tools This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to [email protected]are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb. 2012.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Prototyping the User Interface
Sketches, storyboards, mock-ups, scenarios and tools
This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to [email protected] are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb. 2012.
• After building, changes to the design are difficult
• Simulate the design, in low-cost manner
UI Design - Georgia Tech
7
Four Considerations for Prototyping
1. Representation How is the design depicted or
represented? Can be just textual description or can be
visuals and diagrams
2. Scope Depth and breadth of prototype
– How much of overall design is prototyped
UI Design - Georgia Tech
8
Four Considerations (contd)
3. Executability Can the prototype be “run”? If coding, there may be periods when it
can’t
4. Maturation What are the stages of the product as it
comes along?– Revolutionary - Throw out old prototype– Evolutionary - Keep changing previous prototype
UI Design - Georgia Tech
Terminology
• Early prototyping, Late prototyping• Low-fidelity prototype, High-fidelity prototype• Horizontal prototype
Very broad, does or shows much of the interface,but does this in a shallow manner
– Example: all first and second-level menu commands
• Vertical prototype Fewer features or aspects of the interface
simulated,but done in great detail
– Possibly even execution of a few important actions– This is what you’re doing for project part 3
9UI Design - Georgia Tech
10
Rapid Prototyping Methods
• Non-computer vs. computer-based
Typically earlier in processTypically lower fidelity
Typically later in processTypically higher fidelity
UI Design - Georgia Tech
Tools like Balsamiq bridge this gap
11
Non-Computer Methods
• Goal: Want to express design ideas and get quick & cheap opinions on system
• Methods?
UI Design - Georgia Tech
12
Design Description
• Can simply have a textual description of a system design Obvious weakness – it’s so far from
eventual system Doesn’t do a good job representing
visual aspects of interface Not nearly enough
– Sort of OK for ideation– Not OK as a way to get meaningful feedback
UI Design - Georgia Tech
13
Sketches, Mock-ups
• Paper-based “drawings” of interfaces• Good for brainstorming• Focuses on high-level design notions• Not so good for illustrating flow and
the details• Quick and cheap -> helpful feedback
UI Design - Georgia Tech
14
Physical Mock-Ups
• Wooden blocks and labels - device control
(Three versions ofa hand-held controller)
UI Design - Georgia Tech
15
Physical Mock-Up
• Styrofoam and ButtonsSpring 2004 CS 4750 project “Golf Caddy” by:Chris Hamilton
Linda Kang
Luigi Montanez
Ben Tomassetti
UI Design - Georgia Tech
16
Storyboarding
• Pencil and paper simulation or walkthrough of system look and functionality Quick & easy Show key snap shots Use sequence of screen shots
– Use cases can be driver for sequencing
UI Design - Georgia Tech
17
Storyboarding Example
• Sketches solves two problems with use of more fully-developed prototypes User reluctance to suggest changes to what
might look like a finished product User focus too much on details (graphic design,
etc) of UI rather than big picture
UI Design - Georgia Tech
18
Other Techniques
• Tutorials & Manuals Maybe write them out ahead of time to
flesh out functionality If it’s difficult to describe, it’s probably
difficult to use! Forces designer to be explicit
about decisions So putting it on paper
is valuable Early involvement by tutorial & help text
teamUI Design - Georgia Tech
19
Computer Methods
• Simulate more of system functionality Usually just some features or aspects Can focus on more of details Typically engaging Caution: Users more reluctant to suggest
changes once they see more realistic prototype– So make prototype intentionally not so realistic
UI Design - Georgia Tech
20
Prototyping Tools - Drawing Pgms.
• Draw/Paint programs Draw each screen, good for look