07 prototypingimranihsan.com/upload/lecture/hcis1607.pdf– includes a lot of brainstorming •...
Post on 22-Jan-2021
0 Views
Preview:
TRANSCRIPT
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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 2013← →
Drawing is hard…
• But it doesn’t have to be
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 9
© 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
© 2013← →
Sketches
• Generally for depicting physical aspects of system
07 – Prototyping | HCI Spring 2015 Imran Ihsan - www.imranihsan.com | 11
© 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
© 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/
© 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,...
© 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
© 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
© 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
© 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
top related