Enviar pesquisa
Carregar
An introduction to Usability
•
41 gostaram
•
14,170 visualizações
Erlend Debast
Seguir
A basis introduction to usability with examples & how to's.
Leia menos
Leia mais
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 65
Baixar agora
Baixar para ler offline
Recomendados
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
Recomendados
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
Mais conteúdo relacionado
Destaque
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
Destaque
(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
Semelhante a 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
Semelhante a 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
Último
shot list for my tv series two steps back
shot list for my tv series two steps back
17lcow074
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
ttt fff
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
yuu sss
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
uasjlagroup
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
D SSS
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
yuu sss
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
7tz4rjpd
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Rndexperts
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
Fi ss
ARt app | UX Case Study
ARt app | UX Case Study
Sophia Viganò
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
diploma 1
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
vaibhavkanaujia
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
yuu sss
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
Fi L
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
yuj
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
Anastasiya Kudinova
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
katerynaivanenko1
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
zdzoqco
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
dollysharma2066
Último
(20)
shot list for my tv series two steps back
shot list for my tv series two steps back
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
ARt app | UX Case Study
ARt app | UX Case Study
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
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
Baixar agora