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
Slideshow view
Report
Share
Slideshow view
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
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
amanda2495
How to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
ab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
Zenith Clipping
poliovirus-190801072449. pptx
poliovirus-190801072449. pptx
ssuser0ad194
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
bingyichin04
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Nitya salvi
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
amgadibrahim92
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
Design Studio UI UX
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
samsungultra782445
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Nitya salvi
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
MdBokhtiyarHossainNi
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
MarekMitek1
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
Recently uploaded
(20)
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
How to Build a Simple Shopify Website
How to Build a Simple Shopify Website
ab-initio-training basics and architecture
ab-initio-training basics and architecture
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
poliovirus-190801072449. pptx
poliovirus-190801072449. pptx
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
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