Tag Archives: web portal

Yahoo’s interactive menu

Yahoo's inspirational interactive menu

On my previous job, when I was working for a big web portal, we got used to look up to Yahoo’s interaction design as one of the most insightful example of dealing with users’ experience on a large scale audience.

When you’re not able to relate to a definite target (ok, I too hate this word, any suggestions for another one?) which rules are you supposed to follow when building up your website’s user experience? What language would you speak, when you’re not allowed to see who you’re talking at?

So apart from relying on cognitive science models (which by the way were quite spitefully greeted at the time), specific case histories, well-established web design principles, we scouted out interaction models by checking out what the Big Boys already did.

So I was enthralled and taken back to that time when, looking for some interesting stuff to showcase on Web & Patterns, I’ve found out Yahoo’s new navigation menu.

Basically it’s an evolution of the previous one: instead of having all the categories arranged to the left in a navigation list, you have your favourites online services and social (such as web mail, Facebook, Flickr) mixed up with some Yahoo’s categories (I suspect this being due to some marketing mandate).

When you hover with your mouse over the menu links a huge tab appears, previewing the matching content. So what originally was a navigation menu turns into a powerful tool to quickly scan your web life. Some tabs (e.g. Weather, Movie) are automatically filled in with local informations, according to the ZIP code you provided while creating your Yahoo’s account.

Last but not leat, as in the previous version, you can also customize your toolbar menu adding and deleting items in a quite intuitive way.

Obviously, it all works only if you’re logged in.

Inkd menu

Il menu di Inkd, il portale dedicato al design per la stampa

Interesting the combination of tabs and drop-down menu in the navigation menu of Inkd: tab indicates the main sections, while the drop-down menu (on mouse over) allows you to see all the subsections. 

Even the color code is accurate: active tab is white, blue tab are those relating to the product itself, while grays tab are dedicated to supporting sections (blogs and forums).