Psychology of Website Design - Dr. Pamela Rutledge

Topics in Media Psychology
The Psychology of
Website Design
Dr. Pamela Rutledge
Media Psychology Research Center
September 2009
http://www.mprcenter.org

What is Media Psychology?
Media Psychology
Emerging field
Using psychology to understand use and influence of media technologies
Traditional perspective assumes media influence is unidirectional
Developed 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

Reciprocal model of mediated communications
Media reflects as much as it influences

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

Websites are a Visual Medium
Website Design
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

A Successful Website
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
news.bbc.co.uk/2/ hi/technology/3109180.stm

Psychology Provides Guidelines
Website Design

Cognition & Emotion
Characteristics
Attributes
Meaning
Influenced by
Cultural Differences
Socialization
Cohort Effects
Physical Differences

Attention Theory
Selective Attention Theories
Incoming Messages
Processing in stages
First filter by sensory activation
Second filter by pertinence or relevance
Early Processing
Filter
Late Processing

Website Design
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
Overt
Covert
http://www.dur.ac.uk/daniel.smith2/Research%20Interests.htm

Capturing Overt Attention
Website Design
One a viewer has arrived at the site, the goal shifts to attention engagement, dependent upon
Top-down: User has goals and :interests
Bottom-up: Site provides stimulus
Predictable placement of navigation tools from page to page helps cognitive mapping for ease of use

Website Design
User Retention
See
100%
Research on news and information sites shows that at every stage of attention processing, 50% of users leave
Notice
50%
Parse
25%
Evaluate
12.5%
Click-Through
6.25%

Website Design
Controlling the Visual Path
Research has isolated common scanning patterns that dictate where to put the most important information
Heat map from eye-tracking study shows “F” pattern of horizontal and then vertical scanning

Visual Attention
Controlling Attention through Texture Gradients
Using human perceptual features to create illusion of depth.

Website Design
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
Get sensation of movement with color by alternating hue, value and brightness or by juxtaposition of complementary colors

Controlling Attention: Color
Website Design
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

Direction through Color
Website Design
Single bright color amidst muted notes pulls visual attention to the element

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

Color Constancy
Physiology of Color
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

Color Perception Deficits
Physiology of Color
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

Meanings of Color
Psychology 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
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

Visual Attention
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

Gestalt Principles of Organization
Website Design
legibility
legibility
legibility
Contrast/ground principle
Increases legibility, helps orientation, and ease of navigation

Visual Attention
Gestalt Organization: Similarity
Similar elements are seen as groups
No Paper
RECYCLING HERE

Visual Attention
Gestalt Organization: Proximity or Contiguity
Things that are closer together are seen as belonging together

Gestalt Organization: Closure
Visual Attention
We see complete figures even what part of the information is missing

Gestalt Organization: Area
Visual Attention
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.

Website Design
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*
http://hometown.aol.com/eheartandsoul/images/grandma's%20at%20computer.jpg

Website Design
Know Your User
Self
Actualization
Esteem
Love
Safety
Physiological
Anticipate needs and goals to structure organization and content
Esteem Needs
Learning
Self-Help
Social Validation
Love Needs
Buying Latest Fashion
Connection
Maslow’s Hierarchy of Needs

!
Website Design
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

Gestalt Principles for Visual Orientation
Hierarchical Grouping

Parallel Grouping
Subordinate Grouping

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
List is subordinate to text by placement & color.
Gestalt principles include:
Likeness of form indicates which text are equated.
Proximity defines text groupings.
closure: elements are perceptually closed to be seen as complete figures

Using Typography
Website Design
Good typography adds
Readability Organization Mood  Meaning
Consistency of typestyle with message facilitates:
reading comprehension and speed
positively impacts perceptions of ethics and credibility

Visual Noise: Keep it Clean
Website Design
Website space is visually constrained
Trade-off between information and clutter

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
Website Design
Balance predictability with unpredictability
Top-down: User has goals and interests
Bottom-up: Site provides stimulus
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
Website Design
Not as techno-savvy as we think
Insufficient reading skills
Less sophisticated search strategies
Less patient
Pay more attention to visuals
Highest subjective satisfaction comes from relatively clean and modest web design

What Teens do Like
Website Design
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

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
Website Design
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
“www” illustration retrieved from http://www.webphoria.co.uk/