Design and Prototyping

1. Design and Prototyping CS 5115 Fall 2014 September 19

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

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

4. Examples and References • http://www.nngroup.com/reports/prototyping/video_stills.html • http://www.paperprototyping.com/references.html • http://www.alistapart.com/articles/paperprototyping • http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups • http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/

5. Let’s watch some videos • https://www.youtube.com/watch?v=FS00UIo12Xk • http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/ (1st video) • http://www.youtube.com/watch?v=GrV2SZuRPv0&list=TLUW7xIcYFqfQ • http://www.youtube.com/watch?v=V8LNDqMIapY&list=TLL0ibcpJyZas • http://www.youtube.com/watch?v=_g4GGtJ8NCY • http://www.youtube.com/watch?v=9wQkLthhHKA&list=TLUW7xIcYFqfQ

6. 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

7. LoFi limits • Hard to capture timed, dynamic interaction

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

9. Resources • Paper widgets you can download and print http://www.userfocus.co.uk/resources/prototype.html • Electronic tools • Balsamic: http://www.balsamiq.com/ • Pencil: http://pencil.evolus.vn/en-US/Home.aspx • Stencils available for Android 4.0 http://evoluspencil.googlecode.com/files/Android.GUI_v2.zip

10. Prototyping Exercise

11. 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.

12. 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

13. 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

14. 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?

15. 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

16. 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. …

17. Another Persona • Nelson has been an English professor at Carleton College since 1975. 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.

18. 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?

19. Exercises

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

21. 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