07 prototypingimranihsan.com/upload/lecture/hcis1607.pdf– includes a lot of brainstorming •...
TRANSCRIPT
![Page 1: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/1.jpg)
CS -213
Human Computer Interaction
Spring 2016
07 – Prototyping
Imran Ihsan
Assistant Professor (CS)
Air University, Islamabad
www.imranihsan.com | www.opuseven.com
START
opuseven iimranihsan imranihsan iimranihsan iimranihsaniihsan
![Page 2: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/2.jpg)
© 2013← →
Dilemma
• You can’t evaluate a design until it’s built
• But…
• After building, changes to the design are difficult
• Simulate the design, in low-cost manner
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 2
![Page 3: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/3.jpg)
© 2013← →
Design Artifacts
• Expressing design ideas:
– Make it fast!!!
– Allow lots of flexibility for radically different designs
– Make it cheap
– Promote valuable feedback
• Facilitate iterative design and evaluation
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 3
![Page 4: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/4.jpg)
© 2013← →
Prototype Representation
• How to represent the prototype?
– Mockup
– Storyboard
– Sketches
– Scenarios
– Screenshots
– Functional interface
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 4
![Page 5: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/5.jpg)
© 2013← →
Prototype Scope
How much to represent?
• Vertical - “Deep” prototyping
– Show much of the interface, but in a shallow manner
• Horizontal - “Broad” prototyping
– Show only portion of interface, but large amount of those portions
How to make Prototype Mature
• Low fidelity vs. High fidelity
• Amount of polish should reflect maturity of the prototype
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 5
![Page 6: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/6.jpg)
© 2013← →
Design Description
• Can simply have a textual description of a system design
– Obvious weakness is that it’s so far from eventual system
– Doesn’t do a good job representing visual aspects of interface
– Good for accompanying visual description in report (*hint hint*)
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 6
![Page 7: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/7.jpg)
© 2013← →
Scenarios
• Fictional stories with characters, products, events and environments.
• Typically narratives, but can be videos, simulations
– Jane likes to take walks every morning. This morning, as she places her hand on the door, she hears “75% chance of rain, better bring your umbrella.” Thankful for the notice, she grabs her umbrella and heads out for her morning walk.
• Scenario Utility
– Engaging and interesting
– Another person’s shoes
– Present to different people
– Facilitates feedback and opinions
– Explore errors or mistakes
– Good for accompanying sketches, mockups, etc.
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 7
![Page 8: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/8.jpg)
© 2013← →
Storyboard
• Determine the story
– A very iterative process through a lot of initial drafts
– Includes a lot of brainstorming
• Sketch on pen + paper
• Generate more polished art for presentation
• Develop
Use Taglines / Captions
• Keep it short: show as much as necessary but not more
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 8
![Page 9: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/9.jpg)
© 2013← →
Drawing is hard…
• But it doesn’t have to be
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 9
![Page 10: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/10.jpg)
© 2013← →
Remember…
• Different presentation format means you can do more!
• Think about how long you have a captive audience
• Think about how much you want to tell
• Think about options for presenting sequences of drawing
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 10
![Page 11: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/11.jpg)
© 2013← →
Sketches
• Generally for depicting physical aspects of system
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 11
![Page 12: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/12.jpg)
© 2013← →
Mockups / Wireframes
• Good for brainstorming
• Focuses people on high-level design notions
• Not so good for illustrating flow and the details
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 12
![Page 13: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/13.jpg)
© 2013← →
Paper Prototyping
• “Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.”
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 13
The "Computer" highlights the item the user has just selected. A member of the development team observes and takes notes. (Photo courtesy of Timo Jokela.)
Taken from Paper Prototyping by Carolyn Snyderhttp://www.paperprototyping.com/
![Page 14: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/14.jpg)
© 2013← →
Draw/Paint Programs
• Draw each screen, good for look
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 14
IP Address
CancelOK
Thin, horizontal prototype
Photoshop, Paint,...
![Page 15: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/15.jpg)
© 2013← →
Simulations
• Put storyboard-like views down with (animated) transitions between them
• Can give user very specific script to follow
• Often called chauffeured prototyping
• Examples: PowerPoint, Hypercard, Macromedia Director, HTML
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 15
![Page 16: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/16.jpg)
© 2013← →
Interface Builders
• Tools for laying out windows, controls, etc. of interface
– Easy to develop & modify screens
– Supports type of interface you are developing
– Good look and feel
– Can add back-end functionality
• Examples: Visual Basic, .NET, many apps for various languages
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 16
![Page 17: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/17.jpg)
© 2013← →
Specialized
• SILK (Sketching Interfaces Like Krazy) / DENIM
– Sketch-based GUI builder
– http://dub.washington.edu/denim/
– http://www.open-video.org/details.php?videoid=5018
• by James Landay’s and his former group at UC Berkeley
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 17
![Page 18: 07 Prototypingimranihsan.com/upload/lecture/HCIS1607.pdf– Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop Use](https://reader033.vdocuments.mx/reader033/viewer/2022060919/60ab7493eae5bf59d9364ec9/html5/thumbnails/18.jpg)
© 2013← →
Wizard of OZ
• Method:
– Behavior should be algorithmic
– Good for voice recognition systems
• Advantages:
– Allows designer to immerse oneself in situation
– See how people respond, how specify tasks
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 18