4 January 2009
How to effectively design a website with usability in mind

A great website combines efficient and eye catching design coupled with a user friendly and accessible interface that is guaranteed to generate attention, traffic and return visitors. The way your site’s content is presented (both in design and usability) means the world to how it is interpreted by its viewers, including those with disabilities.

The key to beginning a successful website, both in design and usability is to first know your service, product, purpose, as well as your target audiences. Generating a basic concept or idea of what you want to present to the world (product, service, etc.); as well as how you want to present it (visual aids, text, multi-media, etc.) will give you a great vantage point for creating an optimal website.

Purpose

Before you begin swash buckling a website together with all the latest free gizmos and gadgets you Google on the web, you need to ask yourself one very important and key question: What purpose does your website serve?

Figuring out the purpose of your website will not only help you remain focused on what it is you’re offering to the public, but will also help you find the right tools, services, designers and elements fitting of your particular website.

For example: Let’s say I’m a professional oil painter with a catalog of hundreds of prints and original pieces that I’m looking to sell online world wide. The purpose of my website would be to sell my artwork – plain and simple! The best type of site design that I’d need to use (to get the most profit from my site, services and products) would be to build an e-commerce style site with shopping cart or other online ordering capabilities.

Now that you have a purpose for your website in mind, you will need well thought out and planned content to enhance the pages of your site.

Content

The content of your website refers primarily to the descriptive text and graphical images that are embellished within your website’s design infrastructure.

Your content should create a positive and reactive response from your site’s viewers. It should capture their attention while providing them with answers to all their questions about your site, service, products and purpose.

Within your content you should at the very least explain:

1. Who you are and how long you’ve been in business
2. What you offer, provide, etc.
3. How you can be reached or how your products can be obtained
4. Where you’re located or where your products can be purchased
5. Why viewers should buy from you or trust you and so on.

It’s easy in today’s day and age to simply download a bunch of free tools, plug-ins, and other enhancements to add to your website. If you’re keen on providing the world with an assortment of multi-media, make sure your provisions not only go hand-in-hand with your site’s purpose, but can also be viewed by the majority of web surfers (accessibility).

Not everyone enjoys downloading plug-ins, fonts or special programs just to view one website or web page. In most cases, those viewers will stop by your site for all of 2 seconds and simply leave without a second thought of ever returning (at least not intentionally). The key is to provide multi-media that will enhance your site’s content, not over rule it or distract the viewer from your site’s purpose. Plan ahead and look around for the best media tools to use for your site’s purpose.

Though it looks “cool” try to stay away from special effects like trailing mouse cursors (or changing the mouse pointer to a hand or cross-hairs), animated graphics (gifs) that may cause a viewer’s screen to flicker and colors that blend into one another (such as a black background with dark blue text). Some widgets and special codes are good to use to enhance your site, providing they don’t overbear your site with useless content – less is often better.

After you settle on the content of your website (text, graphics and media) you need to present it in away that will be pleasurable for your viewers to not only view but access appropriately – usability through design.

The Design

Design in terms of the word refers more profoundly with its “look and feel” - from the placement of graphics, text and other visual content to the font and color schemes used. If anything, these are the key factors to creating a website that will visually grapple your viewers and entice them to return again in the future. In most cases the design of a site is based around the site’s purpose (e-commerce, brochure, gallery, etc.) and its content (text, graphics and media).

The important aspects of any website’s design lie within its navigational system, color and font choices and content layout.

Navigation

One of the most important elements of any website is the ease in which a user can navigate (surf) through the site’s content and pages. More complex sites with lots of pages (or pages within pages) need to take this factor into more consideration than others. The trick is to keep the navigation system as simple as possible.

Pretend you are setting up the navigation system for someone who has never in their life browsed a web page; ask yourself: could they find their way around your site easily? If the answer is no, try simplifying or enhancing your system so your navigational elements are more noticeable. If the user or web surfer has no idea how to navigate within your site, then your site isn’t designed with usability in mind.

Color and Font Choices

Another key element to your site’s design and usability is its color scheme and font choices. You want to choose colors and fonts that can transcend different browsers and web users. Keep in mind, what you see on your computer, isn’t always the way someone else sees it on theirs. There are many factors that come in to play, such as: a web viewer’s personal computer setting (including screen size, resolution, default fonts, etc.), the browser they are using, the age of the computer they are using or maybe they are visually impaired and have a special program that converts fonts and colors into something they can see.

Try to choose standard fonts that lie within the Times, Arial, Veranda, Helvetica, serif, sans-serif families. Expanding outside of that realm is a surefire guarantee that your visitor’s will not see your site the way you’ve designed it. Special fonts (those outside of the aforementioned font families) will be converted and appear as the viewer’s default font - whatever it may be set as in their personal/computer/browser’s settings. If you must use a special font to enhance a title or aspect of your page, embed it in a graphic file (jpeg, gif, png, etc.) this way, your font choice will be represented exactly as you want it to appear.

Colors are a great enhancement to any website, for those that can see them that is! Not all computers, browsers and users view colors in the same way and it can be very troublesome when trying to spruce up your website with splashes of colors. A trick to help compensate for color changes is to print off a page of your website – one in color and one in black and white. If you notice that some of your colors especially in the text portions of your site disappear, blend into the background or don’t look right, then it’s time to try another color. If your page prints off clean in both colored and grayscale versions than the colors you’ve chosen will probably transcend browsers and users well.

Content Layout

The layout of content within your site refers to the placement of your text, graphics, and multi-media elements.

There’s no set defined area of a web page that you must place your content within, which gives you free range of how you’d like your content displayed. However, be sure to test your content over a variety of browsers and screen sizes to ensure that your website is being viewed optimally. You may want to create separate (or optional) websites for different resolutions and likewise if you’re using lots of multi-media, you may want to offer a downgraded version stripped of most media content and display it in HTML format.

The most effective sites are those with great layout schemes that flow evenly from page to page. The easiest way to ensure your site has proper flow is to design a standard template that every page of your site will follow.

A template should include the basics such as a header (possibly with your brand/logo or company name), the main navigational system (if applicable), sub-headers or titles (of important categories or noteworthy pieces of information), blocks for multi-media or embellishments and set areas for other text and graphic elements.

After you have planned your site’s purpose, defined and laid out its content, your website will be well on its way to showcasing its superb design and usability to the public.

The key to effective web design is to “keep it simple” – this includes your content (media, graphics and text), layout (placement of your content), navigation system (how users get around within your site) as well as accessibility (ensuring that everyone, including those that are disabled or visually impaired, can view your website optimally).