assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/schedule/se542_week4.pdf · than simple low...
TRANSCRIPT
![Page 1: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/1.jpg)
Assignment #3Assignment #3
• reading2.pdf A Mixed-Fidelity Prototyping Tool for Mobile Devices by de Sa et al.
• Appeared in Advanced Visual Interfaces ppAVI 2008
![Page 2: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/2.jpg)
Computer Aspect of HCIComputer Aspect of HCI
• Go over last year’s handout posted on the course web page
![Page 3: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/3.jpg)
Prototyping techniquesrototyp ng techn ques
![Page 4: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/4.jpg)
OverviewOverviewP i d i•Prototyping and construction
C t l d i •Conceptual design
Ph i l d i•Physical design
T l t •Tool support
![Page 5: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/5.jpg)
P i d iPrototyping and construction
•What is a prototype? •Why prototype?•Different kinds of prototypingp yp g
low fidelityhigh fidelityg y
•Compromises in prototyping
•Construction
![Page 6: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/6.jpg)
What is a prototype?What is a prototype?
In other design fields a prototype is a small-scale model:
a miniature cara miniature cara miniature building or town
![Page 7: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/7.jpg)
What is a prototype?What is a prototype?
In interaction design it can be (among other things):In interaction design it can be (among other things):a series of screen sketchesa storyboard i e a cartoon-like series of scenes a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide showa video simulating the use of a systemg ya lump of wood (e.g. PalmPilot)a cardboard mock-up i f f i h li i d f i li a piece of software with limited functionality
written in the target language or in another languagelanguage
![Page 8: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/8.jpg)
Why prototype?Why prototype?
Evaluation and feedback are central to interaction •Evaluation and feedback are central to interaction design•Users can see hold interact with a prototype more •Users can see, hold, interact with a prototype more easily than a document or a drawing•Team members can communicate effectively•Team members can communicate effectively•You can test out ideas for yourself •Prototypes answer questions and support •Prototypes answer questions, and support designers in choosing between alternatives
![Page 9: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/9.jpg)
What to prototype?What to prototype?
•Technical issues
•Work flow, task design
•Screen layouts and information di ldisplay
•Difficult, controversial, critical areas
![Page 10: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/10.jpg)
Prototyping TechniquesPrototyping Techniques
Low Fidelity
Medium Fidelity
High Fidelity
Control panel for pump 2
coolant flow 45 %
retardant 20%
speed 100%
Shut Down
![Page 11: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/11.jpg)
Low Fidelity Prototypes• Hand drawn mockups of some design
idideas• Focus on:
– Brainstorming as many ideas as possible (discount usability)
– Making it clear enough to be understandable
• But don’t focus on making it “pretty”– They are not computer generated images
(don’t use drawing programs to generate them)
b d l f db k f h• May be used to elicit feedback from the user
![Page 12: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/12.jpg)
Types Of Low Fidelity yp yPrototypes• Sketches• Storyboardsy• Pictive
![Page 13: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/13.jpg)
Low Fidelity PrototypesLow Fidelity Prototypes•Sketches:•Sketches:–A drawing of the high-level appearance of the intended systemintended system
–The crudity of the prototype means people concentrate on high level conceptsconcentrate on high level concepts
–It may be hard to envision the progression of a dialog g
–Don’t be inhibited about drawing ability. Practice simple symbols
![Page 14: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/14.jpg)
SketchesSketchesScreen 1: Initial order screen
![Page 15: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/15.jpg)
Sketches (2)Sketches (2)Screen 2: Payment screen
![Page 16: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/16.jpg)
Sketches (3)Sketches (3)Screen 3: Order confirmation screen
![Page 17: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/17.jpg)
Sketches (4)Sketches (4)Screen 4: Order is confirmed
![Page 18: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/18.jpg)
Sketches (5)Sketches (5)Screen 5: Inactivity screen
![Page 19: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/19.jpg)
Low Fidelity PrototypesLow Fidelity Prototypes•Storyboardingy g–It’s a series of key frames
•Originally from film; used to get the idea of a scene•Snapshots of the interface at particular points in the interaction
• For interfaces it allows users to quickly evaluate the direction of the design
![Page 20: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/20.jpg)
StoryboardsStoryboards
Oft d ith i b i i •Often used with scenarios, bringing more detail, and a chance to role play
•It is a series of sketches showing how a user might progress through a task using the device
•Used early in design•Used early in design
![Page 21: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/21.jpg)
StoryboardingStoryboarding
Initial order screen
![Page 22: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/22.jpg)
Storyboarding (2)Storyboarding (2)
User orders an “Ecstatic Burger”
![Page 23: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/23.jpg)
Storyboarding (3)Storyboarding (3)
Order is placed
![Page 24: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/24.jpg)
Storyboarding (4)Storyboarding (4)
Payment screen comes up
![Page 25: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/25.jpg)
Storyboarding (5)Storyboarding (5)
User pays with cash
![Page 26: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/26.jpg)
Storyboarding (6)Storyboarding (6)
Order confirmation screen comes up
![Page 27: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/27.jpg)
Storyboarding (7)Storyboarding (7)
Order is placed
![Page 28: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/28.jpg)
Storyboarding (8)Storyboarding (8)
Order confirmation is shown
![Page 29: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/29.jpg)
Storyboarding: Alternate PathStoryboarding: Alternate Path
Initial order screen
![Page 30: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/30.jpg)
Storyboarding: Alternate Path y g(2)
User orders a “Basic Merry Burger”
![Page 31: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/31.jpg)
Storyboarding: Alternate Path y g(3)
User orders “Smirking small fries”
![Page 32: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/32.jpg)
Storyboarding: Alternate Path y g(4)
User orders a “Giggle sized pop”
![Page 33: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/33.jpg)
Storyboarding: Alternate Path y g(5)
Order is placed
![Page 34: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/34.jpg)
Storyboarding: Alternate Path y g(6)
Payment screen comes up
![Page 35: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/35.jpg)
Storyboarding: Alternate Path y g(7)
User pays by debit
![Page 36: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/36.jpg)
Storyboarding: Alternate Path y g(8)
Order confirmation screen comes up
![Page 37: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/37.jpg)
Storyboarding: Alternate Path y g(9)
Order is placed
![Page 38: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/38.jpg)
Storyboarding: Alternate Path y g(10)
Order confirmation is shown
![Page 39: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/39.jpg)
Low Fidelity PrototypesLow Fidelity Prototypes
•Pictive–“Plastic interface for collaborative technology initiatives through video exploration”
–Key points:•Design consists of multiple layers of sticky notes and plastic overlays
•Interaction is demonstrated by manipulating notes•Interaction is demonstrated by manipulating notes
–Session is videotaped for later analysis•Usually end up with mess of paper and plastic!y p p p p•“How does it work again?”
![Page 40: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/40.jpg)
PictivePictive
![Page 41: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/41.jpg)
PictivePictive
![Page 42: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/42.jpg)
Medium Fidelity Prototypes• Many different types
– Range from simple computer draw images to partially working systemspartially working systems
• They may take longer to generate and change than simple low fidelity representations
• Benefits– It seems more like the completed system so it provides a
clearer idea of how it works– May be used to elicit feedback from the user when low-
fidelity approaches cannot be used– Depending upon the type of medium fidelity prototype it
may allow for some user testing.
• Pitfalls– User’s reactions are usually “in the small”User s reactions are usually in the small
• Blinds people to major representational flaws– Users reluctant to challenge / change the design
itselfitself• Designs are too “pretty”, egos…
– Management may think its real!
![Page 43: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/43.jpg)
Medium Fidelity PrototypesMedium Fidelity Prototypes•Tutorials and manuals–Write them in advance of the system–What are they?y
•Tutorial for step by step description of an interaction–an interface “walk-through” with directions
•Manual for reference of key concepts–in-depth technical description of the different parts of the system
–If highly visual, then storyboard is set within textual explanations
–Does this work?•People often read manuals of competing products to
h kcheck:–interface, functionality, match to task
•Acts as a design tool
![Page 44: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/44.jpg)
TutorialsTutorials
Star Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/
![Page 45: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/45.jpg)
TutorialsTutorials
Star Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/
![Page 46: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/46.jpg)
TutorialsTutorials
Star Trek: The Birth of the Federation is the property of Atari: http://www.atari.com/
![Page 47: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/47.jpg)
ManualsManuals
“The Sims” is the property of Maxis: http://thesims.ea.com/
![Page 48: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/48.jpg)
ManualsManuals
“The Sims” is the property of Maxis: http://thesims.ea.com/
![Page 49: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/49.jpg)
ManualsManuals
“The Sims” is the property of Maxis: http://thesims.ea.com/
![Page 50: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/50.jpg)
Medium Fidelity PrototypesMedium Fidelity Prototypes•Approaches to limiting prototype Approaches to limiting prototype functionality–Vertical prototypesVertical prototypes
•Includes in-depth functionality for only a few selected features
•Common design ideas can be tested in depth
–Horizontal prototypesS f l i l d h i i f i h •Surface layers includes the entire user interface with no underlying functionality
•A simulation; no real work can be performed; p
–Scenario•Scripts of particular fixed uses of the system; no deviation allowed
![Page 51: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/51.jpg)
Medium Fidelity PrototypesMedium Fidelity Prototypes
•Approaches to integrating prototypes and the final product:–Throw-away–Incremental–Evolutionary
![Page 52: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/52.jpg)
Throw-Away Approach To y ppPrototypingTh t t l i d t t f db k•The prototype only is used to get feedback
•The prototype is built, tested and then discarded
SystemSystem
![Page 53: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/53.jpg)
Incremental Approach To ppPrototypingBuild the system as separate modules (component)•Build the system as separate modules (component)
•Each module is designed, prototyped and completed separately before being added to the final systemg
System
System
System
![Page 54: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/54.jpg)
Evolutionary Approach To y ppPrototyping• Change the prototype itself in order to incorporate
changes• Eventually the reworked prototype becomes the final Eventually the reworked prototype becomes the final
system
System
![Page 55: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/55.jpg)
Medium Fidelity PrototypesMedium Fidelity Prototypes
•Painting/drawing packages–Draw each storyboard scene on computer
• Neater/easier (?) to change on the fly than paper/ ( ) g y p p
Control panel for pump 2 Control panel for pump 2
coolant flow 45 %
retardant 20%
coolant flow 0 %
retardant 20%
DANGER!next drawing
retardant 20%
speed 100%
retardant 20%
speed 100%
Sh t D
(for shut down condition)
Shut Down Shut Down
![Page 56: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/56.jpg)
Medium Fidelity PrototypesMedium Fidelity Prototypes
•Scripted simulations and slide shows–Encode the storyboard on the computer
• Created with media tools• Scene transition activated by simple user inputs• A simple horizontal and vertical prototype
–User given a very tight script/task to follow• Appears to behave as a real system• Deviations from the script blows the simulation
![Page 57: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/57.jpg)
Scripted SimulationsScr pt S mu at ons
![Page 58: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/58.jpg)
Scripted Simulations
![Page 59: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/59.jpg)
Scripted SimulationsScr pt S mu at ons
![Page 60: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/60.jpg)
Scripted Simulations
![Page 61: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/61.jpg)
Medium Fidelity PrototypesMedium Fidelity Prototypes•Interface builders–Tools for letting a designer lay out the common widgets
–Construct mode• Change attributes of objects
–Test mode:Test mode:• Objects behave as they would under real situations
E cellent fo sho ing look and feel–Excellent for showing look and feel• A broader horizontal prototype• But constrained to widget library
–Vertical functionality added selectively• Through programmingThrough programming
![Page 62: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/62.jpg)
The Wizard Of OZ: The MovieThe Wizard Of OZ: The Movie
The movie “The Wizard of OZ” is the property of Time-Warner: www.warnervideo.com
![Page 63: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/63.jpg)
The Wizard Of OZ: The MovieThe Wizard Of OZ: The Movie
The movie “The Wizard of OZ” is the property of Time-Warner: www.warnervideo.com
![Page 64: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/64.jpg)
Wizard Of Oz: The Prototyping Technique•A method of testing a system that does not exist–Human simulates the system’s intelligence and interacts with
user
–e.g., the voice editor, by IBM (1984)
The WizardWhat the user sees
![Page 65: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/65.jpg)
Wizard Of Oz: ExamplesW zar Of Oz E amp s•IBM: an imperfect listening typewriter using continuous speech recognition–Secretary trained to:
•Understand key words as “commands”•Types responses on screen as the system wouldM i l ti hi i th h t d •Manipulating graphic images through gesture and speech
•Intelligent Agents / Programming by demonstration–Person trained to mimic “learning agent”
•User provides examples of task they are trying to do•Computer learns from them
–Shows how people specify their tasks
![Page 66: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/66.jpg)
High-fidelity prototypingHigh fidelity prototyping•Uses materials that you would expect to be in
the final product.
•Prototype looks more like the final system than •Prototype looks more like the final system than
a low-fidelity version.
•For a high-fidelity software prototype common
environments include Macromedia Director, Visual
Basic, and Smalltalk.
•Danger that users think they have a full systemDanger that users think they have a full system
![Page 67: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/67.jpg)
The Prototyping ProcessThe Prototyping ProcessEarly designsy g
Brainstorm different representations
Choose a representation
Low fidelity paper prototypes
p
Rough out interface style
Task centered walkthrough and redesign
Fine tune interface, screen design
Heuristic evaluation and redesignMedium fidelity prototypes
Usability testing and redesign
Limited field testing
High fidelity prototypes / restricted systems
Limited field testing
Alpha/Beta testsWorking systems
Later designs
![Page 68: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/68.jpg)
Compromises in prototypingCompromises in prototyping•All prototypes involve compromises•All prototypes involve compromises•For software-based prototyping maybe there is a slow response? sketchy icons? limited slow response? sketchy icons? limited functionality? •Two common types of compromiseyp p
• ‘horizontal’: provide a wide range of functions, but with little detail• ‘vertical’: provide a lot of detail for only a few functions
•Compromises in prototypes mustn’t be ignored. Product needs engineering
![Page 69: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/69.jpg)
Conceptual design: from Conceptual design: from requirements to design
•Transform user requirements/needs into a •Transform user requirements/needs into a conceptual model •“a description of the proposed system in terms a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended” D ’t t l ti t i kl It t •Don’t move to a solution too quickly. Iterate,
iterate, iterate•Consider alternatives: prototyping helps•Consider alternatives: prototyping helps
![Page 70: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/70.jpg)
Three perspectives for a conceptual Three perspectives for a conceptual model
Whi h i t ti d ?•Which interaction mode?How the user invokes actionsActivity based: instructing conversing Activity-based: instructing, conversing, manipulating and navigating, exploring and browsing. browsing. Object-based: structured around real-world objectsj
![Page 71: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/71.jpg)
Three perspectives for a conceptual Three perspectives for a conceptual model
•Which interaction paradigm? desktop paradigm, with WIMP interface (windows, icons, menus and pointers),ubiquitous computingubiquitous computingpervasive computingwearable computingwearable computingmobile devices and so on.
•Is there a suitable metaphor?(contd)….(co td)
![Page 72: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/72.jpg)
Expanding the conceptual modelExpanding the conceptual model
•What functions will the product perform?•What functions will the product perform?What will the product do and what will the human do (task allocation)?human do (task allocation)?
•How are the functions related to each other?sequential or parallel?sequential or parallel?categorisations, e.g. all actions related to telephone memory storagetelephone memory storage
•What information needs to be available?What data is required to perform the task? What data is required to perform the task? How is this data to be transformed by the system? y
![Page 73: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/73.jpg)
Using scenarios in conceptual designUsing scenarios in conceptual design
•Express proposed or imagined situations U d th h t d i i i •Used throughout design in various ways
scripts for user evaluation of prototypesconcrete examples of taskspas a means of co-operation across professional boundariesprofessional boundaries
•Plus and minus scenarios to explore extreme casesextreme cases
![Page 74: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/74.jpg)
Using prototypes in conceptual Using prototypes in conceptual designg
•Allow evaluation of emerging ideas•Allow evaluation of emerging ideas
fid li d l•Low-fidelity prototypes used early on, high-fidelity prototypes used later
![Page 75: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/75.jpg)
Screen designScreen designTwo aspects:Two aspects:
•How to split across screens i d ithi d b t moving around within and between
screenshow much interaction per screen?serial or workbench style?
•Individual screen designwhite space: balance between enough white space: balance between enough information/interaction and claritygrouping items together: separation with grouping items together: separation with boxes? lines? colors?
![Page 76: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/76.jpg)
Screen design: splitting functions Screen design: splitting functions across screens
•Task analysis as a starting pointy g p
•Each screen contains a single simple step?•Each screen contains a single simple step?
F i if i l •Frustration if too many simple screens
•Keep information available: multiple screens open at oncep
![Page 77: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/77.jpg)
Screen design: individual screen Screen design: individual screen designg
•Draw user attention to salient point, e.g. l ti b icolour, motion, boxing
•Animation is very powerful but can be distracting•Good organization helps: grouping, g p g p g,physical proximity•Trade off between sparse population and Trade off between sparse population and overcrowding
![Page 78: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/78.jpg)
Information displayInformation display
•Relevant information available at all times
•Different types of information imply different kinds of displaydifferent kinds of display
b d l d•Consistency between paper display and screen data entry
![Page 79: Assignment #3user.ceng.metu.edu.tr/~tcan/se542_s1112/Schedule/se542_week4.pdf · than simple low fidelity representations • Benefits – It seems more like the completed system](https://reader034.vdocuments.us/reader034/viewer/2022050502/5f944e569493736e833a9a95/html5/thumbnails/79.jpg)
SummarySummary•Different kinds of prototyping are used for different Different kinds of prototyping are used for different purposes and at different stages•Prototypes answer questions, so prototype yp q , p ypappropriately
•Construction: the final product must be engineered Construction: the final product must be engineered appropriately•Conceptual design (the first step of design)Co ceptua des g (t e st step o des g )
•Physical design: e.g. menus, icons, screen design, information displayinformation display•Prototypes and scenarios are used throughout designdesign