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

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

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

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

23.
Sketching to Prototype

24.
Compromising

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

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

27.
Different Features
Scenario
VerticalPrototype
Horizontal Prototype
Full System
Functionality

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

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

30.
Interactive Prototyping

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

32.
Flinto Interface

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

34.
Origami Interface

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

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

37.
App Inventor Designer View

38.
App Inventor Blocks View

39.
Orientation Demo
 Use Glass orientation sensor

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

41.
Max/MSP Interface

42.
VVVV Interface

43.
VVVV Visual Programming

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

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

46.
http://toxiclibs.org/

47.
Hardware Prototyping

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

49.
Don’t Have Google Glass ?

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

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

52.
http://buglabs.net/

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

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

55.
Shields

56.
Stacking Shields

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

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

59.
Heart Rate Monitor Interface

60.
Piano Stairs

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

62.
Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass

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

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

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

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

67.
Components

68.
Programming Languages

69.
Arduino vs. Phidgets

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

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

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

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

74.
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/

75.
Prototyping Case Study

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

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

78.
More Information

79.
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/

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