Skip to content

Instantly share code, notes, and snippets.

@charuri
Last active March 7, 2016 03:19
Show Gist options
  • Save charuri/0db06513ffa618539ebf to your computer and use it in GitHub Desktop.
Save charuri/0db06513ffa618539ebf to your computer and use it in GitHub Desktop.
Compiled notes for CS378 Principles of Interaction Design taught by Ramona Broussard at the University of Texas at Austin

Interaction Design Study Guide

Compiled notes for CS378 Principles of Interaction Design taught by Ramona Broussard at the University of Texas at Austin.

Table of Contents

## Basics #### Introduction (Norman 1-10) Two most important characteristics of good design are: - **Discoverability** - is it possible to even figure out what actions are possible and where and how to perform them? - **Understanding** - what does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?

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
#### Booth IxD **Interaction Design (IxD)** defines the structure and behavior of interactive systems.

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.

  1. Design first; program second
    • Consideration for how users interact
  2. Separate responsibility for design from responsibility for programming
  3. Hold designers responsible for product quality and user satisfaction
  4. Define one specific user for your product
    • "persona"
  5. 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
    1. Learnability
    2. Flexibility
    3. Robustness
  • Nielson, Schneiderman
    1. Learnability
    2. Efficiency
    3. Memorability
    4. Errors
    5. Satisfaction
  • International Standard (ISO 9241)
    1. Learnability
    2. Understandability
    3. Operability
    4. Attractiveness
    5. Usability compliance

The Five-Dimensions - Gillian Crampton Smith

  1. 1D: words - simple to understand, communicate information easily
  2. 2D: visual representation - all graphics or images, essentially everything that is not text. Used in moderation.
  3. 3D: physical objects or space - physical hardware
  4. 4D: time - time that user spends on first 3 dimensions. Includes ways in which users might measure progress, as well as sound and animation
  5. 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.
## Affordances, Signifiers, & Contraints #### Affordances & Signifiers (Norman 10-19) **Affordance** - relationship between a physical object and a person (or for that matter, any interacting agent, whether animal or human, or even machines and robots) - Presence of affordance is jointly determined by + Qualities of object + Abilities of agent that is interacting - Affordance is not a property, it's a relationship - _Anti-affordance_ - prevention of interaction - To be effective, affordances and anti-affordances need to be discoverable-perceivable. - If not perceivable, use signifier to signal presence - represent possibilities in the world, visible or not, for how an agent can interact with something - Perceived affordances, sometimes misleading or accidental or purposeful - Affordances are the possible interactions between people and the environment. Some affordances are perceivable, others are not. - Perceived affordances often act as signifiers, but they can be ambiguous

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.
#### Constraints (Norman 123-135) Knowing what to do: constraints, discoverability, and feedback - Knowledge in the head - Constraints are powerful clues, limiting the set of possible actions

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
#### Affordance (Lidwell 22-23) A property in which the physical characteristics of an object or environment influence its function. - Objects and environments are better suited for some functions than others.

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.
#### Constraint Lidwell (60-61)

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.
## Mapping, Feedback, & Visibility #### Mapping & Feedback (Norman 20-24) **Mapping** - Natural Mapping, takes advantage of spatial analogies and leads to immediate understanding.

Feedback

  • Communicating the results of an action.
  • Must be immediate, informative, and minimal.
#### Switches (Norman 135-140) Light switches are bitches. #### Aesthetic-Usability Effect (Lidwell 20-21) Aesthetic designs are perceived as easier to use than less-aesthetic designs. - Perception bias interactions subsequent interactions and are resistant to change. - Early impressions influenced long-term attitude about their quality and use. - Fosters more positive attitudes. #### Visibility (Lidwell 250-251) The usability of a system is improved when its status and methods of use are clearly visible. - People are better at recognizing solutions when selecting from a set of options, rather than recalling solutions from memory. - Principle of visibility is perhaps the most important and most violated principle of design. - To incorporate into a complex system, one must consider the number of conditions: + Number of options per condition + Number of outcomes + (number of combinations can be overwhelming) - Leads developers to designing kitchen-sink visibility. + i.e., they try to make everything visible all the time + Makes information access more difficult due to overload. - Hierarchical organization and context sensitivity are good solutions for managing complexity while preserving visibility. - Visible controls and information serve as reminders for what is and is not possible. ## Error Handling #### Errors (Lidwell 82-83) An action or omission of action yielding an unintended result. - Most accidents are thought to be caused by what is referred to as human error, yet most accidents are actually due to design errors rather than errors of human operation. - Slips are sometimes referred to as errors of action or errors of execution, and occur when an action is not what was intended. + Result of automatic, unconscious processes, and frequently result from a change of routine or an interruption of an action. + Example: a person forgets their place in a procedure when interrupted by a phone call. + Minimize by providing clear feedback on actions. - Mistakes are sometimes referred to as errors of intention or errors of planning, and occur when an intention is inappropriate. + Result of conscious mental processes, and frequently result from stress or decision-making biases. + Example: a mistake occurs when a nurse interprets an alarm incorrectly and then administers the incorrect medicine. + Minimize by increasing situational awareness and reducing environmental noise. - Always incorporate the principle of forgiveness. Forgiveness refers to the use of design elements to reduce the frequency and severity of errors when they occur, enhancing the design's safety and usability. ## Consistency & Convention #### Consistency (Lidwell 56-57) The usability of a system is improved when similar parts are expressed in similar ways.

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.
#### Nudge (Lidwell 170-171) A method for predictably altering behavior without restricting options or significantly changing incentives (also known as choice architecture).

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
#### 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. - The term chunk refers to a unit of information in short-term memory - a string of letters, a word, or a series of numbers. - The maximum number of chunks that can be efficiently processed by short-term memory is for, plus or minus one. - Used to simplify designs, making it a potential misapplication of the principle. - Chunk when people are required to recall and retain information, or when information is used for problem solving. - Do not chunk something that is to be searched or scanned.

Examples:

  • Contents Topics
  • Menus
  • Phone Numbers
  • Social Security Number
  • Misusage - limiting number of words on a page in a dictionary to 4-5
#### Hierarchy (Lidwell 122-123) Hierarchical organization is the simplest structure for visualizing and understanding complexity. - **Tree** structures illustrate hierarchical relationships by locating child elements below or to the right of parent elements. + Effective for representing moderate complexity, but can become cumbersome when larger and more complex. + Grows quickly, and become tangled when multiple parents share common child elements. - **Nest** structures illustrate hierarchical relationships by visually containing child elements within parent elements, as in Venn diagrams. + Most effective when representing simple hierarchies. - **Stair** structures illustrate hierarchical relationships by stacking child elements below and to the right of parent elements, as in an outline. + Effective for representing complex hierarchies, but are not easily browsed, and falsely imply a sequential relationship between the stacked child elements. #### Hick's Law (Lidwell 120-121) The time it takes to make a decision increases as the number of alternatives increases. - All tasks consist of four basic steps: 1. Identify a problem or goal 2. Assess the available options to solve the problem or achieve the goal 3. Decide on an option 4. Implement the option - Law does not apply to decisions that involve significant levels of searching, reading, or complex problem solving. - Consider the law when designing for time-critical tasks, also minimizes errors, response time, and training costs.

Examples:

  • File menu drop down
  • Scantrons
  • Braking
  • Roadsigns
#### Serial Position Effects (Lidwell 220-221) A phenomenon of memory in which items presented at the beginning and end of a list are more likely to be recalled than items in the middle of a list. - **Primacy effect:** improved recall for items at the beginning of a list. + stronger when items are slowly presented. - **Recency effect:** improved recall for items at the end of a list. + Unaffected by rate of presentation but is dramatically affected by the passage of time and the presentation of additional information. - _Visual stimuli_, items presented earliest have greatest influence. - _Auditory stimuli_, items late in a list have greater influence. - **Order effects:** first and last items in a list are more likely to be selected than items in the middle. - When the list is visual, present important items at the beginning. When the list is auditory, present them at the end. In decision-making situations, if the decision is to be made immediately after the presentation of the last item, increase the probability of an item being selected by presenting it at the end of the list, otherwise, present it at the beginning.

Example:

  • Bad design of Butterfly ballot of Republican ticket of 2000
#### Modularity (Lidwell 160-161) A method of managing system complexity that involves dividing large systems into multiple, smaller self-contained systems. - Should be designed to hide their internal complexity and interact with other modules through simple interfaces. - Results in overall reduction in system complexity and a decentralization of system architecture, which improves reliability, flexibility, and maintainability.

Example:

  • PC configuration and parts
  • Object Oriented Programming?
## Save Point **Terms to remember:** discoverability, understanding, design(er) (industrial, interactive, experience), Human-Centered Design (HCD), usability, goal-driven design, affordance, signifier, constraints (physical, psychological, cultural, semantic, and logical), mapping, feedback, aesthetic-usability effect, visibility, error, forgiveness, slips, consistency (aesthetic, functional, internal, external), convention, recognition over recall, advance organizer (expository, comparative), chunking, mental model (system, interaction), conditioning (positive, negative, punishment), nudge (defaults, feedback, incentives, structured choices, visible goals), 80/20 rule (Pareto's Principle), hierarchy (tree, nest, stair), Hick's law, serial position effects (primacy, recency, order), stimuli (visual, audio), modularity

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).
## Visual Blocking #### Alignment (Lidwell 24-25) The placement of elements such that edges line up along common rows or columns, or their bodies along a common center. #### Area Alignment (Lidwell 30-31) Alignment based on the area of elements versus the edge of elements. #### Closure (Lidwell 44-45) A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements. #### Common Fate (Lidwell 50-51) Elements that move in the same direction are perceived to be more related than elements that move in different directions or are stationary. #### Constancy (Lidwell 58-59) The tendency to perceive objects as unchanging, despite changes in sensory input. (aka. _perceptual constancy_)

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.

#### Rule of Thirds (Lidwell 208-209) A technique of composition in which a medium is divided into thirds, creating aesthetic positions for the primary elements of a design. (aka. _golden grid rule_) #### Horror Vacui (Lidwell 128-129) A tendency to favor filling blank spaces with objects and elements over leaving spaces blank or empty. ## Save Point **Terms to remember:** accessiblity (perceptibility, operability, simplicity, forgiveness) ## Reference Material [The Design of Everyday Things: Revised and Expanded Edition](http://amzn.to/1oyT2Cg) by Don Norman [Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design](http://amzn.to/1PUVsES) by William Lidwell
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment