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.
Psychology of Website Design - Dr. Pamela RutledgePresentation 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/
Tom Devlin
1–1 of 1 previous next