Client logo

No one trusts an ugly websiteHow to improve your website’s credibility

by improving its design

Robyn Bragg — Nonlinear Creations

People can’t

help

judging

by appearancesClient logo

To be credible

a website needs to

look professional

well-designed

and polished.

Client logo

We find that people quickly evaluate a site by visual design alone. When designing your site, pay attention to layout, typography, images, consistency issues, and more.

— Web Credibility Project, Stanford University

credibility.stanford.edu

Client logo

Like dressing up for a job interview, putting your best design foot forward makes a good first impression

Would you trust this site with your credit card information?

What makes your website feel credible?Consistency

- Does the look and feel of the website match your stated brand values?

- Are the visual elements internally consistent?

Good, up-to-date design

- Garish or dated designs feel amateur and cheap

- Good design doesn’t have to be flashy or trendy

Is your website consistent with the rest of your branding?• Users will want reassurance that they are in the

right place

• If the branding is significantly different in style and quality to your printed materials or to the image you put forward (e.g. high-end) users may start to distrust you.

Your overall design should be internally consistent• Consistent overall tone/mood

• Unified visual style

• Consistent colour palette

• Use of one or two fonts

• Establishment of a consistent approach to photography or illustration

Which is the more reputable site?An exercise…

Client logo

Which site feels more reputable?

Which site feels more reputable?

Which site feels more reputable?

BEFORE

Changing your design can totally change your first impression

AFTER

Case Study: Uglytub.com

Let’s examine what makes a website look untrustworthy

Client logo

Does this site feel trustworthy?

Pick a visual tone & styleA mishmash of visual approachesgives a site an amateur feeling.

Let’s take a look at some inconsitencies…

Client logo

Serious HumourousOR

Image style

IllustrationOR

Image fills the frame

Image is cut out on a white background

Image is also distorted: never a good idea!

OR

Image style

Text overlaid on image

Text above imageOR

How do text & images work together?

Be consistent in font useToo many fonts and font styles can be confusing and distracting. Pick one font and use it consistently

Client logo

Fonts – pick one and stick to it

Recommendations

• Select 1-2 fonts (maximum 2 – one for headings one for body text)

• Use different weights/colours/sizes and case

(e.g. all caps vs. sentence case) to create an information hierarchy

• Do not center align text – this makes it difficult for users to scan

There are at least 4 fonts being used:

All capsWhite on black

Blue on whiteLeft aligned

OR

Use consistent heading & body text styles

Black on whiteCentered

OR

Make sure people know where to clickBe consistent with the colour and style of links and buttons.

Client logo

Purple Beveled

Square corners

YellowRounded corners

Drop shadow

OR

Pick a consistent button btyle

GreyRounded corners

Gradient

OR

Have a consistent link style

• It is essential for users to know what is “clickable” on the website. As web design moves towards a more minimal approach, colour becomes one of the primary cue for users

• A colour should be reserved for links and other interactive elements that is not used in any other way on the site

Would you know which of these is clickable?

Alignment. Alignment. Alignment. Working to a grid and ensuring that elements are well aligned and well organized will make your webiste feel neat and polished.

Client logo

Alignment & Spacing

• Inconsistent and tight spacing makes a site feel “uncomfortable” or “amateur” to users.

• Use consistent alignment to a base grid throughout the site.

• Allow whitespace and breathing room between elements, in particular, between text and other visual elements (lines, boxes etc.)Everything on

the page should align to an underlying grid structure

Whitespace. A designer’s best friendLook at any high-end brand’s website. Look at how much space doesn’t have anything in it.

Add whitespace, and then add some more.

Client logo

Whitespace

Colour. The days of web-safe colours are long gone.Pick colours for consistency, sophistication and usability.

Client logo

Choose a colour palette stick to it

Do these colours work together?• Don’t have too much variety —

Make sure that all the colours feel like they come from the same “families”

• Tone — Is the palette consistent with your corporate culture? Neutrals, subtle variations and calmer colours create a more sophisticated and trustworthy feel

• Usability — The lime green tone is vivid and “vibrates” on the eye, causing legibility problems and eyestrain

A better colour palette

Link/buttoncolour

Visited link/button hover colour

When choosing a colour palette…

• Make sure the colours relate to each other (e.g. they feel like they go together)

• Ensure that the palette has enough range in colours/values to serve your purpose, but don’t go overboard.

• Make sure your colours can support:

- Links (should use a unique, dedicated colour)

- Buttons

- Call out/emphasis boxes

- Headings

- Backgrounds etc.

When choosing a colour palette (cont’d)• Chose more muted colours for text or backgrounds. Extremely vivid

and/or pale colours can be hard for users to read

Text Text Text Text

• Vivid colours can certainly be used, if done carefully, however they should be balanced with more neutral colours to prevent the design from becoming garish

• Always keep accessibility in mind, visually challenged users need strong contrast in text for legibility – Check out this great tool for testing accessibility of test colours: jxnblk.com/colorable/demos/text

Oh, and content helps too.Obviously your content will go a long way to establish your credibility as well, but if not presented with a baseline of good design, users may not get far enough to read it.

Client logo