Lecture 2: Design Rules

Lecture 2: Design Rules

1. system-design problem

   • miscues
   • poorly differentiate options
   • problematic presentation / interaction design
   • lack of confirmation for destructive actions (lack of confirmation message for major action)

2. difficulties of 1st time use a tool

   • confusion
   • can't find info, icon, function, hard to learn
   • result: low performance & productivity & work; more error make; forgo this system

3. intro

   • guidelines (low-level) (specific)
   • principles (middle-level) (make comparison) [consistency, layout, alignment...]
   • theories (high-level)
   • design pattern

4. guidelines

   • navigate interface
     • accessibility guidlines (provide text & non-text element [audio, video...]; for all type ppl)
   • organizing display
     • consistency of date display, efficient info assimilation by user, minimal memory load on user, compatibility of data display wift data entry, flexibility for user control of data display
   • gettinng user attention
     • intensity; marking; size; choice of fonts, inverse video; blinking; colour; colour blinking; audio
   • facilitate data entry
     • similar sequences; fewer input actions; linked closely to display info format; control data-entry

5. principles of interface design

   • cope with user's skill level
     • 1. novice 2. knowledgeable intermittent 3. expert frequent
   • task profile
     • observe & interview users
   • 8 golden rules
     • 1. strive for consistency (ppl spend more time for inconsistency)
     • 2. enable frequent user to use shortcuts (process more faster)
     • 3. offer informative feedback for every user action (eg: pop up msg if want cancel; show loading icon...)
     • 4. design dialogs to yield closure (eg: 1 task hv multiple steps [1. comfirm order; 2. make payment; 3. confirm payment; 4. pop up msg "paymeny done"])
     • 5. error prevention & handling (show list for user choose; delete icon far way from save icon...)
     • 6. permit easy reversal of actions (can undo easily)
     • 7. support internal locus of control (user control UI; not system control user's tasks)
     • 8. reduce short-term memory load (user make decision on the spot; no need user to recall)

6. theories

   • descriptive
     • explanatory (observe behaviour; describeactivity)
       • taxonomy (overview; zoom; filter; details-on-demand; relate; history; extract)
     • prescriptive
     • predictive (predic uer performance so can do comparison)
   • human capacity
     • motor task (relate to human movement)
     • perceptual (relate to human vision)
     • cognitive (relate to human mental thinking)
   • Gestalt perception
     • figure-ground principle (bcuz of high contrast colour, user can focus on the text)
     • similarity principle (distinguish diff section; distinguish links from regular text)
     • proximity principle (closeness; component close to each other have relation)
     • common region (space determine the region)
     • continuity (element arrage in line / curve have relation)
     • closure (broken line in btwn, can easily recignize shape/ word)
     • focal point (have outstanding element to grab user attention)
   • GOMS (Goals, Operators, Methods, Selection)
   • Key-strokemodel (KLM)
     • Fitts's Law (time require to move pointer)
   • Norman's 7 stages of action
     • 1. forming the goal 2. forming the intention 3. specifying the action 4. executing the action 5. perceiving the system state 6. interpreting the system state 7. evaluating the outcome
     • Gulf of execution & Gulf of contribution
   • micro-HCI (focus on measurable performance; system function) & macro-HCI (focus on case study; comprising environment)
   • 11 Nielsen's usability engineering life cycle (know user, competitive analysis, setting usability goals, parallel design, participatory design, coordinated design of the total interface, apply guidelines and heurisyic analysis, prototyping, empirical testing, iterative design, collect feedback from field use)

7. design pattern

   • usability patterns
     • 1. system status feedback
     • 2. progress feedback
     • 3. warning
     • 4. undo
     • 5. abort
     • 6. step by step execution
     • 7. preferences
     • 8. favourites
     • 9. multi-level help
     • 10. structured text entry