Wednesday, 14 May 2008

Layout Options - Part 2. Navigation Style

In my last article I discussed the use of the full-width design style and have received mixed feedback. Some sent me some good examples of full-width designs and some agreed that it's probably not the best solution unless you're using flash, in which case you have a lot more flexibility.

Today I'm going to discuss something a lot less controversial, but something that is an issue of debate for almost every new website. Website navigation styles can include options such as text, graphical, flash or a combination.

Text Navigation

Text-based menus are mostly found in the corporate or online application website market. This is due to a number of reasons.

1. It's much simpler to update / change
2. It allows a menu to be completely dynamic and can be updated from a CMS
3. There is minimal download time
4. Text can be resized by visitors with vision difficulties
5. There are no issues with printing
6. Search engine following is virtually guaranteed.
7. It's fast for developers to build

The list is quite long - and justifyably so. From my view, the only reason you would opt NOT to use a text menu is if you wanted more design flexibility, or you wanted to hide content from text crawlers (such as search engines and spam robots).

Generally you will find that the larger companies using text nav's are ensuring website loading times are as low as possible

Examples (at the time of writing):
http://www.digeratisolutions.com.au/
http://www.pwc.com/
http://www.microsoft.com/
http://www.ebay.com/
http://www.ato.gov.au/ (although poorly designed)

Unfortunately in these days graphic designers are having a lot more input into web designs, the text-based menu is being replaced by graphic or flash-based (eye-candy) navigation styles.

Graphic Navigation

This style of menu is becoming more and more common as people are making the move to broadband internet, and download speeds mean a lot less than they used to. Generally graphic menus should only be used when there are only a handful of options. The last thing you need is 40 menu options loading a graphic for each.

Graphic menus are best used when tying in graphical elements of a brand to the page layout. You will find that a lot of medium-large brand-heavy companys will take this option for their home page but switch back to text navigation on the internal site pages.

With a few techniques, graphic menus can be used for search engine optimisation, however the code to make it layout just right can be tricky to avoid lengthy code (which slows the page down as well).

Examples (at the time of writing):
http://www.apple.com/
http://www.mcdonalds.com.au/
http://www.kfc.com.au/
http://www.toyota.com.au
http://www.myer.com.au/

You can tell with all of these that the graphical style menu allows them to use the menu itself as a branding agent.

Flash Navigation

Flash menu systems expand on graphical menus and allow a greater amount of flexibility in terms of design and interaction. Where graphic menus allow a graphical style to be implemented, flash allows movement and user interaction.

Flash not only allows a developer to add some form of animation or movement to a menu, but it can even include full video and music. As you can imagine, the drawback of the flash menu is that it takes significantly longer than a text menu, but can be quicker than a graphic menu.

In order to view flash you need to have the flash client installed in your internet browser, and although most new computers come with this installed by default, the majority of people will have to manually install the client before they can see your flash. This becomes an issue if your main navigation requires the user to install software (and maybe restart the browser) before they can use your website.

2 or 3 years ago it was common to see a HTML site with a flash navigation bar, but these days companies are more likely to do all or nothing. Although Adobe flash

The drawbacks of using a flash menu include;
1. Making changes requires the entire flash file to be changed
2. People using older browsers may not be able to install the currnet version of the flash client.
3. Slower
4. Site owners need the original flash file to make changes.

Examples (at the time of writing):
http://www.nike.com
http://www.diadora.com
http://www.billabong.com/au
http://www.lennykravitz.com

As you can see from this list, the entire site is in flash, and although they dont want visitors to have to wait a long time, they generally all target niche markets of younger internet users - the majority of which use broadband internet and will wait for content to load. A big name like Lenny Kravitz can afford to make fans wait, but an up-and-coming unknown artist would probably not have the same success.

Overview

With the variety of clients Digerati have, we have been able to suggest each of these solutions for different solutions - and for different reasons. Even some clients in the same industry suit different navigation styles, and even the same client may warrant changing styles at different points.

The key thing is to look at your target market, and make sure your website remains accessible by those people. There's no need to allow for text resizing if your tarket audience is 12 year old boys, but at the same time you probably need to make the menu simple to use and appealing to the eye, where a website targeting 70 year old guys would need to be quite simple and clear of graphical distractions.

There is generally always one style which will suit your website, so please feel free to talk to us about what we would recommend for your site.

The staff at Digerati Solutions have been providing online solutions for over 10 years, and we keep on top of the current technology to ensure that we can always suggest an appropriate solution for your needs.