07 prototypingimranihsan.com/upload/lecture/hcis1607.pdf– includes a lot of brainstorming •...

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


© 2013← →

Prototype Representation

• How to represent the prototype?

– Mockup

– Storyboard

– Sketches

– Scenarios

– Screenshots

– Functional interface


© 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


© 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*)


© 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.


© 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


© 2013← →

Drawing is hard…

• But it doesn’t have to be


© 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


© 2013← →

Sketches

• Generally for depicting physical aspects of system


© 2013← →

Mockups / Wireframes

• Good for brainstorming

• Focuses people on high-level design notions

• Not so good for illustrating flow and the details


© 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.”


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


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


© 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


© 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


© 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 prototypingimranihsan.com/upload/lecture/hcis1607.pdf– includes a lot of brainstorming •...

Documents