Design and Prototyping CS 5115 Fall 2014 September 19

Agenda for today Project check-in – Due today! Introduction to Design Paper Prototyping Finishing personas Introduction to Android/Mobile Development

Paper (Low Fidelity) Prototypes Sketches of interface and task completion – paper, post-its, or screen drawings

Examples and References deo_stills.html deo_stills.html ml ml ping ping great-examples-of-sketched-ui-wireframes-and- mockups great-examples-of-sketched-ui-wireframes-and- mockups video-examples-of-paper-prototyping/ video-examples-of-paper-prototyping/

Let’s watch some videos examples-of-paper-prototyping/ (1 st video) examples-of-paper-prototyping/ =TLUW7xIcYFqfQ =TLUW7xIcYFqfQ =TLL0ibcpJyZas =TLL0ibcpJyZas =TLUW7xIcYFqfQ =TLUW7xIcYFqfQ

LoFi pluses Easy to produce Rapid iteration / generate then test – To get a good idea, get lots of ideas – Never look for the “best way” – look for hundreds of ways Users focus on the important stuff Bugs don’t halt testing Status is clear – proper expectations Designers don’t get emotionally invested

LoFi limits Hard to capture timed, dynamic interaction

What to prototype? Screen layouts and information display Work flow, task design Technical issues Difficult, controversial, critical areas

Resources Paper widgets you can download and print ype.html ype.html Electronic tools – Balsamic: – Pencil: Stencils available for Android v2.zip v2.zip

Prototyping Exercise

Prototyping Exercise, 1 Individually: sketch a campus kiosk system designed to help people find their way around the University of Minnesota campus. The kiosks will be located at a number of positions around campus.

Prototyping Exercise, 2 In groups of 3-4 – Review the individual prototypes – Pick a starting point for a second (revised) prototype – Draw a second prototype as a group

Prototyping Exercise, 3 Still in your group: select a task... – Find a building: get directions from current location to that building – Find a class: find the time and location of a class (for example, “User Interface Design” or “CS 5115”) – Find a person in the campus directory, get directions to their office And did you think about who your users were? Did you have an implicit persona in mind? Evaluate how well your prototype supports that task Redesign your prototype as necessary (If necessary) redraw your prototype for presentation to the class

Discussion How much difference was there between the individual designs? Did you think some were better than others? Why? How much did the task focus help? Did considering a task make you change your design significantly? How did you think about users and usage?

Personas Fictional user descriptions – Research-driven – Narrative Basis – Cluster users by relevant attributes – Identify clusters – Create “realistic” representatives – Helps you consider whether your design is appropriate 15

Example Persona Sara is a graduate student living in Minneapolis. She travels by plane about three times a year—about half of that time for conference trips for her University research group. When she travels on her own dollar, she is very price-conscious, and wants to be sure to get the lowest price, even if that involves obscure routes or indirect trips. When she travels for the University, she is happy to let their staff make the arrangements. As a computer scientist, Sara knows all about search engines and other computer systems. Sometimes this makes her think that the system may be hiding the best fares. … 16

Another Persona Nelson has been an English professor at Carleton College since He’s written several books of poetry and has been using computer word processors since 1980, but has only used two programs, WordPerfect and Microsoft Word. He doesn’t care how computers work; he stores all his documents in whatever directory they get put in if you don’t know about directories. 17

All these representations are concrete and specific Questions come in different kinds Some can be settled through abstract argument – Are there more real numbers than natural numbers? Some only can be settled empirically – Can students use OneStop.umn.edu to find out whether there is room to enroll in CS 5115? 18

19 Exercises

Exercise 1 Take a look at the student section of Define a task (not scenarios) students might try to accomplish with the site – Remember what tasks are used for Present tasks, discuss, ask questions 20

Exercise 2 You’re in charge of designing the software for information kiosks for the Minneapolis / St. Paul airport. The kiosks will help travelers do common tasks, such as checking flight departure and arrival times and baggage claim locations, finding restaurants and shops, etc. Your job: – What sorts of user research methods would you use to find out about the user population? – Based on your experience and intuition, identify at least two categories of users – Write personas for these categories Factor out tasks if/as necessary 21