MHIT 603: Introduction to Prototyping

MHIT 603: Lecture 2
Introduction to Prototyping
July 17th 2014
Mark Billinghurst

Interaction Design Process
MHIT 602
MHIT 603

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.”
sketch
representation
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

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
Reﬁne

Ques;on
Answer

Propose
Test

Provoke
Resolve

Tenta;ve,
non
commi)al
Speciﬁc
Depic;on

The primary differences are in the intent

View Through Google Glass
Always available peripheral information display
Combining computing, communications and content capture

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?

40www.id-book.com
Storyboarding

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

53www.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

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

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

Balsamiq - http://balsamiq.com/
  Create and
test UI
wireframes
quickly
  Can’t focus on
fonts,
alignment,
colors

UXPin
  UXPin Wireframing Tool
  http://uxpin.com/
  Web based
  UI templates
  Design patterns

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.

Transition Design Patterns
  Yahoo design patterns library
  http://developer.yahoo.com/ypatterns/

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

▪ 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

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

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

MHIT 603: Introduction to Prototyping

More Related Content

What's hot

Viewers also liked

Similar to MHIT 603: Introduction to Prototyping

More from Mark Billinghurst

Recently uploaded

MHIT 603: Introduction to Prototyping