MHIT 603: Lecture 3 - Prototyping Tools

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

Interaction Design Process
MHIT 602
MHIT 603

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

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

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

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

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

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

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

Wireframe vs. Mockup vs. Protoype

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

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

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

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

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

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

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

Different Features
Scenario
VerticalPrototype
Horizontal Prototype
Full System
Functionality

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

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

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

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

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

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

Orientation Demo
  Use Glass orientation sensor

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

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

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

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

Build Your Own Wearable
▪  MyVu display + phone + sensors

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

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

Arduino is a board

USB Port
Power Supply
Digital In/Out Pins
Analog Input PinsPower Pins
Atmega328p
USB to Serial

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

Arduino IDE

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

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

Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass

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

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

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

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

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

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

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

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

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/

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

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

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/

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

MHIT 603: Lecture 3 - Prototyping Tools

More Related Content

What's hot

Viewers also liked

Similar to MHIT 603: Lecture 3 - Prototyping Tools

More from Mark Billinghurst

Recently uploaded

In this document

MHIT 603: Lecture 3 - Prototyping Tools