MHIT 603: Introduction to Prototyping

1,404 views
1,118 views

Published on

Lecture 2 from the MHIT 603 course on Human Interface Technology. This lecture provides an introduction to Prototyping. Taught by Mark Billinghurst at the University of Canterbury, July 17th, 2014.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,404
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
181
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

MHIT 603: Introduction to Prototyping

  1. 1. MHIT 603: Lecture 2 Introduction to Prototyping July 17th 2014 Mark Billinghurst
  2. 2. Interaction Design Process
  3. 3. Interaction Design Process MHIT 602 MHIT 603
  4. 4. Design Process
  5. 5. Three Phase Model
  6. 6. 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
  7. 7. Elaboration vs. Reduction   Elaboration: Sketching/Storytelling   Creation, exploration   Quick, conceptual   Reduction: Prototyping/Testing   Functional   Idea presentation   Decision making
  8. 8. The Design Funnel   Alternate generation of ideas and convergence until resolution Modified from Pugh, S. (1990) Total design: Integrated methods for successful products engineering. Addison-Wesley. P. 75
  9. 9. Sketching Sketching is not about drawing It is about design. Sketching is a tool to help you: -  express -  develop, and -  communicate design ideas Sketching is part of a process: -  idea generation, -  design elaboration -  design choices, -  engineering
  10. 10. Figure 41: A Sketch of a Dialogue with a Sketch The “conversation” between the sketch (right bubble) and the mind (left bubble). A sketch is created from current knowledge (top arrow). Reading, or interpreting the resulting representation (bottom arrow), creates new knowledge. The creation results from what Goldschmidt calls “seeing that” reasoning, and the extraction of new knowledge results from what she calls “seeing as.” sketch representation mind (new) knowledge Create (seeing that) Read (seeing as) Sketching is about the activity not the result – Bill Buxton 10
  11. 11. Why is sketching useful?   Early ideation   Think through ideas   Force you to visualize how things come together   Communicate ideas to others to inspire new designs   Active brainstorming
  12. 12. 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
  13. 13. Early Nintendo Wii Prototypes
  14. 14. Early Nintendo Wii Prototypes
  15. 15. From Sketches to Prototypes   Sketches: early ideation stages of design   Prototypes: capturing /detailing the actual design
  16. 16. Sketch vs. Prototype Sketch   Prototype   Invite   A)end   Suggest   Describe   Explore   Refine   Ques;on   Answer   Propose   Test   Provoke   Resolve   Tenta;ve,  non  commi)al   Specific  Depic;on   The primary differences are in the intent
  17. 17. Example: Google Glass
  18. 18. Google Glass
  19. 19. View Through Google Glass Always available peripheral information display Combining computing, communications and content capture
  20. 20. Google Glass Prototyping
  21. 21. The Road to Glass
  22. 22. Early prototyping
  23. 23. Prototyping Tools
  24. 24. 27 What is a prototype? In interaction design it can be (among other things): • a series of screen sketches • a storyboard, i.e. a cartoon-like series of scenes • a Powerpoint slide show • a video simulating the use of a system • a lump of wood (e.g. PalmPilot) • a cardboard mock-up • a piece of software with limited functionality
  25. 25. Why Prototype? ▪  Quick visual design ▪  Capture key interactions ▪  Focus on user experience ▪  Communicate design ideas ▪  “Learn by doing/experiencing” ▪  Supports user evaluation
  26. 26. Goals of Prototyping   Learn   Solve Disagreements   Reduce miscommunication   Start a conversation   Fail quickly and cheaply   Test ideas without spending time and money   Manage the solution building process   Break large problem into smaller testable parts
  27. 27. Benefits of RAPID Prototyping   Fast and inexpensive   Identifies problems before they re coded   Elicits more and better feedback from users   Helps developers think creatively   Gets users involved early in the process   Fosters teamwork and communication   Avoids opinion wars   Helps decide design directions
  28. 28. How to Prototype?   Build a prototype of the basic functionality, especially the interface   Test the prototype, which will uncover design errors   Correct the errors   Repeat until you have a clean design   Prototyping is   a major tool for improving usability   Heavily used in industry 31
  29. 29. General Features of Prototyping   Enables the designer to quickly build or create examples of :- -  The data entry form -  The menu structure and order -  The dialogue styles -  Error messages   Should be inexpensive to develop – intention is to discard/modify it   Should not require programming skills 32
  30. 30. Prototyping for Usability   Usability = ease of use of an application   Design typical user task scenarios   Identify tasks based on the scenarios   Use “Real Users” to test   Watch user performing task   Iterate design based on test 33
  31. 31. Cost of Prototyping   Cheaper than not doing it......   Cost of repairing an error made in analysis and design phase can cost up to 100x the original cost   Usability work should amount for 5-10% of a project’s budget   Testing early, iterating often makes the product cheaper.   Prototyping offers a cheap means of testing usability early in the lifecycle 34
  32. 32. How can we quickly design and prototype interactive experiences?
  33. 33. Design/Prototyping Tools
  34. 34. Sketching
  35. 35. Paper Prototyping
  36. 36. Wireframes
  37. 37. 40www.id-book.com Storyboarding
  38. 38. Physical Prototype
  39. 39. Palm Pilot
  40. 40. Acting/Role Playing
  41. 41. From Sketches to Prototypes Early design Late design Brainstorm different ideas and representations Choose a representation Rough out interface style Multitude of sketches Sketch variations and details Sketch or low fidelity prototypesTask centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Low to medium fidelity prototypes Limited field testing Alpha/Beta tests High fidelity prototypes Working systems
  42. 42. Typical Development Steps ▪  Sketching ▪  Storyboards ▪  UI Mockups ▪  Interaction Flows ▪  Video Prototypes ▪  Interactive Prototypes ▪  Final Native Application Increased Fidelity & Interactivity
  43. 43. Prototyping
  44. 44. Prototyping Tools ▪  Static/Low fidelity ▪  Sketching ▪  User interface templates ▪  Storyboards/Application flows ▪  Interactive/High fidelity ▪  Wireframing tools ▪  Mobile prototyping ▪  Native Coding
  45. 45. Advantages/Disadvantages 49 Prototype Advantages Disadvantages Low-fidelity prototype - low developmental cost - evaluate multiple design concepts - limited error checking - navigational and flow limitations High-fidelity prototype - fully interactive - look and feel of final product - clearly defines navigational scheme - more expensive to develop - time consuming to build - developers are reluctant to change something they have crafted for hours
  46. 46. Paper Prototyping (Low Fidelity) Quick and simple means of sketching interfaces Use office materials Easier to criticize, quick to change Creative process (develop in team) Can also use for usability test (focus on interaction flow) Used a lot to test out concepts before real design begins.
  47. 47. Sketching Interfaces
  48. 48. Paper Proto: Create Widgets
  49. 49. 53www.id-book.com Card-based prototypes • Index cards (3 X 5 inches) • Each card represents one screen or part of screen • Often used in website development
  50. 50. ESP
  51. 51. Paper Prototyping w/Hardware
  52. 52. The Basic Materials for Low-Fi   Post-its   5x8 in. index cards   Scissors, X-acto knives   Overhead transparencies   Large, heavy, white paper (11 x 17)   Tape, stick glue, correction tape   Pens & markers (many colors & sizes)
  53. 53. Pop - https://popapp.in/  Combining sketching and interactivity on mobiles  Take pictures of sketches, link pictures together
  54. 54. Using Pop
  55. 55. Wireframes  Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.  The wireframe depicts the layout or arrangement of the content  interface elements, navigational systems
  56. 56. Example Wireframes
  57. 57. Balsamiq - http://balsamiq.com/   Create and test UI wireframes quickly   Can’t focus on fonts, alignment, colors
  58. 58. Good Tool: Balsamiq
  59. 59. UXPin   UXPin Wireframing Tool   http://uxpin.com/   Web based   UI templates   Design patterns
  60. 60. UXpin
  61. 61. 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
  62. 62. How do we describe what users do?   Visualize the experience   Show every steps to complete a talks   Show every click   Preview the experience – see how everything flows together   Using screen flows
  63. 63. Screen Flows Flash as Design Tool   A screen flow represents a sequence of user- driven software processes that are presented as a series of graphical user interfaces.
  64. 64. Transitions
  65. 65. Transition Design Patterns   Yahoo design patterns library   http://developer.yahoo.com/ypatterns/
  66. 66. Interactive Prototypes
  67. 67. Pidoco
  68. 68. Pidoco Features  Drag and drop wireframing  Publish to web  Collaboration
  69. 69. 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
  70. 70. Proto.io - Interface
  71. 71. ▪ Series of still photos in a movie format. ▪ Demonstrates the experience of the product ▪ Discover where concept needs fleshing out. ▪ Communicate experience and interface ▪ You can use whatever tools, from Flash to iMovie. Video Sketching
  72. 72. Video Sketch
  73. 73. Making a Video Sketch   Decide Type   Stills with voice over   Stop motion with voice over   Live action video   Process   Plan the shoot   Make and set-up shoot   Shoot scenario   Evaluate and edit
  74. 74. See https://vine.co/v/bgIaLHIpFTB Example: Video Sketch of Vine UI
  75. 75. UI Concept Movies
  76. 76. Tool Summary
  77. 77. Assignment One   Design a mobile application for tourist guiding   Components   Map view, AR view, Panorama view   Deliverable   Sketch interface using Pop   Screen mockups using Uxpin/Proto.io   Video prototype   Due: Friday August 1st

×