an introduction to usability

Don’t make me think

Erlend DebastWeb designer at Proximity BBDO

erlend.debast@proximity.bbdo.betwitter.com/erlendartueel.be

Us•a•bil•i•ty“... is the effectiveness, efficiency, and satisfaction with which users can achieve tasks in a particular environment of a product.”

Bringing ease, joy and fun to the people around us.

Usability isAnger Management

Internet has become part of our daily lives.Yet, with very poor usability.

4 common situations& solutions

4 common situations& solutions

5 actually

Where the hell am I1

Site logo★ Is expected “top-left”★ Clickable, back to home

Near-perfect

Goes back to home or news?

“Home”★ Is expected★ First item in main navigation★ English terminology is accepted

Home is first &

selected

First item & selected

Main Navigation★ Is expected (horizontal)★ Limit the number of items★ “Selected” status

Simple & straightforward

Lovely icons

Clearly selected

Sub Navigation★ Is expected (vertically)★ Close to main navigation★ Selected status

clearly selected

Close to main nav

Breadcrumbs★ Indicates “traveled” path★ Show site/content hierarchy★ Alternative way of going “back”

Shows traveled path

Plain & Simple

Language★ Expected near main navigation★ ISO Standards (NL-FR-EN)★ Indicate current language

Top right & selected

top right, but not selected

I can’t find what I’mlooking for...

2

Typography★ Difference between titles & paragraphs★ Links should look like links★ Use colors & fonts to show importance

links in blue

Titles orange

Meta information

in grey

Price in red

italic for quotes

Clear CTA

Sans-font

Copywriting★ Use keywords for titles (Google loves that too)

★ Match navigation & page titles★ Avoid duplicate content★ Group your content, wisely

Keywords as navigation

Selected

Whitespace★ Use whitespace to create structure★ More screensize doesn’t mean more content★ Whitespace is sexy

Search box★ Expected top-right★ Average search query is 35 chars

Top right as exptected

Close the navigation

What’s next please?3

Forms★ Default OS design is expected★ Different length for each input format★ Pre-format input fields/data

This ain’t default

Where is home?

Length that matches input

this field is needed

Error recovery★ Show what the user did wrong★ Indicate how they can fix the mistake★ Stop punishing your users★ Use inline errors with care

Inline errors

Default design

Interactive inline error

Obvious CTARed color to

indicate error

Progress★ Show a process indicator★ People love making progress★ Group your information (obvious vs personal)

3 clear steps

Default design

Selected

What happens with my

info?

Where should I click?4

Call to action’s★ People should know how to join★ People should know why to join★ Consistent style for your CTA’s

Consistent style

Consistent style

Consistent style

Color usage baby!

The ever-lasting“above the fold” discussion

5

Life below the fold★ People scroll, yes they do★ Your lay-out should look “cut”★ Make your footer usable

37signals

Contact us information

Search as backup

Functional sitemap

Switch language

product Line up

Get to know youraudience

It takes between 2 & 5 people to fix 70% of the most common usability issues.

Share your site statistics with all thepeople involved. Not only with marketing.

A usable website can result in higher ROI

Everyone’s happy!

Erlend DebastWeb designer at Proximity BBDO

erlend.debast@proximity.bbdo.betwitter.com/erlendartueel.be