psychology of website design - dr. pamela rutledge

Dr. Pamela RutledgeMedia Psychology Research Center

September 2009http://www.mprcenter.org

Topics in Media Psychology

The Psychology ofWebsite Design

What is Media Psychology?

►Emerging field

►Using psychology to understand use and influence of media technologies

►Traditional perspective assumes media influence is unidirectionalDeveloped in response to mass media

What media does to us

►Media violence

►Media sets the public agenda

►Media images and stereotypes

Media Psychology

Interconnected Model►System

Properties

►Human Agency

►Individual Meaning

►Continually Changing

Media Psychology

My View of Media Psychology

► Psychology studies process and interaction to understand outcome How we send and receive information

How people perceive information cognitively and affectively

How people make meaning

How we connect

► Multidimensional: Physiology, Development, Cognition, Affect

Media Psychology

► Reciprocal model of mediated communications

► Media reflects as much as it influences

Websites are a Visual Medium

► Psychology addresses fundamental problems in website design: Attracting the user

Facilitating their experience

Identifying and satisfying needs and goals

►Visual attention draws on cognitive theory

http://www.artbywicks.com/psychologist.jpg

Website Design

A Successful Website

news.bbc.co.uk/2/ hi/technology/3109180.stm

Website Design

► Success will not be judged by beauty or

technological tricks

► Success will be judged by how well a site meets

the needs of the user

Psychology Provides Guidelines

Website Design

Cognition & Emotion Characteristics Attributes Meaning

Influenced by Cultural Differences Socialization Cohort Effects Physical Differences

Attention Theory

►Processing in stagesFirst filter by sensory

activation

Second filter by pertinence or relevance

Selective Attention Theories

Incoming Messages

Early Processing

Late Processing

Filter

Covert Attention: Users See the Site Before They Know It

► Processing primary visual features begins before viewer consciously directs attention

► Primary visual features include: Color

Orientation

Intensity

Gestalt organizational principles

► These provide cues for faster processing and orientation

► People make subconscious positive or negative judgment within 90 seconds of initial viewing

Website Design

Overt

Covert

http://www.dur.ac.uk/daniel.smith2/Research%20Interests.htm

Capturing Overt Attention

►One a viewer has arrived at the site, the goal shifts to attention engagement, dependent uponTop-down: User has goals and :interests

Bottom-up: Site provides stimulus

Website Design

Predictable placement of navigation tools from page to page helps cognitive mapping for ease of use

User Retention

► Research on news and information sites shows that at every stage of attention processing, 50% of users leave

Website Design

100%

Click-Through

See

Notice

Parse

Evaluate

50%

25%

12.5%

6.25%

Controlling the Visual Path

►Research has isolated common scanning patterns that dictate where to put the most important information

Website Design

Heat map from eye-tracking study shows “F” pattern of horizontal and then vertical scanning

Controlling Attention through Texture Gradients

► Using human perceptual features to create illusion of depth.

Visual Attention

Controlling Attention through Movement

► Motion icons are effective attractors

► Human biologically predisposed to see movement

► Sensation of change can be generated by alteration of size or shape, Flash type movement graphics, audio and video clips, or use of color

Website Design

Get sensation of movement with color by alternating hue, value and brightness or by juxtaposition of complementary colors

Controlling Attention: Color►Color can function in several capacities

Enhances memory

Facilitates processing and storage of images

Influences mood

Influences speed of cognitive processing

►Colors with high levels of brightness and saturation create greater feelings of excitement and positive regard for products

►Color preferences vary by audience: age, culture, gender, product expectations

Website Design

Direction through Color

Single bright color amidst muted notes pulls visual attention to the element

Website Design

Color Context

Spectral composition of the background may influence the eye’s perception of color

Physics of Color

Color Constancy

► Visual system compensates for light source when perceiving color

► Hypothesis is that information is adjusted to the average color of entire visual field

► Maintains perception of color constancy across light changes

► We interpret yellow in shadow as still being yellow, not a different color

http://www.perceptionweb.com/perc0497/jakob.html

Physiology of Color

Color Perception Deficits

► Deficits in color vision result from anomalies in one or more of the cones

► Red/green colorblindness is the most common

► Ishihara Color Test for clinical diagnosis

Example: Individual with normal vision will see a “5”

Individual with red/green colorblindness will see a “2”

http://www.perceptionweb.com/perc0497/jakob.html

Physiology of Color

Meanings of Color

► Color terms evolve over time: cultures start with basic references for light and dark

► Meanings vary with different culture of all kinds Country Age Religion Gender Trends Context

► Physical perception of colors appears consistent across culture

Psychology of Color

Some Western meanings of color

Red = alert, passionate

Orange = optimistic, wise

Green = growth, progress

Blue = peaceful, trustworthy, stable

Purple = regal, spiritual

Black = important, serious

White = hopeful, truthful, new

Using Gestalt Principles to Enhance Cognitive Processing

Object Centered Perception:

Gestalt principles

describe the pattern-

making principles of

our visual process

► Figure and Ground

► Similarity

► Proximity

► Closure

► Continuity

► Symmetry

► Area

Visual Attention

Gestalt Principles of Organization

legibility legibility legibility

►Contrast/ground principle

►Increases legibility, helps orientation, and ease of navigation

Website Design

Gestalt Organization: Similarity►Similar elements are

seen as groups

Visual Attention

No Paper

RECYCLING HERE

Gestalt Organization: Proximity or Contiguity

►Things that are closer together are seen as belonging together

Visual Attention

Gestalt Organization: Closure

►We see complete figures even what part of the information is missing

Visual Attention

Gestalt Organization: Area

►The larger of two overlapping areas is seen as ground

►With box same color as background, it looks like it has a whole in it.

Visual Attention

Know Your Technology► Technological Constraints

Readability of material on video monitors

Eye fatigue from color choices

Limitations in perceptual and cognitive skills of audience

Color equivalencies across platforms and media

User familiarity and comfort with technology and interface*

Website Design

http://hometown.aol.com/eheartandsoul/images/grandma's%20at%20computer.jpg

Know Your User► Anticipate needs and goals

to structure organization and content

Esteem Needs

►Learning

►Self-Help

►Social Validation Love Needs

►Buying Latest Fashion

►Connection

Website Design

SelfActualization

Esteem

Love

Safety

Physiological

Maslow’s Hierarchy of Needs

!What Site Visitors Want

► Visitors want to solve their problems RIGHT NOW

► Most people visit a web site to solve one or more of these four problems:

Information

Purchase/Donation

Entertainment

Be part of a community

Website Design

Gestalt Principles for Visual Orientation

Gestalt principles include:

figure and ground: elements are distinguished based on contrast;

similarity: similar elements are seen as groups;

proximity: elements close together are seen as a group

Likeness of form indicates which text are equated.

Proximity defines text groupings.

closure: elements are perceptually closed to be seen as complete figures

List is subordinate to text by placement & color.

Gestalt principles include:

► Hierarchical Grouping

►Parallel Grouping

►Subordinate Grouping

Using Typography

► Good typography adds Readability Organization Mood

Meaning

►Consistency of typestyle with message facilitates:

reading comprehension and speed

positively impacts perceptions of ethics and credibility

Website Design

Visual Noise: Keep it Clean

►Website space is visually constrained

►Trade-off between information and clutter

Website Design

►Clutter negatively impacts visual search speed and comprehension

►Google.com keeps clutter to a minimum so users can immediately find and use their service

Practical Applications

Balance predictability with unpredictability

Top-down: User has goals and interests

Bottom-up: Site provides stimulus

Website Design

Predictable placement of navigation tools from page to page helps cognitive mapping for ease of use

Identify User Paths

Website Design

http://teens.walkerart.org/

Teen Users

► Not as techno-savvy as we think

► Insufficient reading skills

► Less sophisticated search strategies

► Less patient

Website Design

► Pay more attention to visuals

► Highest subjective satisfaction comes from relatively clean and modest web design

What Teens do Like

► Never use the word “kid”

► Don’t use small type

► Use interactivity

► If it’s slow and clumsy, don’t include it

► Don’t confuse your site with Facebook or other social media sites

► No scrolling

► Not much reading

► Not boring

Website Design

Interactive Elements that Work

► Quizzes

► Contests

► Voting

► Sharing photos

► Downloading music

► Watching videos

► Message boards

► Ability to add content

► Feedback

Website Design

Does Your Site Work?

► Usability Testing Test early and often on members of

target audience

Design a short list of tasks

Locate important information

Describe what site is for

Watch people use your site

See where they look

Ask them to think out loud

Ask them about their experience

► Build Assessment tools into your site Visitor feedback

Visitor surveys

► Read the check list at “Websites That Suck” http://www.webpagesthatsuck.com/

does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html

Website Design

Conclusion► Psychology is uniquely situated to

Assess audience needs Developmental abilities of audience Cognitive understanding of attention and information processing Cognitive and emotional impact of color Social influence of images Cultural context for meaning Elements contributing to engagement and self-efficacy

► Perception is subjective experience

► User’s attention will be driven by his/her own needs

► Design must be user-driven

Website Design

“www” illustration retrieved from http://www.webphoria.co.uk/