psychology of website design - dr. pamela rutledge
DESCRIPTION
Media Psychology uses psychological theory to assess and develop effective media applications. Successful websites benefit from an understanding of cognition, emotion, and personal meaning.TRANSCRIPT
![Page 1: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/1.jpg)
Dr. Pamela RutledgeMedia Psychology Research Center
September 2009http://www.mprcenter.org
Topics in Media Psychology
The Psychology ofWebsite Design
![Page 2: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/2.jpg)
What is Media Psychology?
►Emerging field
►Using psychology to understand use and influence of media technologies
►Traditional perspective assumes media influence is unidirectionalDeveloped in response to mass media
What media does to us
►Media violence
►Media sets the public agenda
►Media images and stereotypes
Media Psychology
![Page 3: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/3.jpg)
Interconnected Model►System
Properties
►Human Agency
►Individual Meaning
►Continually Changing
Media Psychology
![Page 4: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/4.jpg)
My View of Media Psychology
► 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
Media Psychology
► Reciprocal model of mediated communications
► Media reflects as much as it influences
![Page 5: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/5.jpg)
Websites are a Visual Medium
► 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
Website Design
![Page 6: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/6.jpg)
A Successful Website
news.bbc.co.uk/2/ hi/technology/3109180.stm
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
![Page 7: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/7.jpg)
Psychology Provides Guidelines
Website Design
Cognition & Emotion Characteristics Attributes Meaning
Influenced by Cultural Differences Socialization Cohort Effects Physical Differences
![Page 8: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/8.jpg)
Attention Theory
►Processing in stagesFirst filter by sensory
activation
Second filter by pertinence or relevance
Selective Attention Theories
Incoming Messages
Early Processing
Late Processing
Filter
![Page 9: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/9.jpg)
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
Website Design
Overt
Covert
http://www.dur.ac.uk/daniel.smith2/Research%20Interests.htm
![Page 10: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/10.jpg)
Capturing Overt Attention
►One a viewer has arrived at the site, the goal shifts to attention engagement, dependent uponTop-down: User has goals and :interests
Bottom-up: Site provides stimulus
Website Design
Predictable placement of navigation tools from page to page helps cognitive mapping for ease of use
![Page 11: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/11.jpg)
User Retention
► Research on news and information sites shows that at every stage of attention processing, 50% of users leave
Website Design
100%
Click-Through
See
Notice
Parse
Evaluate
50%
25%
12.5%
6.25%
![Page 12: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/12.jpg)
Controlling the Visual Path
►Research has isolated common scanning patterns that dictate where to put the most important information
Website Design
Heat map from eye-tracking study shows “F” pattern of horizontal and then vertical scanning
![Page 13: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/13.jpg)
Controlling Attention through Texture Gradients
► Using human perceptual features to create illusion of depth.
Visual Attention
![Page 14: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/14.jpg)
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
Website Design
Get sensation of movement with color by alternating hue, value and brightness or by juxtaposition of complementary colors
![Page 15: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/15.jpg)
Controlling Attention: Color►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
Website Design
![Page 16: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/16.jpg)
Direction through Color
Single bright color amidst muted notes pulls visual attention to the element
Website Design
![Page 17: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/17.jpg)
Color Context
Spectral composition of the background may influence the eye’s perception of color
Physics of Color
![Page 18: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/18.jpg)
Color Constancy
► 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
Physiology of Color
![Page 19: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/19.jpg)
Color Perception Deficits
► 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
Physiology of Color
![Page 20: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/20.jpg)
Meanings 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
Psychology of Color
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
![Page 21: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/21.jpg)
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
Visual Attention
![Page 22: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/22.jpg)
Gestalt Principles of Organization
legibility legibility legibility
►Contrast/ground principle
►Increases legibility, helps orientation, and ease of navigation
Website Design
![Page 23: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/23.jpg)
Gestalt Organization: Similarity►Similar elements are
seen as groups
Visual Attention
No Paper
RECYCLING HERE
![Page 24: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/24.jpg)
Gestalt Organization: Proximity or Contiguity
►Things that are closer together are seen as belonging together
Visual Attention
![Page 25: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/25.jpg)
Gestalt Organization: Closure
►We see complete figures even what part of the information is missing
Visual Attention
![Page 26: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/26.jpg)
Gestalt Organization: Area
►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.
Visual Attention
![Page 27: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/27.jpg)
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*
Website Design
http://hometown.aol.com/eheartandsoul/images/grandma's%20at%20computer.jpg
![Page 28: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/28.jpg)
Know Your User► Anticipate needs and goals
to structure organization and content
Esteem Needs
►Learning
►Self-Help
►Social Validation Love Needs
►Buying Latest Fashion
►Connection
Website Design
SelfActualization
Esteem
Love
Safety
Physiological
Maslow’s Hierarchy of Needs
![Page 29: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/29.jpg)
!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
Website Design
![Page 30: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/30.jpg)
Gestalt Principles for Visual Orientation
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
Likeness of form indicates which text are equated.
Proximity defines text groupings.
closure: elements are perceptually closed to be seen as complete figures
List is subordinate to text by placement & color.
Gestalt principles include:
► Hierarchical Grouping
►Parallel Grouping
►Subordinate Grouping
![Page 31: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/31.jpg)
Using Typography
► Good typography adds Readability Organization Mood
Meaning
►Consistency of typestyle with message facilitates:
reading comprehension and speed
positively impacts perceptions of ethics and credibility
Website Design
![Page 32: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/32.jpg)
Visual Noise: Keep it Clean
►Website space is visually constrained
►Trade-off between information and clutter
Website Design
►Clutter negatively impacts visual search speed and comprehension
►Google.com keeps clutter to a minimum so users can immediately find and use their service
![Page 33: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/33.jpg)
Practical Applications
Balance predictability with unpredictability
Top-down: User has goals and interests
Bottom-up: Site provides stimulus
Website Design
Predictable placement of navigation tools from page to page helps cognitive mapping for ease of use
![Page 35: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/35.jpg)
Teen Users
► Not as techno-savvy as we think
► Insufficient reading skills
► Less sophisticated search strategies
► Less patient
Website Design
► Pay more attention to visuals
► Highest subjective satisfaction comes from relatively clean and modest web design
![Page 36: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/36.jpg)
What Teens do Like
► 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
Website Design
![Page 37: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/37.jpg)
Interactive Elements that Work
► Quizzes
► Contests
► Voting
► Sharing photos
► Downloading music
► Watching videos
► Message boards
► Ability to add content
► Feedback
Website Design
![Page 38: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/38.jpg)
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
![Page 39: Psychology of Website Design - Dr. Pamela Rutledge](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c751964a79593b108b45dc/html5/thumbnails/39.jpg)
Conclusion► 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
Website Design
“www” illustration retrieved from http://www.webphoria.co.uk/