comp 4026 lecture2: design and prototype
TRANSCRIPT
![Page 1: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/1.jpg)
LECTURE 2: DESIGN AND PROTOTYPE
COMP 4026 – Advanced HCI Semester 5 - 2016
Mark Billinghurst University of South Australia
August 4th 2016
![Page 2: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/2.jpg)
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
![Page 3: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/3.jpg)
• 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
![Page 4: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/4.jpg)
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....
![Page 5: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/5.jpg)
DISCOVERY
![Page 6: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/6.jpg)
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....
![Page 7: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/7.jpg)
Consider the Whole User
![Page 8: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/8.jpg)
Needs Analysis Methods
Learn from people
Learn from analogoussettings
Learn from Experts
Immersive yourself in context
![Page 9: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/9.jpg)
Interviewing
• Understanding people’s thoughts, emotions, motivations • Understanding people’s choices and behaviours • Key way to identify needs
![Page 10: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/10.jpg)
Understanding the User
A day in the Life of.. Cultural Probes.. Role Playing..
![Page 11: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/11.jpg)
Persona
• Capture elements relevant to problem
![Page 12: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/12.jpg)
Empathy Map
![Page 13: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/13.jpg)
Problem Definition Creates Insight
User + Need = Insight
![Page 14: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/14.jpg)
DESIGN
![Page 15: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/15.jpg)
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
![Page 16: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/16.jpg)
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
![Page 17: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/17.jpg)
How Might We … ? • Short questions that launch brainstorming
![Page 18: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/18.jpg)
Brainstorming
• Best with interdisciplinary team
![Page 19: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/19.jpg)
MindMapping
![Page 20: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/20.jpg)
Other Products in Market
• Notice all the iPod look-alikes?
![Page 21: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/21.jpg)
Tools for Effective Design
! Personas ! Scenarios ! Storyboards (comics, movie technique) ! Wireframes and Mock-ups
![Page 22: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/22.jpg)
Gunther the Ad 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…..
![Page 23: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/23.jpg)
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.
![Page 24: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/24.jpg)
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
![Page 25: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/25.jpg)
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.
![Page 26: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/26.jpg)
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
![Page 27: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/27.jpg)
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
![Page 28: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/28.jpg)
Example Storyboard
![Page 29: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/29.jpg)
![Page 30: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/30.jpg)
Persona + Storyboard
![Page 31: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/31.jpg)
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
![Page 32: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/32.jpg)
Wireframes
![Page 33: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/33.jpg)
![Page 34: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/34.jpg)
![Page 35: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/35.jpg)
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
![Page 36: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/36.jpg)
FunMe Mobile AR Wireframe/Mockup
http://www.yunnuocheng.com/funme/
![Page 37: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/37.jpg)
GlassSim – http://glasssim.com/
▪ Simulate the view through Google Glass ▪ Multiple card templates
![Page 38: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/38.jpg)
PROTOTYPE
![Page 39: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/39.jpg)
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
![Page 40: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/40.jpg)
How can we quickly prototype interactive experiences with little
or no coding?
![Page 41: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/41.jpg)
Why Prototype?
▪ Quick visual design ▪ Capture key interactions ▪ Focus on user experience ▪ Communicate design ideas ▪ “Learn by doing/experiencing”
![Page 42: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/42.jpg)
Design/Prototyping Tools
![Page 43: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/43.jpg)
Typical Development Steps
▪ Sketching ▪ Storyboards ▪ UI Mockups ▪ Interaction Flows ▪ Video Prototypes ▪ Interactive Prototypes ▪ Final Native Application
Increased Fidelity & Interactivity
![Page 44: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/44.jpg)
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
![Page 45: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/45.jpg)
Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator
![Page 46: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/46.jpg)
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.
![Page 47: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/47.jpg)
Paper Prototyping
![Page 48: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/48.jpg)
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)
![Page 49: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/49.jpg)
Paper Prototyping
• https://www.youtube.com/watch?v=85muhAaySps
![Page 50: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/50.jpg)
Physical Prototype
![Page 51: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/51.jpg)
Google Glass (2011 - )
![Page 52: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/52.jpg)
Google Glass Prototyping
https://www.youtube.com/watch?v=d5_h1VuwD6g
![Page 53: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/53.jpg)
Early Glass Prototyping
![Page 54: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/54.jpg)
Early prototyping
![Page 55: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/55.jpg)
Early prototyping
![Page 56: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/56.jpg)
Early prototyping
![Page 57: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/57.jpg)
Early prototyping
![Page 58: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/58.jpg)
Early prototyping
![Page 59: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/59.jpg)
Early prototyping
![Page 60: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/60.jpg)
Early prototyping
![Page 61: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/61.jpg)
Transitions
![Page 62: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/62.jpg)
![Page 63: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/63.jpg)
Interactive Sketching
• Pop App • Pop - https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
![Page 64: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/64.jpg)
Using Pop
![Page 65: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/65.jpg)
▪ 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
![Page 66: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/66.jpg)
UI Concept Movies
![Page 67: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/67.jpg)
EXAMPLE: SKETCH TO VIDEO
![Page 68: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/68.jpg)
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/
![Page 69: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/69.jpg)
AR Hockey Concept
https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/
![Page 70: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/70.jpg)
Sketched Projected Content
![Page 71: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/71.jpg)
Game Setup
![Page 72: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/72.jpg)
Paper/Experience Prototypes
• Having people act out the game
![Page 73: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/73.jpg)
Physical Mockup
![Page 74: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/74.jpg)
Concept Video
https://vimeo.com/79285725
![Page 75: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/75.jpg)
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/
![Page 76: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/76.jpg)
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
![Page 77: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/77.jpg)
Proto.io - Interface
![Page 78: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/78.jpg)
Limitations ▪ No access to sensor data ▪ Camera, orientation sensor
▪ No multimedia playback ▪ Audio, video
▪ Simple transitions ▪ No conditional logic
▪ No networking
![Page 79: COMP 4026 Lecture2: Design and Prototype](https://reader036.vdocuments.mx/reader036/viewer/2022062523/588515b41a28abd05e8b6635/html5/thumbnails/79.jpg)
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