Dr. Gitte Lindgaard HOTLab (Human Oriented Technology Lab) Carleton University Today’s talk • • • • • What is usability Human information processing models Signal detection theory in user interface design Objective and subjective performance criteria Applying signal detection theory to user interface design • Taking advantage of perception and human information processing in user interface design • Screen design principles applied What usability is about • Usability is about – The ease with which interactive technology can be learned, used, continue to be used – Performance – Likeability – Capitalizing on what people are best at and what computers are better at – Taking into account human perceptual, cognitive, and affective capabilities and limitations A model of Human Information processing Stage 1 IP Encode Stage 2 Stage 3 Stage 4 Compare Select Response Execute Response Output Sensory perception • Sensory modalities • • • • • Vision objects, size, colour, shape, density, texture Auditory tone, timbre, pitch, intensity, frequency Tactile feel pressure, temperature Olfactory discriminate odours Gustatory taste sweet/sour/bitter/salty • Stages in perception • • • • Detect a stimulus Attend to important aspects Interpret the meaning, take Action in response • How does this work with our model of information processing? Information processing stages Stage 1 IP Encode D e t e c t Attend Stage 2 Stage 3 Stage 4 Compare Select Response Execute Response Interpret Act Output Conflicting perceptual theories • Constructivist theory • Seeing is an active process that constructs our view of the world from information in the environment and stored knowledge • Perception involves intervention of representations and memory • Ecological theory • perception is a direct process in which information is detected rather than being constructed • We see what is afforded by the object, system or event • Both argue that we are active perceivers, but – Constructivists say we embellish and elaborate retinal images – Ecologists say we explore the objects in our environment Perceptual Depth Cues • • • • • • Size Overlay Contrast Shadow Converging Texture Human Memory Sensory Information Store Visual: 0.1 sec Auditory: 3-4 sec without processing Short-term Memory ~ 30 sec without processing Long-term Memory ?Forever Information processing stages Stage 1 IP Encode D e t e c t Attend Sensory Information Store Stage 2 Stage 3 Stage 4 Compare Select Response Execute Response Act Interpret Short-term Memory Long-term Memory Output Perception & interpretation in design • • • • • Can the user see the stimulus? Is it distinguishable from the background? Is it clear which is the important item? Does the meaning of the display stand out? Is it obvious what action is required? Software development without guidance • Software developers may not appreciate the difference to the user between data and information • Too much data hides the message • Starting from applied research in Human Perception and Cognition, the objective in design of complex applications is to facilitate all of the above for the operator Example of applied Perceptual research: Signal Detection Theory Noise People detect signals by making judgments based on the strength of the signal against the background “noise” in which it is embedded Signal Signal Detection Theory: four probable outcomes in a statistical decision Signal Detection Theory: effects of shifting the objective criterion To help your users detect important information: • Strengthen the signal • Lower the noise • Remember that the user will have a bias to determine whether or not the information is present What is this? Is the journal in the library? Is it clear which are buttons here? Possible responses Response observed YES Response YES predicted NO NO Hits False alarms Misses Correct rejections Decision matrix State of the world Event occurred Event did not occur Judgment by observer Event occurred Hit True positive Correct identification Miss Event did not occur False alarm False positive True negative Correct rejection Objectives in design • Pull the signal and noise distributions as far apart from each other as possible • Regardless of where you set the objective criterion, there is a cost • The purpose of the system determines the position of the objective criterion • The complexity of the user’s tasks must be considered also Applying Signal Detection Theory Which display shows a network problem spot more clearly? • Background noise reduced • Signal is strengthened by adding visual weight c Subjective performance criteria How it works: p e r f o r m a n c e Task demands Human performance At low task demand levels, human performance is aligned with task demands As demands increase beyond human capacity, the performer reduces his internal criterion. The gap between task demands and performance increases over time, but the human performer is unaware of this shift in performance criterion and continues to believe his performance is Ok Think of “speed blindness”, drunk drivers, tired truck drivers (Moray, 1983) time 1182847 1182847 1182847 1182847 1182847 1182847 1702847 1182847 1882847 1182847 1182847 1182847 1182847 1182847 1182847 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959531Fo0S 5959530Fo1S 5959530Fo0S 5959530Fo0S 5959563Fo0S 5979530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 484230P< 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 39395502 39395502 39395502 69395502 39395502 39398502 39395502 39395502 39395502 39395502 39395602 39845502 39395502 39395502 39395502 1182847 1182847 1182847 1182847 1182847 1182847 1702847 1182847 1882847 1182847 1182847 1182847 1182847 1182847 1182847 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 5959531Fo0S 5959530Fo1S 5959530Fo0S 5959530Fo0S 5959563Fo0S 5979530Fo0S 5959530Fo0S 5959530Fo0S 5959530Fo0S 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 484230P< 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 484229P< 39395502 39395502 39395502 69395502 39395502 39398502 39395502 39395502 39395502 39395502 39395602 39845502 39395502 39395502 39395502 Task complexity • Think about this task…The operator must • Find the right column • Transform a number into a perception of the location of an approaching aircraft relative to himself • Remember what that number was on the last screen and the screen before that and before that…. • Compare these numbers mentally to • Decide whether or not the aircraft is descending Etc. 1182847 1182847 1182847 11828471182847 11828471182847 11828471182847 17028471182847 11828471182847 18828471182847 11828471702847 11828471182847 11828471882847 11828471182847 11828471182847 11828491182847 1182847 1182847 1182849 5959530Fo0S 484229P< 39395502 5959530Fo0S 484229P< 39395502 5959530Fo0S 484229P< 39395502 5959530Fo0S 484229P< 5959530Fo0S 484229P< 69395502 39395502 5959530Fo0S 484229P< 5959530Fo0S 484229P< 39395502 39395502 5959530Fo0S 484229P< 5959530Fo0S 484229P< 39398502 39395502 5959531Fo0S 484230P< 5959530Fo0S 484229P< 39395502 69395502 5959530Fo1S 484229P< 5959530Fo0S 484229P< 39395502 39395502 5959530Fo0S 484229P< 1182847 5959530Fo0S 5959530Fo0S 484229P< 39395502 484229P< 39398502 39395502 5959530Fo0S 484229P< 1182847 5959531Fo0S 5959530Fo0S 484230P< 39395502 484229P< 39395502 39395502 5959562Fo0S 484229P< 1182847 5959530Fo1S 5959530Fo0S 484229P< 39395602 484229P< 39395502 39395502 5979530Fo0S 484229P< 1182847 5959530Fo0S 5959530Fo0S 484229P< 39845502 484229P< 39395502 69395502 5959530Fo0S 484229P< 39395502 1182847 5959530Fo0S 5959530Fo0S 484229P< 484229P< 39395502 39395502 39395502 1182847 5959530Fo0S 484229P< 5959530Fo0S 484229P< 39395502 1182847 5959562Fo0S 5959530Fo0S 484229P< 484229P< 39395602 39398502 39395502 1182847 5959530Fo0S 484229P< 5959530Fo0S 484229P< 39395502 1702847 5979530Fo0S 5959531Fo0S 484229P< 484230P< 39845502 39395502 39395502 1182847 5959530Fo0S 484229P< 1182847 5959530Fo0S 5959530Fo1S 484229P< 484229P< 39395502 39395502 69395502 1182847 5959530Fo0S 484229P< 1882847 5959530Fo0S 5959530Fo0S 484229P< 484229P< 39395502 39395502 1182847 5959530Fo0S 484229P< 1182847 5959530Fo0S 484229P< 39395502 1182847 5959530Fo0S 484229P< 39395502 5959530Fo0S 484229P< 39395502 11828475959530Fo0S 5959530Fo0S 484229P< 1182847 484229P< 39398502 1182847 5959562Fo0S 484229P< 39395602 11828475959531Fo0S 5959530Fo0S 484229P< 1702847 484230P< 39395502 1182847 5979530Fo0S 484229P< 39845502 11828475959530Fo1S 5959530Fo0S 484229P< 1182847 484229P< 39395502 1182847 5959530Fo0S 1182847 5959530Fo0S 484229P< 39395502 5959530Fo0S 1882847 11828475959530Fo0S 484229P< 484229P< 39395502 1182847 5959530Fo0S 1182847 5959530Fo0S 484229P< 39395502 11828475959530Fo0S 5959530Fo0S 484229P< 1182847 484229P< 39395502 1182847 5959530Fo0S 1182849 5959530Fo0S 484229P< 39395502 17028475959562Fo0S 5959531Fo0S 484230P< 1182847 484229P< 39395602 1182847 5959530Fo0S 5959530Fo1S 1182847 11828475979530Fo0S 484229P< 484229P< 39845502 1182847 5959530Fo0S 5959530Fo0S 1182847 18828475959530Fo0S 484229P< 484229P< 39395502 1182847 5959530Fo0S 5959530Fo0S 1182847 11828475959530Fo0S 484229P< 484229P< 39395502 1702847 5959531Fo0S 5959562Fo0S 1182849 11828475959530Fo0S 484229P< 484229P< 39395502 1182847 5959530Fo1S 1182847 5979530Fo0S 484229P< 1882847 5959530Fo0S 1182847 5959530Fo0S 484229P< 1182847 5959530Fo0S 1182847 5959530Fo0S 484229P< 1182847 5959562Fo0S 1182849 5959530Fo0S 484229P< 1182847 5979530Fo0S 1182847 5959530Fo0S 1182847 5959530Fo0S 1182849 5959530Fo0S 60 sec ago 45 sec ago 30 sec ago 39395502 39395502 39395502 69395502 484229P< 39395502 484229P< 39398502 484229P< 39395502 484229P< 39395502 484229P< 39395502 484229P< 39395502 484230P< 39395602 484229P< 39845502 484229P< 39395502 484229P< 39395502 484229P< 39395502 484229P< 484229P< 484229P< 484229P< 15 sec ago 39395502 39395502 39395502 69395502 39395502 39398502 39395502 39395502 39395502 39395502 39395602 39845502 39395502 39395502 39395502 Now Altitude Time Design for usability • Designer’s job is to make it easy to – – – – See/hear that something is happening that should be attended to Locate the important stimulus Interpret what it means Take the correct action • Make it easy to remember information from one occasion to the next • Prevent errors – Slips – Mistakes • Support rapid error recovery Example of a screen design OEO50I INIT ENTRY: ANDREW MEDICI I11489 SERV#: _______ EXT#: _________ EE#: _____ *** TPIS/2 ORDER S&E ENTRY *** EXCH ACT: J EXCH CODE: ______ INPLACE: _________ IP DATE: ______ EXCH RMK: ____________________________________________________________________ SERVICE NAME: ________________________________________________________________ ADD ADDR INFO: _______________________________________________________________ SUB ADDR TYPE: ______________________________ SUB ADDR#: ____________________ STREET#SFX: _______ ________ NAME: ____________________ TP/SFX: ______________ LOCALITY: __________________________ POSTCODE: ________ FLT CLR PTY: ___ TEMPORARY: _ AL CONN: _______ ROT CONN: ___ PEXT? __ LINE TYPE: _____ NEXT FAC: _ LN SEL: __ ARE CODE: REM/CCN(R/N): __ - SERV STATUS: ___ DISC TYPE: PAL#: _______ RENTAL RATE: ___ METER RATE: ___ CONC AUTH: _________ CAB#: ______ ASIC: _________ DIRECTORY ACTION REQ (Y/N): _ DIRECTORIES#=-> WH: __ YE: _ COM: ___ COMMAND: ______ No better when it is filled in OEO50I INIT ENTRY: ANDREW MEDICI I11489 SERV#: _______ EXT#: _________ EE#: _____ *** TPIS/2 ORDER S&E ENTRY *** EXCH ACT: J EXCH CODE: PBX334 INPLACE: 3374606 IP DATE: 04089996 EXCH RMK: N/A QREMM SERVICE NAME:PETER JAMES HOUSTON ADD ADDR INFO: ROWANVILLE MELA SUB ADDR TYPE: SEMI-ATT. DUAL H/H DWELLING SUB ADDR#: 337A STREET#SFX: CRESCENT NAME: ST BARTHOLOMEW TP/SFX: PMT/YY LOCALITY: ROWANVILLE WEST POSTCODE: 3957 FLT CLR PTY: ROP TEMPORARY: N AL CONN: P/T ROT CONN: 3F PEXT? Y LINE TYPE: PBX NEXT FAC: N LN SEL: PR ARE CODE:TTYP-M REM/CCN(R/N): 2X - SERV STATUS: INP DISC TYPE: PAL#: POTT/P RENTAL RATE: RES METER RATE: PM1 CONC AUTH: MELA CAB#: 228FS/476PW ASIC: 338PY DIRECTORY ACTION REQ (Y/N): N DIRECTORIES#=-> WH: N YE: N COM: PB COMMAND: EXT Simple ways to improve screens In Western culture, people start reading from the upper left corner, across, then down the page, ending in the lower right corner Apply that simple principle in screen design …use a consistent pattern Area 1: The tree and the selection criteria areas allow the user to specify a subset of data to be retrieved Area 2: The results of the search are displayed in this region Area 3: A set of filters are sometimes provided to further select specific data from the retrieved data Area 4: Details regarding a selected object are displayed in this area. Simple remedies OEO50I INIT ENTRY: ANDREW MEDICI I11489 _____ SERV#: _______ EXT#: _________ *** TPIS/2 ORDER S&E ENTRY *** EXCH ACT: J EXCH CODE: ______ INPLACE: _________ IP DATE: ______ EXCH RMK: _______________________________________________________________ SERVICE NAME: ________________________________________________________________ ADD ADDR INFO: _______________________________________________________________ SUB ADDR TYPE: _____________ SUB ADDR#: ____________________ STREET#SFX: _______ ________ NAME: ____________________ TP/SFX: ______________ LOCALITY: _____________ POSTCODE: ________ FLT CLR PTY: ___ TEMPORARY: _ AL CONN: _______ ROT CONN: ___ PEXT: __ LINE TYPE: _____ NEXT FAC: _ LN SEL: __ ARE CODE: REM/CCN(R/N): __ SERV STATUS: ___ DISC TYPE: ______ PAL#: _______ RENTAL RATE: ___ METER RATE: ___ CONC AUTH: _____ CAB#: ______ ASIC: __ DIRECTORY ACTION REQ (Y/N): _ DIRECTORIES#=-> WH: __ YE: _ COM: ___ COMMAND: ______ Reduce alignments EE#: Improvements to this screen… – Use a mixture of CAPITAL and lower case letters • We ‘see’ words as shapes • Using the downward strokes as in p j y • And the upward strokes as in k l b helps us detect the word shape with less effort than reading PJY or KLB because the shape is lost when using capital letters – Use highlights to make those fields stand out that users must fill • Eyes can ‘jump’ straight to those items • This reduces the probability of users making errors like missing fields they should fill in Further improvements Oeo50I Init Entry: ANDREW MEDICI I11489 Serv#: _______ Ext#: _________ Ee#: _____ *** TPIS/2 ORDER S&E ENTRY *** Exch Act: J Inplace: _________ IP date: ______ Exch Rmk: _______________________________________________________________ Service Name: ________________________________________________________________ Add Addr info: _______________________________________________________________ Sub Addr Type: _____________ Sub Addr#: ____________________ Street#Sfx: _______ ________ Name: ____________________ TP/Sfx: ______________ Locality: _____________ Postcode: ________ Flt Clr Pty: ___ Temporary: _ Al Conn: _______ Rot Conn: ___ Pext: __ Line Type: _____ Next Fac: _ Ln Sel: __ Are Code: Rem/Ccn(R/N): __ Serv Status: ___ Disc Type: ______ Pal#: _______ Rental Rate: ___ Meter Rate: ___ Conc Auth: _____ Cab#: ______ Asic: __ Directory Action Req (Y/N): _ Directories#=-> WH: __ YE: _ Com: ___ Command: ______ Exch code: ______ Semantics • • • • Group items that ‘belong’ together Give visual cues about the status of these Make actions clear that user can take Show additional information to help the user learn for the future • Be aware of users’ expectations Screen elements: Menus • What may you deduce from the following? • • • • • • Semantic groups Hot keys shown “more” (open another window) “more” (primary menus) Can be activated Cannot be activated New… Open… Close Ctrl+N Ctrl+O Save Ctrl+S Save As Save as web page Search… Versions… Large impact of small changes • If you want to impact user performance negatively – – – – Don’t give people what they expect Apply design norms inconsistently Make users guess how the system will behave today Invent your own standards, but don’t stick with them everywhere – Use a lot of different colors, shapes, sizes, rules • Usability is also about predictability Impact of minute changes File Edit View Insert Format Tools Other Other Help Other Edit Format Help View Tools File Other Insert File Edit View Insert Format Tools Other Other Help File Edit View Insert Format Tools Other Other Help These examples are trivial but annoying and time-wasting because they force more work on the central cognitive subsystems Here is a more serious example of a seemingly minor change Before automation Paper roll from high-pressure petro-chemical Factory undergoing automation: Shows pressure and temperature over time One rectangle (horizontal) shows amount of change One rectangle (vertical) shows 30 minutes in time Changes are readily visible Operators can enter notes as product progresses Easy to go back in time to see whole procedure This display was not kept time Amount Changes made: Pressure and temperature now Separated on different displays The scale has been rotated 90 Time is now horizontal Amount is vertical One square (horizontal) is 5min One square (vertical) is 1/10 of Earlier measure After automation Amount Effects: Operators were unable to run the factory The quality of output dropped through the floor The company nearly lost its biggest customer (60% of product) Engineers were put on team 24/7 for first six months Time Could this have been avoided? • Studying the users and how they ran the factory before a system was ordered would have helped to understand • how they make decisions • What cues they rely on for making decisions • What else they need (documenting the product history in a simple, accessible way) • How to manage the transition period • Etc. Conclusion • Understanding how people detect, encode, and process information promotes usability • Signal detection theory can be applied to user interface design to help users distinguish between important and unimportant information • Users have a memory and they will use it! • Clarity and consistency promotes usability • Designing user interfaces is a very important activity – 60-70% of software code is related to the user interface This is what we do in the HOTLab • Contact Dr. Gitte Lindgaard for more on ext 2255 • E-mail: gitte_lindgaard@carleton.ca • Web site: www.carleton.ca/hotlab