Upload
mark-billinghurst
View
397
Download
1
Embed Size (px)
Citation preview
LECTURE 2: DESIGN AND PROTOTYPE
COMP 4026 – Advanced HCI Semester 5 - 2016
Mark Billinghurst University of South Australia
August 4th 2016
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
• 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
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....
DISCOVERY
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....
Consider the Whole User
Needs Analysis Methods
Learn from people
Learn from analogoussettings
Learn from Experts
Immersive yourself in context
Interviewing
• Understanding people’s thoughts, emotions, motivations • Understanding people’s choices and behaviours • Key way to identify needs
Understanding the User
A day in the Life of.. Cultural Probes.. Role Playing..
Persona
• Capture elements relevant to problem
Empathy Map
Problem Definition Creates Insight
User + Need = Insight
DESIGN
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
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
How Might We … ? • Short questions that launch brainstorming
Brainstorming
• Best with interdisciplinary team
MindMapping
Other Products in Market
• Notice all the iPod look-alikes?
Tools for Effective Design
! Personas ! Scenarios ! Storyboards (comics, movie technique) ! Wireframes and Mock-ups
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…..
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.
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
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.
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
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
Example Storyboard
Persona + Storyboard
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
Wireframes
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
FunMe Mobile AR Wireframe/Mockup
http://www.yunnuocheng.com/funme/
GlassSim – http://glasssim.com/
▪ Simulate the view through Google Glass ▪ Multiple card templates
PROTOTYPE
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
How can we quickly prototype interactive experiences with little
or no coding?
Why Prototype?
▪ Quick visual design ▪ Capture key interactions ▪ Focus on user experience ▪ Communicate design ideas ▪ “Learn by doing/experiencing”
Design/Prototyping Tools
Typical Development Steps
▪ Sketching ▪ Storyboards ▪ UI Mockups ▪ Interaction Flows ▪ Video Prototypes ▪ Interactive Prototypes ▪ Final Native Application
Increased Fidelity & Interactivity
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
Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator
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.
Paper Prototyping
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)
Paper Prototyping
• https://www.youtube.com/watch?v=85muhAaySps
Physical Prototype
Google Glass (2011 - )
Google Glass Prototyping
https://www.youtube.com/watch?v=d5_h1VuwD6g
Early Glass Prototyping
Early prototyping
Early prototyping
Early prototyping
Early prototyping
Early prototyping
Early prototyping
Early prototyping
Transitions
Interactive Sketching
• Pop App • Pop - https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
Using Pop
▪ 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
UI Concept Movies
EXAMPLE: SKETCH TO VIDEO
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/
AR Hockey Concept
https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/
Sketched Projected Content
Game Setup
Paper/Experience Prototypes
• Having people act out the game
Physical Mockup
Concept Video
https://vimeo.com/79285725
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/
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
Proto.io - Interface
Limitations ▪ No access to sensor data ▪ Camera, orientation sensor
▪ No multimedia playback ▪ Audio, video
▪ Simple transitions ▪ No conditional logic
▪ No networking
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