Tuesday, 27 January 2009

Web Usability Guidelines

When the Internet first became mainstream back in the late 90's, there was a lot of
emphasis on web design and hardly any focus on web usability. The early (commercial)
Internet was plagued by flash intros, sound loops, and graphic intensive design. Some of
these issues still exist today, but thanks to the rise of web usability, webmasters are
placing more focus on the user experience.

When designing a website, it's more important to use web standards than it is to try and
be original. Assume nothing about your visitors; design for the lowest common
denominator. This means that 99% of the web population should be able to view and use
your website as it was intended, with no fixes or workarounds.

There have been volumes written about web usability in recent years. This section will
try and summarize some of the most important aspects of web usability. For a
comprehensive guide to web usability I recommend Jakob Nielsen's book Designing Web
Usability.

Always Make Links Blue

Back in 1995, when I was getting online for the first time, I was taught to navigate the
web by clicking on the blue underlined text. Whenever you see blue underlined text you
know it's a link. This is one of the most widely accepted standards on the web. Don't
confuse your visitors by changing the color of the links.

Use a Readable Font

I highly recommend using a font-face that is optimized for the web. Here is my list of
recommended font-faces:
• Arial
• Courier
• Georgia
• Times New Roman
• Verdana
Avoid using font sizes that are too small. People shouldn't have to squint to read your
copy.

Always use a dark font on a light background. If you use a light font on a dark
background it can be very difficult to read.

Web Pages Should Load Fast

Despite the fact that broadband is growing at a rapid pace, it still only accounts for 40%
of US households. There are still millions of households using a dial-up connection to
access the Internet. This means that you need to consider the load time of your pages
when designing your website.

Many web experts advocate that your page should load within 10 seconds on a 56k
modem. To test your website use the free Web Page Speed Report. In order to speed up
your page, I recommend that you use graphics sparingly, and try to reduce your graphics
file size.

Testing Your Website

It's important that your website displays consistently in most web environments. You
should consider testing your website on different web browsers, screen resolutions, and
connection speeds.
If you don't have access to different platforms I recommend the following free web-based
tools.

Screen Size Test:
To see what your web page looks like at an 800x600 screen resolution, I recommend
AnyBrowser's Screen Size Tester. By default, the tool will test your site at a 640x480
resolution, but this resolution is almost non-existent now. According to my traffic logs
from over 100 different websites, less than a 0.5 % use 640x480. This data is also backed
up by statistics gathered from other industry leading sites like Browser News. 800x600 is
now the most common denominator used for testing how your web page looks in
different screen sizes.

Web Browser Emulator:
It's impossible to guarantee how your website will look in different web browsers without
having the specific browsers installed on your machine. AnyBrowser.com does provide a
tool called the Web Site Viewer, which is not an emulator, but will show you potential
problems your web page display may have.

If possible, I recommend testing your website in these popular web browsers:
1. Internet Explorer - by far the most widely used browser. Accounts for over 80%
of the market. Download Internet Explorer (free)
2. FireFox - the fastest growing browser. Approximately 10% of the market.
Download Firefox (free)
3. Safari/Konqueror (Mac/Linux) - Covers approximately 2.5% - 5% of the
market. This is not available to test on Windows. Download Safari (Mac's
Only). Download Konqueror (Linux/Unix Only). If you want to test your web
page in this environment you will have to have a Mac or Linux machine available.
Obviously this is not practical for most Windows users. If you are concerned
about how your page looks on this platform, I recommend asking a friend or
colleague with a linux/mac machine to test your page.

There are dozens of other browsers out there, but most have failed to reach a critical
mass. You shouldn't waste your time worrying about them. Just keep your website
simple, and it should display just fine in most environments.

Webmaster Learning

HTML Goodies - www.htmlgoodies.com
A great place to learn basic and advanced web development skills. It's where I learned the
basics back in 2000.
W3Schools - www.w3schools.com
Several good tutorials about HTML, scripting, database development, and design.
SitePoint - www.sitepoint.com
This is probably my favorite resource for learning about website design, development,
and the business aspects of the Internet. They have several great books too.
Website Templates
Template Monster - www.templatemonster.com
The best source for website templates on the Internet.
Helen Design - www.helendesign.net
They have hundreds of web templates available in several categories.
Boxed Art - www.boxedart.com
WordPress Themes - themes.wordpress.net
These themes are designed to be used with the Word Press blogging system, but can be
used for any purpose.
Resources for Outsourcing Your Website
eLance - www.elance.com
The largest and most popular network of freelance workers online. Outsource design,
development, copyrighting, and more.
GetaFreeLancer.com - www.getafreelancer.com
A great resource for outsourcing web-related projects. Highly recommended.

Web Usability

UseIt.com - www.useit.com
Jakob Nielsen's usability website. Features case studies and other good resources for web
usability.
Usability.gov - www.usability.gov
A government sponsored website that features hundreds of good articles about web
usability and design. The site also links out to several other good web usability sources.
Books
• HTML Books
• Dreamweaver Books
• FrontPage Books
• Web Usability Books
• Web Copywriting Books

No comments:

Post a Comment