human-centered design

Human factors & interactive digital media design

Focus on human commonalities - memory, perception, and attention

Introduce the Information Processing Model of cognition

Suggest some human-centered design strategies derived from these understandings and the information processing model

lecture: overview

guiding assumptions

Human systems – memory, attention, perception – provide some unique constraints of which designers should be aware

Simple, commonsensical approaches to interface and information design can make a difference in using with online and offline multimedia environments

The more cognitive resources (attention, memory, etc.) that you can focus on the educational task, the better the learning outcomes – HUMAN-CENTERED DESIGN MATTERS

human factors: memory systems

Information Processing Model

memory: sensory

Memory system that supports momentary storage of large amounts of information gathered by our senses (echoic, iconic, haptic, etc.)

Data is stored in sensory registers for a brief period of time (under 5 sec.).

This is enough time to either react or attend to critical information.

Most data, however, is discarded.

memory: working

Working memory provides a temporary workspace for information drawn from the sensory registers and activated from long term memory.

This is where thinking occurs.

Working memory has a limited storage capacity for information.

Information decays quickly without constant rehearsal.

memory: long-term

The memory system that supports relatively permanent storage of information is called long-term memory.

Long-term memory has unlimited capacity.

Learning is about transferring information from working memory into long-term memory.

Learning theories provide strategies for encoding information in such a way that it can later be recalled and applied in novel situations.

sensory memory: processing

Sensory memory facilitates feature analysis and pattern recognition which allows us to recognize friends and friendly user interface elements

Recognition involves both bottom-up processing and top-down processing

– Perception is based upon bottom-up processing and helps us to distinguish between data elements.

– Top-down procession provides interpretations of data. These are colored by our understandings of specific contexts and environments

processes of perception

The act of perception is a fast, but complex task.

break down complex stimuli into simple features

extract features from sensory data

construct patterns from this information

compare patterns with those in long-term memory

finding a match = perception

sensory memory: processing & interpretation

ex. jumping to conclusions

feature analysis: design implications

use contrast and size to bring out salient features of letters and objectsEx. page background

clearly delineated edges helps feature analysis - line drawings and line-based icons are more quickly processed than tonal images

leverage feature compatibility – are icons and fonts compatible with expectationsEx. typography

Icons and user interface elements should match a given interface context

Advantages:– they are recognized as quickly as words

– they support dual encoding as visual representations

and semantically

Disadvantages:– difficult to develop universally recognized icons

– difficult to develop a series of clear, distinct icons to represent different content and functionality

special issues: icons

rules of thumb: icons

Use labels with icons.

Icons should be distinct to aid memory.

Clear, simple icons are often more easily interpreted than complex, 3-D tonal icons.

visual search & detection

Understanding how humans search and detect visual information suggest strategies for interface and graphic design

– Humans tend to search through elements on a screen in either a serial or parallel fashion looking for a targets

The time it takes to locate a target (the desired menu item, page

content, etc. ) depends upon a few variables:– The number of items on a screen – serial search; Neisser: T=(NI)2

– Element conspicuity – parallel; things that stand out are located faster and elements noticed in parallel

– logical content organization and expectancies

visual search: design strategies

visual search: design strategies

working memory: model

working memory: capacity & duration

hgniy

a f b z e g o y k t v p

working memory: capacity & duration

The Magic Number Seven – Plus or Minus Two

- George Miller

working memory: capacity & duration

b a t p i g d o g a n t

working memory: considerations

The limits of working memory is an impediment to learning

– educational content

– navigational structures

– computer environments and interfaces

Instructional and interface designs, content organization and site architecture should account for these limitations and potentials

focus on attention

Information processing relative to learning requires a great degree of attention and cognitive resources

Like working memory, human attention is limited

Multitasking or splitting attention often causes a drop in performance of all tasks involved

If the majority of participants’ attention is consumed by the mechanics of your screen environment or wading through poor design and information structures, there will be less cognitive resources for the actual learning objectives.

variables impacting attention

Automaticity– When a task becomes automatic it requires less in the way of conscious

cognitive resources

– Automaticity can increases our ability to multitask and attend to larger sets of information

Multiple modalities– It is easier to divide attention between two different modalities (one visual,

one aural) than between two distinct information sources presented in same modality

– Earliest Memories

working memory: design strategies

Minimize the load on working memory for learning activitiesdesign user interfaces, interactive modules, and learning materials so that participants are not required to hold large numbers of discrete chunks of information in memory (remember the magic number 7 +- 2)

Organize information into meaningful chunks for working memory

The limits are working memory can be extended when the chunks of information are larger

working memory: design strategies

working memory: design strategies

long-term memory: conceptual structures

Information is organized into associative networks (schemas)

Schemas reflect central ideas or concepts– Ex. What a web site is, a college campus, etc.

Scripts are schemas describing sequences of actions– Ex. filling out & submitting a form on the web, navigating through a

web site using hypertext links, driving a car to class, dining in a restaurant, etc.

Mental models are schemas of dynamic systems, objects & equipment– Ex. VCRs, interactive web environments, etc.

long-term memory: design strategies

Pursue designs that leverage shared schemas or conventions (ex. hyperlinks)

Use conventions and popular standards

long-term memory: design strategies

If information is to be remembered, make it meaningful.

– organize into meaningful associations

– present in multiple modes so that one can reinforce the other

– design in a manner consistent with existing mental models or pre-existing knowledge

– design information to highlight important connections and relationship

Embed knowledge in the world to support development of accurate mental models; use natural mappings

summary Human Factors implications

Human systems – memory, attention, perception – provide unique design constraints of which designers should be aware

Simple, commonsensical approaches to interface and information design

– avoiding clutter– making things distinct and visible– reducing cognitive load from extraneous information – Designing interfaces to accommodate human expectations of the web

can make a difference in learning from web-based environments

The more cognitive resources (attention, memory, etc.) that you can focus on the educational task, the better the outcomes –

HUMAN-CENTERED DESIGN MATTERS

human-centered principles & interface design

Interface

– Mediator between a user and the underlying system or environment

– Can either facilitate or inhibit use depending upon how well they incorporate human-centered principles

design heuristics Jakob Nielsen

10 Design Heuristics

– Visibility of system status– Match between system and real world– User control and freedom– Consistency and standards– Error prevention– Recognition rather than recall– Flexibility and efficiency of use– Aesthetic and minimalist design– Help users recognize, diagnose and recover from errors– Help and documentation

design heuristics: visibility of system status

design heuristics: control & freedom

design heuristics: consistency & standards

design heuristics: error prevention

design heuristics: flexibility & efficiency of use

design heuristics: aesthetic & minimalist design

design heuristics: help & documentation

add help screens where needed