Lecture 2 from the MHIT 603 course on Human Interface Technology. This lecture provides an introduction to Prototyping. Taught by Mark Billinghurst at the University of Canterbury, July 17th, 2014.
6. 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
7. Elaboration vs. Reduction
Elaboration: Sketching/Storytelling
Creation, exploration
Quick, conceptual
Reduction: Prototyping/Testing
Functional
Idea presentation
Decision making
8. 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
9. 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
10. 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
11. 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
12. 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
15. From Sketches to Prototypes
Sketches: early ideation stages of design
Prototypes: capturing /detailing the actual design
16. 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
27. 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
28. Why Prototype?
▪ Quick visual design
▪ Capture key interactions
▪ Focus on user experience
▪ Communicate design ideas
▪ “Learn by doing/experiencing”
▪ Supports user evaluation
29. 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
30. 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
31. 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
32. 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
33. 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
34. 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
35. How can we quickly
design and prototype
interactive experiences?
45. 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
46. Typical Development Steps
▪ Sketching
▪ Storyboards
▪ UI Mockups
▪ Interaction Flows
▪ Video Prototypes
▪ Interactive Prototypes
▪ Final Native Application
Increased
Fidelity &
Interactivity
49. 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
50. 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.
68. 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
75. 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
76.
77.
78.
79.
80.
81.
82. 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
83. 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.
91. 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
94. ▪ 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
96. 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
100. 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