CTT534 Thit K Giao Din HK II 2011 2012
Prototyping
6/4/2012 Adapted from materials of MIT CS Course 6.813/6.831
Outline
Prototype
Low- and High-fidelity Dimensions of fidelity
Paper prototype Computer prototype
Storyboard Form builder Wizard of Oz
4/5/2012
Process for Projects in This Class
0. Propose project 1. Perform user and task analysis
Our topic today
2. Initially design sketches
4. Evaluate prototype
3. Initially prototype 5. Detail prototype
6. Evaluate prototype
7. Implement
8. Perform user testing
4/5/2012
Design alternatives
Why we need to express design ideas early?
You cant evaluate design until its created After software is built, changes to the design are difficult Make it fast Allow lots of flexibility for radically different alternatives Low cost Promote valuable feedback
We want
4/5/2012
What is prototype?
A prototype is an original type, form, or instance of something serving as a typical example, basis, or standard for other things of the same category Examples
Screen shots Paper drawings prototype software - referred to as alpha grade, meaning it is the first version to run
4/5/2012
Why we need prototypes?
Experiment with alternative designs Provide an early, concrete representation of design ideas Provide hands-on experience for all stakeholders (design teams, users, etc.) Easier to change or throw away Keep the design centered on the user
must test and observe ideas with users
Facilitate iterative design and evaluation Reduce the risk of making customers surprise
I wont believe it until I see it
6
4/5/2012
Prototype fidelity
Low-fidelity
a set of sketches/storyboards providing a static, noncomputerized, non-working mockup of the planned product omits details a set of screens that provide a dynamic, computerized, working model of the planed product working software
High-fidelity
4/5/2012
Prototype fidelity (contd)
4/5/2012
Dimensions of fidelity
Horizontal
Prototypes cover many features but with little detail Prototypes cover few features but with much in detail
Vertical
Diagonal
Prototypes cover down to a certain level and vertical
4/5/2012
Dimensions of fidelity (contd)
Look
Is the appearance and graphic design of the UI Can be sketchy and hand-drawn Refering to input methods to interact with the UI Pointing and writing (in paper-mockup) is different from mouse and keyboard
Feel
4/5/2012
10
Paper prototype
Using paper mockup to represent the UI
Sketches of screen appearance Paper pieces show windows, menus, dialog boxes, toolbars Pointing with a finger = mouse click Writing = typing Putting down and picking up pieces Writing responses on the mockup (screen) Describing effects that are hard to show on paper
11
Interaction is natural
A person simulates the computers operation
4/5/2012
Paper prototype (contd)
4/5/2012
12
Paper prototype (contd)
Characteristics
Low fidelity in look and feel High fidelity in depth as there is person to simulate the operation
4/5/2012
13
Paper prototype (contd)
Advantages
Faster to build Easier to change Cheap Focuses attention on big picture
Designers dont waste time on details Attract ideas from customers
Non-programmers can help Convenient
You can prototype on the bus You can utilize your time efficiently
4/5/2012
14
Tools for paper prototyping
White poster board
Used as background or window frame
Index cards Re-stickable glue White correction type Photocopier
For making copies
Pens, markers, scissors, type Etc.
4/5/2012
15
Tips for good paper prototypes
Make it large Make it monochrome (single color) Use description where necessary
You cannot represent tricky interactions like drag & drop, animation, progress bar Use folders and envelopes Better to get feedback
Keep pieces organized
Produce multiple alternatives
4/5/2012
16
What can paper prototypes help?
It helps better understanding of
conceptual model
Do users understand the UI?
What features are missing in the UI?
functionality of the system
navigation and task flow
Do users understand the navigation of the UI?
Are terms and levels understood? What are there in the UI?
terminology
screen content and layout
4/5/2012
17
What it does not help?
Showing look: color, font, whitespace, etc. Demonstrating feel: efficiency issues
Interactions are in low fidelity (not real)
Measuring response time Demonstrating animation and high-level of interaction
Actions like drag and drop, drawing, etc.
4/5/2012
18
Computer prototype
Interactive software simulation High-fidelity in look & feel Low-fidelity in depth
May be no backend, covering horizontally Does not have a human simulating the backend like paper prototype
4/5/2012
19
What can computer prototypes help?
Everything from paper prototypes, plus Better and higher-fidelity look
Screen layout Colors, fonts, icons, etc. Choices of controls
Interactive feedback Efficient issues
Controls are big enough? Whitespace? Distance between controls?
4/5/2012
20
Advantages of computer prototype
Faster than coding No debugging Easier to change and throw away Separate UI design ideas from what offered by UI toolkit (e.g., Visual Studios, C++ Builder)
Your thinking is not limited to available widgets
Non-programmers can do it
4/5/2012
21
Computer prototyping techniques
Storyboard
Sequence of painted screenshots, sometimes connected with links Creating real windows with widgets such as buttons, windows, labels, etc.) Computer frontend, human backend
Form builder
Wizard of Oz
4/5/2012
22
Computer prototyping techniques (contd)
Storyboarding tools
Photoshop Balsamiq Mockup Mockingbird Excel Visio Etc.
4/5/2012
23
Computer prototyping techniques (contd)
Storyboarding tools
Pros
You can draw anything Fast
No interaction
Cons
No text entry Widgets arent active
4/5/2012
24
Computer prototyping techniques (contd)
Form builders
FlexBuilder Silverlight Visual Basic C++ Builder Visual C# Qt Designer
4/5/2012
25
Computer prototyping techniques (contd)
Form builders
Pros
Actual controls high-fidelity in terms of look You can reuse the design for implementation save effort from doing again Limits thinking to standard and available widgets Content in each widget is not visible
Cons
4/5/2012
26
Computer prototyping techniques (contd)
Wizard of Oz
Wizard of Oz = man behind the curtain Software simulation with human in the loop to help
Human wizard mimics computational functionalities
system response interprets user input controls computer to simulate appropriate output
Wizard is not always hidden
Simulate the speech recognition which is not available (human is needed to recognize speech)
Example
4/5/2012
27
Computer prototyping techniques (contd)
Wizard of Oz
Faking the interaction
Issues
Wizard has to be mechanical (pretending to be non-human) Worry about both UIs: for wizard and users
28
4/5/2012
Summary
Prototype
Low- and High-fidelity Dimensions of fidelity
Paper prototype Computer prototype
Storyboard Form builder Wizard of Oz
4/5/2012
29
