Design and Prototyping

CS 5115Fall 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

• 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/

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

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

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?

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.

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

20

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