Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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.

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 />