Web Usability - A Complete List of UX - UI Best Practices

Web Usability: A Complete List of UX/UI Best Practices http://www.nickkolenda.
com/user-experience/
Last Updated: April 28, 2016
73
19
97
SHARES
Welcome to a hugeresource on user experience (UX), user

interfaces (UI), and interaction design.
Whether youre designing a website or mobile app, youll

learn 125+ tacticsto optimize itsusability.
Bonus: You can so that

you can reference the tactics more easilymoving
forward.
1 de 75 30/04/2016 14:36
Web Usability: A Complete List of UX/UI Best Practices http://www.nickkolenda.com/user-experience/
I organized the tactics into various categories and

strategies.Click a strategy to view examples and
applications.
Category 1: Control the Users Focus and Attention
Strategy: Emphasize a Point of Entry in the Interface

Strategy: Guide Users Through a Visual Hierarchy
Strategy: Design the Layout Using Gestalt Principles
Strategy: Depict Interface Changes Without
Disrupting the User
Strategy: Remove or Deemphasize Unnecessary
Information
Strategy: Indicate Whether Content Exists Beyond the
Fold
Category 2: Guide Users Toward the End Goal
Strategy: Position Frequent Functions and Important

Data Closer to Users
Strategy: Communicate the Statuses of Interactions
Strategy: Offer Multiple Ways to Accomplish the Same
Task
Strategy: Communicate Requirements or Parameters
for an Interaction
Strategy: Communicate the Expected Outcome of an
Interaction
Strategy: Reward or Reassure Users When They Make
Progress
Strategy: Solve the Users Core Intent
Category 3: Reduce Mental Effort and Maintain Flow
Strategy: Minimize User Calculations
2 de 75 30/04/2016 14:36
Strategy: Convey the Users Current Location Within

the Interface
Strategy: Simplify Choice Tasks
Strategy: Use Conventional Web Design Interfaces
Strategy: Provide Feedback After Each Interaction
Strategy: Minimize the Negative Effects of Waiting
Periods
Strategy: Minimize the Users Reliance on Memory
Strategy: Minimize Zig Zagging Eye Patterns
Strategy: Communicate Which Items Are Clickable or
Interactive
Strategy: Communicate Using Familiar Words and
Symbols
Strategy: Maximize the Scannability of Your Interface
Strategy: Maximize the Readability of Text
Strategy: Use Consistent Patterns Throughout the
Interface
Strategy: Create Beautiful Designs With Visual
Balance
Category 4: Maximize Compatibility for All Users and

Scenarios
Strategy: Maximize Compatibility With Users

Knowledge and Skill Level
Strategy: Maximize Compatibility With the Users
Workow
Strategy: Maximize the Accessibility of Your Interface
Strategy: Maximize Compatibility for All Inputs and
Extreme Cases
Strategy: Maximize Compatibility for All Mediums
Category 5: Help Users Minimize and Overcome Potential

Errors
3 de 75 30/04/2016 14:36
Strategy: Prevent the Possibility of Errors

Strategy: Monitor Signals That Are Typical in Errors
Strategy: Differentiate Powerful Functions to
Minimize Slips
Strategy: Provide Easy Ways to Revert or Escape
Strategy: Minimize the Negative Effects of Leaving
Sequences
Strategy: Extend Movable Paths and Clickable Areas
Strategy: Provide Useful and Supportive Error
Messages
Strategy: Keep a Record of the Users Previous
Actions
Strategy: Analyze User Behavior to Find Interface
Issues
CATEGORY 1:
CONTROL THE USERS
FOCUS AND ATTENTION
Emphasize a Point of Entry

in the Interface
Every interface should havea clear starting point. Where
should viewers look rst? Make it clear.
4 de 75 30/04/2016 14:36
Guide Users Through a

Visual Hierarchy
Control the users experiencebyguiding them through the
interface. Where should they look rst, second,and third?
Establish that hierarchy.
5 de 75 30/04/2016 14:36
6 de 75 30/04/2016 14:36
Design the Layout Using

Gestalt Principles
Were inundated with stimuli. According to gestalt psychology,
we try toovercome that chaos by simplifying our
perception. We group things. We categorize elements. We
look for the whole.
Some principles include: similarity, proximity, closure,

connection, continuity, and gure/ground.
7 de 75 30/04/2016 14:36
Depict Interface
ChangesWithout Disrupting
the User
8 de 75 30/04/2016 14:36
Sometimes youll need to adjust the interface in front of the

user. Make those changes noticeable, yet nondisruptive.
9 de 75 30/04/2016 14:36
Remove or Deemphasize
Unnecessary Information
Our mental focus is nite. Unnecessary
elementswilldeplete those resources. Sokeep users
focused on the important information and functions.
10 de 75 30/04/2016 14:36
11 de 75 30/04/2016 14:36
Indicate Whether Content

Exists Beyond the Fold
Nowadays, mostbrowsers hide scroll bars when theyre
inactive. You need scroll hints to communicate whether
content exists beyond the fold.
12 de 75 30/04/2016 14:36
CATEGORY 2:
13 de 75 30/04/2016 14:36
GUIDE USERS TOWARD

THE END GOAL
Now that youve captured and directed the usersattention,

help them achievetheir goal.
Position Frequent Functions

and ImportantData Closer
to Users
Predict the usersintention. Then position that goalas close
as possible.
14 de 75 30/04/2016 14:36
15 de 75 30/04/2016 14:36
16 de 75 30/04/2016 14:36
Communicate the Statuses

of Interactions
Reduce uncertainty by conveyingallpertinent information.
17 de 75 30/04/2016 14:36
18 de 75 30/04/2016 14:36
Offer Multiple Ways to

Accomplish the Same Task
Users preferdifferent workows. Create
differentpathsforeach goal, and let userschoose the most
appropriate path for their workow.
19 de 75 30/04/2016 14:36
20 de 75 30/04/2016 14:36
Communicate
21 de 75 30/04/2016 14:36
Requirements or
Parameters for an
Interaction
Prepare users for each interaction. What will they need?
How do they proceed?
22 de 75 30/04/2016 14:36
Communicate the Expected

Outcome of an Interaction
Before users interact with an element, they should
understand the intended outcome.
23 de 75 30/04/2016 14:36
24 de 75 30/04/2016 14:36
Reward or Reassure Users

When They Make Progress
Are users making progress? Was theirinteraction
successful? Let them know. And enticethem to continue.
25 de 75 30/04/2016 14:36
26 de 75 30/04/2016 14:36
Solve the Users Core Intent

Oftentimes, wesolve surface-level needs. Go deeper. Always
brainstorm why users need certainfeatures or information.
Then solve the underlying intent.
27 de 75 30/04/2016 14:36
CATEGORY 3:
REDUCE MENTAL EFFORT
AND MAINTAIN FLOW
In addition to guidingusers,reducetheir cognitive workow.

That way,you prolong their state of ow.
Minimize User Calculations

Never make the user perform math. Let the computer
handle it.
28 de 75 30/04/2016 14:36
Convey the Users Current

Location Within the
Interface
Interfaces are like airports. Without a you are here marker,
users can get lost. Socreate those markers.
29 de 75 30/04/2016 14:36
Simplify Choice Tasks

Choices require effort. Reduce thateffort by simplifying
those tasks.
30 de 75 30/04/2016 14:36
31 de 75 30/04/2016 14:36
Use Conventional Web

Design Interfaces
Creativity is great. But dont stray far from aconventional
design. Users are accustomed to certain layouts and
structures. Those conventional designs are popularbecause
they work.
32 de 75 30/04/2016 14:36
Provide Feedback After Each

Interaction
Whenusers interact with your interface, they should
experience real-time feedback. Was something successful?
Was itunsuccessful? What changed?
33 de 75 30/04/2016 14:36
Minimize the Negative

Effects of Waiting Periods
Eliminate allunnecessary waiting periods. Ifusers need to
wait, then minimize thosenegativeeffects.
34 de 75 30/04/2016 14:36
35 de 75 30/04/2016 14:36
Minimize the Users

Reliance on Memory
Dont forcethe user to remember anything. Keep all
pertinent information in the open.
36 de 75 30/04/2016 14:36
Minimize Zig Zagging Eye

Patterns
Reduce the amount ofback-and-forth eye motions. Keep all
complementary data within close distances.
37 de 75 30/04/2016 14:36
Communicate Which Items

Are Clickable or Interactive
Users should identify which elementsare interactive(and
how to interact with them). If youre familiar withUX/UI, then
38 de 75 30/04/2016 14:36
you probably knowsigniers and affordances, popularized by

Don Norman in The Design of Everyday Things.
39 de 75 30/04/2016 14:36
Communicate Using
Familiar Words and Symbols
In most cases, clarity trumps creativity or jargon.
40 de 75 30/04/2016 14:36
41 de 75 30/04/2016 14:36
Maximize the Scannability

of Your Interface
Most users willprocessyour content byscanning it. And you
shouldnt ght it. Embrace it. Make your interface more
conducive to scanning.
42 de 75 30/04/2016 14:36
43 de 75 30/04/2016 14:36
Maximize the Readability of

Text
Obviously, text should be readable.But here are some tips
to make it more readable.
44 de 75 30/04/2016 14:36
Use Consistent Patterns

Throughout the Interface
With inconsistent patterns, users will need more time to
learnyour interface. Simplify it by maintaining a
45 de 75 30/04/2016 14:36
consistentlayout and appearance.
46 de 75 30/04/2016 14:36
Create Beautiful Designs

With Visual Balance
Designs are more usable when theyre aesthetically pleasing
a principle called the aesthetic-usability effect (Kurosu &
Kashimura, 1995).
47 de 75 30/04/2016 14:36
CATEGORY 4:
MAXIMIZE THE
COMPATIBILITY FOR ALL
USERS AND SCENARIOS
Your users are different people with different goals.

Designyour interface so that its compatible for everyone.
48 de 75 30/04/2016 14:36
Maximize Compatibility
With the Users Knowledge
and Skill Level
Your users will be novices, experts, or a mixture. Design
your interfaceaccordingly.
49 de 75 30/04/2016 14:36
50 de 75 30/04/2016 14:36
Maximize Compatibility
With the Users Workow
Users will have different needs. Customize your interface
towardthose differentworkows.
51 de 75 30/04/2016 14:36
52 de 75 30/04/2016 14:36
53 de 75 30/04/2016 14:36
Maximize the Accessibility

of Your Interface
Make your interface accessible topeople with disabilities.
Not only is it a best practice, but you could also face legal
consequences (depending on your product).
54 de 75 30/04/2016 14:36
Maximize Compatibility for

All Inputs and Extreme
Cases
Users should be able to enter a wide range of input without
consequences.
55 de 75 30/04/2016 14:36
56 de 75 30/04/2016 14:36
Maximize Compatibility for

All Mediums
Your interface should work in all environments (e.g., devices,
browsers, etc.).
57 de 75 30/04/2016 14:36
CATEGORY 5:
HELP USERS MINIMIZE
AND OVERCOME
POTENTIAL ERRORS
In most interfaces, errors are unavoidable. Ifthey do

happen, help users overcome them quickly and easily.
Prevent the Possibility of

Errors
When designing your interface, dont immediately focus on
solutions. Rather, try to makeerrors impossible to occur
(referred to as poka-yoke).
58 de 75 30/04/2016 14:36
59 de 75 30/04/2016 14:36
Monitor Signals That Are

Typical in Errors
What are common errors in your interface? Identifysignals
that are inherent in thoseerrors. Then monitor when those
signalsoccur.
60 de 75 30/04/2016 14:36
Differentiate Powerful
Functions to Minimize Slips
Users will lose focus. You cant prevent it. However, you
should visuallydistinguish powerful functions so thatyou
minimize the possibility of damagingerrors.
61 de 75 30/04/2016 14:36
Provide Easy Ways to Revert

or Escape
Always give users the optionto return to a previous page or
safe/recognizable area.
62 de 75 30/04/2016 14:36
63 de 75 30/04/2016 14:36
Minimize the Negative

Effects of Leaving
Sequences
Users should be able toreturn to a sequence in the same
position with the same data.
64 de 75 30/04/2016 14:36
Extend Movable Paths and

Clickable Areas
Users arent perfect. They make mistakeswiththe cursor.
Create interfaces that are exible and forgiving.
65 de 75 30/04/2016 14:36
66 de 75 30/04/2016 14:36
Provide Useful and

Supportive Error Messages
Never givea standard there was an error message. Explain
the reason and ideally the solution to the error.
67 de 75 30/04/2016 14:36
68 de 75 30/04/2016 14:36
Keep a Record of the Users

Previous Actions
Remind users of their past actions in your interface.
69 de 75 30/04/2016 14:36
Analyze User Behavior to

Find Interface Issues
Always iterate and improve yourinterface.Use these
tacticsto get started.
70 de 75 30/04/2016 14:36
71 de 75 30/04/2016 14:36
FINAL THOUGHTS
How I Compiled These

Tactics
I usually focus heavily on academic research. However, the
eld of web usability is evolving so quickly. So I couldnt nd
many useful and timely studies. Instead, I compiled the
tactics by reading a bunch of UX/UI books.
Maybe I went a little overboard
72 de 75 30/04/2016 14:36
I read those books from cover to cover, looking forconcrete

actionabletactics. Afterward,I supplemented my list by
(a)going throughonline guides (e.g., GoodUI has a great
list) and (b) studying current platformswith strong
reputations for usability(e.g., Mailchimp).
Here are the books from the previousimage (from top to

bottom):
1. The Design of Everyday Things by Don Norman

2. Simple and Usable by Giles Colborne
3. UX Strategy by Jaime Levy
4. Lean UX by Jeff Gothelf and Josh Seiden
5. Microinteractions by Dan Saffer
6. Interdisciplinary Interaction Design by James
Pannano
7. Dont Make Me Think by Steve Krug
8. 100 Things Every Designer Needs to Know About
People by Susan Weinschenk
9. 100 MOREThingsEvery Designer Needs to Know
About People by Susan Weinschenk
10. Neuro Web Design by Susan Weinschenk
11. The Non-Designers Design Book by Robin Williams
12. Design for Emotion by Trevor van Gorp and Edie
Adams
13. Usable Usability by Eric Reiss
14. Visual Thinking for Design by Colin Ware
73 de 75 30/04/2016 14:36
15. The UX Book by Rex Hartson and Pardha Pyla

16. Designing Interfaces by Jenifer Tidwell
17. CSS Secrets by Lea Verou
18. Design Elements: A Graphic Style Manual by Timothy
Samara
19. Graphic Design Solutions by Robin Landa
20. Universal Principles of Design by William Lidwell,
Kristina Holden, & Jill Butler
21. Digital Design Essentials by Raj Lal
22. Universal Methods of Design by Bella Martin and
Bruce Harrington
23. Envisioning Information by Edward Tufte
Next Steps
I organized this article bycategories and strategies.
However,you can download a summary PDF organizing
the tactics by design elements(e.g., forms, buttons, etc.).
Whenever youre designing those elements in your interface,
you can reference the PDF.
Also, thislist is just the beginning. Moving forward, Ill

beadding new tactics periodically.In the meantime, though,
you can readmy article on conversion optimizationto
furtheroptimize your site.
73
19
97
SHARES
74 de 75 30/04/2016 14:36
Yes I Do
ABOUT | BLOG | CONTACT

COPYRIGHT 2016 KOLENDA ENTERTAINMENT LLC
TWITTER | FACEBOOK | PRIVACY POLICY
75 de 75 30/04/2016 14:36

Web Usability - A Complete List of UX - UI Best Practices

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Usability - A Complete List of UX - UI Best Practices

Transféré par

Droits d'auteur :

Formats disponibles

Web Usability: A Complete List of UX/UI Best Practices http://www.nickkolenda.

Last Updated: April 28, 2016

Welcome to a hugeresource on user experience (UX), user

Whether youre designing a website or mobile app, youll

Bonus: You can so that

I organized the tactics into various categories and

Category 1: Control the Users Focus and Attention

Strategy: Emphasize a Point of Entry in the Interface

Category 2: Guide Users Toward the End Goal

Strategy: Position Frequent Functions and Important

Category 3: Reduce Mental Effort and Maintain Flow

Strategy: Minimize User Calculations

Strategy: Convey the Users Current Location Within

Category 4: Maximize Compatibility for All Users and

Strategy: Maximize Compatibility With Users

Category 5: Help Users Minimize and Overcome Potential

Strategy: Prevent the Possibility of Errors

Emphasize a Point of Entry

Guide Users Through a

Design the Layout Using

Some principles include: similarity, proximity, closure,

Sometimes youll need to adjust the interface in front of the

Indicate Whether Content

GUIDE USERS TOWARD

Now that youve captured and directed the usersattention,

Position Frequent Functions

Communicate the Statuses

Offer Multiple Ways to

Communicate the Expected

Reward or Reassure Users

Solve the Users Core Intent

In addition to guidingusers,reducetheir cognitive workow.

Minimize User Calculations

Convey the Users Current

Simplify Choice Tasks

Use Conventional Web

Provide Feedback After Each

Minimize the Negative

Minimize the Users

Minimize Zig Zagging Eye

Communicate Which Items

you probably knowsigniers and affordances, popularized by

Maximize the Scannability

Maximize the Readability of

Use Consistent Patterns

consistentlayout and appearance.

Create Beautiful Designs

Your users are different people with different goals.

Maximize the Accessibility

Maximize Compatibility for

Maximize Compatibility for

In most interfaces, errors are unavoidable. Ifthey do

Prevent the Possibility of

Monitor Signals That Are

Provide Easy Ways to Revert

Minimize the Negative

Extend Movable Paths and

Provide Useful and

Keep a Record of the Users

Analyze User Behavior to

How I Compiled These

Maybe I went a little overboard

I read those books from cover to cover, looking forconcrete