MHIT 603: Introduction to Prototyping

MHIT 603: Lecture 2 Introduction to Prototyping

July 17th 2014 Mark Billinghurst

Interaction Design Process

Interaction Design Process

MHIT 602 MHIT 603

Design Process

Three Phase Model

Elaboration and Reduction

  Elaborate - generate solutions. These are the opportunities   Reduce - decide on the ones worth pursuing   Repeat - elaborate and reduce again on those solutions

Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons

Elaboration vs. Reduction   Elaboration: Sketching/Storytelling

 Creation, exploration  Quick, conceptual

  Reduction: Prototyping/Testing   Functional   Idea presentation  Decision making

The Design Funnel   Alternate generation of ideas and convergence until

resolution

Modified from Pugh, S. (1990) Total design: Integrated methods for successful products engineering. Addison-Wesley. P. 75

Sketching Sketching is not about drawing It is about design. Sketching is a tool to help you:

-  express -  develop, and -  communicate design ideas

Sketching is part of a process:

-  idea generation, -  design elaboration -  design choices, -  engineering

Figure 41: A Sketch of a Dialogue with a Sketch

The “conversation” between the sketch (right bubble) and the mind (left

bubble). A sketch is created from current knowledge (top arrow). Reading,

or interpreting the resulting representation (bottom arrow), creates new

knowledge. The creation results from what Goldschmidt calls “seeing

that” reasoning, and the extraction of new knowledge results from what

she calls “seeing as.”

sketchrepresentation

mind(new) knowledge

Create(seeing that)

Read(seeing as)

“Sketching is about the activity not the result” – Bill Buxton

10

Why is sketching useful?

  Early ideation   Think through ideas   Force you to visualize how things come together   Communicate ideas to others to inspire new designs   Active brainstorming

Prototyping   Create physical form of ideas

  Allow people to experience and interact with them

  Why Prototyping?   Empathy gaining- deepen understanding of design space   Exploration – build to think   Testing – test solutions with end users   Inspiration – help others catch your vision

Early Nintendo Wii Prototypes

Early Nintendo Wii Prototypes

From Sketches to Prototypes   Sketches: early ideation stages of design   Prototypes: capturing /detailing the actual design

Sketch vs. Prototype Sketch   Prototype  Invite   A)end  Suggest   Describe  Explore   Refine  Ques;on   Answer  Propose   Test  Provoke   Resolve  Tenta;ve,  non  commi)al   Specific  Depic;on  

The primary differences are in the intent

Example: Google Glass

Google Glass

View Through Google Glass

Always available peripheral information display Combining computing, communications and content capture

Google Glass Prototyping

The Road to Glass

Early prototyping

Prototyping Tools

27

What is a prototype? In interaction design it can be (among other things):

• a series 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

Why Prototype? ▪  Quick visual design ▪  Capture key interactions ▪  Focus on user experience ▪  Communicate design ideas ▪  “Learn by doing/experiencing” ▪  Supports user evaluation

Goals of Prototyping   Learn   Solve Disagreements

  Reduce miscommunication

  Start a conversation   Fail quickly and cheaply

  Test ideas without spending time and money

  Manage the solution building process   Break large problem into smaller testable parts

Benefits of RAPID Prototyping   Fast and inexpensive   Identifies problems before they’re coded   Elicits more and better feedback from users   Helps developers think creatively   Gets users involved early in the process   Fosters teamwork and communication   Avoids opinion wars   Helps decide design directions

How to Prototype?   Build a prototype of the basic functionality,

especially the interface   Test the prototype, which will uncover

design errors   Correct the errors   Repeat until you have a clean design   Prototyping is

  a major tool for improving usability   Heavily used in industry 31

General Features of Prototyping

  Enables the designer to quickly build or create examples of :-

-  The data entry form -  The menu structure and order -  The dialogue styles -  Error messages

  Should be inexpensive to develop – intention is to discard/modify it

  Should not require programming skills 32

Prototyping for Usability   Usability = ease of use of an application   Design typical user task scenarios   Identify tasks based on the scenarios   Use “Real Users” to test   Watch user performing task   Iterate design based on test

33

Cost of Prototyping   Cheaper than not doing it......

 Cost of repairing an error made in analysis and design phase can cost up to 100x the original cost

  Usability work should amount for 5-10% of a project’s budget

  Testing early, iterating often makes the product cheaper.

  Prototyping offers a cheap means of testing usability early in the lifecycle 34

How can we quickly design and prototype

interactive experiences?

Design/Prototyping Tools

Sketching

Paper Prototyping

Wireframes

40 www.id-book.com

Storyboarding

Physical Prototype

Palm Pilot

Acting/Role Playing

From Sketches to Prototypes Early design

Late design

Brainstorm different ideas and representations

Choose a representation Rough out interface style

Multitude of sketches

Sketch variations and details

Sketch or low fidelity prototypes Task centered walkthrough and redesign

Fine tune interface, screen design Heuristic evaluation and redesign

Usability testing and redesign

Low to medium fidelity prototypes

Limited field testing

Alpha/Beta tests

High fidelity prototypes

Working systems

Typical Development Steps

▪  Sketching ▪  Storyboards ▪  UI Mockups ▪  Interaction Flows ▪  Video Prototypes ▪  Interactive Prototypes ▪  Final Native Application

Increased Fidelity & Interactivity

Prototyping

Prototyping Tools ▪  Static/Low fidelity ▪  Sketching ▪  User interface templates ▪  Storyboards/Application flows

▪  Interactive/High fidelity ▪  Wireframing tools ▪  Mobile prototyping ▪  Native Coding

Advantages/Disadvantages

49

Prototype Advantages Disadvantages Low-fidelity prototype

- low developmental cost - evaluate multiple design concepts

- limited error checking - navigational and flow limitations

High-fidelity prototype

- fully interactive - look and feel of final product - clearly defines navigational scheme

- more expensive to develop - time consuming to build - developers are reluctant to change something they have crafted for hours

Paper Prototyping (Low Fidelity)

Quick and simple means of sketching interfaces Use office materials Easier to criticize, quick to change Creative process (develop in team) Can also use for usability test (focus on interaction flow) Used a lot to test out concepts before real design begins.

Sketching Interfaces

Paper Proto: Create Widgets

53 www.id-book.com

Card-based prototypes

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

one screen or part of screen • Often used in website

development

ESP

Paper Prototyping w/Hardware

The Basic Materials for Low-Fi

  Post-its   5x8 in. index cards   Scissors, X-acto knives   Overhead transparencies   Large, heavy, white paper (11 x 17)   Tape, stick glue, correction tape   Pens & markers (many colors & sizes)

Pop - https://popapp.in/

 Combining sketching and interactivity on mobiles  Take pictures of sketches, link pictures together

Using Pop

Wireframes  Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.  The wireframe depicts the layout or arrangement of the content  interface elements, navigational systems

Example Wireframes

Balsamiq - http://balsamiq.com/

  Create and test UI wireframes quickly

  Can’t focus on fonts, alignment, colors

Good Tool: Balsamiq

UXPin   UXPin Wireframing Tool

  http://uxpin.com/  Web based  UI templates  Design patterns

UXpin

Wireframe vs. Prototype vs. Mockup   Wireframe

  Low fidelity representation of design  What UI elements, where UI are placed

  Prototype  Medium to high fidelity   Supports user interaction

  Mockup  High fidelity static design   Visual design draft

How do we describe what users do?   Visualize the experience

  Show every steps to complete a talks   Show every click   Preview the experience – see how everything

flows together  Using screen flows

Screen Flows

Flash as Design Tool

  A screen flow represents a sequence of user-driven software processes that are presented as a series of graphical user interfaces.

Transitions

Transition Design Patterns   Yahoo design patterns library

  http://developer.yahoo.com/ypatterns/

Interactive Prototypes

Pidoco

Pidoco Features  Drag and drop wireframing  Publish to web  Collaboration

Proto.io - http://www.proto.io/   Web based mobile prototyping tool

  Features   Prototype for multiple devices  Gesture input, touch events, animations   Share with collaborators   Test on device

Proto.io - Interface

▪ Series of still photos in a movie format. ▪ Demonstrates the experience of the product ▪ Discover where concept needs fleshing out. ▪ Communicate experience and interface ▪ You can use whatever tools, from Flash to iMovie.

Video Sketching

Video Sketch

Making a Video Sketch   Decide Type

  Stills with voice over   Stop motion with voice over   Live action video

  Process   Plan the shoot  Make and set-up shoot   Shoot scenario   Evaluate and edit

See https://vine.co/v/bgIaLHIpFTB

Example: Video Sketch of Vine UI

UI Concept Movies

Tool Summary

Assignment One   Design a mobile application for tourist guiding   Components

 Map view, AR view, Panorama view

  Deliverable   Sketch interface using Pop   Screen mockups using Uxpin/Proto.io   Video prototype

  Due: Friday August 1st