An introduction to Usability

Don’t make me think

Erlend Debast Web designer at Proximity BBDO erlend.debast@proximity.bbdo.be twitter.com/erlend artueel.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 is Anger Management

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

4 common situations & solutions

5 actually 4 common situations & solutions

1 Where the hell am I

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 ﬁrst & 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

Close to main nav clearly selected

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

2 I can’t ﬁnd what I’m looking for...

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

Titles orange links in blue Price in red Meta information in grey

Sans-font Clear CTA italic for quotes

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

3 What’s next please?

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

Where is home? This ain’t default

this ﬁeld is needed Length that matches input

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

Inline errors Default design

Interactive inline error Obvious Red color to CTA indicate error

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

3 clear steps Selected Default design What happens with my info?

4 Where should I click?

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 Color usage baby!

5 The ever-lasting “above the fold” discussion

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

37signals

Search as backup Contact us information

Functional sitemap Switch language

product Line up

Get to know your audience

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

Share your site statistics with all the people involved. Not only with marketing.

A usable website can result in higher ROI

Everyone’s happy!

Erlend Debast Web designer at Proximity BBDO erlend.debast@proximity.bbdo.be twitter.com/erlend artueel.be

http://www.muratkahraman.net	808
http://mycourses.tstc.edu	264
http://blog.muratkahraman.net	196
http://www.artueel.be	160
http://www.slideshare.net	104
http://static.slidesharecdn.com	39
http://aadjemonkeyrock.posterous.com	13
http://tstc.mrooms.net	7
http://chrisrutz.de	5
http://www.lmodules.com	3
http://rujmah.posterous.com	3
http://feeds.feedburner.com	3
http://xss.yandex.net	2
http://6868500358005784679_3cb05e23a38a9259f18184e784753ed8a9f6cfdb.blogspot.com	2
http://posterous.com	2
http://webcache.googleusercontent.com	2
http://irc.linkk.us	2
http://www.slidescene.com	1
http://js1.jigsawoffice.com	1
http://mloovi.com	1
http://www.ieslluissimarro.org	1
http://nay	1
http://mos	1
http://flavors.me	1
http://facebook.slideshare.com	1

An introduction to Usability

by Erlend Debast

Accessibility

Categories

Upload Details

Usage Rights

25 Embeds 1,623

Statistics

An introduction to Usability Presentation Transcript