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

Don't make users "think" when browsing your site.
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

Usability

  • 882