1. MHIT 603: Lecture 3
Prototyping Tools
July 21st 2014
Mark Billinghurst
mark.billinghurst@gmail.com

2. Recap

3. Interaction Design Process
MHIT 602
MHIT 603

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

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

6. Design/Prototyping Tools

7. Typical Development Steps
▪ Sketching
▪ Storyboards
▪ UI Mockups
▪ Interaction Flows
▪ Video Prototypes
▪ Interactive Prototypes
▪ Final Native Application
Increased
Fidelity &
Interactivity

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

9. Sketching Interfaces

10. Paper Proto: Create Widgets

11. Example Wireframes

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

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

14. Transitions

15. Video Sketch

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

17. Wireframe vs. Mockup vs. Protoype

18. Sketch
 It’s about
 Freehand drawing
 Quickly recording idea
 Trying out different ideas
 Establishing a composition
 Not intended as as a finished work

19. Wireframe
 It’s about
 Functional specs
 Navigational systems
 Functionality and layout
 Notes about the intended functionality
 How interface elements work together
 Lack of typographic style, colour or graphics
 Leaving room for the design to be created

21. Mockup
 It’s about
 Look and feel
 Build on the wireframe with
graphics and polish
 May adjust layout slightly
but stays within the general
guide of the wireframe

23. Prototype
 It’s about
 Simulating the final design
 Functionality of intended design
 May be reduced in size or
functionality
 Functional working together
 Final check for design flaws

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

25. Sketching to Prototype

26. Compromising

27. 27
www.id-book.com
Compromises in Prototyping
• All prototypes involve compromises
• For software-based prototyping maybe there is a
slow response? sketchy icons? limited functionality?
• Two common types of compromise
• ‘horizontal’: provide a wide range of functions,
but with little detail
• ‘vertical’: provide a lot of detail for only a few
functions
• Compromises in prototypes mustn’t be ignored.
Product needs engineering

28. Compromises in prototyping
 Compromises in low-fidelity prototypes:
 device doesn't actually work
 Compromises in high-fidelity prototypes:
 slow response, sketchy icons, limited functionality
 Two common types of compromise
 ‘horizontal’: provide a wide range of functions, but
with little detail
 ‘vertical’: provide a lot of detail for only a few
functions

29. Different Features
Scenario
VerticalPrototype
Horizontal Prototype
Full System
Functionality

30. Horizontal Prototyping
 Disadvantages
 Not possible to perform real work
 Users cannot interact with real data
 Often possible to create a wish list interface
 Advantages
 Can be created quickly
 Gives an idea of how the whole interface will hang
together
 Identifies top level functionality
30

31. Vertical Prototyping
 Reduction of number of features
 In-depth functionality for a few selected
features
 Tests part of system
 Tests in depth under realistic circumstances
with real user tasks
 Main limitation: users cannot move freely
through the system 31

32. Interactive Prototyping

33. Flinto
 https://www.flinto.com/
 High fidelity prototyping
 Use final png files/interface screens
 Connect mockup screens visually
 Apply transitions, scrolling etc
 Send prototypes to mobile for viewing
 Looks like real application

34. Flinto Interface

35. Facebook Origami
 http://facebook.github.io/origami/
 Visual programming for mobile prototypes
 Drag and drop interface elements, interactions
 Extends Mac Quartz Composer
 Visual design tool
 Tutorial
 http://dancounsell.com/articles/prototyping-with-
facebooks-origami

36. Origami Interface

37. App Inventor
 http://appinventor.mit.edu/
 http://appinventor.org/
 Visual Programming for Android Apps
 Features
 Access to Android Sensors
 Multimedia output
 Drag and drop web based interface
 Designer view – app layout
 Blocks view – program logic/control

38. Device Setup
 Emulator
 Use aiStarter on Windows/Linux
 Live view (run on connected device)
 Make sure device is in Debug mode
 Install companion app (sideload on Glass)
- MITAI2Companion.apk

39. App Inventor Designer View

40. App Inventor Blocks View

41. Orientation Demo
 Use Glass orientation sensor

42. Other Visual Prototyping Tools
 VVVV
 http://vvvv.org
 Hybrid visual/text programming environment
 Real time audio/graphics, physical interfaces, etc
 Max/MSP
 http://cycling74.com/products/max/
 Visual programming
 Designed for interactive media applications

43. Max/MSP Interface

44. VVVV Interface

45. VVVV Visual Programming

54. Processing - Notes
 Language of Interaction
 Physical Manipulation
 Input using code
 Mouse Manipulation
 Presence, location, image
 Haptic interfaces and multi-touch
 Gesture
 Voice and Speech

55. Importing Libraries
 Can add functionality by Importing Libraries
 java archives - .jar files
 Include import code
import processing.opengl.*;!
 Popular Libraries
 Minim - audio library
 OCD - 3D camera views
 Physics - physics engine
 bluetoothDesktop - bluetooth networking

56. http://toxiclibs.org/

57. Hardware Prototyping

60. Rapid Prototyping
 Speed development with quick hardware mockups
 handheld device connected to PC
 LCD screen, USB phone keypad, Camera
 Can use PC tools for rapid development
 Flash, Visual Basic, etc

61. Don’t Have Google Glass ?

62. Build Your Own Wearable
▪ MyVu display + phone + sensors

63. Beady-i
▪ http://www.instructables.com/id/DIY-
Google-Glasses-AKA-the-Beady-i/

64. http://buglabs.net/

70. Arduino
 http://www.arduino.cc
 Open source hardware
 Microcontroller
 Add-on shields
 Get started for $30 USD

71. Arduino is a board
USB Port
Power Supply
Digital In/Out Pins
Analog Input PinsPower Pins
Atmega328p
USB to Serial

72. Shields

73. Stacking Shields

74. Programming Arduino
 Open-source
 Large community
 Lots of examples available
 Language based on processing
 Also can use C, C++, Flash,..

75. Arduino IDE
 Open Source
 Cross Platform
 Windows
 Mac OS X
 Linux
 Simple UI
(Easy to Use)

76. Heart Rate Monitor Interface

77. Piano Stairs

78. Physical Input For Google Glass
 Can we develop unobtrusive input devices ?
 Reduce need for speech, touch pad input
 Socially more acceptable
 Examples
 Ring,
 pendant,
 bracelet,
 gloves, etc

79. Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass

80. Example: Glove Input
 Buttons on fingertips
 Map touches to commands

81. Example: Ring Input
 Touch strip, button, accelerometer
 Tap, swipe, flick actions

82. How it works
Bracelet
Armband
Gloves
1,2,
3,4
Values/
output

83. Phidgets
 http://www.phidgets.com
 Plug and play prototyping
 Lots of components
 Get started for $77

84. Components

85. Programming Languages

86. Arduino vs. Phidgets

87. Microsoft .Net Gadgeteer
 http://www.netmf.com/gadgeteer/
 Open source tool for building small devices
 Uses .Net Micro Framework
 Visual Studio/Visual C# Express
 Support for many different sensors/components

88. Mainboard
 Use mainboard
 Processor
 Number of socket connectors
 Plug in Gadgeteer modules

89. Modules
 Sensors, Actuators, Networking, Displays,
User Input, Power, Extensibility, ..

90. Physical Prototyping - d.tools
 Hardware prototyping
 http://hci.stanford.edu/research/dtools/

95. Hardware Prototyping Tools
 Bug Labs
 http://www.buglabs.net/
 d.tools
 http://hci.stanford.edu/research/dtools/
 Arduino
 http://www.arduino.cc/
 Netduino
 http://netduino.com/

96. Prototyping Case Study

97. Typical Iterations for HW/SW Product:
1. Paper prototype to evaluate conceptual model
2. Interactive computer-based prototype with rough
screens to evaluate feature placement
3. Tethered prototype to evaluate button + screen
interactions
4. Real device prototyped with major features
working
5. Real device prototyped with all features working
and graphic design implemented

101. Tethered Prototypes (High Fidelity)
Goal:
CommunicateVision
HIGH FIDELITY
PROTOTYE

105. More Information

106. Wireframing/Design Tools
 UXPin: http://uxpin.com/
 Axure: http://www.axure.com/
 Balsamiq: http://balsamiq.com/
 Mockingbird: https://gomockingbird.com/
 Justinmind: http://www.justinmind.com/
 Pidoco: http://pidoco.com/
 MockFlow: http://mockflow.com/
 Proto.io: http://proto.io/
 Wireframe.cc: https://wireframe.cc/

107. References
 Paper Prototyping: the fast and easy way to design and refine user interfaces
 http://paperprototyping.com/
 Models, Prototypes, and Evaluations for HCI Design: Making the Structured
Approach Practical George Casaday, Cynthia Rainis
 http://www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
 www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
 http://hci.stanford.edu/research/prototyping/
 http://pages.cpsc.ucalgary.ca/~saul/hci_topics/topics/prototyping.html
 http://hci.epfl.ch/teaching/hci/course_material/lofi-prototype/lecture5-lofi_proto-x6.pdf

107