Wednesday, June 8, 2011

scratchpad是个好东西之May20:493 review-Design


Design 
Lesson 1
–  Most failures of human-machine system are due to poor designs that don’t recognize peoples’ capabilities and fallibilities
•  And the larger context of people’s use –  This leads to apparent machine misuse and “human error”
Lesson 2
–  Good design always accounts for human capabilities and the social context.
Many so-called human errors are actually errors in design.
Human factors became important as human performance limitations reached when handling complex machinery.
visual affordance 
visible constraints
mapping对应relation(eg.位置)
causality在一个动作后assume会继而发生的动作
positive transfer effects: previous learning/expectations apply/conflict new situation用过类似的对新的影响
population stereotype & idioms习惯用法(eg. keyboard, switch, faucet)
cultural associations各地物品不同(eg. mailbox, trashcan)
instructions
interactions
conceptual model: ppl have "mental models" of how things work, built from the above attributes, which allows them to mentally simulate operation of device. Models may be wrong particularly if the above are misleading.
-> implications clear of how the operating parts work, or must be learnt
Rule of thumb:
- cater to 95% of audience
        but 5% may be (seriously) compromised
- design for average is a mistake
        may exclude half audience
Don't expect others to act as you do or expect. 
Who do you design for?
- novices, casual, intermediate, expert
Metaphors in interface隐喻
def: represents a system object as if it were another type of object
purpose: utilize knowledge of familiar, concrete objects to understand abstract computer and task concepts
prob: inaccurate/naive conceptual model of the system
watch for: match user's conceptual task, restrict what they could do, set unrealistic expectations, mismatch
direct manipulation与abstraction对应 (combine. 纯粹DM太tedious,万一ill-suited也不好)
as if real-world rather than abstract system, the feeling of working directly on the task
central ideas: 
        - visibility of objects of interest
        - rapid, reversible, incremental actions
        - pointing and moving
        - immediate and continuous results
almost always based on a metaphor -> mapped onto facet of real world task semantics
object -> affordance, constraints
action -> causality, conceptual model
===================================
Design Representations
info visualization: graphics should reveal data, Tufte's principles
–  show the data 
–  not get in the way of the message 
–  avoid distortion
–  present many numbers in a small space 
–  make large data sets coherent 
–  encourage comparison between data 
–  supply both a broad overview and fine detail 
–  serve a clear purpose
bad ones: chart junk, fontitis, data density, small multiples(invite comparison, show time and change)
overview first, zoom and filter, then details on demand (eg. fisheye menu/text, infinite zoom, table lens
techniques:
  1. articulate (who, what task)
  1. user-centered/participatory/task-centered design
  2. user/task descriptions
  3.  evaluation tasks
  1. brainstorm designs
  1. user involvement, representation & metaphors
  2. low fidelity prototyping methods
  3. throw-away paper prototypes
  4. participatory interaction, walk through
  1. refined designs
  1. graphical screen design, interface/style guides
  2. high fidelity prototyping methods
  3. testable prototypes 
  4. usability testing, HE
  1. completed designs
  1. alpha/beta system, or complete spec
  2. field testing
========
Graphical Screen Design - CRAP
Contrast
Repetition(consistency, unity, format)
Alignment(visual flow, visually connected elt)
Proximity(group related elt, separate unrelated)
Grids
Others:
        visual consistency (repetition)
        visual organization (contrast, alignment, navigational cues)
        visual relationships (proximity, white space)
        familiar idioms (familiar ways of using GUI components)
        legibility & readability
        imagery (related type and position)
useful words:
, spatial tension
, explicit structure
, overuse of 3d effect (cluttered)
, differentiate/discriminate
, initial focus
, negative space and alignment
, economy (min # controls, min clutter)
, excessive display density
, excessive literal metaphors
choosing widgets:
        what must be displayed? (visual affordance, frequent actions)
        how to relate? (organize as chunks)
        what familiar/expected idioms?
widget complexity:
        avoid long path
        avoid deep hierarchy

No comments:

Post a Comment