rapid prototyping sketches, storyboards, mock-ups and scenarios
TRANSCRIPT
![Page 1: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/1.jpg)
Rapid Prototyping
Sketches, storyboards, mock-ups and scenarios
![Page 2: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/2.jpg)
Agenda
Dimensions and terminologyNon-computer methodsComputer methods
Psych / CS 6750 2
![Page 3: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/3.jpg)
Your Project Group
Psych / CS 6750 3
![Page 4: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/4.jpg)
An Essential Concept of UCD
• Requirements for an interactive system cannot be fully specified at the beginning of the lifecycle
• Iterative design
Psych / CS 6750 4
![Page 5: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/5.jpg)
Design ArtifactsHow do we express early design ideas?
No software coding at this stageKey notions
Make it fast!!!Allow lots of flexibility for radically different
designsMake it cheapPromote valuable feedback
Psych / CS 6750 5
*** Facilitate iterative design and evaluation ***
![Page 6: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/6.jpg)
Dilemma
You can’t evaluate design until it’s builtBut…
After building, changes to the design are difficult
Simulate the design, in low-cost manner
Psych / CS 6750 6
![Page 7: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/7.jpg)
But…
• Be aware of weaknesses of prototypes
• Prototypes, obviously, are prototypes: not the “real” system– Can’t “simulate” non-functional features, such as
security or reliability—these are precisely the things sacrificed when developing a prototype
– Response time is key to usability but may be difficult/impossible to convey in a prototype
Psych / CS 6750 7
![Page 8: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/8.jpg)
Prototyping Dimensions1. Representation
How is the design depicted or represented?Can be just textual description or can be visuals
and diagrams
2. ScopeIs it just the interface (mock-up) or does it include
some computational component?
Psych / CS 6750 8
![Page 9: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/9.jpg)
Dimensions (contd)3. Executability
Can the prototype be “run”?If coding, there will be periods when it can’tA goal for later-state prototyping
4. MaturationWhat are the stages of the product as it comes
along?
Psych / CS 6750 9
Revolutionary - Throw out old oneEvolutionary - Keep changing previous design
![Page 10: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/10.jpg)
Terminology (1)
Early prototyping
Late prototyping
Psych / CS 6750 10
![Page 11: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/11.jpg)
Terminology (2)Low-fidelity prototype
High-fidelity prototype
Psych / CS 6750 11
![Page 12: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/12.jpg)
Terminology (3)Horizontal prototype
Vertical prototype
Psych / CS 6750 12
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
![Page 13: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/13.jpg)
Prototyping Methods
Psych / CS 6750 13
![Page 14: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/14.jpg)
Design DescriptionCan simply have a textual description of a
system designObvious weakness is that it’s so far from eventual
systemDoesn’t do a good job representing visual aspects
of interface
Psych / CS 6750 14
![Page 15: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/15.jpg)
Flow Chart Functional specification of how the
system operates, in a step-by-step flow
IF-THENs, branches, loops No visual layout/interface specified More detailed, useful for quick
evaluation, but requires more commitment of resources to produce
Also more advanced (sometimes means more rigid) than simpler mockups
Psych / CS 6750 15
![Page 16: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/16.jpg)
Sketches, Mock-upsPaper-based “drawings” of interfacesGood for brainstormingFocuses people on high-level design notionsNot so good for illustrating flow and the
detailsQuick and cheap -> helpful feedback
Psych / CS 6750 16
![Page 17: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/17.jpg)
Mockups: Simple sketches…
Psych / CS 6750 17
![Page 18: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/18.jpg)
Mockups: Complex details…
Psych / CS 6750 18
![Page 19: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/19.jpg)
Mockup: Controls…
Psych / CS 6750 19
![Page 20: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/20.jpg)
Physical Mock-Up
Styrofoam and Buttons
20
Spring 2004 CS 4750 project “Golf Caddy” by:Chris Hamilton
Linda Kang
Luigi Montanez
Ben Tomassetti
![Page 21: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/21.jpg)
Physical Mock-Ups
Wooden blocks and labels - device control
(Three versions ofa hand-held controller)
21
![Page 22: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/22.jpg)
StoryboardingPencil and paper simulation or walkthrough of
system look and functionalityUse sequence of diagrams/drawingsShow key snap shotsQuick & easy
Psych / CS 6750 22
![Page 23: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/23.jpg)
Example
Sketches solves two problems with use of more fully-developed prototypes User reluctance to suggest changes to what might look like a finished
product User focus too much on details (graphic design, etc) of UI rather than
big picture http://swiki.cc.gatech.edu/cs3750/uploads/119/Story_Board.pdf
23
![Page 24: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/24.jpg)
Scenarios (aka Use Cases)
Hypothetical or fictional situations of useTypically involving some person, event, situation
and environmentProvide context of operationOften in narrative form, but can also be sketches
or even videosAlso used in cognitive walkthrough
24
![Page 25: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/25.jpg)
Scenario
Susan walks into the dark house from the garage. She sees the illuminated light switches near the door and chooses the red switch, which is color-coded for “all on” for the current room, which is the laundry room. The lights illuminate the security alarm, which began emitting an auditory warning when the door was opened. Susan walks to the Elan screen and touches it, revealing the top-level menu. She selects the “security” tab, and enters her code at the prompt. The security system is then disarmed and it displays a message saying “security system off”.
25
![Page 26: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/26.jpg)
Scenario UtilityEngaging and interestingAllows designer to look at problem from
another person’s point of viewFacilitates feedback and opinionsCan be very futuristic and creativeCan involve social and interpersonal aspects
of the task
Psych / CS 6750 26
![Page 27: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/27.jpg)
Other TechniquesTutorials & Manuals
Maybe write them out ahead of time to flesh out functionality
Forces designer to be explicit about decisionsPutting it on paper is valuable
Psych / CS 6750 27
![Page 28: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/28.jpg)
Computer-Supported MethodsCan support more rapid changes to simple
mockupsCan support more functionality for
prototypesCan lead to “stale” design, can focus user (or
customer) too much on the details of the interface, too early in the design process
Psych / CS 6750 28
![Page 29: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/29.jpg)
e.g., Computer Mockups
Psych / CS 6750 29
![Page 30: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/30.jpg)
Prototyping Tools1.Draw/Paint programs
Draw each screen, good for look
Psych / CS 6750 30
Thin, horizontal prototype PhotoShop, Corel Draw,...
IP Address
CancelOK
![Page 31: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/31.jpg)
Psych / CS 6750 31Photoshop
![Page 32: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/32.jpg)
Psych / CS 6750 32Illustrator
![Page 33: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/33.jpg)
Prototyping Tools2. Scripted simulations/slide shows
Put storyboard-like views down with (animated) transitions between them
Can give user very specific script to followOften called chauffeured prototyping
Examples: PowerPoint, Hypercard, Macromedia Director, HTML
Psych / CS 6750 33
![Page 34: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/34.jpg)
Psych / CS 6750 34
Dreamweaver
![Page 35: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/35.jpg)
Psych / CS 6750 35Fireworks
![Page 36: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/36.jpg)
Scripting Example
Psych / CS 6750 36
Ctrl-p
e.g., HTML, Javascript
![Page 37: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/37.jpg)
Macromedia DirectorCombines various media with script written in
Lingo languageConcerned with place and time
Objects positioned in space on “stage”Objects positioned in time on “score”
Easy to transition between screensCan export as executable or as Web Shockwave
file
Psych / CS 6750 37
![Page 38: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/38.jpg)
Psych / CS 6750 38
![Page 39: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/39.jpg)
Director Output
Psych / CS 6750 39
![Page 40: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/40.jpg)
Prototyping Tools3. Interface Builders
Tools for laying out windows, controls, etc. of interfaceHave build and test modes that are good for exhibiting
look and feelGenerate code to which back-end functionality can be
added through programming
Examples: Visual Basic, Delphi, UIMX, ...
Psych / CS 6750 40
![Page 41: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/41.jpg)
e.g., Visual BasicPsych / CS 6750 41
UI Controls
Design area
Controlproperties
![Page 42: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/42.jpg)
Flash - A category of its own
Psych / CS 6750 42
![Page 43: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/43.jpg)
True ProgrammingLess useful for rapid prototyping, but can
save re-coding time down the roadMore constrained in look and feelConstrained to traditional interaction
styles and methodsHard to think outside the box…
Psych / CS 6750 43
![Page 44: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/44.jpg)
Psych / CS 6750 44
Java
![Page 45: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/45.jpg)
Java Output
Psych / CS 6750 45
![Page 46: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/46.jpg)
Other Prototyping Tools
Denim
Psych / CS 6750 46
http://guir.berkeley.edu
![Page 47: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/47.jpg)
Prototyping “Enhancements”Wizard of Oz - Person simulates and controls
system from “behind the scenes”Use mock interface and
interact with usersGood for simulating
system that would be difficult to build
Psych / CS 6750 47
Can be either computer-based or not
![Page 48: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/48.jpg)
Wizard of OzMethod:
Behavior should be algorithmicGood for voice recognition systems and non-
traditional interfacesAdvantages:
Allows designer to immerse oneself in situation
See how people respond, how to specify tasks
Psych / CS 6750 48
![Page 49: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/49.jpg)
Prototyping SummaryTradeoffs of simplicity, manageabilityVeracity InteractivenessUp-front costs vs. down the road costs
Key: Don’t let the prototyping environment drive or constrain your creativity!!
Psych / CS 6750 49
![Page 50: Rapid Prototyping Sketches, storyboards, mock-ups and scenarios](https://reader031.vdocument.in/reader031/viewer/2022032312/56649e205503460f94b0c255/html5/thumbnails/50.jpg)
Tutorials
Photoshop/Illustrator:http://www.absolutecross.com/tutorials/photoshop/http://www.planetphotoshop.com/tutorials.htmlhttp://thetechnozone.com/bbyc/Illustrator.htmhttp://studio.pinnacle-elite.com/tutorials/aitut01.html
Dreamweaver/HTML:http://www.cbtcafe.com/dreamweaver/http://www.sitebuilder.ws/dreamweaver/tutorials/
Fireworks:http://www.cbtcafe.com/fireworks/index.html
VB:http://www.vbtutor.net/vbtutor.htmlhttp://juicystudio.com/tutorial/vb/http://webspace.dialnet.com/paul_pbcoms/vb/tutor.html
Flash:http://www.uic.edu/depts/accc/seminars/flashintro/index.htmlhttp://www.absolutecross.com/tutorials/flash/
Director:http://www.herts.ac.uk/lis/mmedia/directortutorial/http://www.tutorialfind.com/tutorials/macromedia/director/http://www.fbe.unsw.edu.au/learning/director/ Psych / CS 6750 50