1. Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces
Mobile HCI IS 698/800
Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces

2. Today
App/paper talks
Back to paper prototyping

3. Admin Grades for A1, G1-G2 back (by email) Friday 5pm
Or everyone gets an A
Read them already, in general good
A2: back in 2 weeks or everyone gets an A (and feedback)
Moved back A3/G3 deadlines for paper prototyping time today

4. Events tomorrow
Talk: Elliot Cole, Institute for Cognitive Prosthetics,
ITE 404, 1:30-2:30pm
IS/HCC Research Competition
ITE 4th floor, 2:30-3:30pm

5. For next week Video editing lab, 5:30-7 in ENGR 005b
Project group: does someone in your group have an iDevice?
Bring it (and cables) to class
Record 3 minutes of video (talking about your project)
I’ll provide demo video but no tech support after

6. Presentations
Mohammed on KitCam
Papers: Rose, Mel, Curtis

7. Break

8. Paper prototyping A brief introduction
(Some slides from Amy Hurst, IS 403)

9. Why prototype? Show an example of what the interface might be like
Generate/explore different options
Proof of concept “in real life”
Find problems before
Get feedback from stakeholders, peers, etc
Don’t have time to build the real thing

10. What makes a good prototype?
As close to reality as possible
Quick and cheap to make
Easy to change
Tied to requirements/goals/use cases
Clearly illustrates the main idea
Simple, overly complex, focused
Designed with user in mind
What makes a bad prototype?
Not legible, can’t tell what’s going on
Takes too much time
Difficult to change/unwilling to change

11. Horizontal vs. Vertical
“thin” prototype
Vertical
“thick” prototype

12. Horizontal vs. Vertical
Horizontal Designs
First level of user interface is fully present
No, or limited, functionality (but looks complete)
Fast implementation
Full extent of interface can be tested, but not in a real-use context
Often does not capture the interaction “feel”
Vertical Designs
Restricted to a subset of the system
This subset offers the interface and functionality
Can undertake realistic testing

13. Fidelity
Designers create prototypes at multiple levels of detail, or Fidelity
Example: Web sites are iteratively refined at all levels of detail
Site Maps
Storyboards
Schematics
Mock-ups
Difference between storyboard - site map: site map on stickynotes which can be rearranged to explore the link structure of this webpage.
Fidelity
Low
High

14. Fidelity Example

15. Fidelity in Prototyping
Low Fidelity
Quickly made representations of interface, interaction is imagined
Medium Fidelity
Prototypes that are more finalized than low fidelity, simulate interaction
High Fidelity
Prototypes that look like the final product, build interaction elements
In this class, we focus on low prototyping – get the ideas across

16. What is this device?

17. Anyone know what this device is?
A prototyping tale…
Anyone know what this device is?

18. The Apple Newton First significant PDA (1993)
Handwriting recognition built into it!
Huge failure on the market.
Too big and heavy to carry
Too slow to run most applications
Handwriting detection was not very accurate
Today I will start with one more blooper, and how the designers fixed it as a introduction to HCI methodology.

19. Redesigning the Newton
After failure of the Newton, two of its inventors left Apple to design a new device and used techniques from all areas of HCI.
Identified that the Newton failed because it was too big and too slow.
Focused on exploring the form of the device through “block of wood prototypes” which Jeff Hawkins carried around to decide what the correct form should be.
Redesigned the hardware specifications so it would fit with the smaller form.
Found paper to read to fill the details of this story, still looking for images.

21. Low Fidelity Prototyping

22. Why Use Low Fidelity Prototypes
Traditional methods take too long
Sketches -> prototype -> evaluate -> iterate
Can simulate the prototype
Sketches -> evaluate -> iterate
Sketches act as prototypes
Designer “plays computer”
Other design team members observe and record
“Kindergarten” implementation skills.
Allows non-programmers to participate

23. Low Fidelity Prototyping
Uses a medium which is unlike the final medium, e.g. paper, cardboard represent software
Quick, cheap and easily changed
Support the exploration of alternative designs and ideas
Best in early stage of development and not intended to be final product
For exploration ONLY: concepts, look and feel, iron out usability issues early on
Examples
Sketches of screens, task sequences, etc
“Post - it” notes
Storyboards

24. Low Fidelity Prototypes
Paper Prototypes
Paper mock-up of the interface look, feel, functionality
Quick and cheap to prepare and modify
Purpose
Brainstorm competing representations
Elicit user reactions
Elicit user modifications / suggestions

25. Low Fidelity Prototypes
Sketching is important to low fidelity prototyping
Don’t be inhibited about drawing ability, practice simple symbols
Develop your own symbols and icons
People
Computer
Interactions

26. Paper Prototyping Rules
Set deadline (don’t want to use too much time)
Draw window on large paper
Draw different screen regions on index cards and them put on the window paper
Ready responses for any user action (“magic mouse” can make anything a link)
Photocopy to make test version
Test and iterate

27. Index Cards Index cards (3”x5”)… a great size!
Each card represents one screen or one element of a task
Great for software prototypes with multiple screens
Website design
Mobile devices
Windows of software

28. Index Cards (Example)
Include enough detail for users to interact with the prototype
I don’t love this example b/c they used some tools to make the prototype look more fancy.

29. Make a Low Fidelity Prototype
This example gives an overview of the layout without any detail - a good starting point
Numerous alternatives can be quickly created without worrying about details
Should be produced in pencil (so you can easily change it)
Should be hand-drawn (rulers take too much effort)

30. Is this a good low fidelity prototype?
An example of a “tidy” prototype
More difficult to change this prototype than hand drawn sketches (even if you use a fancy drawing package)
It is highly unlikely that the first (or 2nd, or 3rd, or 4th) designs will be completely correct
Designs that are hard to amend, won’t be amended.
No benefit over the hand-drawn sketches, just took longer to make, and less likely to get good feedback
Do you really want to make one of these for all 10 of the designs you want to evaluate?
WRONG!!
Prototype at the right fidelity!!!

31. Make a Low Fidelity Prototype
Once you like your layout, you can focus on details of the design
example data values, menu content, buttons, labels, etc
More specific layout of interface objects
You can even annotate your paper prototype!

32. Fancier Low Fidelity Prototypes
Once the details are ironed out, you can create your interface “toolkit”
Cut out each of the components (windows,dialogs,menus,etc) into it’s own window
These can be used to dynamically simulate the entire interface following a storyboard, or flow.

33. Useful Low Fidelity Tools
Large, heavy, white paper
Index cards
Tape, stick glue, correction tape
Pens & markers (many colors and sizes)
Large sheet of foam core, poster board, butcher paper
Scissors, X-acto knives
Band-aids
Explore your local art store for supplies!

34. Low Fidelity Advantages
Can “build” entire site quickly
No expensive equipment required
Can simulate almost anything
Anyone can implement prototypes
Anyone can participate in your design process!
Fast iterations: # iterations has positive impact on quality of final design.
Always want to explore multiple ideas, so you don’t fall into “Local Maximum”
Talk about local maximum.

35. Low Fidelity Disadvantages
Not detailed enough to implement from
Need to be facilitated when presented to users
Does not address issues that arise from implementation
Some interactions are hard to simulate with paper
dragging, pull down menus, selections
system speed/latency
Form is not always clear
device size
ergonomics
appearance
Can be a barrier to spend the effort to create prototypes

36. Summary: Low Fidelity Prototypes
Traditional methods take too long, can do in a few hours
No expensive equipment required
Can simulate almost anything
Anyone can implement
Fast iterations: # iterations has impact on quality of final design.

37. Wizard of Oz A method of testing a system that does not exist yet
Example: a system that transcribes text.
What the user sees
The Wizard

38. Wizard of Oz Human “Wizard” simulates system response
Interprets user input according to an algorithm
Controls computer to simulate appropriate output
Uses real or mock interface
Wizard sometimes visible, sometimes hidden
“pay no attention to the man behind the curtain”

39. What is this good for?
Test ideas that would be hard to build prototypes of e.g. complex human-like reasoning
Artificial intelligence systems
Medical diagnosis could be simulated with a doctor “wizard”
Adding simulated and complex vertical functionality
Testing futuristic ideas

40. Wizard of Oz Examples Mobile devices Intelligent Agents
Person trained to listen to mobile user and wait for them to ask a question, when question is asked, they do a Google search, and give them result
Shows us how people would use the system, and helps understand what the intelligent agent should do.
Mobile devices

41. Prototyping Examples
Roll Call:
Pieces of paper as overlays:
Cell phone testing
Prototype usability testing

42. Testing paper prototypes
Takes 3 people (ideally):
The user
Someone to take notes / describe tasks
Someone to be the “brain” of the prototype
This is sometimes known as “Wizard of Oz” prototyping
Give users structured tasks and activities
Be ready to put together new screens on demand

43. What makes a good paper prototype
Has enough features to test
Clear / easy to read
But not too polished

44. Activity today
Get started on paper / low fi prototypes for your project
20 minutes: sketch out paper prototype
Brainstorm tasks to test
10 minutes: introduce to other group, walk through it