Web Usability Best Practices
Web usability is a wide topic and there are many studies and resources available 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 perform such as clicking a hyperlink, filling out a form, downloading a document, signing up for a newsletter. Be sure it the call to action 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 near the beginning of the page 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 eye tracking studies remind us that people scan a web page and 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 Description." Open links to other websites in a new tab or window using the link target "new window" or "blank." 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 they 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 can distract the reader, causing them to not read the text. - Optimize images for web use
Resize images and prepare for web use before uploading to the web. Large images = large file sizes that will slow website load time. Images should be 72dpi and ideally less than 100k, saved as .jpg, .png, or .gif for best results.
Downloads
- Mashable.com - 7 Best Practices for Improving Your Website's Usability
- Jakob Nielson - "How Users Read On The Web"
- Nielson Normon Group - Information on Writing Hyperlinks
- W3C - Don't use "Click Here" for link text
- Web Accessibility Initiative (WAI)