Compiled notes for CS378 Principles of Interaction Design taught by Ramona Broussard at the University of Texas at Austin.
- Affordances & Signifiers (Norman 10-19)
- Constraints (Norman 123-135)
- Affordance (Lidwell 22-23)
- Constraint (Lidwell 60-61)
- Mapping & Feedback (Norman 20-24)
- Switches (Norman 135-140)
- Aesthetic-Usability Effect (Lidwell 20-21)
- Visibility (Lidwell 250-251)
- Advance Organizer (Lidwell 18-19)
- Chunking (Lidwell 40-41)
- Mental Model (Lidwell 154-155)
- Operant Conditioning (Lidwell 174-175)
- Nudge (Lidwell 170-171)
- 80/20 Rule (Lidwell 14-15)
- Chunking (Lidwell 40-41)
- Hierarchy (Lidwell 122-123)
- Hick's Law (Lidwell 120-121)
- Serial Position Effects (Lidwell 220-221)
- Modularity (Lidwell 160-161)
- Alignment (Lidwell 24-25)
- Area Alignment (Lidwell 30-31)
- Closure (Lidwell 44-45)
- Common Fate (Lidwell 50-51)
- Constancy (Lidwell 58-59)
- Rule of Thirds (Lidwell 208-209)
- Horror Vacui (Lidwell 128-129)
Natural signs to communicate the correct message without labels.
Complex devices, discoverability and understanding require the aid of manuals or personal instruction. If complex, unnecessary for simple things.
Industrial Designers emphasizing form and material
Industrial Design: The professional service of creating and developing concepts of specifications that optimize the function, value, and appearance of products and systems for the mutual benefit of both user and manufacturer.
Interactive Designers emphasizing understandability and usability
Interaction Design: The focus is upon how people interact with technology. The goal is to enhance people's understanding of what can be done, what is happening, and what has just occurred. Interaction design draws upon principles of psychology, design, art, and emotion to ensure a positive, enjoyable experience.
Experience Designer emphasizing the emotional impact
Experience Design: The practice of designing products, processes, services, events, and environments with a focus placed on the quality and enjoyment of the total experience.
Reasons for deficiencies in human-machine interaction • Tech limits • Budget cut, restrictions • Lack of understanding
Human-Centered Design (HCD) - approach that puts human needs, capabilities, and behavior first, then designs to accommodate those needs, capabilities, and ways of behaving.
Fundamental Principles of Interaction • Experience 5 Fundamental Psychological concepts • Affordances • Signifiers • Constraints • Mappings • Feedback • *conceptual model
#### Foreword (Lidwell 11-13) Design, lack of psychology and anthropology. Little knowledge in understanding human perception and meaning making.Biophilia Effect
- High ceilings promote creativity
- Views of nature are restorative to the sense of well-being
Propositional Density
- Looks at meaning in terms of analogies of shape, meaning, and supposition.
- Gives designer ability to calculate product design's capability to resonate with people.
- More importantly, gives designer way to communicate with client in terms of supporting the choices that have been made for the design.
Concepts in this book, broadly referred to as "principles"
- Laws
- Guidelines
- Human biases
- General design considerations
Principles selected from a variety of design disciplines based on
- Utility
- Degree of misuse or misunderstanding
- Strength of supporting evidence
Common methodologies
- Goal-driven design
- Usability
- The five-dimensions
- Cognitive psychology
- Human interface guidelines
Goal-Driven Design - Alan Cooper, problem solving as highest priority, first and foremost satisfying specific needs and desires of end-user.
- Design first; program second
- Consideration for how users interact
- Separate responsibility for design from responsibility for programming
- Hold designers responsible for product quality and user satisfaction
- Define one specific user for your product
- "persona"
- Work in teams of two
- "design communicator"
- Project manager, content strategist, information architect, etc.
Usability - "can someone easily use this?"
- Human Computer Interaction - Alan Dix, Janet E. Finlay
- Learnability
- Flexibility
- Robustness
- Nielson, Schneiderman
- Learnability
- Efficiency
- Memorability
- Errors
- Satisfaction
- International Standard (ISO 9241)
- Learnability
- Understandability
- Operability
- Attractiveness
- Usability compliance
The Five-Dimensions - Gillian Crampton Smith
- 1D: words - simple to understand, communicate information easily
- 2D: visual representation - all graphics or images, essentially everything that is not text. Used in moderation.
- 3D: physical objects or space - physical hardware
- 4D: time - time that user spends on first 3 dimensions. Includes ways in which users might measure progress, as well as sound and animation
- 5D: behavior - added by Kevin Silver, emotions and reactions users get from interaction
Cognitive Psychology - attention, language use, memory, perception, problem solving, creativity, thinking
- Mental Models - images in a user's mind that informs them of expectations of certain systems and interactions
- Interface Metaphors - user of known actions to lead to new actions.
- Affordances - things that are not only designed to do something, but also to LOOK like they are designed to do something.
Examples:
- Chair - "is for" support, affords sitting, affords lifting depending on person
- Glass affords transparency, see through and support, but not passage of air or most physical objects
"Information Pickup"
- Sight
- Sound
- Smell
- Touch
- Balance
- Kinesthetic
- Acceleration
- Body position
Signifiers - signaling component of affordances
- Communication of purpose, structure, and operation of the device
- Signifiers are signals, signs, labels, drawings
- Signifiers signal things, in particular what actions are possible and how they should be done. Signifiers must be perceivable, else they fail to function.
Physical Constraints - constrain possible operations
Cultural Constraints: each culture has a set of allowable actions for social situations
- Erving Gofferman calls the social constraints on acceptable behavior "frames"
- Likely to change with time
- Legacy Problem
Semantic Constraints: rely upon the meaning of the situation to control the set of possible actions
- Can also change with time
- Rely upon our knowledge of the situation and of the world
- Push the boundaries of what we think of as meaningful and sensible
- New technologies change the meaning of things
- The meanings of today may not be the meanings of the future
Logical Constraints: logical relationship between spatial or functional layout of components and the things that they affect or are affected by
Cultural Norms, Conventions, and Standards
- Violation of cultural conventions can completely disrupt an interaction
Examples:
- Round wheels are better suited than square wheels for rolling; therefore, round wheels are said to better afford rolling.
- Stairs are better suited than fences for climbing; therefore, stairs are said to better afford climbing. A door with a handle affords pulling. Sometimes, doors with handles are designed to open only by pushing - the affordance of the handle conflicts with the door's function. Replace handle with a flat plate, and it now affords pushing.
A method of limiting the actions that can be performed on a system.
- Physical constraints limit the range of possible actions by redirecting physical motion in specific ways.
- Three kinds are paths, axes, and barriers.
- Reduce sensitivity of controls, minimize unintentional inputs, and prevent or slow dangerous actions.
- Psychological constraints limit the range of possible actions by leveraging the way people perceive and think about the world.
- Three kinds are symbols, conventions, and mappings.
- Improve the clarity and intuitiveness of a design.
- Simplify usability and minimize errors.
Feedback
- Communicating the results of an action.
- Must be immediate, informative, and minimal.
Aesthetic consistency refers to consistency of style and appearance. Enhances recognition, communicates membership , and sets emotional expectations.
Functional consistency refers to consistency of meaning and action. Improves usability and learnability by enabling people to lever existing knowledge about how the design functions.
Internal consistency refers to consistency with other elements in the system. Cultivates trust with people; is an indicator that a system has been designed, and not cobbled together.
External consistency refers to consistency with other elements in the environment. Extends the benefits of internal consistency across multiple, independent systems.
#### Recognition over Recall (Lidwell 200-201) Memory for recognizing things is better than memory for recalling things. ## 10 Usability Heuristics (Nielsen) 1. **Visibility of system status:** The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.. 2. **Match between system and the real world:** The system should speak the user's language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. 3. **User control and freedom:** Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 4. **Consistency and standards:** Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 5. **Error prevention:** Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. 6. **Recognition rather than recall:** Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 7. **Flexibility and efficiency of use:** Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 8. **Aesthetic and minimalist design:** Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 9. **Help users recognize, diagnose, and recover from errors:** Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 10. **Help and documentation:** Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. ## Structures & Tutorials #### Advance Organizer (Lidwell 18-19) An instructional technique that helps people understand new information in terms of what they already know. - Brief chunks of information - spoken, written, or illustrated. - Presented prior to new material to help facilitate learning and understanding. - Present the "big picture" - more abstract.Expository: useful when audiences have little or no knowledge similar to the information being taught.
Comparative: useful when audiences have existing knowledge similar to the information being presented.
#### Chunking (Lidwell 40-41) A technique of combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember. #### Mental Model (Lidwell 154-155) People understand and interact with systems and environments based on mental representations developed from experience.System Models: designers generally have very complete accurate system models, but often have weak interaction models. They know how a system works but not how people will interact with it.
Interaction Models designers can obtain accurate and complete models through personal use of the system, lab testing, and direction observation of people interacting with the system or similar systems.
It is better to have people learn a new model that is clear and consistent, than to use a familiar model that does not fit.
#### Operant Conditioning (Lidwell 174-175) A technique used to modify behavior by reinforcing desired behaviors, and ignoring or punishing undesired behaviors (also known as instrumental conditioning).Probably most researched and well-known technique used to modify behavior.
Three basic operant conditioning techniques: positive reinforcement, negative reinforcement, and punishment.
- Should try to always use first two over punishment.
- Fixed ratio schedules of reinforcement early in training. When basic behaviors are mastered, switch to variable schedules of reinforcement.
People prefer the path of least resistance when making decisions.
Defaults - select defaults that do the least harm and most good
Feedback - provide visible and immediate feedback for actions and inactions
Incentives - avoid incentive conflicts and align incentives to preferred behaviors
Structured Choices - provide the means to simplify and filter complexity to facilitate decision making
Visible Goals - make simple performance measures clearly visible so that people can immediately assess their performance against a goal state
Consider nudges in the design of objects and environments where behavior modification Is key.
## Information Architecture / Organizing Elements #### 80/20 Rule (Lidwell 14-15) A high percentage of effects in any large system are cause by a low percentage of variables. - Approximately 80 percent of the effects generated in a large system are caused by 20 percent of variables in that system. - Useful for focusing on resources and, in turn, realizing greater efficiencies in design. - Limit application of 80/20 rule to variables in a system that are influenced by many small and unrelated effects.Examples:
- 80 percent of a product's usage involves 20 percent of its features
- 80 percent of a town's traffic is on 20 percent of its roads
- 80 percent of a company's revenues come from 20 percent of its products
- 80 percent of innovation comes from 20 percent of the people
- 80 percent of progress comes from 20 percent of the effort
- 80 percent of errors are caused by 20 percent of the components
Examples:
- Contents Topics
- Menus
- Phone Numbers
- Social Security Number
- Misusage - limiting number of words on a page in a dictionary to 4-5
Examples:
- File menu drop down
- Scantrons
- Braking
- Roadsigns
Example:
- Bad design of Butterfly ballot of Republican ticket of 2000
Example:
- PC configuration and parts
- Object Oriented Programming?
Heuristics: visibility of system status, match between system and the real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency of use, aesthetic and minimalise design, help users recognize, diagnose, and recover from errors, help and documentation
## Accessibility #### Accessibility (Lidwell 16-17) Objects and environments should be designed to be usable, without modification, by as many people as possible. (Also known as _barrier-free design_)Perceptibility is achieved when everyone can perceive the design, regardless of sensory abilities.
- present information using redundant coding methods (textual, iconic, tactile).
- provide compatibility with assitive sensory technology (ALT tags for images).
- position controls and information so that seated and standing users can perceive them.
Operability is achieved when everone can use the design, regardless of physical abilities.
- minimilize repetitive actions and the need for sustained physical effort.
- facilitate use of controls through good affordances and constraints.
- provide compatitibility with assitive physical technologies (wheelchair access)
- position controls and information so that seated and standing users can access them.
Simplicity is achieved when everyone can easilty understand and use the design, regardless of experience, literacy, or concentration level.
- remove unnecessary complexity.
- clearly and consistently code and label controls and modes of operation.
- use progressive disclosure to present only relevent information and controls.
- provide clear prompting and feedback for all actions.
- ensure that reading levels accommodate a wide range of literacy.
Forgiveness is achieved when designs minimize the occurrence and consequences of errors.
- use good affordances and constraints (controls that can only be used the correct way) to prevent errors from occurring.
- use confirmations and warnigns to reduce the occurrence of errors.
- include reversible actions and safety nets to minimize the consequence of errors (the ability to undo an action).
Size Constancy: The size of objects is perceived to be constant, even though a change in distance makes objects appear smaller or larger.
Example: a city skyline at a great distance appears small, but the perception of the size of the buildings remains constant.
Brightness Constancy: The brightness of objects is perdeived to be constant, deven though changes in illumination make the objects appear brighter or darker.
Example: a white shirt appears gray in a dark room, but the perception of the color of the shirt remains constant.
Shape Constancy: The shape of objects is perceived to be constant, even though changes in perspective makes the objects appear to have different shapes.
Example: a wheel from the side appears circular, at an angle it appears elliptical, and from the front it appears rectangular, but the perception of the shape of the wheel remains constant.
Loudness Constancy: The loudness of a sound is perceived to be constant, even though a change in distance makes the sound seem softer or louder.
Example: music playing on a radio seems to get softer as you walk away from it, but the perception of the volume of the radio remains constant.