MHIT 603: Lecture 3 - Prototyping Tools

1,448 views

Published on

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
1,448
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
45
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

MHIT 603: Lecture 3 - Prototyping Tools

  1. 1. MHIT 603: Lecture 3 Prototyping Tools July 21st 2014 Mark Billinghurst mark.billinghurst@gmail.com
  2. 2. Recap
  3. 3. Interaction Design Process MHIT 602 MHIT 603
  4. 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. 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. 6. Design/Prototyping Tools
  7. 7. Typical Development Steps ▪  Sketching ▪  Storyboards ▪  UI Mockups ▪  Interaction Flows ▪  Video Prototypes ▪  Interactive Prototypes ▪  Final Native Application Increased Fidelity & Interactivity
  8. 8. Prototyping Tools ▪  Static/Low fidelity ▪  Sketching ▪  User interface templates ▪  Storyboards/Application flows ▪  Interactive/High fidelity ▪  Wireframing tools ▪  Mobile prototyping ▪  Native Coding
  9. 9. Sketching Interfaces
  10. 10. Paper Proto: Create Widgets
  11. 11. Example Wireframes
  12. 12. Pop - https://popapp.in/  Combining sketching and interactivity on mobiles  Take pictures of sketches, link pictures together
  13. 13. UXPin   UXPin Wireframing Tool   http://uxpin.com/   Web based   UI templates   Design patterns
  14. 14. Transitions
  15. 15. Video Sketch
  16. 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. 17. Wireframe vs. Mockup vs. Protoype
  18. 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. 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. 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. 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. 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. 23. Sketching to Prototype
  24. 24. Compromising
  25. 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. 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. 27. Different Features Scenario VerticalPrototype Horizontal Prototype Full System Functionality
  28. 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. 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. 30. Interactive Prototyping
  31. 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. 32. Flinto Interface
  33. 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. 34. Origami Interface
  35. 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. 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. 37. App Inventor Designer View
  38. 38. App Inventor Blocks View
  39. 39. Orientation Demo   Use Glass orientation sensor
  40. 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. 41. Max/MSP Interface
  42. 42. VVVV Interface
  43. 43. VVVV Visual Programming
  44. 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. 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. 46. http://toxiclibs.org/
  47. 47. Hardware Prototyping
  48. 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. 49. Don’t Have Google Glass ?
  50. 50. Build Your Own Wearable ▪  MyVu display + phone + sensors
  51. 51. Beady-i ▪  http://www.instructables.com/id/DIY- Google-Glasses-AKA-the-Beady-i/
  52. 52. http://buglabs.net/
  53. 53. Arduino   http://www.arduino.cc   Open source hardware   Microcontroller   Add-on shields   Get started for $30 USD
  54. 54. Arduino is a board USB Port Power Supply Digital In/Out Pins Analog Input PinsPower Pins Atmega328p USB to Serial
  55. 55. Shields
  56. 56. Stacking Shields
  57. 57. Programming Arduino   Open-source   Large community   Lots of examples available   Language based on processing   Also can use C, C++, Flash,..
  58. 58. Arduino IDE   Open Source   Cross Platform   Windows   Mac OS X   Linux   Simple UI (Easy to Use)
  59. 59. Heart Rate Monitor Interface
  60. 60. Piano Stairs
  61. 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. 62. Prototyping Platform Arduino Kit Bluetooth Shield Google Glass
  63. 63. Example: Glove Input  Buttons on fingertips  Map touches to commands
  64. 64. Example: Ring Input  Touch strip, button, accelerometer  Tap, swipe, flick actions
  65. 65. How it works Bracelet Armband Gloves 1,2, 3,4 Values/ output
  66. 66. Phidgets   http://www.phidgets.com   Plug and play prototyping   Lots of components   Get started for $77
  67. 67. Components
  68. 68. Programming Languages
  69. 69. Arduino vs. Phidgets
  70. 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. 71. Mainboard   Use mainboard   Processor   Number of socket connectors   Plug in Gadgeteer modules
  72. 72. Modules   Sensors, Actuators, Networking, Displays, User Input, Power, Extensibility, ..
  73. 73. Physical Prototyping - d.tools  Hardware prototyping  http://hci.stanford.edu/research/dtools/
  74. 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. 75. Prototyping Case Study
  76. 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. 77. Tethered Prototypes (High Fidelity) Goal: CommunicateVision HIGH FIDELITY PROTOTYE
  78. 78. More Information
  79. 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. 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

×