Post on 03-Jan-2016
description
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
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, 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
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