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

1. LECTURE 2:
DESIGN AND PROTOTYPE
COMP 4026 – Advanced HCI
Semester 5 - 2016
Mark Billinghurst
University of South Australia
August 4th 2016

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. • 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. 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. DISCOVERY

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. Consider theWhole User

8. NeedsAnalysis Methods
Learn from
people
Learn from
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
A day in the Life of.. Cultural Probes.. Role Playing..

11. Persona
• Capture elements relevant to problem

12. Empathy Map

13. Problem Definition Creates Insight
User + Need = Insight

14. DESIGN

15. Interaction Design Process
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final Product

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. How MightWe … ?
• Short questions that launch brainstorming

18. Brainstorming
• Best with interdisciplinary team

19. MindMapping

20. Other Products in Market
• Notice all the iPod look-alikes?

21. Tools for Effective Design
! Personas
! Scenarios
! Storyboards (comics, movie technique)
! Wireframes and Mock-ups

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. 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. 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. 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. 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. 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. Example Storyboard

30. Persona + Storyboard

31. 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

32. Wireframes

35. 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

36. FunMe Mobile AR Wireframe/Mockup
http://www.yunnuocheng.com/funme/

37. GlassSim – http://glasssim.com/
▪ Simulate the view through Google Glass
▪ Multiple card templates

38. PROTOTYPE

39. Interaction Design Process
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final Product

40. How can we quickly
prototype interactive
experiences with little
or no coding?

41. Why Prototype?
▪ Quick visual design
▪ Capture key interactions
▪ Focus on user experience
▪ Communicate design ideas
▪ “Learn by doing/experiencing”

42. Design/PrototypingTools

43. Typical Development Steps
▪ Sketching
▪ Storyboards
▪ UI Mockups
▪ Interaction Flows
▪ Video Prototypes
▪ Interactive Prototypes
▪ Final Native Application
Increased
Fidelity &
Interactivity

44. 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

45. Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator

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. Paper Prototyping

48. 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)

49. Paper Prototyping
• https://www.youtube.com/watch?v=85muhAaySps

50. Physical Prototype

51. Google Glass (2011 - )

52. Google Glass Prototyping
https://www.youtube.com/watch?v=d5_h1VuwD6g

53. Early Glass Prototyping

54. Early prototyping

55. Early prototyping

56. Early prototyping

57. Early prototyping

58. Early prototyping

59. Earlyprototyping

60. Early prototyping

61. Transitions

63. Interactive Sketching
• Pop App
• Pop - https://popapp.in/
• Combining sketching and interactivity on mobiles
• Take pictures of sketches, link pictures together

64. Using Pop

65. ▪ 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

66. UI Concept Movies

67. EXAMPLE:
SKETCH TO VIDEO

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. AR Hockey Concept
https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/

70. Sketched Projected Content

71. Game Setup

72. Paper/Experience Prototypes
• Having people act out the game

73. Physical Mockup

74. Concept Video
https://vimeo.com/79285725

75. 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/

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. Proto.io - Interface

78. Limitations
▪ No access to 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. www.empathiccomputing.org
@marknb00
mark.billinghurst@unisa.edu.au