Date post: | 02-Jan-2016 |
Category: |
Documents |
Upload: | channing-marcel |
View: | 342 times |
Download: | 8 times |
1
UI Hall of Fame or Hall of Shame?
2
UI Hall of Shame!
How do you cancel?
3
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
4
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)
5
Bad User Interfaces
6
Bad User Interfaces
Hard to tell the difference between the two icons and names
7
UI Design Cycle
Design
Prototype
Evaluate
8
User-centered Design
“Know thy User” Cognitive abilities
* perception* physical manipulation* memory
Organizational / job abilities Keep users involved throughout
project
9
UI Hall of Fame or Shame?
View menu from Visual Forms* two options:
+Non-Visual Objects (e.g., formatting labels)+Source...
10
UI Hall of Shame
Terminology* what are “Non-Visual Objects” & how can you view them?
* why not “Formatting Labels” instead?
11
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
?
12
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
13
Good Graphic Design & Color Choice
Appropriately direct attention. How?* use color and layout
From IBM’s RealCD application
+black on black is a bad color choice+shouldn’t need label to tell you this is a button
14
Good Graphic Design & Color Choice (cont.)
Group related objects* alignment & spacing* decorations
A Toolbar from MS Word
Balance & white space Few fonts & colors (5 to 7 colors max.) Remember color deficiency (8% of males)
15
Provide Feedback
16
Feedback Placement
Where the eyes are* insertion point* screen cursor
Audio output* sounds* voice* when might this not be a good idea?
17
Error Prevention Why?
* avoid “fear of failure”* allow faster work
Suppress unavailable commands Confirm dangerous actions
18
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
19
Visual Illusions
Can you guess the woman’s age? Keep looking.
20
Color Guidelines
Avoid simultaneous display of highly saturated, spectrally extreme colors
Opponent colors go well together* (red & green) or (yellow & blue)
21
Pick Non-adjacent Colors on the Hue Circle
22
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
23
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
24
Design Model & User’s Model
Users gets model from experience & usage* through system image
What if the two models don’t match?
Design Model User’s Model
System Image
25
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!
26
Interface Hall of Shame or Fame?
For setting cache size in MS Internet Explorer (since changed)
Slider from 1% to 100%
27
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?
28
Why Model Human Performance?
To test understanding To predict influence of new
technology
29
The Model Human Processor
Developed by Card, Moran, & Newell (‘83)
Long-term Memory
Working MemoryVisual Image
StoreAuditory Image
Store
PerceptualProcessor
CognitiveProcessor
MotorProcessor
Eyes
Ears
Fingers, etc.
sensorybuffers(Dix)
30
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
31
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
32
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!
33
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
34
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
35
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-siteExample