CSCD 487/587 Human Computer Interface Winter 2013 Lecture 17 Prototypes 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 fidelity High 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, cardboard or 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 Prototypes Paper Sketching Hand drawn sketches Simple – stick figures, outlines of things Index Cards One card per task

Low-Fidelity Prototypes Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. Practice simple symbols

Low-Fidelity Prototypes Card-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 perienceDesign/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 !!!!

Details Paper 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 Design Theories 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 Scroll Bar Secondary Menu Opening Contents

Another Example The 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:

Tools Many tools out there for digital paper prototyping and storyboarding PowerStory Powerpoint plugin WA Google Sketchup for Storyboarding PowerMockup uses powerpoint to create digital stories storyboarding-powerpoint-powermockup/

References Paper Prototyping Google Search – Paper Prototyping – YouTube &oq=paper+prototyping&gs_l=youtube.3..0l4j0i j ac. 1.3pYQyWh3-kE Prototyping Low and Hi Fidelity Today – Really Good Set of Slides Storyboarding tools process Paper Prototyping: Getting User Data Before You Code Jakob Nielsen, April 14, 2003: Paper prototyping Usability Net Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces Carolyn Snyder – Book Site Paper Prototyping Shawn Medero Six Signs That You Should Use Paper Prototyping Carolyn Snyder 12/23/2003

35 End Look for New Date on Project Deliverable !!!