Psychology Behind Good Web Design

Presented by: Olin Gallet (olindgallet@gmail.com)

http://www.olingallet.comUniversity of New Orleans, '09

B. S. Computer Science[Slideshare Link]

Why Should YOU Care About Good Web Design?

Leads to better sales Extends the product's brand Develops a better customer relationship

(rapport) Encourages customers to “spread the word”

(virality)

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.

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)

Auditorybreaking silenceverbal promptsechoing/highlighting read text

How do People Learn a Website?

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

Consistency

People 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 don't want to feel like they're going to another site when navigating unless they want to.

Consistency Across Browsers

All 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 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 it's on.-Negatives vary on the individual framework

Consistency Across Screen Resolutions

Computers 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+Doesn't 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)

SimplicityPeople don't 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.)-Buyer's 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 buyer's 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 thinking

Hick's Law provides mathematical backing to the time people take when making a selection from a set of choices.

Note that Hick's Law assumes that the user knows every choice and how to access each choice already. It's better for repeat visitors as opposed to first time visitors.

Hick's Law, Basic Form

Hick's Law, Realistic Form

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 doesn't exist on mobile, so make menus look like menus.

For this reason, I don't recommend pure mouseover dropdown menus. Instead, I recommend either lists or click-to-expand menus.

Sample mouseover code:https://gist.github.com/2943900

Some Menu Examples

Sparking Curiosity, Rewarding It

Curiosity makes people want to learn. Sparking it makes people interact with the site.

Fashion an environment for your targetGive your target confidenceMake 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 user's part. Make sure all your links work and don't 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.

Don't make your user think!

Suggested Reading

Steve KrugDon't Make Me Think

William Lidwell | Kritina Holden | Jill ButlerUniversal Principles of Design

The Afterglow

Leave me feedback on the presentation on Meetup – too simple? What can I improve?

Don't 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.