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