1. Prototyping

2. Why Do We Prototype? Get feedback on our design faster
saves money
Experiment with alternative designs
Fix problems before code is written
Keep the design centered on the user

3. Fidelity in Prototyping
Fidelity refers to the level of detail
High fidelity
prototypes look like the final product
Low fidelity
artists renditions with many details missing

4. Prototyping Methods Non-computer vs. computer-based
Typically earlier in process
Typically later in process

5. Non-Computer Methods
Goal: Want to express design ideas and get quick & cheap opinions on system
Methods?

6. Sketches, Mock-ups Paper-based “drawings” of interfaces
Good for brainstorming
Focuses people on high-level design notions
Not so good for illustrating flow and the details
Quick and cheap -> helpful feedback

7. Low-fidelity Sketches

8. High-fidelity Sketches
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Help

11. Storyboarding Pencil and paper simulation
Use sequence of diagrams/drawings
Show key snap shots
Quick & easy

12. Example

15. Scenarios Hypothetical or fictional situations of use
Typically involving some person, event, situation and environment
Provide context of operation
Often in narrative form, but can also be sketches or even videos

16. Scenario Utility Engaging and interesting
Allows designer to look at problem from another person’s point of view
Facilitates feedback and opinions
Can be very futuristic and creative

17. Other Techniques Tutorials & Manuals
Maybe write them out ahead of time to flesh out functionality
Forces designer to be explicit about decisions
Putting it on paper is valuable

18. Computer Methods Simulate more of system functionality
Usually just some features or aspects
Can focus on more of details
Typically engaging
Danger: Users are more reluctant to suggest changes once they see more realistic prototype

19. Prototype scenario Horizontal prototype Vertical prototype
scripts of particular fixed uses of the system
Very broad, does or shows much of the interface, but does this in a shallow manner
Fewer features or aspects of the interface simulated, but done in great detail

20. Prototype Horizontal prototype Scenario Full interface
Vertical prototype
Scenario
Horizontal prototype
Full interface

21. Prototyping Tools 1.Draw/Paint programs
Draw each screen, good for look
IP Address OK
Cancel
Thin, horizontal prototype
PhotoShop, Corel Draw,...

22. Prototyping Tools 2. Scripted simulations/slide shows
Put storyboard-like views down with (animated) transitions between them
Can give user very specific script to follow
Examples: PowerPoint, Hypercard, Macromedia Director, HTML

23. Beware!

24. Prototyping Tools 3. Interface Builders
Tools for laying out windows, controls, etc. of interface
Have build and test modes that are good for exhibiting look and feel
Generate code to which back-end functionality can be added through programming
Examples: Visual Basic, Delphi,...

25. Visual Basic
UI Controls
Control properties
Design area

26. Prototyping Tools Good features Easy to develop & modify screens
Supports type of interface you are developing
Supports variety I/O devices
Easy to link screens and modify links
Allows calling external procedures & program
Allows importing text, graphics, other media
Easy to learn and use
Good support from vendor

27. Prototyping Late Early Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups
Slide shows
System prototypes
Scenarios
Simulations
Storyboards

28. Interface Design and Usability Engineering
Articulate:
who users are
their key tasks
Brainstorm designs
Refined designs
Completed designs
Goals:
Task centered system design
Participatory design
User-centered design
Psychology of everyday things
User involvement
Representation & metaphors
Graphical screen design
Interface guidelines
Style guides
Participatory interaction
Task scenario walk- through
Evaluate tasks
Usability testing
Heuristic evaluation
Field testing
Methods:
low fidelity prototyping methods
high fidelity prototyping methods
Products:
User and task descriptions
Throw-away paper prototypes
Testable prototypes
Alpha/beta systems or complete specification