Upload
louise-jordan
View
218
Download
0
Tags:
Embed Size (px)
Citation preview
CSCD 487/587Human Computer Interface
Winter 2013
Lecture 17Prototypes and Design
Overview
After requirements is design phase Design is an iterative process within User Centered design paradigm Prototypes play an important role
in this process Once users can see and maybe
touch product, their responses can be incorporated back into the design
Prototyping and Design
• What is a prototype? • Why do we prototype?• Different kinds of prototyping
Low fidelityHigh fidelity
• Compromises in prototyping• Some details of Paper
Prototyping
Phases of Design
Two phases of Design Conceptual
Early stages of design, shows users basic concepts of a product
Physical Actually designing final product and
building it
Conceptual Design
Prototypes Early prototypes can differ substantially
from actual product Can be paper, cardboardor other non-technical medium Later, prototypes will more closely
resemble the final product Be an actual representation perhaps
created in the same manner Software system – Interface will be
software !
What is a Prototype?
In other design fields a prototype can be a small-scale model:
• a miniature car• a miniature building or town• the example here comes
from a 3D printer
What is a Prototype?
In interaction design it can be (among other things):
• a set of screen sketches• a storyboard, i.e. a cartoon-like series of scenes • a Powerpoint slide show• a video simulating the use of a system• a lump of wood (e.g. PalmPilot)• a cardboard mock-up• a piece of software with limited functionality
written in the target language or in another language
Prototypes
What is the main purpose of prototypes?
Allows us to try out our design ideas and get feedback
Plus, iterate through several possibilities
Can be used for several groups Users Designers Investors/Managers
Prototypes
Users We assume users can't tell you
what they want If they can see something tangible,
they can tell you what they don't want
Useful to discuss ideas with users Important part of design process
Prototypes
Designers Communicate with team members Everyone needs to be on the same
page and in agreement with the product being developed
Investors or Management Serves as a tangible representation of
the product Can use it to generate more
resources for project
Merits of Prototyping - 1
Captures functional and interface requirements
Interface and functional requirements Reveals problems/prevents gross mistakes Allows evaluation/discussion to foster
innovative ideas from designers and users Allows better communication
Merits of Prototyping - 2
Users enjoy prototyping and feel involved in design
More likely to accept/understand final system
Suggests level of user support needed Help, tutorials, documentation, training
Results in better usability Economical way of testing designs, less effort
User Testing in Practice
What to prototype?
• Technical issues
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial or critical areas
Low-Fidelity Prototypes
Doesn't have to look much like final product
Simple, cheap and quick to produce For exploration only, in the early
stages of design
Low-Fidelity PrototypesPaper
Sketching Hand drawn sketches Simple – stick figures, outlines of
things Index Cards
One card per task
Low-Fidelity PrototypesSketching
• Sketching is important to low-fidelity prototyping
• Don’t be inhibited about drawing ability. Practice simple symbols
Low-Fidelity PrototypesCard-based
• Index cards (3 X 5 inches) • Each card represents
one screen or part of screen• Often used in website
development
Low-Fidelity Prototypes
Storyboarding
Often used together with specific Use Case Scenarios
Shows how user can progress through a task
Users can then role play through a scenario
Low-Fidelity Prototypes
A storyboard is Series of panels that depict key scenes,
actions, visuals, and annotations that define the highlights of a user experience
Imagine a comic strip with explanations adjacent to each panel
According to wikipedia, storyboarding was developed by animators at Walt Disney studio
I have not verified this is true ….
Storyboard Example
Example from MIT Course project
http://web.mit.edu/2.744/www/Project/Assignments/userExperienceDesign/mleong/index.html
High-fidelity prototyping
• Uses materials that you would expect to be in
final product
• Prototype looks more like final system than a low-
fidelity version
• For a high-fidelity software prototype common
environments include
• Macromedia Director, Visual Basic, Visual
Studio
• Danger is that users think they have a full system
• May be frustrated when it does not all
work !!!!
DetailsPaper Prototyping
Words from Professionals
Paper Prototypes
User Interface Engineering Still the “Simplest” method A Team-Building Tool A Design and Testing Tool A Communication Tool Facilitates Regular Testing (valuable
long-term benefit!)
Words from the Book Author“Paper Prototyping”
Carolyn Snyder:
Fast mockup – no coding required Finds problems, including serious
ones Refines design base on user
feedback before implementation (Risk Management!)
Team and communication tool Encourages creativity!
Benefits Summary
Quick to build/refine, thus enabling
rapid design interactions. Requires minimal resources and
materials. Detects usability problems at a very
early stage before implementation. Promotes communication between
stakeholders.
One Designers Experience
Paper Prototyping of Menu DesignTheories on a Small Screen Device Mockup design was fast and flexible Data of path-finding behavior was
visible Excluded variables we didn’t want It’s fun!
Elements of a paper prototype
Menu Bar
ScrollBar
Secondary Menu
Opening Contents
Another ExampleThe home page
Pulldown menu
A second-level page
After prototyping and user testing, this is what their home page looked
like
How to Test a Paper Prototype
Standard Usability Evaluation Procedure
People you need: real users, the “computer”, the facilitator, the observer, and usability consultants
Laboratory setting
Good Example here: http://www.youtube.com/watch?v=9wQkLthhHKA
Tools
Many tools out there for digital paper prototyping and storyboarding
PowerStory Powerpoint plugin http://www.youtube.com/watch?
v=lAj7LmCaPWA Google Sketchup for Storyboarding
http://www.youtube.com/watch?v=1Gb9uffSFUE
PowerMockup uses powerpoint to create digital stories• http://usabilitygeek.com/
wireframing-storyboarding-powerpoint-powermockup/
ReferencesPaper Prototyping
Google Search – Paper Prototyping – YouTubehttp://www.youtube.com/results?
search_query=paper+prototyping&oq=paper+prototyping&gs_l=youtube.3..0l4j0i5.21292370.21300010.0.21300219.21.18.2.1.1.0.167.1193.16j2.18.0...0.0...1ac.1.3pYQyWh3-kE
Prototyping Low and Hi Fidelity Today – Really Good Set of Slides http://www.slideshare.net/memmel/user-interface-prototyping
Storyboarding toolshttp://uxmag.com/articles/storyboarding-in-the-software-design-process
Paper Prototyping: Getting User Data Before You CodeJakob Nielsen, April 14, 2003: http://www.useit.com/alertbox/20030414.htmlPaper prototypingUsability Net http://www.usabilitynet.org/tools/prototyping.htmPaper Prototyping: The Fast and Easy Way to Design and Refine User InterfacesCarolyn Snyder – Book Site http://www.paperprototyping.com/Paper Prototyping Shawn Mederohttp://alistapart.com/article/paperprototyping
Six Signs That You Should Use Paper PrototypingCarolyn Snyder 12/23/2003 http://today.java.net/pub/a/today/2003/12/23/sixSigns.html
35
End
Look for New Date on Project Deliverable !!!