The Psychology of Good Web Design


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

The Psychology of Good Web Design

  1. 1. Psychology Behind Good Web Design Presented by: Olin Gallet ( University of New Orleans, 09 B. S. Computer Science [Slideshare Link]
  2. 2. Why Should YOU Care About Good Web Design? Leads to better sales Extends the products brand Develops a better customer relationship (rapport) Encourages customers to “spread the word” (virality)
  3. 3. Key Discrepancy – Content vs. Design Content answers what you want to display on a web page – the image, the data, the copy, etc. Design answers how and where you display the data – the fonts, the color, the placement. More specifically, CSS answers the visuals, Javascript/jQuery answers the behavior. Your content should be as decoupled from your design as much as possible. If your content is a liquid, it should take the form of whatever container that holds it.
  4. 4. How do People Learn a Website? Visuallydirect cues (calls to action, explanatory labels) text styling (fonts, colors, italics, bold, etc.) visually semantic (beveled buttons, standout headers) Auditory breaking silence verbal prompts echoing/highlighting read text
  5. 5. How do People Learn a Website? Through Experience Navigating Moving around the cursor People are DRAWN to what is radically different from the majority. Highlight the information you want your user to FOCUS on by differentiating it from the norm.
  6. 6. How Can You Make Learning Easier? (short)Consistency/Repetition Simplicity Spark Curiosity and Reward It
  7. 7. Consistency in General ConsistencyPeople enjoy knowing what to expect. It makes people comfortable. Comfort means people are willing to spend more time on the site. The repetition provided by consistency also helps people learn a site easier.
  8. 8. Consistency in Site Design Make changes to design, not content. Keep color schemes, styling, branding, etc. the same among every page of the site. Follow established conventions (if possible) ie keep links underlined, place navigation in the top right, etc. Wow your visitors with amazing content, not avantgarde rule breaking. People dont want to feel like theyre going to another site when navigating unless they want to.
  9. 9. Consistency Across BrowsersAll browsers were not created equally – they will display the same pages differently. While there are various solutions, each ones have their ups and downs.
  10. 10. Consistency Across Browsers – Solutions Browser Hacks +Quick and easy fix, are usually a small javascript file or css hack -Have no guarantee of longevity since they use exploits. -Javascript can be turned off. (very minor) Sniff out Browser, Serve Up Appropriate Page +Guarantees a page looks the way you want in a certain browser. -Inefficient use of time when there are better solutions. Browser Agnostic Framework +Does not care which browser its on. -Negatives vary on the individual framework
  11. 11. Consistency Across Screen ResolutionsComputers are not just PCs and laptops – they are iPhones, Androids, Xboxs, tablets, etc. But they all have different screen sizes.
  12. 12. Consistency Across Screen Resolutions – Solutions Device-dependent solution +Allows functionality to be added/removed based on device. -A bit more time consuming. Liquid/Fluid Layouts +Doesnt change content but rather how content is organized on a page amongst resolutions. +/-Works best with text-dominant or image-dominant content. Scaling Layouts +Changes size of content based on screen resolution. -Can distort images, especially if width or height is significantly higher than the other.
  13. 13. How Can You Make Learning a Site Easier? (cntd) Simplicity People dont want to think much when navigating a site. People with less options funnel into conversion better and are less likely to bounce.
  14. 14. Why Simplicity Matters in Sales This is a diagram of types of sales
  15. 15. Emotion vs. Logic in Sales Full Emotional Sale -People buy to satisfy an emotion (belonging, happiness, etc.) -Buyers Remorse -Good for one-time sales such as vacations, houses, etc. Full Logical Sale -People buy due to a need (food, water, etc.) -Gives no reason for a repeat sale -Also good for one-time sales Mixed Emotional / Logical Sale -Provides a logical reasoning for purchases, stopping buyers remorse -Hits the emotional switches needed for repeat purchases
  16. 16. How to Express Emotion & Logic on Websites Emotion -Vibrant colors -Scenery -Models Logic -Testimonials -Scientific Facts/Evidence -Statistics/Data You want to keep the design simple so the content can do the work for you.
  17. 17. Less choices = More Simple = Less Logic = More Emotion Less choices mean less time thinkingHicks Law provides mathematical backing to the time people take when making a selection from a set of choices. Note that Hicks Law assumes that the user knows every choice and how to access each choice already. Its better for repeat visitors as opposed to first time visitors.
  18. 18. Hicks Law, Basic Form
  19. 19. Hicks Law, Realistic Form
  20. 20. Key Focus: Navigation Menus Navigation menus are one of the cornerstones of a good website. Provide key navigation prominently, provide optional navigation in a less prominent, but visible location. Key navigation answers why your user is going to your site. Less choices = better. Having a mouseover effect helps identify them – at minimum, change the cursor to a hand. Note that mouseover doesnt exist on mobile, so make menus look like menus. For this reason, I dont recommend pure mouseover dropdown menus. Instead, I recommend either lists or click-to-expand menus. Sample mouseover code:
  21. 21. Some Menu Examples
  22. 22. Sparking Curiosity, Rewarding It Curiosity makes people want to learn. Sparking it makes people interact with the site. Fashion an environment for your target Give your target confidence Make your target feel something Keep in mind people are going to make mistakes. Mistakes are better than having everything go well since they learn more than without them. The key is to minimizing the damage.
  23. 23. Damage Control 404 Pages – For honest misspellings on the users part. Make sure all your links work and dont link to “under construction” if possible. Include breadcrumbs – most common on forums Include a searchbox if relevant – a necessity on any product or service site. Include a way to go home to the homepage.
  24. 24. Takeaways You are not your audience. Speak to your audience. Find out what they want. Help your audience rather than letting your audience help themselves. Be consistent. Be simple. And make your audience feel good about themselves. Decouple your content and your design as much as possible. Let your design work on its own first. Dont make your user think!
  25. 25. Suggested Reading Steve Krug Dont Make Me Think William Lidwell | Kritina Holden | Jill Butler Universal Principles of Design
  26. 26. The Afterglow Leave me feedback on the presentation on Meetup – too simple? What can I improve? Dont forget the slides are on Slideshare at: [Slideshare Link] – will also crosspost on Meetup. Next presentation planned for me will either be gamification in user design or utilizing positive social engineering in UX design.