Slide 1

Prototyping and Design HCC 729 2/27/14

Slide 2

Whats new? Inspirations / UI design Questions about assignments Feedback on user tests Interesting UARs Other surprises

Slide 3

How to prototype your ideas Partially adapted from ac4d online materials

Slide 4

http://library.ac4d.com/

Slide 5

DAVID KELLY, IDEO Humans are really interesting. If you show them your idea in a prototype form, very few people will tell you whats right about it But everybody will tell you whats wrong with it.

Slide 6

What is a Prototype?

Slide 7

What is a prototype? Prototype = working model Common in almost every field of engineering design Airplanes, chemical structures, architecture In HCI Prototypes are Full-size or to scale Fully or partially functioning Limited representation of an idea Virtual or physical

Slide 8

Prototype examples

Slide 9

Prototype Examples A series of screen sketches (paper) A storyboard, cartoon-like series of scenes illustrating key points of a scenario A PowerPoint Slide show A video simulating the use of a system A piece of software with limited functionality written in the target language or in another language An electronic mock-up (hardware) A cardboard mock-up

Slide 10

Why Prototype? Why bother making one? We are all experts, right?

Slide 11

Why Prototype? To identify user interface and functional requirements Almost impossible to specify in advance Cant always get things right the first time

Slide 12

Why Prototype? Reveals problems/prevents mistakes Building artifacts immediately leads to costly errors We can often avoid expensive development by building reasonable prototypes

Slide 13

Why Prototype? Enables quick evaluation and feedback throughout design process Fosters discussion, reflection and innovative ideas (from designers and users): concrete artifact Keeps design focused on users Cheap, easy way to test designs with users Help choose between design alternatives (risky/critical features, go/no-go decisions) Help answer specific questions Users enjoy prototyping and feel involved Provides continuous feedback on the current design situation

Slide 14

Prototyping: When/How? Brainstorm different representations Choose a representation Rough out interface Style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Limited field testing Alpha/Beta tests Low fidelity paper prototypes Medium fidelity prototypes High fidelity prototypes Working Systems Early Design Late Design

Slide 15

Prototyping Stages Redesign Evaluate Prototype Design

Slide 16

ALL PROTOTYPES INVOLVE COMPROMISE Choose your compromises wisely

Slide 17

Prototype Compromises Examples of compromises in software- based prototyping: Slow reaction time Limited functionality Use placeholder images: clipart, stock icons Simulate data or input Two common types of compromise: horizontal and vertical

Slide 18

Horizontal vs. Vertical Horizontal thin prototype Vertical thick prototype

Slide 19

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

Slide 20

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 Low High Fidelity

Slide 21

Fidelity Example

Slide 22

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 Will cover in a future lecture.

Slide 23

Slide 24

What tools do I need? Suggestions?

Slide 25

What is this device?

Slide 26

Slide 27

A prototyping tale Anyone know what this device is?

Slide 28

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

Slide 29

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. The basic Pilot 1000 retailed for $299, half the price of a Newton.

Slide 30

Additional information When working out the Palm's handwriting recognition system, Graffiti, Hawkins said he scribbled notes all day on a pad of paper. But he didn't write the letters side by side. Instead he scrawled them one on top of each other -- just the way it's done on the Palm -- ending up with indecipherable blobs on the page. Hawkins told how his make-pretend method led him to conclude that voice recognition will never be a good way to control computers -- a notion that goes against current wisdom, including Microsoft's, which is sinking millions of dollars into researching the endeavor. Hawkins said when he's sat around pretending to control his computer by voice the experience is unsatisfactory and uncompelling. Quotes from wired.com article about Jeff Hawkins: http://www.wired.com/science/discoveries/news/1999/10/32010

Slide 31

Result of Newton Redesign

Slide 32

Low Fidelity Prototyping

Slide 33

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

Slide 34

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

Slide 35

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

Slide 36

Low Fidelity Prototypes Sketching is important Dont be inhibited about drawing ability, practice simple symbols Develop your own symbols and icons PeopleComputer Interactions

Slide 37

Paper Prototyping Rules Set deadline (dont spend too long) 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, markup, and iterate

Slide 38

Tools of the trade

Slide 39

Index Cards Index cards (3x5) 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

Slide 40

Index Cards (Example) Include enough detail for users to interact with the prototype

Slide 41

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)

Slide 42

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

Slide 43

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!

Slide 44

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 its own window These can be used to dynamically simulate the entire interface following a storyboard, or flow.

Slide 45

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!

Slide 46

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 dont fall into Local Maximum

Slide 47

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

Slide 48

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.

Slide 49

Testing with low fidelity prototypes Like conducting a user test / think aloud Concrete tasks Quiet environment Let the user guide the process One experimenter acts as the computer

Slide 50

Medium Fidelity Wizard of Oz (to come later)

Slide 51

High Fidelity Prototyping Not covered in this class

Slide 52

Additional Prototyping Examples

Slide 53

http://www.nngroup.com/reportsprototyping/video_stills.html

Slide 54

Slide 55

Slide 56

Slide 57

Prototyping Examples Pieces of paper http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related Simulated screen with paper http://www.youtube.com/watch?v=oITeUEjrY3Q&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=L7oPR2aTGlM&feature=related Complete prototyping process http://www.youtube.com/watch?v=5Ch3VsautWQ Kids game design (what not to do) http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related

Slide 58

Remember the Hick-Hyman Law With every additional choice, the time it will take for one to make a selection increases. When prototyping products, systems, and services, Less = More. Try to prototype the variables that need the most attention or are vital to the user achieving their goal.

Slide 59

For next week Assignment Readings

Slide 60

Required Usability Engineering, Chapter 7

Slide 61

Assignment Create a low-fidelity prototype of a redesign for the website you are studying This prototype should support 5 tasks that you have identified as problematic in either the HE or TA. Your prototype must be on paper Your prototype can be hand drawn, or created on the computer You do not have to worry about color / type

Slide 62

Assignment (deliverables) Bring it in Feel free to design with your users. Write 100-200 words about what you focused on in your design, and the design decisions you made

Slide 63

In-Class Exercise Identify (in groups) the most important interactions for your redesign May need to revisit CI UARs May need to revisit proposed solutions Decide what medium you will use to prototype those interactions Sketch out a paper prototype of *one* solution