Kitsimons

Journal Feed

Rather than cram everything into one mammoth article, I've decided to split things across an as yet undetermined number of parts. Part 1 will focus on the drop-down menu and its use, or misuse, in website interface design.

Blurring the Lines

Quite unsurprisingly the boundaries between website interface design and OS interface design have become blurred in recent times; in particular, with regards to navigation.

It is not surprising to be honest. More people are spending more time at their computers than ever before, and most of the time people are at their computers they are browsing the Internet.

People are familiar with what would be considered common OS interface elements and as such web designers have come to incorporate some of these elements into their website designs. The rub is that familiarity does not equate to the best tool for the job. More specifically, what works in an OS interface is not always appropriate for use in a website.

Action versus Destination

The biggest offender, in my view, is misuse of the drop-down menu. Lifted straight out of a desktop application, the drop-down menu that runs across the top of the program interface and provides access to a multitude of tools and options, has been adopted for use in the navigation of countless websites.

For some reason that continues to escape me, drop-down menu website navigation is a particular favourite of blue chips. The global websites of Sony, Dell and Nokia all rely heavily on the drop-down menu for navigation.

The big problem is that the drop-down menu was never intended for navigation. As such there are a number reasons that make the drop-down menu a poor mechanism for navigation.

Firstly, the content of a drop-down is hidden from the user. Any designer with even the slightest comprehension of good practice will know that navigation should never be invisible. A web designers' job is to make it as easy as possible for the user to find what they are looking for and hiding the navigation immediately throws up unnecessary barriers.

Aside from hiding destinations from the user, a user has to know that a button has a menu hidden behind it in the first instance. You are unable to see what lurks within unless you position your mouse over the button and wait for the menu to appear. This takes time and effort and while we may consider this insignificant, we should all know by now how little it takes to put a user off. We are also assuming, of course, that the menu will appear because the user has Javascript enabled and meets any other criteria for the usually scripted menu to function correctly. For me, the technical prerequisites alone are reason enough to avoid the use of drop-down menus in website navigation.

So what about drop-down menus in software applications? They are used in virtually any modern application you can care to mention, so why are they such a bad thing in website navigation?

Let's take a moment and think about what drop-down menus in software applications are actually used for; you access the File menu to save a document, to open a document, or to print a document. The Edit menu to undo, to copy, or to paste, and so on... These are not destinations. These are actions. Drop-down menus in applications are used to provide access to functions that allow a user to perform a particular action. Essentially, a drop-down menu is a means to do something - not a means to get somewhere.

Drop-down menus were never designed as a navigation tool, yet somewhere along the line someone thought to mimic drop-down behaviour and bend it for use in website navigation.

A Better Way

There are of course better mechanisms for facilitating website navigation. Mechanisms that avoid invisible navigation. One only need look at the Finder column view in Mac OS X for an example of visible folder navigation.

Online, we only have to look to Internet giants such as BBC News, Amazon and eBay for examples of websites that, in spite of their cavernous archive of web pages, do not have a single drop-down navigation menu in sight.

When these websites do utilise drop-down menus, it is in the appropriate manner. eBay, for example, uses a drop-down menu within the My eBay management area for performing actions. It even has it sat under an Action heading.

It is no coincidence that these websites top user polls for ease-of-use. Nor is it in any doubt that they would have achieved the success they have if it weren't for that ease-of-use. For me, these websites are the pin-ups of good website interaction design. Perhaps if the wider community of web designers held these websites as icons to aspire to rather than the likes of Sony or Nokia, and dare I say it, looked at interaction design with more than a cursory glance, then perhaps the web can be a better place for all of us.