Submit Search
Upload
An introduction to Usability
•
41 likes
•
14,170 views
Erlend Debast
Follow
A basis introduction to usability with examples & how to's.
Read less
Read more
Design
Report
Share
Report
Share
1 of 65
Download now
Download to read offline
Recommended
Logos & standards
Logos & standards
Philip Tan
Web usability
Web usability
8raystech
Landing Pages Basics: What, Why and How
Landing Pages Basics: What, Why and How
Kate Kotenko Lengold
Redesigning Deliveroo – Simon Rohrbach, Deliveroo
Redesigning Deliveroo – Simon Rohrbach, Deliveroo
JAM London
Achieving Beautiful Typography in eBooks
Achieving Beautiful Typography in eBooks
digitalbindery
Debbie Goulding Makeup Artist Brand Style Guide
Debbie Goulding Makeup Artist Brand Style Guide
Cassie Martinez Pastorfide
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb
Neuro Web Design: What makes them click
Neuro Web Design: What makes them click
Susan Weinschenk
Recommended
Logos & standards
Logos & standards
Philip Tan
Web usability
Web usability
8raystech
Landing Pages Basics: What, Why and How
Landing Pages Basics: What, Why and How
Kate Kotenko Lengold
Redesigning Deliveroo – Simon Rohrbach, Deliveroo
Redesigning Deliveroo – Simon Rohrbach, Deliveroo
JAM London
Achieving Beautiful Typography in eBooks
Achieving Beautiful Typography in eBooks
digitalbindery
Debbie Goulding Makeup Artist Brand Style Guide
Debbie Goulding Makeup Artist Brand Style Guide
Cassie Martinez Pastorfide
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb
Neuro Web Design: What makes them click
Neuro Web Design: What makes them click
Susan Weinschenk
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Holger Bartel
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
Guy Kawasaki
Wireframes for WordPress
Wireframes for WordPress
John Housholder
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
Jasmine Vesque
Designing for a Better User Experience
Designing for a Better User Experience
BuiltByHQ
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Website Architecture Presentation from Web Strategy Workshops
Website Architecture Presentation from Web Strategy Workshops
Charles Edmunds
Digital Accessibility
Digital Accessibility
Charlotte (Bobi) Robson
International seo and content clustering
International seo and content clustering
Enterprise Ireland
International seo and content clustering | John Caldwell | CreatorSEO
International seo and content clustering | John Caldwell | CreatorSEO
Enterprise Ireland
International Seo and Content Clustering
International Seo and Content Clustering
Eoin O Siochru
Building a Powerful Small Business Website
Building a Powerful Small Business Website
Real Time Web Marketing
Enterprise Ireland presentation - International seo and content June 2018
Enterprise Ireland presentation - International seo and content June 2018
John Caldwell
Going Global Without Going Insane
Going Global Without Going Insane
Kevin Potts
Adobe AEM - Global SEO
Adobe AEM - Global SEO
Eli Schwartz
BcnDevCon13 - No Designer? No Problem!
BcnDevCon13 - No Designer? No Problem!
Edin Kapic
International SEO and Content Silos | John Caldwell | CreatorSEO
International SEO and Content Silos | John Caldwell | CreatorSEO
Enterprise Ireland
nternational SEO and Content Clustering | John Caldwell | CreatorSEO / ABC Di...
nternational SEO and Content Clustering | John Caldwell | CreatorSEO / ABC Di...
Enterprise Ireland
SEO + UX + CRO : les bonnes pratiques de 2022
SEO + UX + CRO : les bonnes pratiques de 2022
Semrush France
International Search Engine Optimisation - SEO
International Search Engine Optimisation - SEO
Enterprise Ireland
International SEO | John Caldwell | CreatorSEO
International SEO | John Caldwell | CreatorSEO
Enterprise Ireland
Your website roadmap
Your website roadmap
Raaker
More Related Content
Viewers also liked
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Holger Bartel
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
Guy Kawasaki
Wireframes for WordPress
Wireframes for WordPress
John Housholder
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
Jasmine Vesque
Designing for a Better User Experience
Designing for a Better User Experience
BuiltByHQ
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Viewers also liked
(6)
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
Wireframes for WordPress
Wireframes for WordPress
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
Designing for a Better User Experience
Designing for a Better User Experience
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
Similar to An introduction to Usability
Website Architecture Presentation from Web Strategy Workshops
Website Architecture Presentation from Web Strategy Workshops
Charles Edmunds
Digital Accessibility
Digital Accessibility
Charlotte (Bobi) Robson
International seo and content clustering
International seo and content clustering
Enterprise Ireland
International seo and content clustering | John Caldwell | CreatorSEO
International seo and content clustering | John Caldwell | CreatorSEO
Enterprise Ireland
International Seo and Content Clustering
International Seo and Content Clustering
Eoin O Siochru
Building a Powerful Small Business Website
Building a Powerful Small Business Website
Real Time Web Marketing
Enterprise Ireland presentation - International seo and content June 2018
Enterprise Ireland presentation - International seo and content June 2018
John Caldwell
Going Global Without Going Insane
Going Global Without Going Insane
Kevin Potts
Adobe AEM - Global SEO
Adobe AEM - Global SEO
Eli Schwartz
BcnDevCon13 - No Designer? No Problem!
BcnDevCon13 - No Designer? No Problem!
Edin Kapic
International SEO and Content Silos | John Caldwell | CreatorSEO
International SEO and Content Silos | John Caldwell | CreatorSEO
Enterprise Ireland
nternational SEO and Content Clustering | John Caldwell | CreatorSEO / ABC Di...
nternational SEO and Content Clustering | John Caldwell | CreatorSEO / ABC Di...
Enterprise Ireland
SEO + UX + CRO : les bonnes pratiques de 2022
SEO + UX + CRO : les bonnes pratiques de 2022
Semrush France
International Search Engine Optimisation - SEO
International Search Engine Optimisation - SEO
Enterprise Ireland
International SEO | John Caldwell | CreatorSEO
International SEO | John Caldwell | CreatorSEO
Enterprise Ireland
Your website roadmap
Your website roadmap
Raaker
Becoming a-filemaker-designer-in-60-minutes
Becoming a-filemaker-designer-in-60-minutes
DB Services
J105 Web Design
J105 Web Design
Chris Snider
Creating a World-class Translation Strategy
Creating a World-class Translation Strategy
Jose Palomares
International SEO and Content Silos | John Caldwell | CreatorSEO
International SEO and Content Silos | John Caldwell | CreatorSEO
Enterprise Ireland
Similar to An introduction to Usability
(20)
Website Architecture Presentation from Web Strategy Workshops
Website Architecture Presentation from Web Strategy Workshops
Digital Accessibility
Digital Accessibility
International seo and content clustering
International seo and content clustering
International seo and content clustering | John Caldwell | CreatorSEO
International seo and content clustering | John Caldwell | CreatorSEO
International Seo and Content Clustering
International Seo and Content Clustering
Building a Powerful Small Business Website
Building a Powerful Small Business Website
Enterprise Ireland presentation - International seo and content June 2018
Enterprise Ireland presentation - International seo and content June 2018
Going Global Without Going Insane
Going Global Without Going Insane
Adobe AEM - Global SEO
Adobe AEM - Global SEO
BcnDevCon13 - No Designer? No Problem!
BcnDevCon13 - No Designer? No Problem!
International SEO and Content Silos | John Caldwell | CreatorSEO
International SEO and Content Silos | John Caldwell | CreatorSEO
nternational SEO and Content Clustering | John Caldwell | CreatorSEO / ABC Di...
nternational SEO and Content Clustering | John Caldwell | CreatorSEO / ABC Di...
SEO + UX + CRO : les bonnes pratiques de 2022
SEO + UX + CRO : les bonnes pratiques de 2022
International Search Engine Optimisation - SEO
International Search Engine Optimisation - SEO
International SEO | John Caldwell | CreatorSEO
International SEO | John Caldwell | CreatorSEO
Your website roadmap
Your website roadmap
Becoming a-filemaker-designer-in-60-minutes
Becoming a-filemaker-designer-in-60-minutes
J105 Web Design
J105 Web Design
Creating a World-class Translation Strategy
Creating a World-class Translation Strategy
International SEO and Content Silos | John Caldwell | CreatorSEO
International SEO and Content Silos | John Caldwell | CreatorSEO
Recently uploaded
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
Delhi Call girls
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
LukeKholes
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
soniya singh
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
Government polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcd
shivubhavv
The history of music videos a level presentation
The history of music videos a level presentation
amedia6
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
University of Wisconsin-Milwaukee
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
TusharBahuguna2
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Delhi Call girls
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
sonalitrivedi431
Pastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. Xxx
SegundoManuelFaichin1
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
Call Girls in Nagpur High Profile
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
suhanimunjal27
Peaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Call Girls in Nagpur High Profile
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
mirandajeremy200221
2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx
suhanimunjal27
Recently uploaded
(20)
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Government polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcd
The history of music videos a level presentation
The history of music videos a level presentation
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
Pastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. Xxx
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
Peaches App development presentation deck
Peaches App development presentation deck
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx
An introduction to Usability
1.
Don’t make me
think
2.
3.
Erlend Debast Web designer
at Proximity BBDO erlend.debast@proximity.bbdo.be twitter.com/erlend artueel.be
4.
Us•a•bil•i•ty “... is the
effectiveness, efficiency, and satisfaction with which users can achieve tasks in a particular environment of a product.”
5.
Bringing ease, joy and
fun to the people around us.
6.
Usability is Anger Management
7.
Internet has become
part of our daily lives. Yet, with very poor usability.
8.
4 common situations
& solutions
9.
5 actually
4 common situations & solutions
10.
1 Where the
hell am I
11.
Site logo ★
Is expected “top-left” ★ Clickable, back to home
12.
Near-perfect
13.
Goes back to home
or news?
14.
“Home” ★
Is expected ★ First item in main navigation ★ English terminology is accepted
15.
Home is first
& selected
16.
First item &
selected
17.
Main Navigation ★
Is expected (horizontal) ★ Limit the number of items ★ “Selected” status
18.
Simple & straightforward
19.
Lovely icons
Clearly selected
20.
Sub Navigation ★
Is expected (vertically) ★ Close to main navigation ★ Selected status
21.
Close to main nav
clearly selected
22.
Breadcrumbs ★
Indicates “traveled” path ★ Show site/content hierarchy ★ Alternative way of going “back”
23.
Shows traveled path
24.
Plain & Simple
25.
Language ★
Expected near main navigation ★ ISO Standards (NL-FR-EN) ★ Indicate current language
26.
Top right & selected
27.
top right, but
not selected
28.
2 I can’t
find what I’m looking for...
29.
Typography ★
Difference between titles & paragraphs ★ Links should look like links ★ Use colors & fonts to show importance
30.
Titles orange
links in blue Price in red Meta information in grey
31.
Sans-font
Clear CTA italic for quotes
32.
Copywriting ★
Use keywords for titles (Google loves that too) ★ Match navigation & page titles ★ Avoid duplicate content ★ Group your content, wisely
33.
Keywords as navigation
Selected
34.
Whitespace ★
Use whitespace to create structure ★ More screensize doesn’t mean more content ★ Whitespace is sexy
35.
36.
37.
Search box ★
Expected top-right ★ Average search query is 35 chars
38.
Top right as
exptected
39.
Close the navigation
40.
3 What’s next
please?
41.
Forms ★
Default OS design is expected ★ Different length for each input format ★ Pre-format input fields/data
42.
Where is home?
This ain’t default
43.
this field is
needed Length that matches input
44.
Error recovery ★
Show what the user did wrong ★ Indicate how they can fix the mistake ★ Stop punishing your users ★ Use inline errors with care
45.
Inline errors
Default design
46.
Interactive
inline error Obvious Red color to CTA indicate error
47.
Progress ★
Show a process indicator ★ People love making progress ★ Group your information (obvious vs personal)
48.
3 clear steps
Selected Default design What happens with my info?
49.
4 Where should
I click?
50.
Call to action’s ★
People should know how to join ★ People should know why to join ★ Consistent style for your CTA’s
51.
Consistent style
52.
Consistent style
53.
Consistent
style Color usage baby!
54.
5 The ever-lasting
“above the fold” discussion
55.
Life below the
fold ★ People scroll, yes they do ★ Your lay-out should look “cut” ★ Make your footer usable
56.
37signals
57.
Search as backup
Contact us information
58.
Functional sitemap
Switch language
59.
product Line up
60.
Get to know
your audience
61.
It takes between
2 & 5 people to fix 70% of the most common usability issues.
62.
Share your site
statistics with all the people involved. Not only with marketing.
63.
A usable website
can result in higher ROI
64.
Everyone’s happy!
65.
Erlend Debast Web designer
at Proximity BBDO erlend.debast@proximity.bbdo.be twitter.com/erlend artueel.be
Download now