mhit 603: lecture 3 - prototyping tools
DESCRIPTION
TRANSCRIPT
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