What’s New in Web UI

Over the past couple of months I’ve seen some new user interface ideas on some popular websites. Some were improvements, others a bit awkward to use. I’ve collected screenshots of these new UI elements and talked a bit about each of them below.

Hover Bread-crumbs:
view: http://www.apple.com/macpro/intelxeon.html

I’m actually not a big fan of bread-crumbs, but adding it as an interaction when hovering over the logo is a great idea. Visitors typically go for the logo when they are lost or can’t easily find a home button. So displaying the site path at this time is perfect. I hope to see more of this interaction.

iTunes Navigation:
view: http://beta.blockbuster.com/online/home

I like the iTunes style navigation, but here it’s not working. A combination of navigation conventions being ignored and the fact that it’s slow and poorly implemented make this a big don’t. This type of navigation can be done well like on the radiotime.com site.

Under-tabs:
view: http://maps.google.com/

I like the interaction of having quick options when searching Google maps. the quick transition from map, to business, to directions is usable and easy to understand.

Browsing
view: http://beta.blockbuster.com/online/home (as well as wetpaint.com signup and iTunes)

When browsing something visual like templates, CD covers, DVD covers, etc… this is a great way to browse a selection with out taking up too much screen real-estate.

The Disappearing Main Nav!
view: http://www.yourpsp.com/psp/
also seen: http://www.brainsonfire.com/FIRE/

I’m not sure about this one. I know the two examples above are more “experience” sites so it’s ok to bend the rules, but in most cases removing the main navigation is not a good idea. At least on the PSP site, when you hover over “Home” you get the main nav items without having to go back to the homepage.

All of these are still too new to be trends, but it’s something to keep your eye on…