Friday, February 22, 2008

Creative Navigation

avigation for Websites and software applications fascinates me. I'm always on the lookout for some new and inspirational way to help users find the content and features they are looking for. And based on my personal style and what I feel are best practices for the domain I focus on (enterprise web-based applications and websites), I gravitate towards simple, clean, and efficient methods.

Yesterday a design student that I'm mentoring (thanks Kelsea!) showed me the Maroon 5 website and I was really impressed. I'm not concerned with the implementation, which in this case happens to be Flash. I'm focused on the concept. The designer used a very simple geometrical shape with a strong color to draw attention to navigation that "appears when you need it". You can quickly find the navigation anchor--an orange triangle in a sea of grey/black--but the choices remain hidden allowing the content to dominate and show through. (below)

When you move your mouse over the image the navigation menu appears: (below)

In another part of the site it is done slightly differently. The orange bar is dropped and the navigation text floats over the background:"    (Continued via Dexo Design)    [Usability Resources]

First Navigation Cue - Usability, User Interface Design

First Navigation Cue


Second Navigation Cue - Usability, User Interface Design

Second Navigation Cue


Third Navigation Cue - Usability, User Interface Design

Third Navigation Cue

1 Comments:

Anonymous DigiKev said...

I agree, the navigation is poinient and simple to use meaning it is very usable. However as you mentioned, the medium used is Flash. This provides many accessibility problems in regards to navigation. Normally I would suggest rollback measures:

1. Flash file as is but using swf object JavaScript to remove IE 'Click or hit space to operate' measures (pointless accesibility function)

2. In case JavaScript is disabled, provide regular object tag between div which enables swf object. This is fall back measure level 1

3. Within object tag provide HTML alternative, no JavaScript and produce to highest levels of accessibility. Fall back measure 2

Because the site is built entirely in Flash then we have further inaccessibility. It is such a shame to see high profile websites using such poor methods of web design.

2:12 PM  

Post a Comment

<< Home

<< Home
.