MHIT 603: Lecture 3 Prototyping Tools

July 21st 2014 Mark Billinghurst

mark.billinghurst@gmail.com

Recap

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

Design/Prototyping Tools

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

Sketching Interfaces

Paper Proto: Create Widgets

Example Wireframes

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

Transitions

Video Sketch

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

Sketching to Prototype

Compromising

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

Vertical Prototype

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

Interactive Prototyping

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

Flinto Interface

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

Origami Interface

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

App Inventor Designer View

App Inventor Blocks View

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

Max/MSP Interface

VVVV Interface

VVVV Visual Programming

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

http://toxiclibs.org/

Hardware Prototyping

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

Don’t Have Google Glass ?

Build Your Own Wearable

▪  MyVu display + phone + sensors

Beady-i

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

http://buglabs.net/

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 Pins Power Pins

Atmega328p

USB to Serial

Shields

Stacking Shields

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)

Heart Rate Monitor Interface

Piano Stairs

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

Components

Programming Languages

Arduino vs. Phidgets

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/

Prototyping Case Study

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: Communicate Vision HIGH FIDELITY PROTOTYE

More Information

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