CSCD 487/587Human Computer Interface

Winter 2013

Lecture 17Prototypes and Design

Overview

After requirements is design phase Design is an iterative process within User Centered design paradigm Prototypes play an important role

in this process Once users can see and maybe

touch product, their responses can be incorporated back into the design

Prototyping and Design

• What is a prototype? • Why do we prototype?• Different kinds of prototyping

Low fidelityHigh fidelity

• Compromises in prototyping• Some details of Paper

Prototyping

Phases of Design

Two phases of Design Conceptual

Early stages of design, shows users basic concepts of a product

Physical Actually designing final product and

building it

Conceptual Design

Prototypes Early prototypes can differ substantially

from actual product Can be paper, cardboardor other non-technical medium Later, prototypes will more closely

resemble the final product Be an actual representation perhaps

created in the same manner Software system – Interface will be

software !

What is a Prototype?

In other design fields a prototype can be a small-scale model:

• a miniature car• a miniature building or town• the example here comes

from a 3D printer

What is a Prototype?

In interaction design it can be (among other things):

• a set of screen sketches• a storyboard, i.e. a cartoon-like series of scenes • a Powerpoint slide show• a video simulating the use of a system• a lump of wood (e.g. PalmPilot)• a cardboard mock-up• a piece of software with limited functionality

written in the target language or in another language

Prototypes

What is the main purpose of prototypes?

Allows us to try out our design ideas and get feedback

Plus, iterate through several possibilities

Can be used for several groups Users Designers Investors/Managers

Prototypes

Users We assume users can't tell you

what they want If they can see something tangible,

they can tell you what they don't want

Useful to discuss ideas with users Important part of design process

Prototypes

Designers Communicate with team members Everyone needs to be on the same

page and in agreement with the product being developed

Investors or Management Serves as a tangible representation of

the product Can use it to generate more

resources for project

Merits of Prototyping - 1

Captures functional and interface requirements

Interface and functional requirements Reveals problems/prevents gross mistakes Allows evaluation/discussion to foster

innovative ideas from designers and users Allows better communication

Merits of Prototyping - 2

Users enjoy prototyping and feel involved in design

More likely to accept/understand final system

Suggests level of user support needed Help, tutorials, documentation, training

Results in better usability Economical way of testing designs, less effort

User Testing in Practice

What to prototype?

• Technical issues

• Work flow, task design

• Screen layouts and information display

• Difficult, controversial or critical areas

Low-Fidelity Prototypes

Doesn't have to look much like final product

Simple, cheap and quick to produce For exploration only, in the early

stages of design

Low-Fidelity PrototypesPaper

Sketching Hand drawn sketches Simple – stick figures, outlines of

things Index Cards

One card per task

Low-Fidelity PrototypesSketching

• Sketching is important to low-fidelity prototyping

• Don’t be inhibited about drawing ability. Practice simple symbols

Low-Fidelity PrototypesCard-based

• Index cards (3 X 5 inches) • Each card represents

one screen or part of screen• Often used in website

development

Low-Fidelity Prototypes

Storyboarding

Often used together with specific Use Case Scenarios

Shows how user can progress through a task

Users can then role play through a scenario

Low-Fidelity Prototypes

A storyboard is Series of panels that depict key scenes,

actions, visuals, and annotations that define the highlights of a user experience

Imagine a comic strip with explanations adjacent to each panel

According to wikipedia, storyboarding was developed by animators at Walt Disney studio

I have not verified this is true ….

Storyboard Example

Example from MIT Course project

http://web.mit.edu/2.744/www/Project/Assignments/userExperienceDesign/mleong/index.html

High-fidelity prototyping

• Uses materials that you would expect to be in

final product

• Prototype looks more like final system than a low-

fidelity version

• For a high-fidelity software prototype common

environments include

• Macromedia Director, Visual Basic, Visual

Studio

• Danger is that users think they have a full system

• May be frustrated when it does not all

work !!!!

DetailsPaper Prototyping

Words from Professionals

Paper Prototypes

User Interface Engineering Still the “Simplest” method A Team-Building Tool A Design and Testing Tool A Communication Tool Facilitates Regular Testing (valuable

long-term benefit!)

Words from the Book Author“Paper Prototyping”

Carolyn Snyder:

Fast mockup – no coding required Finds problems, including serious

ones Refines design base on user

feedback before implementation (Risk Management!)

Team and communication tool Encourages creativity!

Benefits Summary

Quick to build/refine, thus enabling

rapid design interactions. Requires minimal resources and

materials. Detects usability problems at a very

early stage before implementation. Promotes communication between

stakeholders.

One Designers Experience

Paper Prototyping of Menu DesignTheories on a Small Screen Device Mockup design was fast and flexible Data of path-finding behavior was

visible Excluded variables we didn’t want It’s fun!

Elements of a paper prototype

Menu Bar

ScrollBar

Secondary Menu

Opening Contents

Another ExampleThe home page

Pulldown menu

A second-level page

After prototyping and user testing, this is what their home page looked

like

How to Test a Paper Prototype

Standard Usability Evaluation Procedure

People you need: real users, the “computer”, the facilitator, the observer, and usability consultants

Laboratory setting

Good Example here: http://www.youtube.com/watch?v=9wQkLthhHKA

Tools

Many tools out there for digital paper prototyping and storyboarding

PowerStory Powerpoint plugin http://www.youtube.com/watch?

v=lAj7LmCaPWA Google Sketchup for Storyboarding

http://www.youtube.com/watch?v=1Gb9uffSFUE

PowerMockup uses powerpoint to create digital stories• http://usabilitygeek.com/

wireframing-storyboarding-powerpoint-powermockup/

ReferencesPaper Prototyping

Google Search – Paper Prototyping – YouTubehttp://www.youtube.com/results?

search_query=paper+prototyping&oq=paper+prototyping&gs_l=youtube.3..0l4j0i5.21292370.21300010.0.21300219.21.18.2.1.1.0.167.1193.16j2.18.0...0.0...1ac.1.3pYQyWh3-kE

Prototyping Low and Hi Fidelity Today – Really Good Set of Slides http://www.slideshare.net/memmel/user-interface-prototyping

Storyboarding toolshttp://uxmag.com/articles/storyboarding-in-the-software-design-process

Paper Prototyping: Getting User Data Before You CodeJakob Nielsen, April 14, 2003: http://www.useit.com/alertbox/20030414.htmlPaper prototypingUsability Net http://www.usabilitynet.org/tools/prototyping.htmPaper Prototyping: The Fast and Easy Way to Design and Refine User InterfacesCarolyn Snyder – Book Site http://www.paperprototyping.com/Paper Prototyping Shawn Mederohttp://alistapart.com/article/paperprototyping

Six Signs That You Should Use Paper PrototypingCarolyn Snyder 12/23/2003 http://today.java.net/pub/a/today/2003/12/23/sixSigns.html

35

End

Look for New Date on Project Deliverable !!!