Psychology Behind Good Web Design Presented by: Olin Gallet (firstname.lastname@example.org) http://www.olingallet.com University of New Orleans, 09 B. S. Computer Science [Slideshare Link]
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)
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
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.
How Can You Make Learning Easier? (short)Consistency/Repetition Simplicity Spark Curiosity and Reward It
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.
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.
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.
Consistency Across Screen ResolutionsComputers are not just PCs and laptops – they are iPhones, Androids, Xboxs, tablets, etc. But they all have different screen sizes.
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.
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.
Why Simplicity Matters in Sales This is a diagram of types of sales
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
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.
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.
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: https://gist.github.com/2943900
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.
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.
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!
Suggested Reading Steve Krug Dont Make Me Think William Lidwell | Kritina Holden | Jill Butler Universal Principles of Design
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.