Foundations of User- Centered Design
Jan 12, 2016
Foundations of User-Centered Design
Questions about the Project?• Done in groups• ~4 members• Projects must have at least two real users (who are
not members of the team)• Find a project that you can get excited about• Find people with shared goals, vision, and work
style• Get started now!
– If you have a project, start selling it
Types of Projects• Induce change:
– Take an existing interaction and make it more efficient or add new capabilities
• Invent new forms– Enable new behaviors
Refrain from• Building from the “ground up”• Investing too much in the “back end”• Yet another attempt at a well known or commonly
pursued interface:
– To do lists, grocery finders, course schedulers, apartment finders, mail or news readers, etc.
Friday
You will conduct a brainstorming activity with a small group.
You don’t NEED to have a specific idea for this.
Next Monday
You will each make a ONE MINUTE pitch of an idea.
You will submit two power point slides prior to class.
Hall of Fame or Shame?
• My task: after taking a cup and filling it with soda, I need to put a lid on the cup
Analysis
• Why is the first one a candidate for Hall of Shame, while the other is a candidate for the Hall of Fame?– Mappings
• But: must consider context
Exercise
• Another taste of what you’ll be doing….
A two-person game• Start with the numbers 1, 2, 3, ..., 9
• Alternate turns, taking one number at a time• Player one Xs out the number they want to take• Payer two circles the number they want to take
• A player wins when they have any 3 numbers that sum to 15– e.g., 1, 3, 9, 5 wins because 1+9+5 equals 15
• If numbers are all used with no winner, the game is a draw
OK, now try it another way
1
2
34
5
67
8
9
Now, observe
• Do you really need the numbers?
• An interface is a representation of a problem/task
• A well-designed interface can wholly transform a task, making it much simpler
Moving On – Today’s Objectives
• “Refresh your memory" of some basic human psychology
• Begin to discuss design principles based on these principles
The Core Process of UI Design
• Understand User Behavior
• Map Behavior to Interaction
• Evaluate
Human Cognition
• It’s Human-Computer Interaction, User Interface Design so we need to understand something about human capabilities
• … so a very brief overview of human cognitive capabilities as relevant to HCI
Human Cognition
• Attention
• Perception and recognition
• Memory
• Learning
• Problem solving and reasoning
Attention
• From the range of available possibilities, select what to concentrate on
• Visual or auditory scanning
• Factors that affect ease of focusing on the right stuff:– Specificity of goals– Information display
Attention – Design Implications
• Information relevant to the current task should be salient
• Graphical techniques – layout, ordering, organization, underlining, color, animation – can be used to achieve this goal
• But don’t visually clutter the interface: plain interfaces can be easier to use
Attention - Example
• My Task – Enter the query “task centered user interface design” into a search engine.
• Consider two interfaces that support web search; evaluate both from the perspective of being able to focus on where to enter your query.
Perception
• Acquiring information from the environment
• Involves using different senses • Vision is dominant sense for sighted people
• Results in internal experience of external events
Perception – Design Implications
• Icons should be designed so users can easily distinguish their meanings
• Sounds should be clearly audible and distinguishable
• Text should be legible and distinguishable from the background
Perception - Example
• My goal is to read the new messages in an online forum
Icons: are their meanings clear?
Attention: easy to focus on the right stuff?
Also true for auditory cues
• Microsoft Money generates the “Exclamation” sound whenever a new transaction is entered into an account.– Annoying in it’s own right– But is this the proper choice of sounds?
Memory• Short-Term Memory
– Instant, effortless recall – Severely limited capacity – “7 plus or minus 2”– “Chunking”– Fragile
• Long-Term Memory– “Unlimited” capacity– Takes time/effort to store and retrieve– Interpretative– Retrieval is context-sensitive– rote memory vs. relationships vs. explanation
Memory (continued)
• People are really good at remembering some things– Visual cues, especially faces
• People are much better at recognizing things than recalling them
• People are good at associative reminding• People remember the typical case and the
exceptions
Memory – Design Implications
• Don’t make users remember complicated procedures
• Limit number of items in text menus• Design interfaces that promote recognition
over recall• Give users resources to help them visually
encode information (colors, icons, time stamps, etc.)
More than 7 +- 2 items in menu – bad?
Groups of Contacts
Icons Representing
Individual contacts
Group Icons
Visual representation of contacts – recognition, not recall
Pictures
Spatial organization of information
Learning
• Acquiring new knowledge or skills
• Exploratory learning – learning by doing
• Scaffolding or “training wheels”
Learning – Design Implications
• Create interfaces that encourage exploration– Easy to try out and undo actions
• Design interfaces that constrain and guide users to select the right action
• Provide multiple, linked representations
Can undo picture editing action
Can learn about actions that are not available in current context
Problem solving and reasoning
• Conscious/reflective activity– Thinking over one’s options– Figuring out the best option or solution– Making a plan– Weighing pros and cons
Problem solving – Design Implications
• Provide the proper information and aids
• But, even better – design to make problem-solving and reasoning unnecessary
Example
• What’s the best flight from Vancouver to Montreal?– Time– Layovers– Plane changes– Price– …
Representation 1
AC 117 Vancouver Calgary 7:00 9:00
Cdn 321 Vancouver Calgary 9:00 12:00
Cdn 355 Calgary Montreal 13:30 19:30
AC 123 Calgary Toronto 12:30 16:30
AC 123 Toronto Montreal 16:45 17:30
* Time zones: van-cal + 1 ; cal – tor, mon + 2
Representation 2
Vancouver
Calgary
Toronto
Montreal
7 9 11 13 15 17
8 10 12 14 16 18
10 12 14 16 18
20
AC 117
AC 123
Cdn 321
Cdn 355
Another Example:Tax Preparation Software
• User doesn’t have to do computation
• User doesn’t have to figure out which form to use
• Instead, software poses questions that users are likely to be able to answer
Next Steps
• Reading: – Start reading DOET (Finish by Sept. 9)
• Project:– “It Bugs Me” Activity – Bring to class Friday
– Begin brainstorming ideas – Bring next Monday
• Next class:– Studio : “It Bugs Me” and getting to know each other