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.

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

2. Interaction Design Process

3. Interaction Design Process
MHIT 602
MHIT 603

4. Design Process

5. Three Phase Model

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

13. Early Nintendo Wii Prototypes

14. Early Nintendo Wii Prototypes

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

17. Example: Google Glass

19. Google Glass

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

22. Google Glass Prototyping

24. The Road to Glass

25. Early prototyping

26. Prototyping Tools

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?

36. Design/Prototyping Tools

37. Sketching

38. Paper Prototyping

39. Wireframes

40. 40www.id-book.com
Storyboarding

42. Physical Prototype

43. Palm Pilot

44. Acting/Role Playing

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

47. Prototyping

48. Prototyping Tools
▪ Static/Low fidelity
▪ Sketching
▪ User interface templates
▪ Storyboards/Application flows
▪ Interactive/High fidelity
▪ Wireframing tools
▪ Mobile prototyping
▪ Native Coding

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.

51. Sketching Interfaces

52. Paper Proto: Create Widgets

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

54. ESP

62. Paper Prototyping w/Hardware

64. 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)

65. Pop - https://popapp.in/
 Combining sketching and interactivity on mobiles
 Take pictures of sketches, link pictures together

66. Using Pop

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

69. Example Wireframes

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

72. Good Tool: Balsamiq

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

74. UXpin

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

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.

85. Transitions

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

88. Interactive Prototypes

89. Pidoco

90. Pidoco Features
 Drag and drop wireframing
 Publish to web
 Collaboration

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

92. Proto.io - Interface

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

95. Video Sketch

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

97. See https://vine.co/v/bgIaLHIpFTB
Example: Video Sketch of Vine UI

98. UI Concept Movies

99. Tool Summary

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