Your SlideShare is downloading. ×
MHIT 603: Lecture 3 - Prototyping Tools
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MHIT 603: Lecture 3 - Prototyping Tools

678
views

Published on

Published in: Technology

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
678
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×