Download as PDF, PPTX
Uploaded byMark Billinghurst
COMP 4026 Lecture2: Design and Prototype
The document outlines the process of interaction design, including identifying user needs, creating prototypes, and evaluating design through iterative methods. It emphasizes the importance of understanding users through various techniques such as empathy mapping and personas, along with tools like storyboards and wireframes. Additionally, it discusses the significance of prototyping in capturing user experiences and enhancing design communication.
More Related Content
Similar to COMP 4026 Lecture2: Design and Prototype
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
COMP 4026 Lecture2: Design and Prototype
- 1. LECTURE 2: DESIGN ANDPROTOTYPE COMP 4026 – Advanced HCI Semester 5 - 2016 Mark Billinghurst University of South Australia August 4th 2016
- 2. Interaction Design Designing interactiveproducts to support people in their everyday and working lives Preece, J., (2002). Interaction Design • Design of User Experience with Technology
- 3. • Interaction Design involvesanswering 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. Interaction Design Process Evaluate (Re)Design Identifyneeds/ establish requirements Build an interactive version Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....
- 5.
- 6. Interaction Design Process Evaluate (Re)Design Identifyneeds/ establish requirements Build an interactive version Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....
- 7.
- 8. NeedsAnalysis Methods Learn from people Learnfrom analogous settings Learn from Experts Immersive yourself in context
- 9. Interviewing • Understanding people’s thoughts,emotions, motivations • Understanding people’s choices and behaviours • Key way to identify needs
- 10. Understanding the User Aday in the Life of.. Cultural Probes.. Role Playing..
- 11. Persona • Capture elementsrelevant to problem
- 12.
- 13. Problem Definition CreatesInsight User + Need = Insight
- 14.
- 15. Interaction Design Process Evaluate (Re)Design Identifyneeds/ establish requirements Build an interactive version Final Product
- 16. Ideate • Idea generation • Large quantityof 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. How MightWe …? • Short questions that launch brainstorming
- 18. Brainstorming • Best withinterdisciplinary team
- 19.
- 20. Other Products inMarket • Notice all the iPod look-alikes?
- 21. Tools for EffectiveDesign ! Personas ! Scenarios ! Storyboards (comics, movie technique) ! Wireframes and Mock-ups
- 22. Gunther theAd Guy Guntheris 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. How to useyour 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. Scenarios Usage Scenarios arenarrative 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. A business womantravels 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. Once found herseat, 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. Storyboarding Sequence of sketchesshowing 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.
- 30.
- 31. Wireframe • It’s about • Functional specs • Navigationalsystems • Functionality and layout • Notes about the intended functionality • How interface elements work together • Leaving room for the design to be created
- 32.
- 35. Mockup • It’s about • Look andfeel • Build on the wireframe with graphics and polish • May adjust layout slightly but stays within the general guide of the wireframe
- 36. FunMe Mobile ARWireframe/Mockup http://www.yunnuocheng.com/funme/
- 37. GlassSim – http://glasssim.com/ ▪ Simulate the view through Google Glass ▪ Multiple card templates
- 38.
- 39. Interaction Design Process Evaluate (Re)Design Identifyneeds/ establish requirements Build an interactive version Final Product
- 40. How can wequickly prototype interactive experiences with little or no coding?
- 41. Why Prototype? ▪ Quickvisual design ▪ Capture key interactions ▪ Focus on user experience ▪ Communicate design ideas ▪ “Learn by doing/experiencing”
- 42.
- 43. Typical Development Steps ▪ Sketching ▪ Storyboards ▪ UI Mockups ▪ Interaction Flows ▪ Video Prototypes ▪ Interactive Prototypes ▪ Final Native Application Increased Fidelity & Interactivity
- 44. Sketching Sketching is notabout 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
- 45. Sketched Interfaces ▪ Sketch+ Powerpoint/Photoshop/Illustrator
- 46. Paper Prototyping (LowFidelity) 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.
- 48. The Basic Materials • Post-its • 5x8in. 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)
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 63. Interactive Sketching • Pop App • Pop- https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
- 64.
- 65. ▪ Series of stillphotos 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
- 66.
- 67.
- 68. 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/
- 69.
- 70.
- 71.
- 72. Paper/Experience Prototypes • Havingpeople act out the game
- 73.
- 74.
- 75. Interactive Wireframing ▪ Developinginteractive 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/
- 76. 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
- 77.
- 78. Limitations ▪ No accessto sensor data ▪ Camera, orientation sensor ▪ No multimedia playback ▪ Audio, video ▪ Simple transitions ▪ No conditional logic ▪ No networking
- 79. 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
- 80.