Topics in Media Psychology<br />The Psychology of<br />Website Design<br />Dr. Pamela Rutledge<br />Media Psychology Resea...
What is Media Psychology?<br />Media Psychology<br />Emerging field<br />Using psychology to understand use and influence ...
Media Psychology<br />Interconnected Model<br />System Properties<br />Human Agency<br />Individual Meaning<br />Continual...
Media Psychology<br />My View of Media Psychology<br /><ul><li>Reciprocal model of mediated communications
Media reflects as much as it influences</li></ul>Psychology studies process and interaction to understand outcome<br />How...
Websites are a Visual Medium<br />Website Design<br />Psychology addresses fundamental problems in website design:<br />At...
A Successful Website<br />Website Design<br />Success will not be judged by beauty or technological tricks<br />Success wi...
Psychology Provides Guidelines<br />Website Design<br /><ul><li>Cognition & Emotion
Characteristics
Attributes
Meaning
Influenced by
Cultural Differences
Socialization
Cohort Effects
Physical Differences</li></li></ul><li>Attention Theory<br />Selective Attention Theories<br />Incoming Messages<br />Proc...
Website Design<br />Covert Attention: Users See the Site Before They Know It<br />Processing primary visual               ...
Capturing Overt Attention<br />Website Design<br />One a viewer has arrived at the site, the goal shifts to attention enga...
Website Design<br />User Retention<br />See<br />100%<br />Research on news and information sites shows that at every stag...
Website Design<br />Controlling the Visual Path<br />Research has isolated common scanning patterns that dictate where to ...
Visual Attention<br />Controlling Attention through Texture Gradients<br />Using human perceptual features to create illus...
Website Design<br />Controlling Attention through Movement<br />Motion icons are effective attractors<br />Human biologica...
Controlling Attention: Color<br />Website Design<br />Color can function in several capacities<br />Enhances memory<br />F...
Direction through Color<br />Website Design<br />Single bright color amidst muted notes pulls visual attention to the elem...
Color Context<br />Physics of Color<br />Spectral composition of the background may influence the eye’s perception of colo...
Color Constancy<br />Physiology of Color<br />Visual system compensates for light source when perceiving color<br />Hypoth...
Color Perception Deficits<br />Physiology of Color<br />Deficits in color vision result from anomalies in one or more of t...
Meanings of Color<br />Psychology of Color<br />Color terms evolve over time: cultures start with basic references for lig...
Visual Attention<br />Using Gestalt Principles to Enhance Cognitive Processing<br />Object Centered Perception:<br />Gesta...
Gestalt Principles of Organization<br />Website Design<br />legibility<br />legibility<br />legibility<br />Contrast/groun...
Visual Attention<br />Gestalt Organization: Similarity<br />Similar elements are seen as groups<br />No Paper<br />RECYCLI...
Visual Attention<br />Gestalt Organization: Proximity or Contiguity<br />Things that are closer together are seen as belon...
Gestalt Organization: Closure<br />Visual Attention<br />We see complete figures even what part of the information is miss...
Gestalt Organization: Area<br />Visual Attention<br />The larger of two overlapping areas is seen as ground<br />With box ...
Website Design<br />Know Your Technology<br />Technological Constraints<br />Readability of material on video monitors<br ...
Website Design<br />Know Your User<br />Self<br />Actualization<br />Esteem<br />Love<br />Safety<br />Physiological<br />...
!<br />Website Design<br />What Site Visitors Want<br />Visitors want to solve their problems RIGHT NOW<br />Most people v...
Gestalt Principles for Visual Orientation<br />Hierarchical Grouping<br /><ul><li>Parallel Grouping
Subordinate Grouping</li></ul>Gestalt principles include:<br />figure and ground: elements are distinguished based on cont...
Upcoming SlideShare
Loading in...5
×

Psychology of Website Design - Dr. Pamela Rutledge

14,173

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.

1 Comment
34 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,173
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
578
Comments
1
Likes
34
Embeds 0
No embeds

No notes for slide

Psychology of Website Design - Dr. Pamela Rutledge

  1. 1. Topics in Media Psychology<br />The Psychology of<br />Website Design<br />Dr. Pamela Rutledge<br />Media Psychology Research Center<br />September 2009<br />http://www.mprcenter.org<br />
  2. 2. What is Media Psychology?<br />Media Psychology<br />Emerging field<br />Using psychology to understand use and influence of media technologies<br />Traditional perspective assumes media influence is unidirectional<br />Developed in response to mass media<br />What media does to us<br />Media violence <br />Media sets the public agenda<br />Media images and stereotypes<br />
  3. 3. Media Psychology<br />Interconnected Model<br />System Properties<br />Human Agency<br />Individual Meaning<br />Continually Changing<br />
  4. 4. Media Psychology<br />My View of Media Psychology<br /><ul><li>Reciprocal model of mediated communications
  5. 5. Media reflects as much as it influences</li></ul>Psychology studies process and interaction to understand outcome<br />How we send and receive information<br />How people perceive information cognitively and affectively<br />How people make meaning<br />How we connect<br />Multidimensional: Physiology, Development, Cognition, Affect<br />
  6. 6. Websites are a Visual Medium<br />Website Design<br />Psychology addresses fundamental problems in website design:<br />Attracting the user<br />Facilitating their experience<br />Identifying and satisfying needs and goals<br />Visual attention draws on cognitive theory<br />http://www.artbywicks.com/psychologist.jpg<br />
  7. 7. A Successful Website<br />Website Design<br />Success will not be judged by beauty or technological tricks<br />Success will be judged by how well a site meets the needs of the user<br />news.bbc.co.uk/2/ hi/technology/3109180.stm<br />
  8. 8. Psychology Provides Guidelines<br />Website Design<br /><ul><li>Cognition & Emotion
  9. 9. Characteristics
  10. 10. Attributes
  11. 11. Meaning
  12. 12. Influenced by
  13. 13. Cultural Differences
  14. 14. Socialization
  15. 15. Cohort Effects
  16. 16. Physical Differences</li></li></ul><li>Attention Theory<br />Selective Attention Theories<br />Incoming Messages<br />Processing in stages<br />First filter by sensory activation<br />Second filter by pertinence or relevance<br />Early Processing<br />Filter<br />Late Processing<br />
  17. 17. Website Design<br />Covert Attention: Users See the Site Before They Know It<br />Processing primary visual features begins before viewer consciously directs attention<br />Primary visual features include:<br />Color<br />Orientation<br />Intensity<br />Gestalt organizational principles<br />These provide cues for faster processing and orientation<br />People make subconscious positive or negative judgment within 90 seconds of initial viewing<br />Overt<br />Covert<br />http://www.dur.ac.uk/daniel.smith2/Research%20Interests.htm<br />
  18. 18. Capturing Overt Attention<br />Website Design<br />One a viewer has arrived at the site, the goal shifts to attention engagement, dependent upon<br />Top-down: User has goals and :interests<br />Bottom-up: Site provides stimulus<br />Predictable placement of navigation tools from page to page helps cognitive mapping for ease of use<br />
  19. 19. Website Design<br />User Retention<br />See<br />100%<br />Research on news and information sites shows that at every stage of attention processing, 50% of users leave<br />Notice<br />50%<br />Parse<br />25%<br />Evaluate<br />12.5%<br />Click-Through<br />6.25%<br />
  20. 20. Website Design<br />Controlling the Visual Path<br />Research has isolated common scanning patterns that dictate where to put the most important information<br />Heat map from eye-tracking study shows “F” pattern of horizontal and then vertical scanning<br />
  21. 21. Visual Attention<br />Controlling Attention through Texture Gradients<br />Using human perceptual features to create illusion of depth.<br />
  22. 22. Website Design<br />Controlling Attention through Movement<br />Motion icons are effective attractors<br />Human biologically predisposed to see movement<br />Sensation of change can be generated by alteration of size or shape, Flash type movement graphics, audio and video clips, or use of color <br />Get sensation of movement with color by alternating hue, value and brightness or by juxtaposition of complementary colors<br />
  23. 23. Controlling Attention: Color<br />Website Design<br />Color can function in several capacities<br />Enhances memory<br />Facilitates processing and storage of images<br />Influences mood<br />Influences speed of cognitive processing<br />Colors with high levels of brightness and saturation create greater feelings of excitement and positive regard for products<br />Color preferences vary by audience: age, culture, gender, product expectations<br />
  24. 24. Direction through Color<br />Website Design<br />Single bright color amidst muted notes pulls visual attention to the element<br />
  25. 25. Color Context<br />Physics of Color<br />Spectral composition of the background may influence the eye’s perception of color<br />
  26. 26. Color Constancy<br />Physiology of Color<br />Visual system compensates for light source when perceiving color<br />Hypothesis is that information is adjusted to the average color of entire visual field<br />Maintains perception of color constancy across light changes<br />We interpret yellow in shadow as still being yellow, not a different color<br />http://www.perceptionweb.com/perc0497/jakob.html<br />
  27. 27. Color Perception Deficits<br />Physiology of Color<br />Deficits in color vision result from anomalies in one or more of the cones<br />Red/green colorblindness is the most common<br />Ishihara Color Test for clinical diagnosis<br />Example: Individual with normal vision will see a “5”<br />Individual with red/green colorblindness will see a “2”<br />http://www.perceptionweb.com/perc0497/jakob.html<br />
  28. 28. Meanings of Color<br />Psychology of Color<br />Color terms evolve over time: cultures start with basic references for light and dark<br />Meanings vary with different culture of all kinds<br />Country<br />Age<br />Religion<br />Gender<br />Trends<br />Context<br />Physical perception of colors appears consistent across culture<br />Some Western meanings of color<br />Red = alert, passionate<br />Orange = optimistic, wise<br />Green = growth, progress<br />Blue = peaceful, trustworthy, stable<br />Purple = regal, spiritual<br />Black = important, serious<br />White = hopeful, truthful, new<br />
  29. 29. Visual Attention<br />Using Gestalt Principles to Enhance Cognitive Processing<br />Object Centered Perception:<br />Gestalt principles describe the pattern-making principles of our visual process<br />Figure and Ground<br />Similarity<br />Proximity<br />Closure<br />Continuity<br />Symmetry<br />Area<br />
  30. 30. Gestalt Principles of Organization<br />Website Design<br />legibility<br />legibility<br />legibility<br />Contrast/ground principle <br />Increases legibility, helps orientation, and ease of navigation<br />
  31. 31. Visual Attention<br />Gestalt Organization: Similarity<br />Similar elements are seen as groups<br />No Paper<br />RECYCLING HERE<br />
  32. 32. Visual Attention<br />Gestalt Organization: Proximity or Contiguity<br />Things that are closer together are seen as belonging together<br />
  33. 33. Gestalt Organization: Closure<br />Visual Attention<br />We see complete figures even what part of the information is missing<br />
  34. 34. Gestalt Organization: Area<br />Visual Attention<br />The larger of two overlapping areas is seen as ground<br />With box same color as background, it looks like it has a whole in it.<br />
  35. 35. Website Design<br />Know Your Technology<br />Technological Constraints<br />Readability of material on video monitors<br />Eye fatigue from color choices<br />Limitations in perceptual and cognitive skills of audience<br />Color equivalencies across platforms and media <br />User familiarity and comfort with technology and interface*<br />http://hometown.aol.com/eheartandsoul/images/grandma&apos;s%20at%20computer.jpg<br />
  36. 36. Website Design<br />Know Your User<br />Self<br />Actualization<br />Esteem<br />Love<br />Safety<br />Physiological<br />Anticipate needs and goals to structure organization and content<br />Esteem Needs<br />Learning <br />Self-Help<br />Social Validation<br />Love Needs<br />Buying Latest Fashion<br />Connection<br />Maslow’s Hierarchy of Needs<br />
  37. 37. !<br />Website Design<br />What Site Visitors Want<br />Visitors want to solve their problems RIGHT NOW<br />Most people visit a web site to solve one or more of these four problems:<br />Information<br />Purchase/Donation<br />Entertainment<br />Be part of a community<br />
  38. 38. Gestalt Principles for Visual Orientation<br />Hierarchical Grouping<br /><ul><li>Parallel Grouping
  39. 39. Subordinate Grouping</li></ul>Gestalt principles include:<br />figure and ground: elements are distinguished based on contrast; <br />similarity: similar elements are seen as groups; <br />proximity: elements close together are seen as a group<br />List is subordinate to text by placement & color.<br />Gestalt principles include:<br />Likeness of form indicates which text are equated. <br />Proximity defines text groupings.<br />closure: elements are perceptually closed to be seen as complete figures<br />
  40. 40. Using Typography<br />Website Design<br /> Good typography adds <br />Readability Organization Mood  Meaning<br />Consistency of typestyle with message facilitates: <br />reading comprehension and speed <br />positively impacts perceptions of ethics and credibility<br />
  41. 41. Visual Noise: Keep it Clean<br />Website Design<br />Website space is visually constrained<br />Trade-off between information and clutter<br /><ul><li>Clutter negatively impacts visual search speed and comprehension
  42. 42. Google.com keeps clutter to a minimum so users can immediately find and use their service</li></li></ul><li>Practical Applications<br />Website Design<br />Balance predictability with unpredictability<br />Top-down: User has goals and interests<br />Bottom-up: Site provides stimulus<br />Predictable placement of navigation tools from page to page helps cognitive mapping for ease of use<br />
  43. 43. Identify User Paths<br />Website Design<br />http://teens.walkerart.org/<br />
  44. 44. Teen Users<br />Website Design<br />Not as techno-savvy as we think<br />Insufficient reading skills<br />Less sophisticated search strategies<br />Less patient<br />Pay more attention to visuals<br />Highest subjective satisfaction comes from relatively clean and modest web design<br />
  45. 45. What Teens do Like<br />Website Design<br />Never use the word “kid”<br />Don’t use small type<br />Use interactivity<br />If it’s slow and clumsy, don’t include it<br />Don’t confuse your site with Facebook or other social media sites<br />No scrolling<br />Not much reading<br />Not boring<br />
  46. 46. Interactive Elements that Work<br />Quizzes<br />Contests<br />Voting<br />Sharing photos<br />Downloading music<br />Watching videos<br />Message boards<br />Ability to add content <br />Feedback<br />Website Design<br />
  47. 47. Does Your Site Work?<br />Usability Testing<br />Test early and often on members of target audience<br />Design a short list of tasks<br />Locate important information<br />Describe what site is for<br />Watch people use your site<br />See where they look<br />Ask them to think out loud<br />Ask them about their experience<br />Build Assessment tools into your site<br />Visitor feedback<br />Visitor surveys<br />Read the check list at “Websites That Suck”<br />http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html<br />Website Design<br />
  48. 48. Conclusion<br />Website Design<br />Psychology is uniquely situated to <br />Assess audience needs<br />Developmental abilities of audience<br />Cognitive understanding of attention and information processing<br />Cognitive and emotional impact of color <br />Social influence of images<br />Cultural context for meaning<br />Elements contributing to engagement and self-efficacy<br />Perception is subjective experience<br />User’s attention will be driven by his/her own needs<br />Design must be user-driven<br />“www” illustration retrieved from http://www.webphoria.co.uk/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×