Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. CS3240 - Human Computer InteractionLecture 2 : Guidelines , Principles and Theories Lecturer : Dr Bimlesh Wadhwa dcsb @n s ed sg
  2. 2. Last week… 1-2 2-2
  3. 3. “Know thy user”• Age, gender, physical and cognitive abilities, education, education cultural or ethnic background background, training, motivation, goals and personality• Multi-layer designs based on skill level – Novice or first-time users – Knowledgeable intermittent users – Expert frequent users 1-3 2-3
  4. 4. Identify the tasks• Task Analysis usually involve long hours observing and interviewing users• Relative task frequencies 1-4 2-4
  5. 5. Today …Guidelines, Principles, and Theories 1-5 5
  6. 6. Guidelines 1-6 2-6
  7. 7. Insights by p g y practitioners -caution against poor quality. 1-7 2-7
  8. 8. 1-8 2-8
  9. 9. 1-9 2-9
  10. 10. // h / / t l/ bilit 1-10 2-10
  11. 11. Navigating the interface p guidelines#:• Sample g – Standardize task sequences – Ensure that embedded links are descriptive – U unique and d Use i d descriptive h di i ti headings – Use check boxes for binary choices – Develop pages that will print properly – Use thumbnail images to preview larger images# NCI 2006 : National Cancer Institute’s guidelines on design of informative web pages 1-11 2-11
  12. 12. Organizing the display• High-level goals# – Consistency of data display • terminology, colors, format, capitalization – Efficient information assimilation by the user • Neat columns of data, left & right justification, spacing – Minimal memory load on the user • minimize recall – Fl ibilit f user control of d t di l Flexibility for t l f data display • order of columns & sorting of rows to be changeable by users 1-12#Smith and Mosier (1986) 2-12
  13. 13. Getting the user’s attention• Intensity – use levels to draw attention• Marking – underline, enclose in box, use an indicator/sign• Size – large size attract attention, use upto 4 sizes• Choice of fonts – Use upto 3 fonts Inverse Video: A computer• Blinking display technique whereby the background and text colour g• C l Color values are swapped, .• Audio On older computers this was computers, the way text was displayed 1-13 by default. 2-13
  14. 14. Principles More fundamental, widely applicable, & enduring.Application of principles lead to (established)guidelines. 1-14 2-14
  15. 15. 10 Golden rules ty miliaritFam 1-15 2-15
  16. 16. 1 Visibility User should see what functions are available and what the system is currently doing. 1-16
  17. 17. 1-172-17
  18. 18. 2 Consistency Ensure consistent use of colours names colours, names, layout and so on.delete/insert character delete/insert character delete/insert characterdelete/insert word remove/insert word remove/bring worddelete/insert line delete/insert line line destroy/createdelete/insert paragraphd l t /i t h delete/insert paragraph d kill/bi th paragraph1-18 kill/birth t l t /i hh
  19. 19. 3 FamiliarityUse language and symbols that the user will befamiliar ithf ili with or use a suitable metaphor t help it bl t h to h lthem transfer similar and related knowledge froma more familiar domain domain. 1-19
  20. 20. 3 Familiarity Metaphors– Metaphora : to carry over, transfer– The transference of the relation between one set of objects to another set for the purpose of brief explanation.– A resemblance , an agreement or likeness between things in some circumstances or effects, when the things are otherwise entirely diff th i ti l different. t 1-20
  21. 21. 3 Familiarity Metaphor – Example• The Desktop - started at Xerox PARC• Idea was to organize information in a way to allow people to use it in the way they use information on their desktops. – make the screen act as if there were objects on it. Computer objects as visible, moveable objects. p j , j Objects represented as icons. Objects can be “picked up” and “moved” on a surface. Objects can p be “copied” 1-21
  22. 22. 3 Familiarity 1-22
  23. 23. 3 FamiliarityEvolving Desktop 1-23
  24. 24. 3 FamiliarityEvolving Desktop 1-24
  25. 25. 3 FamiliarityEvolving DesktopCoffee Table Top Table-Top 1-25
  26. 26. 3 FamiliarityMetaphors - Mis-matched p VCR buttons on print interface interface. 1-26
  27. 27. 3 FamiliarityMetaphor - Key pointsMetaphors help borrow behaviors from systems familiar to p p y users.Metaphor isnt always necessary.Some metaphors dont cross cultural/local boundaries well well. 1-27
  28. 28. 4 AffordanceDesign things so it is clear what they are for 1-28
  29. 29. 5 Constraints• Provide constraints so that people do not try to do things that are inappropriate inappropriate. 1-29
  30. 30. 6 Navigation Provide support to enable users to move around the parts of the system. d th t f th t 1-30
  31. 31. 7 Feedback Rapidly feed back information from the system to people so that they know what effect their actions have had had. The user should never have to think "did th t work?" that k?" 1-31
  32. 32. 8 Recovery Enable recovery from actions particularly actions, mistakes and errors, quickly and effectively. effectively 1-32
  33. 33. 9 Flexibility Allow multiple ways of doing things so as to accommodate users with different levels of experience and interest in the systems. 1-33
  34. 34. 10 Style – Aesthetically Pleasing Designs should be visually appealing, polite, pleasant, friendly. 1-34
  35. 35. Theories Th iDescriptive, Explanatory or PredictiveD i ti E l t P di ti Motor, perceptual, or cognitive D R Y 1-35 2-35
  36. 36. Descriptive , Explanatory, Predictive • H l f li d Helpful in developing consistent l i i t tDescriptive terminology for objects and actions. • D Describe sequence of events and ib f t dExplanatory where possible cause and effect • Enable designers to comparePredictiveP di ti proposed d i d designs f execution1-36 for ti time or error rates 2-36
  37. 37. • Helpful in developing consistentDescriptive terminology for objects and actions. actionsUser interface styles : menus, form fill-ins, commandsUser personality styles :Technical attitude: novice, knowledgeable, expert , g , pTechnical aptitude: spatial visualization, reasoning 1-37 2-37
  38. 38. • Describe sequence of events qExplanatory and where possible cause and effect State and Action alternatives should be visible.Norman’s Action Theory; There should be a good•Forming the goal conceptual model and•Forming th i t ti F i the intention consistent system image.•Specifying the action•Executing the action Executing Interface should reveal good mappings that reveal the•Perceiving the system state relationship between stages.•Interpreting the system state p g y•Evaluating the outcome Users should receive 1-38 continuous feedback. 2-38
  39. 39. • Enable designers to comparePredictive p p proposed designs for execution g time or error rates Fitts’ Law It is a model of human psychomotor p y behavior developed in 1954. 1-39 2-39
  40. 40. Fitts’ LawIt is a model of human psychomotor behavior developed in 1954. 1-40 2-40
  41. 41. Fitts’ Law It is a mathematical model that predicts how long will it take to point at a target.It takes into account the size of the object and h d how f f far from th mouse it i the is. 1-41 2-41
  42. 42. Fitts’ Law If the target is larger , the user can use large movements of mouse to get to the object despite the di t th distance. 1-42 2-42
  43. 43. Fitts’ Law If the target is small, the user can use large movements to cover the distance and then make fine fi movements to get to the object. t t t t th bj t 1-43 2-43
  44. 44. Fitts’ Law As designers, we want to keep objects large enough and close enough to where people are ‘looking’ ! looking If the target is kept near, the time to reach the target reduces reduces. 1-44 2-44
  45. 45. Fitts’ LawThe time to move and point to a target of width W at a distance A is a logarithmic function of the spatial relative error (A/W) MT = a + b log2(A/W + c)• MT is the movement time• a and b are device dependent constants.• c is a constant of 0, 0.5 or 1• A is the distance (or amplitude) of movement from start to target center• W is the width of the target which corresponds to “accuracy” target, accuracy 1-45 2-45
  46. 46. Fitts’ Law 1-46 2-46
  47. 47. Fitts’ Law 1-47 2-47
  48. 48. Fitts’ Law 1-48 2-48
  49. 49. Motor, Perceptual, Cognitive Theories • Motor skill performance predictions Motor e.g. key stroking, pointing times. • Predicting reading times for free text,Perceptual lists, lists formatted displays auditory displays, tasks • In understanding short term, long term, sensory memory; its role in problem y y; pCognitive solving and play ; and productivity as 1-49 a function of response time 2-49
  50. 50. Lecture 2- key pointsDesign principles and guidelines emerge fromppractical experience. pGolden rules of Interface Design – VCFAC gNFRFS 1-50 2-50
  51. 51. Lecture 2- key pointsTraditional psychological th i must bT diti l h l i l theories t beextended and refined to accommodate complexhuman learning memory and problem solving learning,required in user interfaces.In spite of growing set of theories, guidelinesand principles user interface is a complex andhighly creative process. 1-51 2-51