What’s New in Web UI

New 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.


apple_bread_crumbs

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.


Blockbuster iTunes Nav

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_tab_forms

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.


wetpaint template browser

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.


PSP Nav

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…

4 thoughts on “What’s New in Web UI

  1. Jeremy, I think you place the blockbuster image in the iTunes, and viceversa.. (nice articles by the way)

  2. Sergio – Actually iTunes popularized a type of navigation that Blockbuster is trying to mimic (unfortunately not very well…). I was pointing out a different UI trend on the Apple.com site.

    Glad you liked the article!

  3. [...] We really like your previous article on Web UI. It gives us a sneak preview of what we can expect from web application and websites to come. Do you think there’s a UI template which work best for web application? Why yes? Why not? I don’t really see a template, but there are best practices – like the Yahoo UI library for example. Web applications will become more like desktop applications as browsers and other technologies progress, but there is still room for innovation in interaction design, which I believe will be a good topic for the next few years. [...]

  4. This “iTunes navigation” has roots in Smalltalk-80 graphic environment, neat. WIMP baby! :)
    Google Video – ACM SIGGRAPH 1983 Issue 8 – Smalltalk

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>