prototyping the user interface - emory universityvalerie/courses/spr11/485/resources/proto… ·...
TRANSCRIPT
![Page 1: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/1.jpg)
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: March 2011 by Valerie Summet.
![Page 2: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/2.jpg)
Prototyping Concepts
Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups Slide shows
Simulations
System prototypes
Scenarios
StoryboardsWizard of Oz
Part 2 Part 3
![Page 3: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/3.jpg)
Agenda
• Prototyping dimensions• Prototyping terminology• Non-computer methods• Computer methods
![Page 4: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/4.jpg)
Your Project Group
![Page 5: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/5.jpg)
Design Artifacts
• How do we express early design ideas?o No software coding at this stageo Part II of project
• Key notionso Make it fast!!!o Allow lots of flexibility for radically different
designso Make it cheapo Promote valuable feedback
*** Facilitate iterative design and evaluation ***
![Page 6: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/6.jpg)
Dilemma
• You can’t evaluate design until it’s builto But…
• After building, changes to the design are difficult
• Solution: Simulate the design, in low-cost manner
![Page 7: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/7.jpg)
Four Considerations for Prototyping
1. Representation•How is the design depicted or represented?
–Could be just textual description or can be visuals and diagrams
2. Scope•Is it just the interface (mock-up) or does it include some computational component?
![Page 8: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/8.jpg)
Four Considerations (contd)
3. Executability•Can the prototype be “run”?•If coding, there will be periods when it can’t
4. Maturation•What are the stages of the product as it comes along?
–Revolutionary - Throw out old one prototype–Evolutionary - Keep changing previous proptotype
![Page 9: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/9.jpg)
Prototyping Terminology
• Early prototyping, Late prototyping• Low-fidelity prototype, High-fidelity prototype• Horizontal prototype
o Very broad, does or shows much of the interface,but does this in a shallow manner
• Vertical prototypeo Fewer features or aspects of the interface simulated,
but done in great detail
![Page 10: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/10.jpg)
Rapid Prototyping Methods
• Non-computer vs. computer-based
Typically earlier in process Typically later in process
![Page 11: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/11.jpg)
Non-Computer Methods
• Goal: Want to express design ideas and get quick & cheap opinions on system
• Methods?
![Page 12: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/12.jpg)
Design Description
• Can simply have a textual description of a system designo Obvious weakness – it’s so far from eventual
systemo Doesn’t do a good job representing visual
aspects of interfaceo Not nearly enough
OK for developing ideas Not OK as a way to get meaningful feedback
![Page 13: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/13.jpg)
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
![Page 14: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/14.jpg)
Physical Mock-Ups
• Wooden blocks and labels - device control
(Three versions ofa hand-held controller)
![Page 15: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/15.jpg)
Physical Mock-Up
• Styrofoam and Buttons
“Golf Caddy” by:Chris HamiltonLinda KangLuigi MontanezBen Tomassetti
![Page 16: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/16.jpg)
Storyboarding
• Pencil and paper simulation or walkthrough of system look and functionalityo Use sequence of diagrams/drawingso Show key snap shotso Quick & easy
![Page 17: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/17.jpg)
Example
• Sketches solves two problems with use of more fully-developed prototypeso User reluctance to suggest changes to what might
look like a finished producto User focus too much on details (graphic design, etc)
of UI rather than big picture
![Page 18: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/18.jpg)
Other Techniques
• Tutorials & Manualso Maybe write them out ahead of time to flesh
out functionalityo If it’s difficult to describe, it’s probably difficult
to use!o Forces designer to be explicit
about decisionso So putting it on paper
is valuable
![Page 19: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/19.jpg)
Computer Methods
• Simulate more of system functionalityo Usually just some features or aspectso Can focus on more of detailso Typically engagingo Danger: Users are more reluctant to suggest
changes once they see more realistic prototype
![Page 20: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/20.jpg)
Prototyping Tools - Drawing Pgms.
• Draw/Paint programso Draw each screen, good for look
Thin, horizontal prototype PhotoShop, Corel Draw,...
IP Address
CancelOK
![Page 21: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/21.jpg)
Prototyping Tools - Scripting
• Scripted simulations/slide showso Put storyboard-like views down with
(animated) transitions between themo Can give user very specific script to follow
Often called chauffeured prototyping
o Examples: PowerPoint/Keynote,Visio, HTML/CSS,Macromedia Director, Dreamweaver
![Page 22: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/22.jpg)
Powerpoint Transition Controls
Mouse click actions: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URL File
![Page 23: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/23.jpg)
Scripting Example
![Page 24: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/24.jpg)
More Complex Example
From: http://www.codinghorror.com/blog/2008/04/ui-first-software-development.html
![Page 25: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/25.jpg)
Beware!
• More resources– 26 minute video from MS (Manuel Clement)– PowerPoint Prototyping Toolkit
![Page 26: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/26.jpg)
Macromedia Director
• Combines media with Lingo scripting language
• Concerned with place and timeo Objects positioned in space on “stage”o Objects positioned in time on “score”
• Easy to transition between screens• Can export as executable or as Web
Shockwave file
![Page 27: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/27.jpg)
![Page 28: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/28.jpg)
Prototyping Tools - Interface Builders
• Tools for laying out windows, controls, etc. of interfaceo Have build and test modes that are good for
exhibiting look and feelo Generate code to which back-end functionality
can be added through programming• Examples: Visual Basic, Flex, Pencil
(plug-in for FF), ...
![Page 29: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/29.jpg)
Visual Basic
UI Controls
Design area
Controlproperties
![Page 30: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/30.jpg)
Audio Interface (Telephony) Builder Tools
• SUEDE - Flow-chart for speech interfaceo Landay et al, UC Berkeley (now U Washington)
• Used for wizard-of-Oz studies• Could be used to drive real system http://dub.washington.edu:2007/suede/
![Page 31: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/31.jpg)
Suede
![Page 32: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/32.jpg)
Prototyping Tools
• Good featureso Easy to develop & modify screenso Supports type of interface you are developingo Supports variety of I/O deviceso Easy to link screens and modify linkso Allows calling external procedures & programo Allows importing text, graphics, other mediao Easy to learn and useo Good support from vendoro Google “rapid prototyping tools” and find one that
works for you.
![Page 33: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/33.jpg)
Prototyping Technique
• Wizard of Oz - Person simulates and controls system from “behind the scenes”o Use mock interface and
interact with userso Good for simulating
system that would be difficult to build
Can be either computer-based or not
![Page 34: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/34.jpg)
Wizard of Oz Technique
![Page 35: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/35.jpg)
Wizard of Oz
• Method:o Behavior should be algorithmico Good for voice recognition systems
• Advantages:o Allows designer to immerse oneself in
situationo See how people respond, how specify tasks
![Page 36: Prototyping the User Interface - Emory Universityvalerie/courses/spr11/485/resources/Proto… · Prototyping the User Interface Sketches, storyboards, mock-ups, scenarios and tools](https://reader034.vdocuments.net/reader034/viewer/2022042208/5eac44b55a6d2d74723430b9/html5/thumbnails/36.jpg)
Review of Prototyping Concepts
Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups Slide shows
Simulations
System prototypes
Scenarios
StoryboardsWizard of Oz