Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

COMP 4026 Lecture2: Design and Prototype

COMP 4026 Advanced HCI course lecture 2 on design and prototyping. Taught on August 4th 2016 by Mark Billinghurst at the University of South Australia

  • Identifiez-vous pour voir les commentaires

COMP 4026 Lecture2: Design and Prototype

  1. 1. LECTURE 2: DESIGN AND PROTOTYPE COMP 4026 – Advanced HCI Semester 5 - 2016 Mark Billinghurst University of South Australia August 4th 2016
  2. 2. Interaction Design Designing interactive products to support people in their everyday and working lives Preece, J., (2002). Interaction Design •  Design of User Experience with Technology
  3. 3. • Interaction Design involves answering three questions: •  What do you do? - How do you affect the world? •  What do you feel? – What do you sense of the world? •  What do you know? – What do you learn? Bill Verplank
  4. 4. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....
  5. 5. DISCOVERY
  6. 6. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....
  7. 7. Consider theWhole User
  8. 8. NeedsAnalysis Methods Learn from people Learn from analogous settings Learn from Experts Immersive yourself in context
  9. 9. Interviewing • Understanding people’s thoughts, emotions, motivations • Understanding people’s choices and behaviours • Key way to identify needs
  10. 10. Understanding the User A day in the Life of.. Cultural Probes.. Role Playing..
  11. 11. Persona •  Capture elements relevant to problem
  12. 12. Empathy Map
  13. 13. Problem Definition Creates Insight User + Need = Insight
  14. 14. DESIGN
  15. 15. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  16. 16. Ideate • Idea generation • Large quantity of diverse ideas • Motivation • Step beyond obvious solutions • Harness collective perspectives • Uncover unexpected areas of exploration • Create fluency (volume) and flexibility (variety) • Move beyond obvious solutions
  17. 17. How MightWe … ? •  Short questions that launch brainstorming
  18. 18. Brainstorming •  Best with interdisciplinary team
  19. 19. MindMapping
  20. 20. Other Products in Market •  Notice all the iPod look-alikes?
  21. 21. Tools for Effective Design ! Personas ! Scenarios ! Storyboards (comics, movie technique) ! Wireframes and Mock-ups
  22. 22. Gunther theAd Guy Gunther is from Germany. He Travels extensively for work and As he is an advertising executive he needs to present concepts to clients quickly and easily. He is a person very well-versed in new technologies and wishes he had easier portable solutions for his presentations…..
  23. 23. How to use your Personas • Use them to find real people for usability testing. • Use them as a foundation to discuss any design issues/feature issues that come up. • Use them to evaluate competitor s products. • Use them to keep you honest. • Keep updating them as part of your continued user research. • Use them to find real customers you can have on- going relationships with.
  24. 24. Scenarios Usage Scenarios are narrative descriptions of how the product meets the needs of a persona Short (2 pages max) Focus on unmet needs of persona Concrete story Set of stories around essential tasks, problems... Use to test ideas
  25. 25. A business woman travels from SF to Paris on a business trip. On her way to the airport she narrowly misses a traffic delay. She avoids the jam because her Smartphone beeps and send her a warning text message on her route from the office to the airport. Upon arrival the location-sensitive Smartphone notifies the airline that she‘ll check in shortly and an airline employee finds her immediately and takes her baggage. Her display shows that her flight is on time and provides a map to her gate. On the way she downloads tourist information (maps, events) for Paris.
  26. 26. Once found her seat, she begins to review the downloaded information. She books a ticket for an opera she wants to see. Her Smartphone makes the booking using her credit card number stored in memory.The security software of the Smartphone protects her against fraud. The Smartphone stores the opera booking along with emails written on the plane.As soon as she steps off the plane, it makes the calls and sends the emails.As she leaves the airport, a map appears on the display and guides her to her hotel
  27. 27. Storyboarding Sequence of sketches showing use of system in everyday use context Concrete example Easier (faster) to grasp than text based stories Means of communication with users and system developers Sketches, not drawings... Use to test interaction and check design works
  28. 28. Example Storyboard
  29. 29. Persona + Storyboard
  30. 30. Wireframe • It’s about • Functional specs • Navigational systems • Functionality and layout • Notes about the intended functionality • How interface elements work together • Leaving room for the design to be created
  31. 31. Wireframes
  32. 32. 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
  33. 33. FunMe Mobile AR Wireframe/Mockup http://www.yunnuocheng.com/funme/
  34. 34. GlassSim – http://glasssim.com/ ▪  Simulate the view through Google Glass ▪  Multiple card templates
  35. 35. PROTOTYPE
  36. 36. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  37. 37. How can we quickly prototype interactive experiences with little or no coding?
  38. 38. Why Prototype? ▪  Quick visual design ▪  Capture key interactions ▪  Focus on user experience ▪  Communicate design ideas ▪  “Learn by doing/experiencing”
  39. 39. Design/PrototypingTools
  40. 40. Typical Development Steps ▪  Sketching ▪  Storyboards ▪  UI Mockups ▪  Interaction Flows ▪  Video Prototypes ▪  Interactive Prototypes ▪  Final Native Application Increased Fidelity & Interactivity
  41. 41. 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
  42. 42. Sketched Interfaces ▪  Sketch + Powerpoint/Photoshop/Illustrator
  43. 43. 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.
  44. 44. Paper Prototyping
  45. 45. The Basic Materials • 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)
  46. 46. Paper Prototyping •  https://www.youtube.com/watch?v=85muhAaySps
  47. 47. Physical Prototype
  48. 48. Google Glass (2011 - )
  49. 49. Google Glass Prototyping https://www.youtube.com/watch?v=d5_h1VuwD6g
  50. 50. Early Glass Prototyping
  51. 51. Early prototyping
  52. 52. Early prototyping
  53. 53. Early prototyping
  54. 54. Early prototyping
  55. 55. Early prototyping
  56. 56. Earlyprototyping
  57. 57. Early prototyping
  58. 58. Transitions
  59. 59. Interactive Sketching • Pop App • Pop - https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
  60. 60. Using Pop
  61. 61. ▪ 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
  62. 62. UI Concept Movies
  63. 63. EXAMPLE: SKETCH TO VIDEO
  64. 64. AR Hockey •  Concept – Air Hockey in the real world •  Mix materiality and real surfaces with digital forms •  React to real body movement and player interaction https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/
  65. 65. AR Hockey Concept https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/
  66. 66. Sketched Projected Content
  67. 67. Game Setup
  68. 68. Paper/Experience Prototypes •  Having people act out the game
  69. 69. Physical Mockup
  70. 70. Concept Video https://vimeo.com/79285725
  71. 71. Interactive Wireframing ▪  Developing interactive interfaces/wireframes ▪  Transitions, user feedback, interface design ▪  Web based tools ▪  UXpin - http://www.uxpin.com/ ▪  proto.io - http://www.proto.io/ ▪  Native tools ▪  Justinmind - http://www.justinmind.com/ ▪  Axure - http://www.axure.com/
  72. 72. 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
  73. 73. Proto.io - Interface
  74. 74. Limitations ▪  No access to sensor data ▪  Camera, orientation sensor ▪  No multimedia playback ▪  Audio, video ▪  Simple transitions ▪  No conditional logic ▪  No networking
  75. 75. Wireframe vs.Prototype vs.Mockup • Wireframe •  Low fidelity representation of design •  What UI elements, where UI are placed • Mockup •  High fidelity static design •  Visual design draft • Prototype •  Medium to high fidelity •  Supports user interaction
  76. 76. www.empathiccomputing.org @marknb00 mark.billinghurst@unisa.edu.au

×