Psychology of Website Design - Dr. Pamela Rutledge
Upcoming SlideShare
Loading in...5

Psychology of Website Design - Dr. Pamela Rutledge



Media Psychology uses psychological theory to assess and develop effective media applications. Successful websites benefit from an understanding of cognition, emotion, and personal meaning.

Media Psychology uses psychological theory to assess and develop effective media applications. Successful websites benefit from an understanding of cognition, emotion, and personal meaning.



Total Views
Views on SlideShare
Embed Views



39 Embeds 3,715 2218 924 159 134 35 34 28 26 22 19 16 13 11 9 9 7 6 6 5 4 4 3 3 2 2 2 2 1 1 1 1 1 1 1 1 1 1 1 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Psychology of Website Design - Dr. Pamela Rutledge Psychology of Website Design - Dr. Pamela Rutledge Presentation Transcript

    • Topics in Media Psychology
      The Psychology of
      Website Design
      Dr. Pamela Rutledge
      Media Psychology Research Center
      September 2009
    • 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
    • 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 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
      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:
      Gestalt organizational principles
      These provide cues for faster processing and orientation
      People make subconscious positive or negative judgment within 90 seconds of initial viewing
    • 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
      Research on news and information sites shows that at every stage of attention processing, 50% of users leave
    • 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
    • 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”
    • 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
      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
    • Gestalt Principles of Organization
      Website Design
      Contrast/ground principle
      Increases legibility, helps orientation, and ease of navigation
    • Visual Attention
      Gestalt Organization: Similarity
      Similar elements are seen as groups
      No Paper
    • 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*'s%20at%20computer.jpg
    • Website Design
      Know Your User
      Anticipate needs and goals to structure organization and content
      Esteem Needs
      Social Validation
      Love Needs
      Buying Latest Fashion
      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:
      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
      • 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
    • 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
      Sharing photos
      Downloading music
      Watching videos
      Message boards
      Ability to add content
      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”
      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