UI Hall of Shame! • How do you cancel?
Human-Computer Interaction (HCI) • Human • the end-user of a program • the others in the organization • Computer • the machine the program runs on • Interaction • the user tells the computer what they want • the computer communicates results
User Interfaces • Part of a software program that allows • user to interact with computer • user to carry out their task • HCI = design, prototyping, evaluation, and implementation of user interfaces (UIs)
Bad User Interfaces • Hard to tell the difference between the two icons and names
Design Evaluate Prototype UI Design Cycle
User-centered Design “Know thy User” • Cognitive abilities • perception • physical manipulation • memory • Organizational / job abilities • Keep users involved throughout project
UI Hall of Fame or Shame? • View menu from Visual Forms • two options: • Non-Visual Objects (e.g., formatting labels) • Source...
UI Hall of Shame • Terminology • what are “Non-Visual Objects” & how can you view them? • why not “Formatting Labels” instead?
Attributes of Good UIs ? • Invisible • Minimal training required • easy to learn • High transfer of training • easy to remember • Predictable • Few errors • Easy to recover from errors
Attributes of Good UIs (cont.) • Allow people perform real tasks well • efficient • Flexible • Seem “intelligent” • “do the right thing” • People like it “It is easy to make things hard. It is hard to make things easy.” -- A. Chapanis, ‘82
From IBM’s RealCD application Good Graphic Design & Color Choice • Appropriately direct attention. How? • use color and layout • black on black is a bad color choice • shouldn’t need label to tell you this is a button
A Toolbar from MS Word Good Graphic Design & Color Choice (cont.) • Group related objects • alignment & spacing • decorations • Balance & white space • Few fonts & colors (5 to 7 colors max.) • Remember color deficiency (8% of males)
Feedback Placement • Where the eyes are • insertion point • screen cursor • Audio output • sounds • voice • when might this not be a good idea?
Error Prevention • Why? • avoid “fear of failure” • allow faster work • Suppress unavailable commands • Confirm dangerous actions
UI Hall of Fame or Shame? • Dialog box • ask if you want to delete • yes (green) • no (red) • Problems? • R-G color deficiency • cultural mismatch • Western • green good • red bad • Eastern & others differ
Can you guess the woman’s age? Keep looking. Visual Illusions
Color Guidelines • Avoid simultaneous display of highly saturated, spectrally extreme colors • Opponent colors go well together • (red & green) or (yellow & blue)
Conceptual Models • Mental representation of how object works & how interface controls effect it • People have preconceived models that you may not be able to change • dragging to trash deletes • Interface must communicate model • online help / documentation can help, but shouldn’t be necessary
Visual Clues (affordances) • Well-designed objects have affordances • visible clues to their operation • Poorly-designed objects • no clues • false clues • teapot with handle and spout on the same side
User’s Model Design Model System Image Design Model & User’s Model • Users gets model from experience & usage • through system image • What if the two models don’t match?
Design Guides • Provide good conceptual model • user wants to understand how interface control impacts object • Make things visible • if object has function, interface should show it • Map interface controls to user’s model • Provide feedback • what you see is what you get!
Interface Hall of Shame or Fame? • For setting cache size in MS Internet Explorer (since changed) • Slider from 1% to 100%
Interface Hall of Shame or Fame? • What if you have a big disk? (e.g., 40GB • forced to have at least a 400MB cache • takes away control from the user • What if they don’t know their disk size?
Why Model Human Performance? • To test understanding • To predict influence of new technology
Long-term Memory Working Memory sensory buffers (Dix) Visual Image Store Auditory Image Store Eyes Motor Processor Cognitive Processor Perceptual Processor Ears Fingers, etc. The Model Human Processor • Developed by Card, Moran, & Newell (‘83)
What is User-centered Design? • Developers working with target users • help define what the system will do & how • lots of iterative exploration & feedback • Think of the world in users terms • user & customer not the same person ->? • don’t design for manager’s work process • Understanding work process • points where humans and computers intersect • Not technology-centered/feature driven
What is Usability? • Ease of learning • faster the second time and so on... • Recall • remember how from one session to the next • Productivity • perform tasks quickly and efficiently • Minimal error rates • if they occur, good feedback so user can recover • High user satisfaction • confident of success
Understanding the User • How do your users work? • task analysis, interviews, & observation • How do your users think? • understand human cognition • observe users performing tasks • How do your users interact with UIs? • observe!
Involving the User • Users help designers learn • what is involved in their jobs • what tools they use • i.e, what they do • Developers reveal technical capabilities • builds rapport & an idea of what is possible • Users try prototype & comment on it • developers make incremental changes & iterate
Observation Techniques • In the work place • Use recording technologies • notebooks • tape recorders • video cameras • Ask users to think out loud while working • look for job-specific procedures / terminology • Show users transcript & ask about it
Summary • User-centered design is different than traditional methodologies • Leads to solving problems up front (cheaper) • Know thy user & involve them in design • Evaluate this web-site Example