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.

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

No notes for slide

Psychology of Website Design - Dr. Pamela Rutledge

  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 /><br />
  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. Media Psychology<br />Interconnected Model<br />System Properties<br />Human Agency<br />Individual Meaning<br />Continually Changing<br />
  4. Media Psychology<br />My View of Media Psychology<br /><ul><li>Reciprocal model of mediated communications
  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. 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 /><br />
  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 /> hi/technology/3109180.stm<br />
  8. Psychology Provides Guidelines<br />Website Design<br /><ul><li>Cognition & Emotion
  9. Characteristics
  10. Attributes
  11. Meaning
  12. Influenced by
  13. Cultural Differences
  14. Socialization
  15. Cohort Effects
  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. 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 /><br />
  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. 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. 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. Visual Attention<br />Controlling Attention through Texture Gradients<br />Using human perceptual features to create illusion of depth.<br />
  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. 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. Direction through Color<br />Website Design<br />Single bright color amidst muted notes pulls visual attention to the element<br />
  25. Color Context<br />Physics of Color<br />Spectral composition of the background may influence the eye’s perception of color<br />
  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 /><br />
  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 /><br />
  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. 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. 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. Visual Attention<br />Gestalt Organization: Similarity<br />Similar elements are seen as groups<br />No Paper<br />RECYCLING HERE<br />
  32. Visual Attention<br />Gestalt Organization: Proximity or Contiguity<br />Things that are closer together are seen as belonging together<br />
  33. Gestalt Organization: Closure<br />Visual Attention<br />We see complete figures even what part of the information is missing<br />
  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. 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 />;s%20at%20computer.jpg<br />
  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. !<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. Gestalt Principles for Visual Orientation<br />Hierarchical Grouping<br /><ul><li>Parallel Grouping
  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. 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. 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. 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. Identify User Paths<br />Website Design<br /><br />
  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. 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. 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. 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 /><br />Website Design<br />
  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<br />