An introduction to Usability
65
Don’t make me think
-
Upload
erlend-debast -
Category
Design
-
view
15.939 -
download
1
description
A basis introduction to usability with examples & how to's.
Transcript of An introduction to Usability
Don’t make me think
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
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!
