Usability & Design
for the Web
USABILITY: What is it?
How easy it for a user to browse your site.
- find information
- complete a task
Why is it important?
"On the internet, the competition is only one click away, so if you frustrate users, they'll just head somewhere else"
Good usability leads to good design and vice versa
2
Basic Guidelines for good usability
- Label navigation and buttons so it's obvious where they navigate to
- Users scan when reading on the web. Keep that in mind when writing/organizing copy
- Keep all navigation/logins near the top of the page.
- Provide user feedback and follow standards
- Always let users know where they are and provide a clear path back
Design for usability
- Create a clear visual hierarchy
- Follow conventions
- Make it obvious on what's clickable and what's not
- Simplify the design. The busier the site is, the harder it will be for the user to navigate through it
- It should be clear on the homepage on what the purpose of the site is
VISUAL HIERARCHY
Visual hierarchy is the order in which a user processes information on a page; it allows users to understand information easily.
USING VISUAL HIERARCHY
- SIZE: the larger the element, the more attention it will attract
- COLOR: bright colors are more likely to draw attention over muted ones
-
CONTRAST: dramatically
contrasted colors will catch the eye easily - ALIGNMENT: an element that breaks away from the alignment of others will attract more attention
- REPETITION: repeating styles can give the impression that content is related
USING VISUAL HIERARCHY
- PROXIMITY closely placed elements will also appear related
- WHITESPACE: more space around elements will attract the eye toward them
- TEXTURE & STYLE: richer textures will attract more attention than flat ones
Visual HIERARCHY EXAMPLES
VISUAL HIERARCHY EXAMPLES
Visual HieraRchy Examples
1
Usability
By shadow4611
