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

Today App/paper talks Back to paper prototyping

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

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

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

Presentations Mohammed on KitCam Papers: Rose, Mel, Curtis

Break

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

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

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

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

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

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

Fidelity Example

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

What is this device?

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

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.

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.

Low Fidelity Prototyping

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

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

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

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

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

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

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.

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)

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!!!

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!

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.

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!

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.

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

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.

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

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”

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

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

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 testing http://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

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

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

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