Designing for Humans

Nov 202 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 203 Consistency Interface components and layout should be consistent within and across applications Consistency refers to… Presence and absence of features Physical location of features Appearance of features (widgets, text, icons) Method of accessing features

Nov 204 Presence and Absence of Features Word: Customize keyboard Power Point: Can’t customize keyboard

Nov 205 Recently used file list Word Not available StatView Presence and Absence of Features (2)

Nov 206 Power Point: Word: Bottom of list Top of list Netscape: Middle of list “All files” in different locations Physical Location of Features

Nov 207 Windows: Windows is searching for a file Appearance of Features

Nov 208 Consistent (i.e., same) size within a group is aesthetically pleasing Appearance of Features (2)

Nov 209 Word: From INSERT menu: From VIEW menu: Two ways to insert page numbers! Are they the same? Method of Accessing Features

Nov 2010 Application on the desktop: launch by double click Application on the toolbar: launch by single click Method of Accessing Features (2)

Nov 2011 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 2012 Hierarchy and Grouping Make relationships obvious Provide “headings” to categorize groups of related items Use Horizontal separators Borders Labeled borders Alignment

Nov 2013 Hierarchy is ambiguous ICQ: “Online” and “Offline” entries are indented. Examples

Nov 2014 Good sense of hierarchy and groupings via labeled borders Yamaha OPL Sound Driver: Examples (2)

Nov 2015 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 2016 States and State Changes The user must Know the state of the system at all times Be informed of state changes

Nov 2017 Caps Lock State If would be nice if Caps Lock were indicated! Caps Lock What if Caps Lock is on?

Nov 2018 Click here Eudora: State changes

Nov 2019 Click here Notes: 1. Compromise: Bad: position changes Good: all entries appear 2. Animation helps Eudora: State changes (2)

Nov 2020 State Uncertainty Cable modem… POWER CABLEPC TEST RD TD Receive Data (from where?)

Nov 2021 What is “Receive Data”? Cable Modem My PC Network Server Receive data

Nov 2022 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Nov 2023 Overload From Miller’s famous essay… Refers to the number of items a human can reasonably process at once Miller, G. A. (1956, March). The magical number seven plus or minus two: Some limits on our capacity for processing information. The Psychological Review, 63(2), The magical number seven plus or minus two! Reference:

Nov 2024 Too much to digest without groupings Eudora: Overload example

Nov 2025 Colour Overload The following people are "offline" Painted in red to indicate "offline" (but we already know that!) ICQ:

Nov 2026 Why is this blue? Why is this purple? Why is this yellow? ICQ: Colour overload (2)

Nov 2027 Good use of colour Eudora: Colour overload (3)

Nov 2028 Coffee Maker on/off Switch On or off? Discussion: On the left, the switch appears similar to a North American wall switch in the up, or on, position, whereas the reverse observation applies for the picture on the right. However, the label 0 appears above the label 1. So, some confusion exists. The top part of the switch is immediately beside the label 0; so, perhaps pushing the top part of the switch is associated with the label 0. Also, the use of the colour red may be misleading. Does red mean on or off? When colour is used, sometimes red/green pairs exist, typically with green implying on and red implying off.

Nov 2029 No Confirmation Click here to “Save Windows Location” (for next ftp login) Then what? Are the changes saved? WS-Ftp:

Nov 2030 The Dead Zone! (no feedback) Case Study – When a file is copied to a folder, feedback in the form of a progress bar is presented during copying – but only if the file is large and the operation takes several seconds, or more. This is fine. However, the progress bar only appears when copying begins. If the source file is on a local hard drive, copying begins “immediately” because the seek time – the time to find the file – is negligible. If the source file is on a remote drive or a tape drive, there may be a dead zone – a prolonged period of time without feedback. This occurs because there is no progress bar during the seek time. The designers assumed the seek time is negligible (true most of the time) and, thus, no provision was made to include a progress bar when seek time is substantial..

Nov 2031 Missed Button Clicks Case Study Task: Using a paint program, zoom in and crop image Step 1. Click Zoom tool Step 2. Click in image (zoom) Step 3. Click Selection tool Step 4. Click and drag in image Step 5. Crop Zoom Selection But… Button clicks are frequently missed. I get zooming when I want selection, or selection when I want zooming.

Nov 2032 Kangaroo Effects Case Study Task: In a paint program select a region of an image, part of which is outside the viewport Step 1. Click Selection tool Step 2. Click and drag Select to off-screen region But… When the selected region hits the edge of the window, the viewport automatically scrolls. But the scroll rate is too fast. The selected region extends far beyond the desired end-point. Attempting to correct this by moving in the reverse direct produces the same problem but in the opposite direction. I end up hopping – like a kangaroo – back and forth trying to get the desired region selected.

Nov 2033 Speak the User’s Language From Environment Canada’s web site… Case Study Task: Determine weather conditions. Mostly likely you want to know the current weather in your present location. But… When were these weather conditions gathered? 11:00 UTC, apparently. What is UTC? (The answer is in their FAQ page!)

Nov 2034 (Not so) Intelligent Dragging Case Study Task: In an editor, select a region of text by dragging Select this region But… I can’t select the desired region. I get  Or 

Designing for Humans SR Compatibility

Nov 2036 SR Compatibility – What is it? S = Stimulus, the input device that is being manipulated or stimulated R = Response, the visual, aural, or kinesthetic sense that is affected by the stimulus Compatibility refers to the correctness of the match between the stimulus and the response

Nov 2037 Senses Visual Aural Kinesthetic Sensory experience derived from bodily movements and tensions

Nov 2038 Example – Cursor Control (1D) StimulusResponse Wrist and/or arm movement

Nov 2039 Example – Object Manipulation (1D) Stimulus Response

Nov 2040 Example – Object Manipulation (2D) Stimulus Response Stimulus Response

Nov 2041 The Issue In 2D there are 3 dof (degrees of freedom) x position or displacement y position or displacement  Z – z-axis angle or rotation A mouse is a 2 dof device Senses x displacement Senses y displacement Does not sense z-axis rotation The problem: generating z-axis rotation data with a mouse

Nov 2042 Solution #1 – Rotate Tool Step #1 – acquire object, move mouse Step #2 – click on rotate tool (enable rotate mode) or ? Step #3 – acquire object, move mouse

Nov 2043 Solution #2 – Build a 3 dof Mouse Stimulus Response Step #1 – acquire object, move mouse

Nov 2044 Solution #2 – There it is! (MacKenzie, Soukoreff, & Pal, 1997) Two-ball mouse with 3 degrees of freedom

Nov 2045 Design Issues for 3 dof mouse Switching between 2 dof and 3 dof modes Solution: use a modifier key (e.g. SHIFT) to enable 3 dof mode Yielding 360° of rotation from limited wrist movement Solution: use a modifier key (e.g. CTRL) to “amplify” rotational mapping

Nov D Interaction (6 dof) ?

Nov 2047 SR Compatibility & Cultural Bias Stimulus (switch)Response (switch) Question: Is the light on or off? Answer: Off (in England) On (in Canada)

Nov 2048 SR Compatibility in User Interfaces Press me Visual feedback? Aural feedback? Kinesthetic feedback? Visual feedback? Aural feedback? Kinesthetic feedback?   Works pretty good, eh?

Nov 2049 Stimulus vs. Response – setting time What does this button do? Answer: moves the selected field “backwards” in time.

Nov 2050 Yes, but… “up” = earlier “down” = later