Web Design Tips

Appearance, Usability and Search Engine Visibility in Web Design

I was recently asked by a visitor to thesitewizard.com to take a look at her company's website, designed by a university student. I will not give the URL for that site, partly to protect the innocent, and partly because by the time you read this, it'll probably have been modified.

The site was heavy in its use of graphics with images adorning most parts of the page layout, to provide curved borders (to replace the sharp corners in enclosing boxes), different background images for different parts of the page, etc. It had a top navigation bar, driven entirely using JavaScript. The navigation bar mimicked the sort of menu bar you find in computer programs - there is a horizontal menu bar with different items listed. When you move your mouse over one of those items, the menu will automatically expand vertically. As you move the mouse cursor down the pop-up menu, the item beneath the pointer is highlighted. Click it, and you will be delivered to another page on the site.

In general, that site is typical of the kind of sites produced by newcomers to web design. It scores well in terms of prettiness and gadgetry (although only under one browser, it doesn't work well under other browsers), but fares dismally in terms of usability and search engine readiness. In fact, the reason my visitor wrote to me was because the website suffered a significant drop in the number of visitors after it was redesigned in its current form.

This article uses that site as a starting point for discussing some of the issues that a web designer needs to consider when creating a website that must exist and compete in the real world (as opposed to a site that is created merely to fulfill the course requirements of a school or university).

1. Appearance is Not the Most Important Issue

Over the years that I have dealt with newcomers to web design, it is my observation that they tend to focus excessively (and sometimes almost exclusively) on the appearance of a website. The site I mentioned earlier is a case in point: the designer tried hard to make the site look beautiful (and, if I may add, succeeded too - the site does indeed look pretty). However, as hard as it may be to believe (if you are a newcomer), appearance isn't the most important thing to look at when you are planning and creating your site.

Don't get me wrong here. I'm not saying that appearance is of no importance. Far from it. However, in this article, my intention is to address the excessive importance newcomers place on beauty. In fact, if you belong to the other extreme, discounting the value of the appearance of a website altogether, you might want to read the discussion of Two Common Web Design Myths below.

Having said that, your site can still survive (or even thrive) if it is a plain-looking site like Google. This is not necessarily the case if you overlook the other important issues in web design.

2. Usability is Important for You to Achieve Your Purpose

All sites are created for a particular purpose. Some were created so that their owners can sell something. Others are information resources (like thesitewizard.com). Still others are designed to showcase their owner's talents (such as sites displaying the owner's resumes and portfolios).

The usability of your site is important to help you achieve that purpose. The basic question that you need to address when dealing with usability is: can your visitors easily access the information they need so that they can do the stuff that you want them to do? There are quite a number of things involved in this question.

1. Information Availability

   Is the information that your visitors need to make informed decisions available on your site? For example, before they can buy a product, they will want to know more about that product. A brief one-line summary about your product's features may work for your main page, but you will probably find that you get more buyers if you can provide a link to a page that gives a detailed list of features of each of your products.

2. Information Accessibility

   Not only must your information be available to your visitors, it must be easily accessible. A page that gives a detailed description of your products is not going to help your visitors if they have to work hard at finding it. In fact, my experience is that if visitors have to work at finding something on your site, they are not going to find it. Either put the information right under their noses, or put a link to it in that place.

3. Navigation

   A good navigational system for your website is crucial. A navigational system is one by which visitors can move from one page to another. For example, on thesitewizard.com, one way in you can access the main pages on the site is to use the navigation buttons on the left column of the page.

   There are a few features to a good navigational system:

   1. If you are using a navigation bar or panel, standardize its location on all the pages of your website. Don't make your visitors feel as though they are embarking on a treasure hunt every time they reach a new page.

   2. In addition to your navigation bar or panel, provide short-cuts to places where visitors are likely to want to go. Don't force your visitors to have to go through your main page (or your site map) every time they need to visit another page on your site. In fact, put direct links in logical places - for example, on your "Products" page, you should have a links to your "Buy / Order" page as well as links to the pages with detailed information about individual products. Think like a visitor and ask yourself what are the things a visitor might want to know or do when he/she is at a particular page.

   3. A good navigation system must be usable by all your visitors. As a result, try to avoid things that are dependent on certain facilities or features being available. For example, don't make your menu dependent on a specific browser. If your menu is JavaScript-driven, make sure that you have an alternative facility available for people who do not have JavaScript enabled.

   4. If your site has a large number of pages, a site search engine will improve your site's usability. Not everyone mentally organises information the way you do. Hence a logical arrangement to you may not be logical to another person. Giving your visitors a way to search your web site will help them locate what they want.

   5. It's always good to have a Site Map, unless your site has only a few pages. This allows people to have another route to the other pages on your site. It also helps search engines locate all the pages on your site, particularly if you use dynamically-generated links to your pages (like JavaScript-created links).

3. Search Engine Visibility is Your Site's Lifeline

As I mentioned earlier, the problem that my visitor faced when her site was redesigned was that it no longer appeared in search engine results even when relevant terms were used for searches.

The problem in her case was that her site relied exclusively on a JavaScript navigation menu. Apart from the links generated by the JavaScript menu, there were absolutely no other links on her site pointing to other pages within the site. Since search engines bots can't interpret JavaScript (at least not at this time, to my knowledge), they could not follow any links and could thus only index her main page. As a result, her pages were not listed in searches for her keywords (since only the main page was indexed), leading to a drastic drop in visitors.

This is a problem fairly easily fixed (for example, one way is to create a site map and add a normal link to it from the main page), but it illustrates one of the most important issues a real-world website faces: search engine visibility. If your site is not listed in the search engines, you're not going to be able to get many visitors, if at all. Without visitors, you're obviously not going to be able to achieve your purpose for the site.

Conclusion

This article is about the importance of factoring usability and search engine readiness into your web design. Usability is important because it improves the chances that your site will help you accomplish your purpose. Search engine visibility is crucial because without it, you will get few visitors. Plan with these two aspects in mind, even as you look into the appearance of your site, and your design will go far in helping you achieve the goals for your site.

Two Common Web Design Myths

If your site has been around for a while, you'd probably have been visited by the "Web Design Police" (people who have a lot of time on their hands). In fact, depending on your site, you might have been visited by different branches of these people, both advocating opposite policies. I recently received an email from one of my visitors who had apparently been "helped" by some of these people, and thought that an article on two of the myths of web design was appropriate.

1. The Myth of "Content is King, No Animation/Sound/Java/etc"

The adage that "Content is King" applies to all websites, and I am not disputing that. It is also true that when you add sound, animation, Java applets and lots of graphics, your web page takes a long time to load, and some of your visitors may not bother to wait for it to load; they'll just go away.

However, putting those two together does not actually mean that all pages with animation, sound and applets are necessarily bad. The trick is to know when they're appropriate and to make the download speed as fast as it is reasonably possible under the circumstances. I will mention a few ways of reducing your graphics and animation file sizes later in this article.

When is it appropriate? Sometimes applets are needed for some sort of processing - for example, the Sesame Street website has a Java applet that shows Elmo (a Sesame Street character) dancing, and the child using it can use the mouse pointer to "tickle" Elmo and he'll respond according to where he is tickled. The applet takes forever to load on a 56K modem, but you cannot say that it is out of place: the site caters to young children who are there to play. In this case, the applet is an appropriate solution. Likewise, animation and sound might be appropriate for sites that feature online comics, online gaming, etc.

In fact, if yours is a website that sells website design services, that is, you want people to pay you to design their website, it is in your interest not to make your site too plain. Many potential customers see your site as an example of what their site can become. There's no point claiming "Content is King" at this time - they won't be around long enough to hear your claim. Such sites need a certain amount of colour, graphics, etc, although of course making it take too long to load would also be a deterrent to your potential clients.

Like all things, how you design your site depends on your topic and your target audience. Keep that cardinal rule in mind and you'll be fine.

2. The Myth of "Good Web Design is in the Graphics"

On the other end of the scale are the people who believe a good website must have much colour, graphics, animation and sound. You might meet them, for example, in the form of newcomers or pundits who either do not have much real world web experience or who only surf on T1 or broadband connections.

My first encounter with such people came in the form of an old friend who exhibited his personal website proudly to me. At the centre of his home page was a large animated graphic that was a few hundred kilobytes in size. That graphic had little function on that page - it did not provide any informative value: it was neither a logo, nor was it a photo of himself, or an image map, or anything at all. It was purely decorative. At that time (many years ago), I was using a 14.4K modem and that page took ages to load.

Now don't get me wrong. Decorative graphics on a page are fine. They make a page more pleasant to look at, and hence more likely to be read. But you should at least make them as small as possible. While I'm hesitant to give a hard and fast rule about how big such graphics should be, a decorative graphic that is a few hundred kilobytes in size is definitely too big to be tolerated.

3. Some Page Design Tips

If your concern is that your page should look good without being too slow to load, here are a few commonly used tricks that you may want to consider:

• Do not put too much text in one big block. Separate them out into paragraph and put white space between paragraphs. This makes your text look more readable.

• Like coloured pages? That's okay, but in general, if the readability of your text is important to you, a white background with black text works best.

  If you must have a coloured background, make sure you try out your page by viewing it in resolutions like 256 colours to see whether the page looks acceptable. A coloured page that looks fine on your 32 bit colour resolution system may have dithering that makes your text difficult to read on lesser settings.

  If you check the websites of big companies (Microsoft, Yahoo, etc), you will find that they still prefer a white background with black text for their main text. These companies probably have more resources for testing the usability of their website than you have, so it may not be wise to scoff at their design too quickly.

• Reduce the size of the individual graphics files on your pages by using the following methods:

  • reduce the number of colours in the graphic
  • reduce the size of the image, if possible
  • in animations, reduce the number of frames
  • in animations, don't duplicate the background in every frame; make the first frame a background without any objects that will move, and put all your moving objects in separate frames with transparent backgrounds.

A note of caution: the oft-cited cliche that "Content is King" is not to be lightly reckoned with. Your site may look beautiful, but it's your content that saves the day. Few people will return to your site just to admire your graphics. But they will be back to read what you have to say.

Making your Websites More Compelling

The Internet is a remarkable publishing medium. With just a little effort, you can make your web pages visually irresistible by playing with color, shapes and text. Whether your websites are already launched or you're ready to create your first few, use the 3 simple steps below to kick things up a notch and make your sites professional and appealing.

Step 1: Grab People's Attention with a Photo or Graphic.

Without a logo or visual image to represent the central offering on your web page, you are asking potential clients to immediately take a big leap and dive into your text. Why risk the possibility of them not reading your important message? People browsing the web are notoriously impatient. Capture their attention with a photo/graphic before they click off your site.

Choose the perfect image from Photodisc, ClipArt or Corbis for as little as $9 to $90 per image. Human beings are visual creatures. Consider your favorite magazine for a moment. Would it still be your favorite if it used only text on its cover this month?

Step 2: Boost the credibility of your service or product by using a professional color scheme.

Using the image you selected in step one, it's easy to go the next step and pull together a professional looking color scheme. ColorSchemer is a small, inexpensive software (US$25) that helps you choose a color scheme that's eye-catching and unexpected, even if you're color-challenged. When picking colors, don't be afraid to let your personality show through. Check out
(http://www.colorschemer.com/).

Step 3: Use graphical "signposts" throughout your material to help readers absorb your message.

As you browse the web, start making mental notes about sites you enjoy visiting. I'm willing to bet it's the ones that break up text with colored bullets, numbers and other signposts that mentally engage you the most. I'll even go so far as to say that a website that does not use graphical signposts shows a disregard for the needs of the reader, intentionally or not.

Think of these mini-graphics as a way of showing consideration to your reader. They want to read your material and you help them make it easy by providing mental white space and places to rest their eyes.

Just a few No-No's:

Don't overdo.

The power of visual communication can be diluted if too many images are used on each page. There is both art and science to finding the right balance since too many images on a website can be just as ineffective as too few. The key is to work at finding this balance by studying other websites.

Don't use Flash or other animation.

More often than not, flash/animation comes across as cheap rather than professional and has only been shown to be effective in very specific circumstances. Moreover, web pages created with Flash don't rank well with search engines. If you must use it, do so very sparingly and be sure to have it professionally designed.

Whatever you do, don't be bland.

With millions of websites published every day, you must stand out in order to be noticed. Graphics that reflect you, your offering and your personality will help you become more attractive to clients -- quickly, affordably and with style.

One of the challenges of working online is to alleviate your client's natural reservations in a new and unfamiliar environment - the virtual world. Making things more comfortable for them is your number one priority and graphics will help you achieve that. By going the extra mile to make your websites look 100% professional, you become more credible in your own eyes as well.