psychology of website design - dr. pamela rutledge
DESCRIPTION
Media Psychology uses psychological theory to assess and develop effective media applications. Successful websites benefit from an understanding of cognition, emotion, and personal meaning.TRANSCRIPT
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
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/