Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

asdf asdf Presentation Transcript

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