1. prototyping

2. Prototyping
Prototyping is common in almost every field of engineering design
It is simply express how similar it is to the finished interface
In prototyping one has to plan to throw away

3. Why prototype? Get feedback earlier, cheaper
Experiment with alternatives
Easier to change to throw away

4. Prototyping the User-Interface
Identifying user interface requirements
Almost impossible to specify in advance
Supported by good software tools
Graphical editors, construction kits
User Interface Management Systems (UIMS)
Wireframes
“Prototyping does NOT mean ‘build in haste’”

5. Prototyping the user interface

6. Prototype Fidelity
An essential property of a prototyping technique is its fidelity
It refers to the level of detail
Low fidelity
Omits details
High fidelity
More like finished product

7. Fidelity is multidimensional

8. Prototype Fidelity Horizontal
In breadth implementation (covers most features with limited depth information)
Low-fidelity in horizontal might be missing many features
Ex: A word processor prototype might omit printing and spell-checking

9. Prototype Fidelity Vertical
In depth implementation (how deeply each feature is actually implemented)
Low-fidelity in vertical may mean limited choices
Ex: you can’t print on double-sided
Canned responses (Always prints the same text, not WYSIWYG)

10. More dimensions of fidelity
Look: appearance, graphic design
Sketchy, hand-drawn
Feel: input method
Pointing & writing feels very different from mouse & keyboard

11. Paper prototyping
Paper prototypes are an excellent choice for early design iterations.
Interaction is natural
Pointing with a finger = mouse click
Writing = typing
A person simulates the computer’s operation
Putting down and picking up pieces
Writing responses on the screen

12. Why paper prototyping? Faster to build
Sketching is faster than programming
Easier to change
No code investment– everything will be thrown away (except the design)
Focuses attention on big picture
Designer doesn’t waste time on details
Customer makes more creative suggestions
Non-programmers can help
Only kindergarten skills are required

13. Example paper prototype

14. Example paper prototype

15. Example story board

16. Example story board

17. What you can learn from PP-type
Conceptual model
Do users understand it?
Functionality
Does it do what’s needed? Missing features?
Navigation & task flow
Can users find their way around?
Are information preconditions met?
Terminology
Do users understand labels?
Screen contents
What needs to go on the screen?

18. What you can’t learn from PP-type
Look: color, font, whitespace, etc
Feel: Fitts’s Law issues
Response time

19. Computer prototype Interactive software simulation
High-fidelity in look & feel
Low-fidelity in depth
Paper prototype had a human simulating the backend; computer prototype doesn’t

20. What you can learn from computer prototypes
Everything you learn from a paper prototype, plus:
Screen layout
Is it clear, overwhelming, distracting, complicated?
Colors, fonts, icons, other elements
Well-chosen?
Interactive feedback
Do users notice & respond to status bar messages, cursor changes, other feedback
Fitts’s Law issues
Controls are big enough? Too close together? Scrolling list is too long?

21. Computer prototyping techniques
Storyboard
Sequence of painted screenshots connected by hyperlinks (“hotspots”)
Form builder
Real windows assembled from a palette of widgets (buttons, text fields, labels, etc.)
Wizard of Oz
Computer frontend, human backend
the user interacts with a computer, but there’s a human behind the scenes figuring out how the user interface should respond.

22. Pros & Cons of Storyboarding
You can draw anything
Cons
No text entry
Widgets aren’t active
“Hunt for the hotspot”

23. Example form builder

24. Example form builder

25. Pros & Cons of Form Builders
Actual controls, not just pictures of them
Cons
Limits thinking to standard widgets
Useless for rich graphical interfaces

26. Wizard of Oz Prototype
Software simulation with a human in the loop to help
“Wizard of Oz” = “man behind the curtain”
Wizard is usually but not always hidden
Often used to simulate future technology
Speech recognition
Learning
Issues
Two UIs to worry about: user’s and wizard’s
Wizard has to be mechanical

27. “Wizard of Oz” prototyping
User thinks having interacting with a computer, but a developer is responding to output rather than the system.
Usually done early in design to understand users’ expectations (requirements)

28. Example of Wizard of Oz

29. Granularity in prototyping

30. Comparison of Techniques

31. Summary Prototype fidelity Kinds of prototypes
horizontal, vertical, look, feel
Kinds of prototypes
Paper
Computer: storyboard, forms, Wizard of Oz
Don’t get attached to a prototype
Because it may need to be thrown away