MHIT 603: Lecture 3 - Prototyping Tools
-
Upload
mark-billinghurst -
Category
Technology
-
view
359 -
download
3
description
Transcript of MHIT 603: Lecture 3 - Prototyping Tools
![Page 2: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/2.jpg)
Recap
![Page 3: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/3.jpg)
Interaction Design Process
MHIT 602 MHIT 603
![Page 4: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/4.jpg)
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
![Page 5: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/5.jpg)
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
![Page 6: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/6.jpg)
Design/Prototyping Tools
![Page 7: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/7.jpg)
Typical Development Steps
▪ Sketching ▪ Storyboards ▪ UI Mockups ▪ Interaction Flows ▪ Video Prototypes ▪ Interactive Prototypes ▪ Final Native Application
Increased Fidelity & Interactivity
![Page 8: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/8.jpg)
Prototyping Tools ▪ Static/Low fidelity ▪ Sketching ▪ User interface templates ▪ Storyboards/Application flows
▪ Interactive/High fidelity ▪ Wireframing tools ▪ Mobile prototyping ▪ Native Coding
![Page 9: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/9.jpg)
Sketching Interfaces
![Page 10: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/10.jpg)
Paper Proto: Create Widgets
![Page 11: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/11.jpg)
Example Wireframes
![Page 12: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/12.jpg)
Pop - https://popapp.in/
Combining sketching and interactivity on mobiles Take pictures of sketches, link pictures together
![Page 13: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/13.jpg)
UXPin UXPin Wireframing Tool
http://uxpin.com/ Web based UI templates Design patterns
![Page 14: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/14.jpg)
Transitions
![Page 15: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/15.jpg)
Video Sketch
![Page 16: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/16.jpg)
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
![Page 17: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/17.jpg)
Wireframe vs. Mockup vs. Protoype
![Page 18: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/18.jpg)
Sketch It’s about
Freehand drawing Quickly recording idea Trying out different ideas Establishing a composition Not intended as as a finished work
![Page 19: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/19.jpg)
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
![Page 20: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/20.jpg)
![Page 21: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/21.jpg)
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
![Page 22: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/22.jpg)
![Page 23: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/23.jpg)
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
![Page 24: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/24.jpg)
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
![Page 25: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/25.jpg)
Sketching to Prototype
![Page 26: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/26.jpg)
Compromising
![Page 27: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/27.jpg)
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
![Page 28: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/28.jpg)
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
![Page 29: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/29.jpg)
Different Features
Scenario
Vertical Prototype
Horizontal Prototype
Full System
Functionality
![Page 30: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/30.jpg)
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
![Page 31: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/31.jpg)
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
![Page 32: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/32.jpg)
Interactive Prototyping
![Page 33: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/33.jpg)
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
![Page 34: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/34.jpg)
Flinto Interface
![Page 35: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/35.jpg)
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
![Page 36: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/36.jpg)
Origami Interface
![Page 37: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/37.jpg)
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
![Page 38: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/38.jpg)
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
![Page 39: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/39.jpg)
App Inventor Designer View
![Page 40: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/40.jpg)
App Inventor Blocks View
![Page 41: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/41.jpg)
Orientation Demo
Use Glass orientation sensor
![Page 42: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/42.jpg)
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
![Page 43: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/43.jpg)
Max/MSP Interface
![Page 44: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/44.jpg)
VVVV Interface
![Page 45: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/45.jpg)
VVVV Visual Programming
![Page 46: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/46.jpg)
![Page 47: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/47.jpg)
![Page 48: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/48.jpg)
![Page 49: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/49.jpg)
![Page 50: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/50.jpg)
![Page 51: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/51.jpg)
![Page 52: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/52.jpg)
![Page 53: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/53.jpg)
![Page 54: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/54.jpg)
Processing - Notes Language of Interaction
Physical Manipulation Input using code Mouse Manipulation Presence, location, image Haptic interfaces and multi-touch Gesture Voice and Speech
![Page 55: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/55.jpg)
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
![Page 56: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/56.jpg)
http://toxiclibs.org/
![Page 57: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/57.jpg)
Hardware Prototyping
![Page 58: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/58.jpg)
![Page 59: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/59.jpg)
![Page 60: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/60.jpg)
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
![Page 61: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/61.jpg)
Don’t Have Google Glass ?
![Page 62: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/62.jpg)
Build Your Own Wearable
▪ MyVu display + phone + sensors
![Page 63: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/63.jpg)
Beady-i
▪ http://www.instructables.com/id/DIY-Google-Glasses-AKA-the-Beady-i/
![Page 64: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/64.jpg)
http://buglabs.net/
![Page 65: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/65.jpg)
![Page 66: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/66.jpg)
![Page 67: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/67.jpg)
![Page 68: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/68.jpg)
![Page 69: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/69.jpg)
![Page 70: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/70.jpg)
Arduino
http://www.arduino.cc
Open source hardware
Microcontroller
Add-on shields
Get started for $30 USD
![Page 71: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/71.jpg)
Arduino is a board
USB Port
Power Supply
Digital In/Out Pins
Analog Input Pins Power Pins
Atmega328p
USB to Serial
![Page 72: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/72.jpg)
Shields
![Page 73: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/73.jpg)
Stacking Shields
![Page 74: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/74.jpg)
Programming Arduino
Open-source
Large community
Lots of examples available
Language based on processing
Also can use C, C++, Flash,..
![Page 75: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/75.jpg)
Arduino IDE Open Source Cross Platform
Windows Mac OS X Linux
Simple UI (Easy to Use)
![Page 76: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/76.jpg)
Heart Rate Monitor Interface
![Page 77: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/77.jpg)
Piano Stairs
![Page 78: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/78.jpg)
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
![Page 79: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/79.jpg)
Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass
![Page 80: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/80.jpg)
Example: Glove Input
Buttons on fingertips Map touches to commands
![Page 81: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/81.jpg)
Example: Ring Input
Touch strip, button, accelerometer Tap, swipe, flick actions
![Page 82: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/82.jpg)
How it works
Bracelet
Armband
Gloves
1,2,3,4
Values/output
![Page 83: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/83.jpg)
Phidgets
http://www.phidgets.com
Plug and play prototyping
Lots of components
Get started for $77
![Page 84: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/84.jpg)
Components
![Page 85: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/85.jpg)
Programming Languages
![Page 86: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/86.jpg)
Arduino vs. Phidgets
![Page 87: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/87.jpg)
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
![Page 88: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/88.jpg)
Mainboard
Use mainboard Processor Number of socket connectors
Plug in Gadgeteer modules
![Page 89: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/89.jpg)
Modules
Sensors, Actuators, Networking, Displays, User Input, Power, Extensibility, ..
![Page 90: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/90.jpg)
Physical Prototyping - d.tools Hardware prototyping http://hci.stanford.edu/research/dtools/
![Page 91: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/91.jpg)
![Page 92: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/92.jpg)
![Page 93: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/93.jpg)
![Page 94: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/94.jpg)
![Page 95: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/95.jpg)
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/
![Page 96: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/96.jpg)
Prototyping Case Study
![Page 97: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/97.jpg)
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
![Page 98: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/98.jpg)
![Page 99: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/99.jpg)
![Page 100: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/100.jpg)
![Page 101: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/101.jpg)
Tethered Prototypes (High Fidelity)
Goal: Communicate Vision HIGH FIDELITY PROTOTYE
![Page 102: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/102.jpg)
![Page 103: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/103.jpg)
![Page 104: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/104.jpg)
![Page 105: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/105.jpg)
More Information
![Page 106: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/106.jpg)
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/
![Page 107: MHIT 603: Lecture 3 - Prototyping Tools](https://reader034.fdocuments.net/reader034/viewer/2022051411/540d811d8d7f728d7e8b4991/html5/thumbnails/107.jpg)
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