Presentation on theme: "psychological and physiological constraints"— Presentation transcript:
1psychological and physiological constraints Week 5 – 2014 HCI – COMP3315psychological and physiological constraints
2People: psychological and physiological constraints First Principles of Interaction Design (Revised & Expanded) March 2014
3A challenge for HCI lectures… lecture notes versus the experience People learn more if they engage eg have to click to see the information, have to think about issues and use information rather than just read it.Human cognition…. Impact on assignment
4Overview Thinking about people Some theories and terms CognitivePhysicalPhysiologicalSome theories and termsMental modelsGulf of executionConceptual modelsFitts’ LawSome very fine-grained guidelines, useful for design and for no-user Heuristic EvaluationImportance of empirical validation of all theories
5Mental modelsDefinitions, links to most other parts of HCI, valuable language and mental tools
6Mental models http://www.nngroup.com/articles/mental-models/ Summary: What users believe they know about a UI strongly impacts how they use it. Mismatched mental models are common, especially with designs that try something new.Definition: A mental model is what the user believes about the system at hand.Note:Beliefs …. Not factsMental models drive predictions, planning actionsIndividual MMs differ …. Designer MM versus “user” MMMMs change…. Implications for One Sentence Statement
10Mental models…. What was the user’s mental model? What is the designer’s (actual) system modelCause of the problem???How to overcome it???In this caseIn general
11The refrigerator challenge Your refrigerator’s freezer section is not cold enoughYou find a dial at the back of the freezer labelled as below and set on 3warmer colderWhat will you do? Will it work? What is your mental model?
12Neilsen on MM….many less-techy users don't understand the differences between many other common features:Operating-system windows vs. browser windowsA window vs. an application,Icons vs. applications,Browser commands vs. native commands in a Web-based appLocal vs. remote infoDifferent passwords and log-in options (users often log in to other websites as if they were logging in to their )Implications forusable security?Building on metaphors
13How to address…“Make the system conform to users' mental models — …. This is the approach we usually recommend to fix IA problems:eg If people look for something in the wrong place, then move it to the place where they look for it.Card sorting is a useful way to discover users' mental model of an information space so that you can design your navigation accordingly.Improve users' mental models so that they more accurately reflect your system.eg explaining things bettermaking labels clearer to make the UI more transparent (even though the underlying system remains unchanged).
14Some useful distinctions Slips:correct user model, inadvertent incorrect actioneg car “malfunction”, tap caps lock accidentallyMistakes: incorrect mental modelUse this tightened vocabulary for your think-aloud reports
15Norman’s Gulf of Execution http://learnline. cdu. edu
16Norman’s Gulf of Evaluation http://learnline. cdu. edu Gulf of evaluation: the amount of effort required to determine the system stateWhen problems occur in the evaluation phase, the "gulf of execution" widensSome examples"What happened then?""What did I do wrong"User repeats the action (e.g. clicks the NEXT or SUBMIT button)
17Norman’s Gulf of Execution http://learnline. cdu. edu Gulf of execution….distance between the user's goals andthe means of achieving them through the systemSome examples:"What do I do now?""How do I [...]?""I wanted to [...], but I can't see how I would do that?""Do I press this?""Do I type this in here?""I'm looking for [...] but I can't find it"
18Norman’s Gulf of Execution http://learnline. cdu. edu
19Overcoming gulfs - Norman’s questions : Norman, D. A Overcoming gulfs - Norman’s questions : Norman, D.A. 1988 "The Design of Everyday Things." MIT PressHow easily can a person determine:1 determine the function of the device?2 tell what actions are possible?3 determine mapping from intention to physical movement?4 perform the action?5 tell what state the system is in?6 tell if system is in desired state?7 determine mapping from system state to interpretation?
20Principles of good design Provide a good conceptual modelEnables user user to build good mental model of the device.And to predict the effects of their actions.Make things visible/audible/tangibleEnsure user can see, hear, feel… the state of the device and the alternatives for action.The Principle of MappingRelies on linking existing mental model to perceived systemNatural mappingPhysical analogiesCultural standardsThe Principle of FeedbackInformation on what has been accomplished or is doing.full and continuous feedback about results of actions.
21Mental versus conceptual models http://uxmag “…. a mental model refers to the representation of something—the real world, a device, software, etc.—that the user has in mind. It is a representation of an external reality. Users create mental models very quickly, often before they even use the software or device. Users’ mental models come from their prior experience with similar software or devices, assumptions they have, things they’ve heard others say, and also from their direct experience with the product or device. Mental models are subject to change. Users refer to mental models to predict what the system, software, or product is going to do, or what they should do with it.
22[eg] iPad ebook … mental model about .. “… A conceptual model is the actual model [available] to the user through the interface of the product.[eg] iPad ebook … mental model about ..what reading a book will be like in the iPad,how it will work, what you can do with it.But when you sit down with the iPad, the “system” (the iPad) will display …. screens, and buttons, and things that happen.The actual interface is representing the conceptual model. Someone designed a user interface and that interface is communicating to you the conceptual model of the product.
23Case study Moded interfaces: The same interface action has a different meaning depending upon the contextClass activity: define some examples of moded interaction in common interfaces eg text editor, Powerpoint, WordWhat are the challenges for the user?
24Redraw this, adding conceptual model, and making changes to correct any errors
25Challenges for design: conceptual model doesn’t match the user’s mental modeldesigners of the conceptual model needs to account for the user’s mental modelHow does CI help?And the role of Think-Aloud?multiple user groupsconceptual model purely reflects underlying hardware, software or databasecreating materials/training to build an appropriate mental modelOne Sentence Statement?
26Returning to Assignment 1 Why are sketches better for exploring the space of conceptual models?Some students used software for wireframes and prototyping – why is this dangerous?Clarity on differences between mental model, conceptual model, actual system
28time …. to complete the actiona and b are empirically determined regression coefficients,…..values gained from direct observation that build a slope.distance … from the starting point to the …target objectwidth is the width of the target object
38Grouping, layout, hierarchies Fitts’ Law in action –Grouping, layout, hierarchies
39The prime pixel……where your cursor is now Fitts’ Law in action –The prime pixel……where your cursor is now
40Windows, …. right-click … Windows, …. right-click ….contextual menu of options usually appears that has its point of origin at the prime pixel.
41Magic pixels….. What are they? Fitts’ link? Why are they important?
42Summary Empirical foundations Heuristics for designers Grouping items for flow of actionSpecial locationsPrime pixelMagic pixels
43A Quiz Designed to Give You Fitts http://www. asktog Microsoft Toolbars offer the user the option of displaying a label below each tool. Name at least one reason why labeled tools can be accessed faster. (Assume, for this, that the user knows the tool and does not need the label just simply to identify the tool.)You have a palette of tools in a graphics application that consists of a matrix of 16x16-pixel icons laid out as a 2x8 array that lies along the left-hand edge of the screen. Without moving the array from the left-hand side of the screen or changing the size of the icons, what steps can you take to decrease the time necessary to access the average tool?A right-handed user is known to be within 10 pixels of the exact center of a large, 1600 X 1200 screen. You will place a single-pixel target on the screen that the user must point to exactly. List the five pixel locations on the screen that the user can access fastest. For extra credit, list them in order from fastest to slowest access.Microsoft offers a Taskbar which can be oriented along the top, side or bottom of the screen, enabling users to get to hidden windows and applications. This Taskbar may either be hidden or constantly displayed. Describe at least two reasons why the method of triggering an auto-hidden Microsoft Taskbar is grossly inefficient.
44A Quiz Designed to Give You Fitts http://www. asktog Explain why a Macintosh pull-down menu can be accessed at least five times faster than a typical Windows pull-down menu. For extra credit, suggest at least two reasons why Microsoft made such an apparently stupid decision.What is the bottleneck in hierarchical menus and what techniques could make that bottleneck less of a problem?Name at least one advantage circular popup menus have over standard, linear popup menus.What can you do to linear popup menus to better balance access time for all items?The industrial designers let loose on the Mac have screwed up most of the keyboards by cutting their function keys in half so the total depth of the keyboard was reduced by half a key. Why was this incredibly stupid?What do the primary solutions to all these questions have in common?
47Attention Why did this happen? What is attention? Visual **AudioWhat are the implications for UI designers?Multi-taskingAttention-grabbersAnd for UI evaluations?Eye trackingThink-aloudFor your projectGuiding the user in where to attend
48Memory Working memory Long term memory WM very limited Miller, George A. "The magical number seven, plus or minus two: some limits on our capacity for processing information." Psychological review 63.2 (1956): 81. (>17K gcites, Sep 2013)WM very limitedChunking is really importantComplex to user this to predict … but may explain think-aloud observations(Claude Shannon theory of information .. Brain as information processing machine)Long term memoryCritical for recall at UIAnd learning about UIMental model
49Perception Translating external stimuli into the memory SensesProcessing their informationTightly interlinked physical and cognitiveSimple example, reading a screenVision… visibility
50Screen designTullis, Thomas S. "The formatting of alphanumeric displays: A review and analysis." Human Factors: The Journal of the Human Factors and Ergonomics Society 25.6 (1983):Key outcomes in terms ofPerformance versus affect (preferences)Density (local/overall), grouping, layout complexityGrouping related elements, organised for vertical scanning, with space between them aids search in speed and preferenceScience of screen designCareful empirical studiesDesign of initial studyReplicationImpact of different technologyImpact of the particular taskImpact of user’s mental model, standards for device, applicationTranslation to your interface
51Colour Valuable for screen design Performance ++Affect ++Well understood challenges that are avoidable but failure to do so can compromise performance
52Tog Principles http://asktog.com/atc/principles-of-interaction-design/ “Principle: Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who cannot see the colors presentedPrinciple: Test your site to see what color-blind individuals seePrinciple: Do not avoid color in the interface just because not every user can see every color.Principle: Do not strip away or overwhelm color cues in the interface because of a passing graphic-design fad.
53Colour blindness Affected ~ 8% of men, .5% women Tetsting tools eg For images imagesxxxx
54Coblis — Color Blindness Simulator Their demo: normal vision
60What can you do about colour blindness? Be aware!Design in black and white and add colour sparinglyWhat else? …. Class activity
61Colour Valuable for screen design Performance ++Affect ++Well understood challenges that are avoidable but failure to do so can compromise performance
62Coding Means distinguishing different parts of an interface Includes Font changes such as theseFont with style and sizeUse of colour such as here and here – seriouslySpecial symbols, shapesSoundMovementAll are about ...
63Coding Means distinguishing different parts of an interface Includes Font changes such as theseFont with style and sizeUse of colour such as here and here – seriouslySpecial symbols, shapesSoundMovementAll are about ... gaining attention
64Colour can be poorly used Means distinguishing different parts of an interfaceIncludesFont changes such as theseFont with style and sizeUse of colour such as here and here – seriouslySpecial symbols, shapesSoundMovementAll are about ... gaining attention
67Colour Properties Hue – wavelength (red .. violet) Saturation, chroma (purity, mix of wavelengths)High saturation very pureLow saturation, greyishBrightness, intensity, valuevery low intensity becomes black
68CSE 440: User Interface Design, Prototyping, and Evaluation Visible SpectrumWinter 2013CSE 440: User Interface Design, Prototyping, and Evaluation
69Physiology and colour Rods and cones Fovea – detailed vision (eg text)Only cones sensitive to colour64% respond to red32% to green2% to blue (none in fovea!)Opposing colours at the neuron levelRed-green, yellow-blue
70Visual acuity reduced for violet end of spectrum Insensitivity to blue increases with ageBlue seems harder to read, especially on some backgroundsWith normal light, we see mid-spectrum colours best (ie green, yellow)Colour blindness8% men, 0.4% womenUse additional redundant cue eg colour + box + brightness difference and this improves broad performance
71Reds appear closer than blues Warm colours appear larger than cool colourseg red larger than blueBlooming effectLight colours on dark backgrounds appear largerColours distant on spectrum require refocusingAfter images and shadows can followOpposing coloursHighly saturated coloursIllumination matters too
72Light text on a dark background Dark text on a light background
73Blooming – light text on dark background seem larger Light text on a dark backgroundDark text on a light backgroundBlooming – light text on dark background seem larger
74Red text on a dark background Red text on a light background
80CSE 440: User Interface Design, Prototyping, and Evaluation Color GuidelinesAvoid simultaneous display of highly saturated, spectrally extreme colorse.g., no cyans/blues at the same time as reds, why?refocusing!desaturated combinations are better pastelsWinter 2013CSE 440: User Interface Design, Prototyping, and Evaluation
81CSE 440: User Interface Design, Prototyping, and Evaluation Using the Hue CirclePick non-adjacent colorsopponent colors go well together(red & green) or (yellow & blue)Winter 2013CSE 440: User Interface Design, Prototyping, and Evaluation
83Examples:Pure blue shall not be used on a dark background for text, thin lines, or high resolution information. [Source: DOE-HFAC 1, 1992] FAA Human Factors Design Standard, p 8-58Blue. Blue should not be used as the foreground color if resolution of fine details is required. [Source: DOD HCISG V2.0, 1992] FAA Human Factors Design Standard, p 8-57.
85More examples from NASA: from http://colorusage. arc. nasa Use no more than six colors to label graphic elements.Use colors in conformity with cultural conventions.Use color coding consistently across displays and pagesUse color coding redundantly with other graphic dimensions.Don't use color coding on small graphic elements
86Recommendations Use colour sparingly Maximum codings 5 (+ or – 2) matching short term memoryDesign in monochrome firstOptimise all other aspects of design and layoutAdd colour (with awareness of problems)Use colour to:Draw attention (better than shape, size, brightness)Show organisation, status, relationships
87cont With black foreground, use cyan, magenta, white Ensure contrast ib hue and brightness of fore- and backgroundAllow users to control colour codingUse colour consistently across systemUse other (redundant) cues as wellAvoid saturated blue for small text and thin lines
89Take yourself back to hunter and gatherer times: A hungry tiger is coming from the distance at your right
90Blinking and movement Hard to ignore Reduces legibility Can be really annoyingHelpful for tiny cursors (otherwise hard to find and large ones are obtrusive)Helpful for critical situations
91Shapes Conventions for some shapes Special shapes Cultural boundaries eg warning and errorsSpecial shapeseg little hand pointingCultural boundaries
92Summary Awareness of human factors affecting design Awareness of some basic guidelines for use of colourApply these for a simple form of no-user testing by checking your UI against guidelinesBetter done by person other than designer (role for your teams to desk-check each other’s designs)