Your SlideShare is downloading. ×
Psychology of Website Design - Dr. Pamela Rutledge
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Psychology of Website Design - Dr. Pamela Rutledge


Published on

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.

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Topics in Media Psychology
    The Psychology of
    Website Design
    Dr. Pamela Rutledge
    Media Psychology Research Center
    September 2009
  • 2. 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
  • 3. Media Psychology
    Interconnected Model
    System Properties
    Human Agency
    Individual Meaning
    Continually Changing
  • 4. Media Psychology
    My View of Media Psychology
    • Reciprocal model of mediated communications
    • 5. 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
  • 6. 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
  • 7. 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
  • 8. Psychology Provides Guidelines
    Website Design
  • 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
  • 17. 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
  • 18. 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
  • 19. Website Design
    User Retention
    Research on news and information sites shows that at every stage of attention processing, 50% of users leave
  • 20. 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
  • 21. Visual Attention
    Controlling Attention through Texture Gradients
    Using human perceptual features to create illusion of depth.
  • 22. 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
  • 23. 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
  • 24. Direction through Color
    Website Design
    Single bright color amidst muted notes pulls visual attention to the element
  • 25. Color Context
    Physics of Color
    Spectral composition of the background may influence the eye’s perception of color
  • 26. 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
  • 27. 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”
  • 28. 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
  • 29. 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
  • 30. Gestalt Principles of Organization
    Website Design
    Contrast/ground principle
    Increases legibility, helps orientation, and ease of navigation
  • 31. Visual Attention
    Gestalt Organization: Similarity
    Similar elements are seen as groups
    No Paper
  • 32. Visual Attention
    Gestalt Organization: Proximity or Contiguity
    Things that are closer together are seen as belonging together
  • 33. Gestalt Organization: Closure
    Visual Attention
    We see complete figures even what part of the information is missing
  • 34. 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.
  • 35. 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
  • 36. 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
  • 37. !
    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
  • 38. Gestalt Principles for Visual Orientation
    Hierarchical Grouping
    • Parallel Grouping
    • 39. 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
  • 40. 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
  • 41. 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
    • 42. 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
  • 43. Identify User Paths
    Website Design
  • 44. 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
  • 45. 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
  • 46. Interactive Elements that Work
    Sharing photos
    Downloading music
    Watching videos
    Message boards
    Ability to add content
    Website Design
  • 47. 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
  • 48. 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