The top big black horizontal scrollbar provides a useful navigation throughout Pentagram‘s website and portfolio.
A segmented button allows you to feature two or more different actions using only one GUI element.
In this example, active areas are colored while the price information, though it’s framed in a major graphic element, is just selectable text .
According to the Gestalt psychology’s Law of proximity, things that are near to each other either physycally (in this case visually) or chronologically, are likely to be perceived as related.
So, if your header accomodates different kinds of link (e.g: some for the website navigations and some for the user’s account management) it’s a good and simple UX practice organizing them unequivocally in separated layout areas.
In this case, on the left website’s navigation and on the opposite site the e-commerce cart tools.
PS This post was just a lame excuse to show covertly some cute puppies.
A nice numeral menu/pagination displayed on 52 weeks of UX, a tumblr collecting Joshua Porter‘s thoughts about design and usability.
Even if mega drop-down menu perform better than the regular ones (at least according to this Jackob Nielsen’s study), I still don’t love them.
Except for cases like this, when, huge panels makes me understand at a glance the whole website’s taxonomy, sparing me the time of browsing endlessly from a level to another and providing a more pleasant user experience.
Sometimes the previous/next alternative may oversimplify navigation but if Ux Hero choose it for his own blog who I am to disagree? Moreover, I’m quite fed up with infinite numerical pagination.
A nice error page, clearly shaped as a navigation flow chart, from Konigi‘s, a reference website for what concerns user experience and interface design.
When it comes to grid-based web design, one of the most charming and peculiar grid structure example that occurrs to me it’s UX Magazine‘s layout.
The square-based structural balance of this layout it’s quite obvious but it could have turned out annoying and boring if designers didn’t conceive some visual tricks that, breaking the grid integrity, would create surprise and regain user’s attention. Merging two or more units to create rectangular spaces is one of them and for sure the upper-left corner of this page has been astutely designed: when you see for the first time this page, the red colour grabs your attention so the eye, following the ascending red lines, reaches the photograph that unrolls its text horizontally across the grid units.
Another smart idea is the quotation call-out box: as in the aforementioned example, I think that the eye movement starts from the bottom, from the photograph I mean, that makes itself very visible for breaking the chain progression of text boxes, and then it goes up to reach the rectangular baloon with the blue outline and the citation text.
In the end I think that you can see this layout as a sort of a big, typographic Tetris game, where every major graphic assest falls exactly into place.
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.