Human Aspects of HCI -- later in file Evolution of User Interfaces HUMAN INFORMATION PROCESSING This session: -- how information processing has been used as the basis for understanding user interaction -- characterize HCI in terms of cognitive processes -- examine the human's ability to process information THE HIP approach: People are active, dynamic systems capable of great flexibility in the ways they choose to handle and transform information. WHAT WILL BE DISCUSSED: - memory - perception - attention - learning - personality =========================================== THE HUMAN INFORMATION PROCESSOR INPUT CHANNELS: - vision (sight) - audition (hearing) - gustation (taste) - olifaction (smell) - kinesthesis (touch) - balance (vestibular/inner ear equilibrium) STORAGE AND PROCESSING SYSTEMS - short term sensory store very short duration, brought into working memory by attention - short term (working) memory maintained by auditory rehearsal, used for cognitive processing -- - long-term memory high-capacity, storage by elaboration, content addressable ==================================== OUTPUT CHANNELS - Speech - Motor Control anthropometry and performance ======================= MEMORY THREE MEMORY SUBSYSTEMS: - Sensory - Working or short-term memory - Long-term memory SENSORY STORAGE Holds info from the eyes (iconic storage) and ears (echoic storage). This information is stored for a brief time -- less than one second -- after which it MUST ENTER WORKING MEMORY OR BE LOST. WORKING MEMORY OR SHORT TERM MEMORY Information from sensory storage must be transferred to working memory or short term memory. Through REHEARSAL information can be maintained in working memory. - the capacity of short-term memory is small -- info will disappear within 20 seconds unless it is repeated or practiced - minimize the amount of info in working memory. ============================= LONG TERM MEMORY - once information is transferred to long term memory, it is there forever - the problem is accessibility/retrieval. - the basic debate is how info is located and retrieved, and how many long term memory subsystems exist. INPUT ------> ------> ------> | sensory | ---------> |working memory | ------> | memory | | | V | long term memory | The traditional three box model of human memory ============================ SOME TERMS: - chunking: grouping and organizing information to fit into meaningful units. The size of chunks does affect ability to remember. the magic number is 7 +/- 2 (Miller 1956) - rote rehearsal: repeating info over and over to remember good for retention in short term memory. - constructive rehearsal: info must be linked to facts and concepts already in long term memory. - coding: compressing information into abbreviated form. physical -- short term retention is based on how something looks or sounds. semantic -- long term retention based on the meaning of words. - forgetting: simple forgetting/time bound. - interference: info gets mixed up with other info. proactive inhibition: occurs when earlier learning gets into the way of later learning retroactive inhibition: occurs when later learning gets into the way of earlier learning. trace decay: the passing of time will cause the strength of memory to decrease, thereby making it harder to remember. ================== memory trace: a sensory experience. If strengthened in some way (re:repetition) it becomes an actual chemical or structural change in the nervous system. - primacy/recency effect: when people memorize long lists of nonsense syllables, they remember more of the syllables at the beginning of the list (primacy effect) and at the end of the list (recency effect) than in the middle. ============================== HUMAN INFORMATION PROCESSING LIMITATIONS HUMAN VISION: Hardware: retina, cells, visual cortex retina has rods for B&W vision, cones (in fovea) for color The electromagnetic spectrum in frequency (determines color) wavelength = nanometers (nm) Frequency range: 400-700 nm color max. sensitivity at 525 nm (rods) and 575 nm (cones) Intensity Range -- determines brightness; has to do with sensitivity outside the fovea. reaction time -- average is 100-200 msec OTHER THINGS: - 50 percent population wears glasses - 8 percent males, 1 percent females are color blind ============================= THE COMMANDMENTS OF COLOR -- Aaron Marcus (1986) 1. Use a maximum of five, plus or minus two colors. Four distinct colors are appropriate. Allows extra room in short-term memory which can store five words or shapes, six letters, seven colors, and eight digits. Computers can provide 16 million colors; humans can discriminate about 7.5 million colors. Use spectral order in color coding -- red, orange, yellow, green, blue, indigo, violet. 2. Use foveal (center) and peripheral colors appropriately. Use blue for large areas, not for text type. Blue is good for slide and screen backgrounds. Use red and green to capture attention. The visual field adapts easily to this. 3. Use colors that exhibit a minimum shift in color/size if the colors change in size in the imagery. Use light text, thin lines and small shapes (white, yellow, or red) on medium dark backgrounds for dark viewing situations. 4. Use same color for grouping related elements. 5. Use high value, high saturation colors to draw attention. Use brighter colors for older folks. 6. Use redundant coding of shape as well as color. Makes the display more resilient to color distortions. Ambient light changes can cause changes in perceived hue, value (lightness), and chroma (saturation). 7. Use color to enhance black and white information. ================================= HUMAN PERCEPTION Gestalt Grouping Principles of Association - Proximity Objects/events close in time/space - Similarity Objects/events that share properties/attributes - Closure Objects that form a complete or closed figure - Simplicity Forms that simplify the description - Symmetry Concept of balance and harmony - Figure Ground Attention is focused on one aspect at a time. Different views of one picture. ========================= HUMAN ATTENTION AND PERFORMANCE Human Atttention Two types: selective attention: ignore extraneous events divided attention: our ability to do more than one thing at a time HUMAN PERFORMANCE ACTION SLIPS (Failures in Commission) Not mistakes in judgement, but in performance/execution - error of omission -- skip part of a task - error of commission - performing a task incorrectly - extraneous act -- a task that should not have been performed because it diverts attention - sequential error -- a task is performed out of sequence ====================== DESIGN FOR ERROR Mistakes: an incorrect action is taken based on an incorrect decision Slips: are unintentional -- capture error: using the wrong command automatically -- description error: using wrong object for action -- data-driven error: e.g., saving a file to an unintended filename -- loss of activiation error: forget the objective of the search -- mode error: which mode am I in? ============================ OTHER HUMAN PERFORMANCE ISSUES: - time error - a task is performed too quickly, too early, too late, or not within the time allowed - Response speed -- later in this course - Fitt's Law -- (time to target) - speed versus accuracy tradeoff - automaticity -- with practice many tasks become automatic - fatigue versus inexperience HUMAN LEARNING Methods: - Adding to knowledge in framework - Modifying knowledge (tuning) - Creating new structures (restructuring) Teaching in terms of what is known: - Learning by analogy - Building on existing skills!!!!!!!! - Mental conceptual models (metaphors) - Icons ========================== LEARNING: FIVE CATEGORIES OF CAPABILITIES Gagne, 1985 The Conditions of Learning, 4th Edition. Intellectual skills -- knowing how Cognitive strategies -- skills that manage learning, remembering,thinking Verbal information -- the "telling" of information Motor skills -- execute movements Attitudes -- choices of personal actions =============================== LEARNING CONDITIONS Association Trial and error Reinforcement (primary/secondary) Conditioned responses (S-R, classical conditioning) Verbal association Insight Generalization INTERNAL/EXTERNAL CONDITIONS Conditions within the learner/conditions in the learning situation attention span delay of reinforcement encoding =============================== CLASSIFICATION OF LEARNING DIFFICULTIES (MACK ET AL., 1984) 1. Learning is difficult Learners experience frustration and blame themselves Learning takes longer than expected, and learners have trouble applying what they know after training 2. Learners lack basic knowledge Learners are naive about how computers work (they may not know computer jargon) Learners do not know what is relevant to understanding and solving problems 3. Learners make ad hoc interpretations Learners' interpretations can prevent them from seeing that they have a problem 4. Learners generalize from what they know Learners assume that text editing operations will work consistently 5. Learners have trouble following directions Learners do not always read or follow directions 6. Problems interact Learners have trouble understanding that one problem can create another 7. Interface features may not be obvious Learners can be confused by feedback messages and the outcome of procedures 8. Help facilities do not always help Learners do not always know what to ask for ================================ PERSONALITY AND COGNITIVE ISSUES - Assertiveness/passiveness - Anxiety - Automaticity - Introvert/extrovert - Motivation - Locus of control - Risk avoidance - Precision - Tolerance for stress - Gender - Age ============================================ USER EXPERIENCE LEVELS (Shneiderman, 1992) Novice, Intermittent, Expert Shneiderman: "All design should begin with an understanding of the intended users, including profiles of their age, gender, physical abilities, education, cultural or ethnic background, training, motivation, goals and personality." NOVICE OR FIRST TIME USERS: Assumed to have little knowledge about systems and computer issues in general. KNOWLEDGEABLE INTERMITTENT USERS: Many people will be knowledgeable but intermittent users of a variety of systems. EXPERT FREQUENT USERS: The expert or "power" users are thoroughly familiar with the syntactic and semantic (commands and meanings) and want to do things rapidly. ====================================== USER EXPERIENCE LEVELS (Shneiderman, 1992) Novices need - Clarity and simplicity - Small number of meaningful functions - Lucid error messages - Informative feedback - Comprehensible training materials - Online tutorial/demonstration Knowledgeable intermittent users prefer - Simple consistent commands - Meaningful sequencing of stepss - Memorable objects/actions plus prompts - Online assistance/Help - Protection from danger/reversibility Frequent users want - Powerful commands, command strings, user defined commands - Reduced keystrokes - Brief messages (with access to detail at request) - High speed interaction - Less distracting feedback ====================== THEORIES AND PRINCIPLES OF USER BEHAVIOR (Shneiderman, 1992) SYNTACTIC/SEMANTIC MODEL OF USER KNOWLEDGE Users have syntactic knowledge about device-dependent details and semantic knowledge about concepts. syntactic: is the actual key presses, letters, characters, icons that are being interacted with. This is the lower level. syntactic knowledge requires rote memorization. semantic: is meaning. This is the higher level. Two meaning levels: computer concepts task domain Both divided into: objects and actions computer concepts: moving text from point A to B. action: move, save, delete objects: directories, files task domain: decompose large and complex problems into smaller problems in a hierarchical manner until each subproblem is manageable. task actions: can be decomposed into smaller actions (e.g. writing, address, date, body of text, signature) task objects: letter, inventory ============================== SYNTACTIC/SEMANTIC MODEL OF USER BEHAVIOR Syntactic knowledge - Rote memorized - arbitrary - Subject to forgetting - Must be frequently rehearsed - Device dependent Semantic knowledge - Computer domain objects and actions (word processing, spreadsheet, database,...) - Task domain objects and actions (writing, stock trading, inventory,....) - Hierarchically structured - Meaningfully acquired: examples, analogy, discovery - Device independent - More stable in memory (Shneiderman & Mayer, IJCIS, 1979) (Shneiderman, 1983, 1986, 1990) ===================================== EIGHT GOLDEN RULES OF DIALOGUE DESIGN Shneiderman: - strive for consistency - enable frequent users to use shortcuts - offer informative feedback - design dialogues to yield closure - offer simple error handling - permit easy reversal of actions - support internal locus of control - reduce short-term memory load ========================== ON MENTAL MODELS Booth (1989) When people encounter new machines, devices, or computers they begin to construct mental models to represent their behavior and operation. Mental models are incomplete as it is rare that all of the subject matter concerning a task or system is known to the user. What does the research say? Experience drives users to form precise and representative model of the system with which they are dealing with. ============================== Meaningful Interfaces and Interface Metaphors Command names and icons should be selected on the basis of their meaningfulness Factors that determine meaningfulness: Context Function Recognition Knowledge in the world Metaphors: to what extent do they help users interact through computer systems????? Do they support intuitiveness? ============================= INTUITION Webster definition: 1. Quick and ready insight. 2. Immediate apprehension or cognition. 3. The power or faculty of attaining knowledge or cognition without evident rational thought and inference. The above definition speaks about the quality of intuition, but not how we intuit something. ======================================= METAPHORS CONTINUED (Cooper, 1995) The problem of the metaphor concept: The misuse of metaphors -- they have been inflated to unrealistic proportions. There can be significant misunderstandings. Does a picture of an airplane mean "send via airmail" or "make airline reservations"? Metaphors don't scale well. The ability to recognize metaphors is questionable. =================================== METAPHORS Booth (1989): Metaphors enable learning because we learn by building upon existing knowledge. Common concepts lead to new concepts based on existing knowledge. Metaphors provide shortcuts to understanding complex concepts. Louvgren: There are no real files or folders, no clock with numbers, no document. These are all associations created by the designer. ==================== THREE INTERFACE PARADIGMS (Cooper, 1995) First, what is computer literacy? Three interface paradigms: technology paradigm -- based on understanding how things work -- a difficult proposition. (One has to know how the software works in order to use it). "Users would rather be successful than knowledgable." metaphor paradigm -- based on intuiting how things work -- a risky method. idiomatic paradigm -- based on learning how to accomplish things -- a natural, human process. "We recognize it (check boxes, radio buttons, push buttons, pull-down menus, icons, mice, and pens) because we have looked at it (learned it once) and automatically (and easily) memorized it." ============================ AGENTS Isbister and Layton, 1995 Agents -- mimic different human attributes Examples: job description conversational ability -- error messages, ask for clarification, respond to a query taking control -- an agent could act as a gatekeeper for processes in which a user may not be an expert with. trustworthiness looks -- can mimic elaborate human expressive codes personality -- illustrative style -- believable agents are difficult to convey Multiuser Dundgeons (MUDs)* -- autonomous agent -- can perform actions that conform to its own goals and respond to queries about those goals. *virtual spaces players can log in to and "travel", building rooms, adding details -- sophisticated chat programs. ================== REASONS FOR BUILDING/USING AGENTS Isbister and Layton, 1995 Agents can provide assistance to users (offering advice, making suggestions, training) Agents can make users more productive/effective Users can off-load repetitive and/or mundane tasks to their agent Agents allow users to focus on the critical tasks and give agents knowledge of things that users should not need to know, such as the location of files or knowledge about the network =========================== ON RECOGNIZING METAPHORS Gagne and Briggs, 1979 Principles of Instructional Design "What will convince me that the student can recognize a metaphor? A metaphor is a concept, and since it is not something that can be denoted by pointing, it must be a defined concept." =========================== DON NORMAN -- THINGS THAT MAKE US SMART "....we become trapped in an ever-lengthening chain of technology dependence that in turn forces us to deal with an ever-increasing load of detailed information......The whole solution is wrong because the problem is wrong. The correct approach is to structure the world so that we do not have to remember such mindless trivia." =================================== Edwin Bos, Interactions, July 1995 Concluding remarks: "Where do you want to go? Do you care little about the loss of skill and privacy, eager to have an artificial memory aid that prevents you from forgetting? Don't let the manufacturers decide for us. Don't be a spectator and have others decide for you. Anticipate the impact of future technology. Analyze it. Evaluate it. Discuss it." ====================== Evolution of User Interfaces, Part I INTERACTION STYLES (Shneiderman, 1992) Dialogue: the sequence of transactions between user-system interaction. Interaction styles variety: menu question and answer form fillin command language query language natural language direct manipulation expert systems ======================== INTERACTION STYLE COMPARISON (see Shneiderman, pg 70, Table 2.1) Menu selection Advantages: shortens training, reduces keystrokes, structures decision making, permits use of dialog management tools, easy to support error handling. Disadvantages: danger of many menus, may slow frequent users, requires screen space, requires rapid display rate. Form fill-in Advantages: simplifies data entry, requires modest training, assistance is convenient, shows context for activity, permits use of form management tools Disadvantages: consumes screen space Command language Advantages: flexibility supports user initiative, appeals to "power" users, potentially rapid for complex tasks, support macro capability Disadvantages: requires substantial training and memorization, difficult to retain, poor error handling Natural language Advantages: relieves burden of learning syntax Disadvantages: requires clarification dialog, may require more keystrokes, may not show context, unpredictable Direct manipulation Advantages: visually presents task, easy to learn, easy to retain, errors can be avoided, encourages exploration, high subjective satisfaction Disadvantages: may require graphics display/pointing devices/ more programming effort, may be hard to record history or write ================= DIRECT MANIPULATION PHILOSOPHY: Visual representation of the "world of action" - Objects & Actions are shown sub-objects, e.g. documents -- paragraphs, sentences, words properties, e.g., text styles, font sizes actions -- people take actions on objects commands -- manipulation property/attribute specification: 1. user selects an object several words of text are selected 2. user then selects an action to apply to that object the action BOLD is chosen 3. the selected words are made bold and will remain bold until selected and changed again - Taps analogical reasoning - Less syntax reduces error rates - Faster learning and higher retention - Encourages exploration - There is subjective preference for this type - Rapid, incremental, and reversible actions - Replace typing with pointing/selecting - Immediate visibility of results and actions =============================== Two Principles of Direct Manipulation: o principle of virtuality: a representation of reality that can be manipulated. o principle of transparency: "The user is able to apply intellect directly to the task; the tool itself seems to disappear." Concerns About Direct Manipulation Some actions may be cumbersome History/tracing may be difficult "Kangarooing" -- over-emphasis on navigation Visually impaired have more difficulty Few "tested" icons exist Consumes more screen space May not necessarily be an improvement over text User must learn the meaning of the visual representation The visual representation may be misleading Using a mouse may be slower than typing =========================== A QUICK GLANCE AT USABILITY ISSUES AND WINDOWS 95 minor changes in the interface could lead to problems in transfer of knowledge (Karat, et. al, 1986) start button -- the launching point -- not always intuitive to Windows and non-Windows users clicking actions change -- what used to be a double-click action in Windows 3.1 may now be a single click lack of consistency may reduce positive transfer of knowledge right mouse button -- when clicked a menu of available options appears OS/2 like features -- filenames also have icons. When clicked, the application associated with that filename is launched. Novice users would have to click the start button, then move to help, then find tutorials, etc. ========================== THE SSOA MODEL AND DIRECT MANIPULATION Users of direct manipulation systems may need to have substantial task-domain semantic knowledge. However, users must acquire only a modest amount of computer-related semantic knowledge and syntactic knowledge. THREE PRINCIPLES -- Shneiderman 1. Continuous representation of objects and actions of interest. 2. Physical actions or presses of labeled buttons instead of complex syntax. 3. Rapid incremental reversible operations whose effect on the object of interest is immediately visible. =================== GRAPHICAL USER INTERFACES (GUIs) Screens Windows Menus Dialogue boxes Icons Cursors SOME CURRENT GRAPHICAL SYSTEMS Macintosh NeXTStep OPEN LOOK DECwindows OSF/Motif Microsoft Windows OS/2 Presentation Manager OS/2 Workplace Shell VISIBLE LANGUAGE Layout Typography Color and Texture Imagery: Signs, Icons, Symbols Animation Sequencing Sound Visual Identity ============================ GUI DESIGNS LEGIBILITY Design individual characteristics, symbolism, and graphic elements to be easily noticeable and distinguishable. READABILITY Design text and graphics to be easy to identify and interpret. Design displays to be inviting and attractive. TYPOGRAPHY Typefaces Type styles Typesetting Typefaces: Use a small number of typefaces of suitable legibility, clarity, and distinctiveness to distinguish between different classes of information. Type styles: select a set of enhanced letter forms, punctuation marks, and symbols. Typesetting: point size, word spacing To enhance readability and emphasize critical information. ============================= GENERAL PRINCIPLES OF GUI DESIGN (Galitz, 1994) 1. Provide visual appeal by: - providing meaningful contrast between screen elements - creating groupings - aligning screen elements and groups - providing three dimensional representation - using color effectively and simply 2. Provide clarity with: - visual elements - functions - metaphors - words and text 3. Offer user compatibility with: - the task and the job - the product - the user's perspective 4. Provide comprehensibility by allowing the user to: - know what to look at - know what to do - know when to do it - know why to do it - know how to do it 5. Permit configurability 6. Provide consistency - similiar components should have a similiar look, similar uses, operate similiarly - the same action should yield the same result - the function of elements should not change - the position of standard elements should not change - follow and expand standards and guidelines (e.g. IBM's System Application Architecture Common User Access (SAA-CUA), Open Software Foundation's OSF/Motif Style Guide, Microsoft's The Windows Interface, and others. 7. Give the user control - actions should result from explicit user requests - actions should be performed quickly - actions should be capable of interruption or termination - the user should feel and be in charge 8. Provide directness via object-action sequence. Intuitiveness in here, too. 9. Provide efficiency - minimize eye, hand, and other control movements - transitions should flow easily 10. Employ familiarity - use realistic metaphors 11. Provide flexibility by supporting - user's knowledge and skills - user's experience - user's personal preference - user's basic habits - the conditions at the moment 12. Be forgiving - when errors occur provide constructive messages 13. Provide recovery - from errors - for immediate return to a certain point (reversibility) 14. Provide simplicity - provide defaults - make common actions simple - uniformity 15. Permit transparency - the user should not be concerned about the mechanics involved 16. Know there will be trade-offs =============================== CONTROLS command buttons: Description (Galitz): a rectangular shape with text inside that shows the action to be taken when selected. a square or rectangle shape with a symbol inside. Purpose: To execute commands directly. To display a menu or manipulate a window. Buttcons (Cooper, 1995) A combo of buttons and icons. Toolbars are mostly populated with familiar, three dimensional, rectangular push-buttons with pictographic icons on them instead of text. Why not text? -- requires users to focus and read them -- reading is slower and more difficult than recognizing images Pictorial symbols -- easy to recognize, but they often lack precision and clarity Momentary buttcons -- stays pressed only when the mouse button is pressed. Latching buttcons -- one that stays depressed after the mouse button is released ========================= BUTTON GUIDELINES Galitz, 1994 Structure design alternatives to a rectangular-shaped box: A square-cornered rectangle A round-cornered rectangle Beveled edges Drop shadows maintain consistency of style through an application. Labels use standard buttons when available use meaningful text and symbols standard names and uses For example: IBM's SAA CUA OK -- any changed information in the window is accepted and the window is closed APPLY-- any changed information in the window is accepted and again displayed in the window RESET -- cancels any changed information that has not been submitted CANCEL -- closes window without performing non-submitted changes HELP -- displays contextual help Size Buttons must be wide enough to accommodate the longest label Number keep number of buttons to six or fewer Location horizontally on the lower part of the window vertically on the right side Organization Keep related buttons grouped together Keep destructive buttons separate from frequently used buttons Keep buttons consistently positioned across screens The orders should never change Pointing Highlight the button in some visually distinctive manner when the pointer is resting on it and the button is available for selection. Activation Highlight the button in another visually distinctive manner when it has been activated or pressed to indicate that the action is successful. =========================== TOOLBARS are not menus an accelerator for the menu -- access to program's functions used frequently changed the role of the push-button that was primarily text-based. First rectangle, then square without text, but with a picture. The buttcon emerged. buttcons on toolbars -- SAID to adequately convey meaning to first time users, but this leads to a misunderstanding about toolbars help features -- ToolTips, balloon help ================================== RADIO BUTTONS Description: a two-part control consisting of small circles, diamonds, or rectangles choice text when a choice is made: the option is highlighted any existing choice is automatically deselected Purpose: To set one of a small set of mutually exclusive options Other: a variant of checkboxes wasteful of video space meaningful in groups one of the older GUI idioms ========================== RADIO BUTTON GUIDELINES Galitz (1994) Selection Descriptions Display using mixed-case letters Provide meaningful choice descriptions Size Show a minimum of two choices, a maximum of seven or eight Structure If radio buttons are used, left-align the buttons and choice descriptions If rectangular boxes are used, create boxes of equal height Pointing The selection target area should be as large as possible in order to make it easy to move to. Activation When a choice is selected, distinguish it visually from the non-selected choices. ================================ CHECK BOXES Description a two part control consisting of a square box choice text each option acts as a switch (on/off) Purpose To set one or more options as either on or off OTHER: a visual idiom still popular for presenting a single binary choice slows down user to have to read it. what is the current state? other names: "toggle buttons (OSF/MOTIF), "switches" (NeXTStep) GUIDELINES about the same for radio buttons ============================= SCROLL BARS Description: an elongated rectangular container consisting of: -- a scroll area -- a slider box inside -- arrows or anchors at either end -- maybe oriented vertically or horizontally at the window's edge Purpose to find and view information that takes more space than the allotted display space OTHER: Scroll bars should tell us: what page we are on how many pages there are in total the first sentence (or item) of each page we scroll the page number (record number, graphic) as we scroll kangarooing -- overcompensating scroll bar action ============================== SCROLL BAR GUIDELINES Galitz (1994) Provide a scroll bar when non-visible information must be seen When the slider box/handle has been selected, highlight it in some visually distinctive way A vertical (top-to-bottom) scroll bar should be positioned to the right of the window A horizontal (left to right) scroll bar should be positioned at the bottom of the window the scroll bar should reflect the current state vertical scrolling is preferred to horizontal ================================= VISUAL THINKING AND ICONS WIMP - Windows, Icons, Mouse, & Pull-down menus interfaces Icon - a picture, an image, or symbol representing a concept. ICON REPRESENTATIONAL FORMS resemblance symbolic arbitrary ===================