1. Psychology Behind Good Web
Design
Presented by:
Olin Gallet (olindgallet@gmail.com)
http://www.olingallet.com
University of New Orleans, '09
B. S. Computer Science
[Slideshare Link]

2. 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)

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. How do People Learn a Website?

Visually
direct 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. 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. How Can You Make Learning
Easier? (short)
Consistency/Repetition
Simplicity
Spark Curiosity and Reward It

7. 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.

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

9. 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.

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

11. 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.

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
+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.

13. How Can You Make Learning a Site
Easier? (cntd)

Simplicity
People don't want to think much when
navigating a site.
People with less options funnel into conversion
better and are less likely to bounce.

14. Why Simplicity Matters in Sales

This is a diagram of types of sales

15. 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

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. 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.

18. Hick's Law, Basic Form

19. Hick's Law, Realistic Form

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

21. Some Menu Examples

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. 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.

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.

Don't make your user think!

25. Suggested Reading
Steve Krug
Don't Make Me Think
William Lidwell | Kritina Holden | Jill
Butler
Universal Principles of Design

26. 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.