Navigation, Control Panels and Interfaces

Published in Web Development on Wednesday, November 10th, 2004

Some examples of unique or effective navigation schemes and interfaces are presented. Add your favorites to the list.

Nodes...

Recent projects have proven challenging in the area of interface design. While poking around the web there are a few sites that have stuck in my head for one reason or another, and these are offered below.

For me these sites are some nodes of inspiration, and some of these concepts will likely find their way into future work...

I'm sure there are many more examples out there. Share your examples of unique or effective interfaces in the comments.

Digital Web

Here's a site that has done a great job at presenting their information to the user.

While not really groundbreaking in the method used, i.e. tabs and supplementary sidebar navigation, for me it's the design that really pulls it together. And here come the words that have been repeating in my head lately - "Control Panel".

Look at the upper left corner, and even at 800x600 resolution everything you need is right there, clean, uncluttered and simple.

Dunstan

Dunstan's blog keeps everything nice and tidy too, however he has added some extras in there. By his own admission this area is a bit more 'cryptic' than prior to his redesign, but it likely works just fine for his audience.

www.pixelplain.com

By way of Css Beauty comes Pixel Plain, who have done something similar to what Dunstan used to have. It's an interesting twist on the horizontal equivalent which can be seen at Macromedia.

It works well with or without javascript, and is quite easy to understand. There's also plenty of room for a dedicated search box in the control panel as well.

Mozilla

The lizard is still there at Mozilla (some consistency in branding), and the new site does the 'control panel' very well. Search, tabs and home are always there, and they use a sidebar where needed. The only thing lacking is a breadcrumb trail.

Lastly

The Blogger navbar and it's mirror Wordpress bar (which seems to have disappeared). Wrapping up some cool functionality into a nice little panel.

Comments and Feedback

Perfectly timed entry, Mike - I've been struggling with a new interface design this week for a work project; well, I say struggling, what I've actually been doing is toggling different layers on and off: "Tabs? No tabs! Tabs? No tabs!"

From your examples (more detailed title text would be great, btw - I've seen that Airbag article far too many times now) it looks like we're still not at the stage where tab-interfaces can be written off as hackneyed.

more detailed title text would be great, btw

Yeah, sorry, you caught me being lazy ;-) Our new admin proggy for the CMS is almost finished being re-written, with the blog script weaved into it. Soon I won't have an excuse for lazy posting...

Speaking of tabs, Slick UI over at A Whole Lotta Nothing has a nice screenshot of the Typepad UI.

Mike, great article. Another one in my mind is Studiowhiz's recent redesign. All CSS, very nicely done.

Ha, that is a cool design! Thanks for stopping by, Josh!

Mike, you are definitely the king of response time. I have never emailed you without getting a response within 2 minutes. Nice :)

Yeah, the design at studiowhiz just makes me want to stay longer. It's VERY pleasing to the eye.

Check out the blog categories for older content