Navigation 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.
When you move your mouse over the image the navigation menu appears:
In another part of the site it is done slightly differently. The orange bar is dropped and the navigation text floats over the background:
Excellent job!
If you know of any other really creative navigation methods, please reply to this post and share with the other readers.
It’s pretty but not very usable. How does the geometric shape suggest a navigation menu? I found myself staring at the image and confused as to ‘what next’..
And pure Flash is bad
Because of this, I would give this a B- if I were grading. It is pretty.
Agreeing with the above post, I would give the design a solid C.
Problems with the design:
1. There is a splash page.
2. The splash page asks for High or Low bandwidth.
3. The “Enter Site” button on the splash page does not work.
4. To quote a web developer, “No need to reinvent the wheel.” The “innovative” navigation system isn’t hip, its confusing.
Like in baseball, often fundamentals mean much much more than flare.
Just to be clear - I’m ignoring the splash page and the flash implementation and focusing purely on the idea/concept itself: visually anchored navigation that appears and conceals itself.
Unlike Reuben, I immediately hovered over the orange triangle and found the navigation. It seemed very natural to me.
Also, for me this is a means to broaden my thinking - to think out of the box - not unlike the fashion industry which often produces designs that are not wearable, but nevertheless serve to expand designers’ minds and push the creative envelope.
Are you kidding me? This is *good*? I bet a lot of people never figure out how to navigate the site. Broken design.
I’m afraid some people might be missing the point. It’s not about whether it’s usable or not - it’s creative and different and (for me at least) serves as inspiration. I’m looking for examples of “out of the box” thinking, NOT finished ready to be used designs.
I would have to agree about the broken design here. Getting creative with something essential like the main navigation is very dangerous. Its like if you decide to put a second steering wheel to a car to get creative! Big X from me for the concealing navigation.
Why is it bad to conceal the navigation? What is so broken about this design?
Navigation exists to allow a user to select/find content/functions. Does that imply that the navigation has to be visible at all times? If I know where to go to “open my map”, is that broken navigation?
And is it not true that everything other than the content and function of a website or web application serves no other purpose than to deliver the content and function?
Should all navigation be restricted to a horizontal bar across the top or vertical bar down the left side of our sites and apps?
I disagree.
My current favorite navigation is on http://www.wowhead.com
The implementation is unlike anything I’ve seen in terms of flexibility and dynamic content delivery. The live search is incredible, not only does it pop up the list of matches, but the items in the list are hoverable to show the item details. The faceted browsing is extremely powerful and is combined with advanced filtering options that are persistent as you browse within the hierarchy. The object description pages are tied to related metadata to facilitate exploration of other important information about that object.
It may be a bit confusing to people who don’t play Warcraft, but in terms of fitness-to-purpose it is amazing.
I think some of you are being a bit too critical about the flash and other factors. Russ is trying to point out the creativity, as he’s said again and again. To most minds, seeing a vibrant orange arrow would make people wonder what the purpose is…to go and hover over it which conceals the navigation. It makes the website much more open and free and makes you think, compared to every other website which doesn’t. The flash may not be GREAT, but the creativity is inspiring. The world of design is getting better and better, and who knows, maybe some day people will be striving for ideas like this when their website is now too out-dated. Just like cars, things get better every day.
It’s attractive, but is the concept new? The Start menu in Windows seems similar to me… differentiated color, on-demand navigation that hides on blur, and a bit of confusion on first use that goes away as you learn it.
Unlike Start, which takes a lot of room when expanded, I’d be tempted to allow “lock” of visibility on of a small menu so that if I’m using or referencing it quickly, I don’t need to move my mouse up there and wait for the hover to appear to see where I can go. Irrelevant for a website, but maybe important for a web app.
Russell,
I understand what your point is and do agree with you that it’s a different approach to navigation design. I too didn’t have an issue figuring out that hovering over or clicking on the orange triangle would do something–I wasn’t sure what but that doesn’t bother me on an entertainment site.
On sites such as these I think we need to consider that the Maroon 5 fan is looking for a unique EXPERIENCE. There are things about the Green Day website (http://www.greenday.com/greenday.html) that are similarly “unusable”—the positioning on the navigation shifts from section to section—but I enjoyed the graphic experience and taking my time to explore. It’s not like I’m in desperate need to find bio information about the band and, “OMG, I can’t find it! I’ll never come back to this site again!” On the other hand, if an e-commerce site tried something like this I would be confused/annoyed that the navigation was concealed (Maroon 5) or always shifting (Green Day).
From an IA and usability standpoint, I have issues with both sites but I know that you are isolating this to a creative navigation/experience/visual design conversation. So, I’ll compartmentalize.
‘Mystery meat navigation’ (as this is called) has always been an IA faux pas. While it might look nice and fresh to us as designers, its a hinderance to people trying to use the site. why do i have to hover over that stupid arrow to jump between photos and media? it’s so annoying that the clickspace is so small! a better execution would have been to make the top 10% of the window have the same behavior as the arrow. there’s a reason why not too many sites do this.
We’ve been using http://www.etsy.com as an inspiration in recent weeks.
What’s interesting to me is the diversity of opinions expressed about the navigation technique, Russ. Clearly, very few people understand the principles of (or need for) accessibility in web design.
I agree with the points made by Ian, who gave it a “C, ” but I give it a “D” for poor accessibility and usability. If you hover over the triangle in the “low bandwidth” version first (by guessing correctly), then you can “tab” through the navigation functionally. But if you think some people are confused about how to find the nav while looking at the page, try adding vision impairment into the equation.
The concept is cool (which I think was Kelsea’s point in directing you to it in the first place), but it can be done just as well with CSS and a bit of javascript using an unordered list that degrades gracefully. That would rate an “A” from me for both design and function.
In fact, it looks to me as if the chief argument for using Flash on that site was that the developer had Flash, knew how to implement it and took the easy way out. To one whose only tool is a hammer, everything looks like a nail.
I also agree with Dave. This fits the classic definition of “mystery meat navigation” as defined on the “Web Pages That Suck” site. The idea itself doesn’t suck, but the specific implementation leaves a lot to be desired.
One that is creative (and appropriate given the content) is http://www.eardrum.com .
Responding purely in the spirit of Russ’s original point, I agree there *is* value in this idea. In many situations, persistent navigation… well, it sucks. It takes up space and demands peripheral attention.
Think of the parallels with a printed book: a book’s table of contents and index are always available with a quick flip of the wrist, but stay out of sight and out of mind unless you want them. Similarly here.