friday january 27 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Friday, January 27 PowerPoint Presentation
Download Presentation
Friday, January 27

Loading in 2 Seconds...

play fullscreen
1 / 119

Friday, January 27 - PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on

Friday, January 27. Psychology and HCI Project Groups and Ideas Loren Terveen. Agenda. Foundations of User Interfaces. Field of Human-Computer Interaction (HCI) Psychology Computer Science Ergonomics other disciplines Focus: Design Computer Systems for Humans. Human Capabilities.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Friday, January 27' - sera


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
friday january 27

Friday, January 27

Psychology and HCI

Project Groups and Ideas

Loren Terveen

agenda
Agenda

SEng 5115

foundations of user interfaces
Foundations of User Interfaces
  • Field of Human-Computer Interaction (HCI)
    • Psychology
    • Computer Science
    • Ergonomics
    • other disciplines
  • Focus: Design Computer Systemsfor Humans

SEng 5115

human capabilities
Human Capabilities
  • Humans are very good at:
    • recognizing (images, voices, etc.)
    • associative memory
    • explaining phenomena
  • Humans are very limited in:
    • short-term memory
    • complex, multi-layered tasks
    • perfection

SEng 5115

quick review of human capabilities
Quick review of human capabilities
  • Goal: use this knowledge to guide design of interfaces that extend people’s abilities and compensate for weaknesses

SEng 5115

human cognition
Human Cognition
  • Attention
  • Perception and recognition
  • Memory
  • Learning
  • Problem solving and reasoning

SEng 5115

attention
Attention

SEng 5115

attention design implications
Attention – Design Implications
  • Make information relevant to the current tasksalient
  • 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

SEng 5115

attention example
Attention - Example
  • Consider two interfaces that support web search; evaluate both from the perspective of being able to focus on where to enter your query

SEng 5115

perception
Perception

SEng 5115

perception design implications
Perception – Design Implications
  • Icons should be distinguishable
  • Sounds should be clearly audible and distinguishable
  • Text should be legible and distinguishable from the background

SEng 5115

perception example
Perception - Example
  • My goal is to read new messages in an online forum

SEng 5115

slide18

Icons: are their meanings clear?

Attention: easy to focus on the right stuff?

SEng 5115

memory
Memory
  • Short-term vs. long-term
  • What people are good and bad at remembering

SEng 5115

memory design implications
Memory – Design Implications
  • Don’t make users remember complicated procedures
  • Design interfaces that promote recognition over recall
  • Give users resources to help them visually encode information (colors, icons, time stamps, etc.)‏

SEng 5115

slide22

More than 7 +- 2 items in menu – bad?

What about a voice menu?

SEng 5115

slide23

Visual representation of contacts – recognition, not recall

Spatial organization of information

Pictures

SEng 5115

learning
Learning

SEng 5115

learning design implications
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

SEng 5115

examples
Examples
  • Graphical editors
  • Simulation environments

SEng 5115

slide28

Can undo picture editing action

Can learn about actions that are not available in current context

SEng 5115

don norman design of everyday things
Don Norman – Design of Everyday Things
  • Based on knowledge of human capabilities, Norman offers principles for creating usable designs

SEng 5115

seven stages of action
Seven Stages of Action

Goals

Evaluation of

the interpretations

Intention to act

Interpreting

the perception

Sequence of actions

Execution of the

action sequence

Perceiving the state

of the world

The World

SEng 5115

but things can go wrong at any of these stages
But things can go wrong at any of these stages

Notably…

Gulf of Execution

Gulf of Evaluation

SEng 5115

gulfs of execution evaluation
Gulfs of Execution & Evaluation

Goals

Evaluation of

the interpretations

Intention to act

GULF OF EXECUTION

Interpreting

the perception

GULF OF EVALUATION

Sequence of actions

Execution of the

action sequence

Perceiving the state

of the world

The World

SEng 5115

the gulf of execution
The Gulf of Execution
  • Does the system provide actions that correspond to the user’s intentions?
  • The difference between intentions and allowable actions is the Gulf of Execution

SEng 5115

the gulf of evaluation
The Gulf of Evaluation
  • Does the system provide a physical representation that can be readily perceived and interpreted in terms of the user’s intentions and expectations?
  • The Gulf of Evaluation reflects the amount of effort that the person must exert to interpret the physical state of the system and determine how well the intentions have been met.

SEng 5115

the seven stages as design aids
The Seven Stages as Design Aids

Ask yourself how easily can the user:

Determine the function

of the system?

Tell if the system is

in the desired state?

Tell what actions

are possible?

Determine a mapping from

system state to interpretation

Determine a mapping from

intention to physical action?

Perform the action?

Tell what state the

system is in?

SEng 5115

determine the function of the system the big picture
Determine the function of the system? “The Big Picture”

http://www.peachpit.com/articles/article.aspx?p=1216150

principles for good design
… principles for good design
  • Conceptual models
  • Visibility and affordances
  • Mappings
  • Feedback  Causality
  • Constraints
  • Knowledge in the world
  • Standardization
  • Designing for error

SEng 5115

conceptual model
Conceptual Model
  • People are explanatory creatures – we will come up with models of how things work
  • Rule 1 of interface design – an interface is well designed when it behaves exactly as users think it will
  • Put it another way: the designer’s job is to make it easy for users to create the right model of the system

SEng 5115

designer and user models

Design Model

User Model

System Image

Designer and user models

Goal: user model and design model should be identical

Communication from designer to user is via the system image

So system image must lead user to acquire a user model equal to the design model

Designer

User

System

SEng 5115

so how does a designer help users acquire the right model
So how does a designer help users acquire the right model?
  • Visibility and Affordances
  • Mappings
  • Feedback  Causality
  • Constraints
  • Knowledge in the World
  • Standardization
  • Designing for Error

SEng 5115

visibility
Visibility

SEng 5115

affordances
Affordances

SEng 5115

affordances in guis
Affordances in GUIs?
  • Does a button icon afford clicking? Does a scrollbar afford scrolling?
  • Maybe… but what does the click mean?
  • Meaning is arbitrary, and is assigned by designers
  • Norman: “‘I put an affordance there… I wonder if the object affords clicking…’ affordances this, affordances that. And no data, just opinion. Yikes! What had I unleashed upon the world?”
  • Bottom line – affordances aren’t as useful in GUIs as in physical design

SEng 5115

mappings
Mappings

SEng 5115

mappings examples
Mappings Examples
  • Cup lids
  • Stove: which dial controls which burner?
  • Light / Ceiling Fan
example turning on burners on a stove
Example: turning on burners on a stove
  • Which dial controls which burner?

SEng 5115

slide54

Why don’t all stoves use this design?

  • Is it ugly? More expensive? Less safe? …?

SEng 5115

feedback
Feedback

SEng 5115

constraints
Constraints

SEng 5115

put knowledge in the world
Put knowledge in the world
  • So users don’t have to keep it all in their heads
    • Menus, toolbars
    • Agendas
    • Graphical workspaces
  • Provide memory aids
    • so users don’t have to remember information between screens

SEng 5115

knowledge in the head vs in the world
Knowledge: in the head vs. in the world
  • Retrieval
  • Learning
  • Efficiency of use
  • Ease of first-time use
  • Aesthetics

SEng 5115

slide60

Knowledge In The World

Recognition, not Recall

Partial, “good enough” descriptions stored

SEng 5115

to err is human
To err is human…
  • Slips – errors in automatic actions: easy to detect
    • Capture errors
    • Description errors
    • Data-driven errors
    • Associative action errors
    • Loss of activation errors
    • Mode errors
  • Mistakes – errors in intention or logic: hard to detect

SEng 5115

preventing errors
Preventing errors
  • Avoiding slips
    • Different things should look different
    • Consistent confirmation is not useful
    • Immediate confirmation may not be useful
  • Simplify tasks
    • Make task structure narrow or shallow

SEng 5115

oops i opened my trunk
Oops, I opened my trunk

Controls to open trunk and access gas tank are right next to each other

SEng 5115

more ways to prevent errors
More ways to prevent errors
  • Support recovery
    • Undo and backups
    • Support exploration toward a goal
  • Prevent errors with forcing functions – failure in one step means later steps can’t be done
    • Make illegal actions unavailable
    • Disable buttons or menus
    • Turn illegal actions into legal ones

SEng 5115

last resort standardization
Last resort - standardization
  • Fewer things to memorize
  • Quicker to learn
  • Clocks should run clockwise
  • But note that standards are culture-dependent!

SEng 5115

standards and cultures
“Standards” and cultures
  • What does the color red mean?
    • US – danger, warning, …
    • India – purity
  • What color should a wedding dress be?
    • US – white
    • India – red & yellow
  • How do you turn on a faucet?
    • US – counter-clockwise
    • UK – clockwise
  • Icons – mailboxes, trashcans, …
  • India: washing machines, cereal

SEng 5115

a usable design scissors
A usable design - scissors
  • Affordances
    • Holes for something to be inserted
  • Constraints
    • Big hole for several fingers, small hole for thumb
  • Mappings
    • Between holes and fingers suggested and constrained by appearance
  • A cultural standard
  • Conceptual model
    • Implications of actions clear – feedback is immediate

SEng 5115

a problematic design digital watch
A problematic design – digital watch
  • Affordances
    • 4 buttons to push, but not clear what they do
  • Constraints, mappings
    • Unknown – no natural relations or constraints
  • Transfer
    • Little/none from analog watches
  • Standardization
    • Still quite variable

SEng 5115

more examples
More examples

SEng 5115

design checklist
Design Checklist
  • Affordances
    • Do interface objects afford their operations?
    • Do interface objects afford illegal operations?
    • Is it easy to tell what can be done with objects?

SEng 5115

design checklist1
Design Checklist
  • Visibility of Controls
    • Are all controls clearly visible on the screen or in menus?
    • Is it easy to tell how to do something?Are there critical parameters hidden away?

SEng 5115

design checklist2
Design Checklist
  • Feedback
    • Does every input provide appropriate feedback?
    • Is it easy to determine the effect after an operation?

SEng 5115

design checklist3
Design Checklist
  • Conceptual Models
    • What is the user’s model of the application?
    • How will the user get a correct model?

SEng 5115

design checklist4
Design Checklist
  • Mappings
    • Are there clear correspondences between controls and their objects?
    • Is graphical layout exploited (horizontal,vertical)?

SEng 5115

design checklist5
Design Checklist
  • Constraints
    • Does the application constrain the user to legal operations?
    • Do constraints help the user simplify the problem?

SEng 5115

design checklist6
Design Checklist
  • Knowledge in the World
    • Is the user expected to remember many things?
    • Is the user expected to remember things from screen to screen?
    • Is relevant information kept on the screen?

SEng 5115

design checklist7
Design Checklist
  • Error Avoidance/Handling
    • Is there an undo operation? Multi-level undo?
    • Are irreversible actions harder to perform?
    • Do forcing functions prevent errors?

SEng 5115

design checklist8
Design Checklist
  • Standardization
    • When making choices, does the application follow existing standards?
    • Is there a standard look-and-feel?
    • Was the application built using a standard set of tools?

SEng 5115

hall of fame office 2007 ribbon

Hall of Fame: Office 2007 Ribbon

Jesse Hensold

Andrew Seelke

minimizes gulf of execution
MinimizesGulf of Execution

Large Icons

High visibility

Icons utilize knowledge in the world andto minimize memory necessary

User can tell the state as the buttons highlight orange when selected.

Descriptive Icons

Icons provide natural mappings for functions by showing what they do: B for bold, I for Italics, abc for strikeout, etc.

minimizes gulf of execution1
Minimizes Gulf of Execution

Tabs

By using constraints to show functions relevant to intent, we maximize visibility while minimizing Gulf of Execution.

Allowed Microsoft to increase features without overwhelming the user.

Tabs are automatically selected based on what you are doing, providing good accessibility of the controls.

minimizes gulf of evaluation
Minimizes Gulf of Evaluation

Live Preview

Provides good feedback: While you hover on a function, it will change the selection on the fly to preview the outcome.

Undo

Uses the standard Ctrl+Z as well as an undo arrow to help you understand what just happened.

utilizes many good design patterns
Utilizes Many Good Design Patterns

Action Panel/Smart Menu

Multi-Level Undo

Clear Entry Point

Composite Selection

Illustrated Choices

Global Navigation

Extras On Demand

Deep Background

Center Stage

hall of fame
Hall of Fame
  • I think these improvements put the Office 2007 Ribbon in the Hall of Fame!
hall of shame office 2007 ribbon

Hall of Shame: Office 2007 Ribbon

Jesse Hensold

Andrew Seelke

slide93

The Ribbon does many things well, BUT…

    • Visibility: Crucial features hidden under the “Office Orb”, which is unlabeled, and is inconsistent with all other elements
    • Gulf of Execution: An incredible amount of things to choose from. The ribbon tries to make more visible at once, but that can become overwhelming.
      • Further, some features are hidden under “Contextual tabs”
      • Commonly used features (formatting) obscured when other tabs selected.
      • Result: Hunting for unfamiliar features (and even some familiar ones) produces frustration.
slide94

Violation of established Standards!

    • MS-Windows programs since earliest versions of Windows have had set of menus
      • Typically some commonality between programs: File menu, edit, help, etc..
      • Subsequent versions kept order of menu options largely the same – minimal adjustments.
violation of standards
Violation of Standards
  • Previously established conventions for Windows programs allowed new users to have a rough idea of where to look for things – not so with the Ribbon
  • Keeping menus and layout largely the same between versions (1.0 – 2003) allowed users familiar with one version to transition to the next with little difficulty – again, not so with the Ribbon.
  • No option to revert to previous, familiar UI

Bottom Line: Perhaps this UI is an improvement over the previous version, but even if it is, the radical overhaul violates established conventions so severely that it belongs in the Hall of Shame!

hall of fame or hall of shame

Hall of Fame or Hall of Shame?

Has a ‘Love it’ or ‘Loathe it’ reaction.

One of us loved it, one of us hated it.

hall of fame shame
Hall of Fame/Shame
  • Mikhil Masli and Chintan Patel, Fall 2008
pipette not good chintan patel pate0569@umn edu and mikhil masli masli@cs umn edu
Pipette – Not GoodChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏

Conventional Glass Pipettes

Way to use them

pipette not good chintan patel pate0569@umn edu and mikhil masli masli@cs umn edu1
Pipette – Not GoodChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏

Affordances:

Throwing, breaking, pouring?

Constraints:

Can suck from both sides?

Liquid could still enter the mouth.

Feedback:

No feedback other than sight.

Visibility:

Mark not clearly visible as you draw the liquid in.

Consistency:

All pipettes of this kind are quite consistent.

Mapping:

Which is the end to dip into the liquid and which is the other one?

Gulf of execution: BIG

At first sight, you don’t know that you have to suck at one end!

Gulf of evaluation: BIG

Poor visibility causes very little feedback and low accuracy.

pipette not good chintan patel pate0569@umn edu and mikhil masli masli@cs umn edu2
Pipette – Not GoodChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏

Conventional Glass Pipettes

Way to use them

HALL OF SHAME

pipette much better chintan patel pate0569@umn edu and mikhil masli masli@cs umn edu
Pipette – Much BetterChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏

Modern Mechanical Pipettes

Way to use them

pipette much better chintan patel pate0569@umn edu and mikhil masli masli@cs umn edu1
Pipette – Much BetterChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏

Affordances:

Dipping and clicking.

Constraints:

Dip at only one end. Click at only certain places.

Feedback:

A definitive click and sight of liquid in the tube.

Visibility:

Large push buttons, clear indicators of quantity.

Consistency:

Use is like a pen; so controls are like those of a pen. All pipettes of this kind are quite consistent.

Mapping:

Spout: Dip; Larger button: Draw liquid; Smaller button: Quantity.

Gulf of execution: SMALL

You know you have to dip and click.

Gulf of evaluation: SMALL

Strong feedback – both visually and by sound.

pipette much better chintan patel pate0569@umn edu and mikhil masli masli@cs umn edu2
Pipette – Much BetterChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏

Modern Mechanical Pipettes

HALL OF FAME

Way to use them

hall of fame shame1

Hall of Fame/Shame

Bryan Bell

Bobby Stockstead

hall of fame1
Hall of Fame

Internet Explorer 8

  • Standardization
    • Common control placement, such as back/forward buttons in top left and address bar spanning top
  • Designing for Error
    • Smart URL fill in (in case user forgets the ‘www.’ or similar.
  • Small Gulf of Execution
    • Simple to bring up or search for a web page
  • Good Feedback
    • Page navigation in progress is marked by spinning symbol & progress bar
  • Good Mapping
    • For the few buttons available, easy to see which one navigates forward and which one goes backward through browsing history
hall of shame
Hall of Shame

Internet Explorer 8 with toolbar add-ons (aka on steroids)

  • Poor Mapping
    • Many many buttons & search tools that do very similar things
  • Out-of-way Feedback
    • Most (if not all) actions in the “menu” direct their feedback in the content area...which is often the smallest section of the window. Note that this references the lack of the “Center Stage” design pattern
  • Unclear Affordances
    • Few buttons bear the semblance of actual buttons...could instead be multiple text/image banners
  • Poor Visibility
    • Many buttons have images to help them stand out, but it doesn't help when they are small, numerous, and clustered!
    • Some buttons don't even have text descriptors
hall of fame shame2

Hall of Fame/Shame

Tim OmbasaWeiping He

Rotary Phone vs. Modern Phone

hall of shame rotary phone
Hall of Shame: Rotary Phone
  • Affordance: User with large fingers may have a hard time
  • Constraints: mobility during phone use is limited
  • Feedback: poor
  • Knowledge in the world:

Have to remember how to

dial the phone

  • Design for error:

Have to dial number

From beginning

hall of shame rotary phone1
Hall of Shame: Rotary Phone
  • Gulf of Evaluation: wide – easy to phone the wrong person
  • Gulf of Execution: good (as long as user knows how to dial)
  • Feedback: not obvious that the

correct single digit was dialed

  • Memory: heavy burden

on the user

hall of fame modern phone1
Hall of Fame : Modern Phone
  • Feedback: Number(s) dialed are immediately shown on screen
  • Visibility: Better; numbers and letters are easy to see
  • Contrast: White and black buttons
  • Design for error: After misdialing, back button
  • helps user correct mistake
  • Memory: Call history, contacts
  • Shortcuts: redial, speed dial
  • Mapping & Alignment
project groups and ideas
Project Groups and Ideas
  • The redundancy principle
    • Make sure your group is one person larger than you need

SEng 5115

project proposal
Project Proposal
  • Essential elements
    • Identification of a need
      • Users
      • Lack of adequate current tools
    • Identification of an advantage
      • Special insight into problem
      • Unique skills

SEng 5115

first steps
First Steps
  • Figure out the domain of the project
  • Identify at least two willing users
  • Brainstorm as a group on your initial approach

SEng 5115

the proposal itself
The Proposal Itself
  • What is the domain or problem?
  • Who are the users and what do you know about them and their activities or tasks?
  • What are the best alternatives out there, and why aren’t they good enough?
  • What is your approach/insight?

SEng 5115

process
Process

Now

  • Projects needing people
  • People with project ideas

Next week

  • Rapid feedback
    • Serious concerns
    • Immediate issues

SEng 5115

project details
Project details
  • First deliverables
  • First rubric

SEng 5115