Web Usability Best Practices
Web usability is a wide topic and there are many studies and
resources available (see Resources) but here we'll just be covering
the main fundamentals of good usability.
Top Ways to Improve Website Usability
- Help your visitors accomplish their tasks
Identify your users groups and support
their goals. Make it easy for visitors to find the
information they are looking for.
- Create a clear call to action
A call to action is a task you'd like
your visitor to do such as clicking a hyperlink, filling out a
form, downloading a document, signing up for email newsletter. Be
sure it is easy to find, located in the upper half of your
page and self explanatory.
- Improve readability with text
Most people scan web pages at a glance. Be sure your main
message appears "above the fold" so that it can be scanned
quickly before scrolling down to read details further down the
page. Think short. Break long blocks of text into
smaller chunks and use bulleted lists. Remove extraneous
words. Heat map eyetracking studies remind us
that people scan a web page they tend to read in an "F shaped
patten", from top to bottom left to right - focusing on the
upper left.
- Format text using standard proven typography
techniques
Consider how a newspaper article is written. Be sure to
use clear concise headline, medium sub headline and
default size body text. Avoid using colors for fonts other than
links. Red can sometimes be used to note an urgent notice
but consider accessibility. ADA resources state that "red" may look
"grey" to someone who is color blind.
- Make text links obvious and
self-explanatory
Studies show that using blue text with underline will get more
clicks than any other combination. Be sure the link is informative.
Avoid using "click here" since it tells the user nothing.
Instead use some descriptive text for your link such
as "View Academic Calendar" or "Download Course
Descriptions". Open links to other websites in
a new tab or window using the Do NOT use underlines for
text that is not a link - it will only confuse the user. Create
emphasis with bold or italics.
- When to link to a new window or tab
Generally speaking, use the link target "New
Window" or "Blank" only when linking to a PDF document or to a
different website. That will allow the reader to easily return to
your page when the close the document or supporting link window or
tab.
- Use images sparingly and always use alt tags
A bold appealing image can draw the users
attention as long as it supports the content doesn't
distract from the overall message. Avoid using animated
images unless it adds meaning to the content, otherwise it
distracts the reader, causing them to not read the text on your
pager.
- Optimize images for web use
Resize images and prepare for web use before uploading to
the web. Large images will slow website load time. Images should be
72dpi and less than 100k saved as .jpg or .gif for best
results.
Downloads
Resources