• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Psychology of Website Design - Dr. Pamela Rutledge
 

Psychology of Website Design - Dr. Pamela Rutledge

on

  • 14,554 views

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.

Statistics

Views

Total Views
14,554
Views on SlideShare
10,896
Embed Views
3,658

Actions

Likes
31
Downloads
544
Comments
1

38 Embeds 3,658

http://www.aboutpeople.com 2178
http://mprcenter.org 908
http://www.grahamjones.co.uk 159
http://athinklab.com 134
http://www.pohezi.com 35
http://blog.dhooge.eu 34
http://www.pamelarutledge.com 28
http://edtech.mrooms.org 26
http://unjobs.org 22
http://www.slideshare.net 19
http://www.linkedin.com 16
http://www.wellsphere.com 13
http://www.lorenzofacchinotti.net 11
http://translate.googleusercontent.com 9
http://dhooge.eu 9
http://myaiclass.com 7
http://www.e-presentations.us 6
http://stanford.wellsphere.com 6
http://moodle.fielding.edu 5
http://www.myaiclass.com 4
http://pinterest.com 4
https://www.google.com 3
http://www.internetpsychologist.co.uk 3
http://static.slidesharecdn.com 2
https://www.linkedin.com 2
http://blog.thomasdhooge.be 2
http://webcache.googleusercontent.com 2
https://www.google.co.uk 1
http://blazinghotgraphics.com 1
http://feeds.feedburner.com 1
http://list.ly 1
http://users.unjobs.org 1
http://business.commsy.net 1
http://makikoekis.blogspot.com 1
http://www.lmodules.com 1
http://angel.dmu.edu 1
http://feeds2.feedburner.com 1
http://www.google.com 1
More...

Accessibility

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.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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
      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/