Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.
-
Upload
pamela-morgan -
Category
Documents
-
view
216 -
download
0
Transcript of Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.
![Page 1: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/1.jpg)
Mobile HCI IS 698/800
Spring 2013Shaun Kane
Week 9: Audio / nonvisual interfaces
![Page 2: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/2.jpg)
2
Today
• App/paper talks• Back to paper prototyping
![Page 3: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/3.jpg)
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
![Page 4: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/4.jpg)
4
Events tomorrow
• Talk: Elliot Cole, Institute for Cognitive Prosthetics, http://brain-rehab.com
• ITE 404, 1:30-2:30pm
• IS/HCC Research Competition• ITE 4th floor, 2:30-3:30pm
![Page 5: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/5.jpg)
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
![Page 6: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/6.jpg)
6
Presentations
• Mohammed on KitCam• Papers: Rose, Mel, Curtis
![Page 7: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/7.jpg)
7
Break
![Page 8: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/8.jpg)
8
Paper prototyping
• A brief introduction
• (Some slides from Amy Hurst, IS 403)
![Page 9: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/9.jpg)
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
![Page 10: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/10.jpg)
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
![Page 11: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/11.jpg)
Horizontal vs. Vertical
Horizontal“thin” prototype
Vertical“thick” prototype
![Page 12: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/12.jpg)
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
![Page 13: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/13.jpg)
Fidelity
• Designers create prototypes at multiple levels of detail, or Fidelity
• Example: Web sites are iteratively refined at all levels of detailSite Maps Storyboards Schematics Mock-ups
Low HighFidelity
![Page 14: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/14.jpg)
Fidelity Example
![Page 15: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/15.jpg)
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
![Page 16: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/16.jpg)
What is this device?
![Page 17: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/17.jpg)
A prototyping tale…
Anyone know what this device is?
![Page 18: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/18.jpg)
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
![Page 19: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/19.jpg)
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.
![Page 20: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/20.jpg)
20
![Page 21: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/21.jpg)
Low Fidelity Prototyping
![Page 22: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/22.jpg)
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
![Page 23: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/23.jpg)
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
![Page 24: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/24.jpg)
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
![Page 25: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/25.jpg)
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
![Page 26: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/26.jpg)
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
![Page 27: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/27.jpg)
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
![Page 28: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/28.jpg)
Index Cards (Example)
• Include enough detail for users to interact with the prototype
![Page 29: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/29.jpg)
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)
![Page 30: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/30.jpg)
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?
Prototype at the right fidelity!!!
WRONG!!
![Page 31: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/31.jpg)
Make a Low Fidelity PrototypeOnce 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!
![Page 32: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/32.jpg)
Fancier Low Fidelity PrototypesOnce 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.
![Page 33: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/33.jpg)
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!
![Page 34: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/34.jpg)
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”
![Page 35: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/35.jpg)
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
![Page 36: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/36.jpg)
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.
![Page 37: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/37.jpg)
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
![Page 38: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/38.jpg)
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”
![Page 39: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/39.jpg)
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
![Page 40: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/40.jpg)
Wizard of Oz Examples
• 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
![Page 41: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/41.jpg)
Prototyping Examples
• Roll Call: http://www.youtube.com/watch?v=jQnfcJ8jZaU
• Pieces of paper as overlays:
http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related
• Cell phone testinghttp://www.youtube.com/watch?v=Bq1rkVTZLtU&feature=related
• Prototype usability testing http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=related
• http://www.youtube.com/watch?v=_g4GGtJ8NCY• http://www.youtube.com/watch?v=9wQkLthhHKA
![Page 42: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/42.jpg)
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
![Page 43: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/43.jpg)
43
What makes a good paper prototype
• Has enough features to test
• Clear / easy to read
• But not too polished
![Page 44: Mobile HCI IS 698/800 Spring 2013 Shaun Kane Week 9: Audio / nonvisual interfaces.](https://reader035.fdocuments.net/reader035/viewer/2022081519/56649d9c5503460f94a846f4/html5/thumbnails/44.jpg)
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