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. Topics in Media Psychology The Psychology of Website Design Dr. Pamela Rutledge Media Psychology Research Center September 2009 http://www.mprcenter.org

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

5. Media reflects as much as it influencesPsychology 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 http://www.artbywicks.com/psychologist.jpg

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 news.bbc.co.uk/2/ hi/technology/3109180.stm

9. Characteristics

10. Attributes

11. Meaning

12. Influenced by

13. Cultural Differences

14. Socialization

15. Cohort Effects

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

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

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 http://www.perceptionweb.com/perc0497/jakob.html

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” http://www.perceptionweb.com/perc0497/jakob.html

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

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 Similarity Proximity Closure Continuity Symmetry Area

30. Gestalt Principles of Organization Website Design legibility legibility legibility 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 RECYCLING HERE

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* http://hometown.aol.com/eheartandsoul/images/grandma's%20at%20computer.jpg

36. 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

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: Information Purchase/Donation Entertainment Be part of a community

39. Subordinate GroupingGestalt 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

43. Identify User Paths Website Design http://teens.walkerart.org/

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 Quizzes Contests Voting Sharing photos Downloading music Watching videos Message boards Ability to add content Feedback 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” http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html 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 http://www.webphoria.co.uk/