Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. CS3240 - Human Computer InteractionLecture 2 : Guidelines , Principles and Theories Lecturer : Dr Bimlesh Wadhwa dcsbw@nus.edu.sg dcsb @n s ed sg
  • 2. Last week… 1-2 2-2
  • 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. Identify the tasks• Task Analysis usually involve long hours observing and interviewing users• Relative task frequencies 1-4 2-4
  • 5. Today …Guidelines, Principles, and Theories 1-5 5
  • 6. Guidelines 1-6 2-6
  • 7. Insights by p g y practitioners -caution against poor quality. 1-7 2-7
  • 8. http://msdn.microsoft.com/en-us/library/aa511258.aspx 1-8 2-8
  • 9. http://developer.apple.com 1-9 2-9
  • 10. http://www.hq.nasa.gov/pao/portal/usabilityhtt // h / / t l/ bilit 1-10 2-10
  • 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. 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. 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. Principles More fundamental, widely applicable, & enduring.Application of principles lead to (established)guidelines. 1-14 2-14
  • 15. 10 Golden rules ty miliaritFam 1-15 2-15
  • 16. 1 Visibility User should see what functions are available and what the system is currently doing. 1-16
  • 17. 1-172-17
  • 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. 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. 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. 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. 3 Familiarity 1-22
  • 23. 3 FamiliarityEvolving Desktop 1-23
  • 24. 3 FamiliarityEvolving Desktop 1-24
  • 25. 3 FamiliarityEvolving DesktopCoffee Table Top Table-Top 1-25
  • 26. 3 FamiliarityMetaphors - Mis-matched p VCR buttons on print interface interface. 1-26
  • 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. 4 AffordanceDesign things so it is clear what they are for 1-28
  • 29. 5 Constraints• Provide constraints so that people do not try to do things that are inappropriate inappropriate. 1-29
  • 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. 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. 8 Recovery Enable recovery from actions particularly actions, mistakes and errors, quickly and effectively. effectively 1-32
  • 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. 10 Style – Aesthetically Pleasing Designs should be visually appealing, polite, pleasant, friendly. 1-34
  • 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. 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. • 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. • 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. • 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. Fitts’ LawIt is a model of human psychomotor behavior developed in 1954. 1-40 2-40
  • 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. 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. 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. 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. 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. Fitts’ Law 1-46 2-46
  • 47. Fitts’ Law 1-47 2-47
  • 48. Fitts’ Law 1-48 2-48
  • 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. Lecture 2- key pointsDesign principles and guidelines emerge fromppractical experience. pGolden rules of Interface Design – VCFAC gNFRFS 1-50 2-50
  • 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