An unmistakable example of perfect minimalism in breadcrumbs webdesign.
The color of the highlighted link will change everyday according to this.
The unusual position (almost at middle page) makes this simple breadcrumbs trail less conspicuous: it’s not a big drama, since the main navigation of this online shop is very clear and simple.
We’ve already showcased a few examples of one-page website design but what makes this one memorable is the little rectangular hole “cut” in the upper left corner, exposing the scrolling background and working as breadcrumb trail:
when you click on the menu, the page scrolls vertically and when it stops, the title section can be seen through this tiny window .
Could you tell the difference between the breadcrumbs and the navigation? When both are displayed it’s quite obvious, but in other pages (look at here) it’s not.
Though it might turn out to be a nice graphic expedient, I think it could be risky to disguise one user interface pattern (navigation menu) as another. (breadcrumbs menu). Don’t you agree?
When it comes to user interface patterns (or in short, design patterns) Yahoo Design Pattern Library is certainly a reference.
But it’s a good example of applied web desing patterns too: the page in fact displays a breadcrumb trail which is a nice variation of the classic slash-kind, with the wow factor added by using a graphic element instead of an ASCI character.
Wofoo is an HTML form builder. To put it better:
a web application that removed the inefficiency and tediousness out of the form building process. Wufoo reduced what used to take days (if not weeks) by trained professionals into something that could be done by anyone in minutes.
I really like Wufoo’s brilliant pricing and signup table that I find inspirational from many points of view. Where do I start?
I loved the cartoon-ish hint conveyed by the typeface, the latin expression that entitles each pricing offer, the nice, little breadcrumbs on the top left corner, the overall friendly, not-conventional yet professional suggestion that this well designed page implies.
When you combine two differents web design patterns you can get either a mess or a really interesting new element: in this case, Stuff‘s menu gets a compact and solid appearence, having shifted the properties pertaining to breadcrumbs trail to the horizontal menu.
As you can see, home page’s rainbowy menu (at the top of the screenshot) introduces the color code that constitutes the basics of this website’s information architecture. When you’re in a main section (at the bottom of the screenshot), the menu splits up into two rows: the first one works as breadcrumbs/page title, the second one displays a list of available subsections.
For those who don’t already know it, Stuff is
New Zealand’s award winning news and information website, bringing together the vast resources of Fairfax New Zealand Ltd several hundred journalists and photographers around the country to provide a single online ‘publication’.
Which briefly means: a fresh news portal that provides informations in a kick-ass package.
I’ve found this beautiful example of iconic breadcrumbs on Web Designer Depot, reading an interview with Web Usability Guru Jacob Nielsen.
Nielsen, asked about breadcrumbs effectiveness in easing users navigation, says:
“So breadcrumbs are definitely useful. Just as important, they don’t harm those users who don’t use them. Some studies have found that many users don’t use breadcrumbs.
But that’s OK, because the breadcrumbs don’t cause any trouble for these users, and since they’re a very lightweight design element, breadcrumbs are worth including for the substantial good they offer to those users who do use them.”
The full interview is available here.
Panoramio is a photo-sharing community based on Google maps. The path is a fairly important part in web sites navigation and here has a proper evidence. It’s a nice idea to indicate the first step using a small icon.
Mixing different user interface patterns very often leads to innovative solutions and more than once Yahoo played a lead role in changing web users behaviours: in this case, the breadcrumb trail of Yahoo TV allows the user to change section clicking on a drop-down menu (beside Tv Home) without having to return to the home page.
The use of blue highlights the link between the actual section and the corresponding menu below.
The Glasgow Collective is a gallery that contains works by students of Glasgow School of Art
The web site is well done and the breadcrumbs are well set: the claim “you are here” immediately attracts the eye and the shape of arrows is pleasant.
On the other hand, I don’t find proper using the same shape both as a symbol in the breadcrumbs trail and as a button in the tab navigation of the artist page.
Times Online’s breadcrumbs start with the Hamlet question “Where am I?”.
The navigation menu effectively indicates to which level of navigation and section the page belongs to.
Breadcrumbs trails in registrations or, generally speaking, in wizard like this, have the important function of communicating where the user is at and how many steps are missing to the task accomplishment.
Breadcrumbs trail in Uncover.com is extremely graphic and cleverly makes overlapping the logo and the starting point of the path.
I like the way the breadcrumbs binds to the title of the search form, entering seamlessy into the layout.
A breadcrumbs trail a bit different from usual and highlighted by a graphic treatment consistent with the global layout of this community for supporters of ecology and environmental sustainability.
Delicious designers have created a strange hybrid of breadcrumbs and form: user can see sites associated with a tag, write the name in a text input queued to the breadcrumbs path.
After sending data, the input text is transformed into a path link, in a process that virtually could keep go on going until the last nesting level.
Apple breadcrumbs trail is not used consistently within the website and , among other things, there are two slightly different version of it:
- in the online store is located at the top and the path first link is a house shaped icon that leads to subdomain store.apple.com;
- in the “real” website is placed at the bottom of the page, just before the footer; the icon used is the famous apple logo icon, which links back to main domain (www.apple.com) home page.
The Guardian online offers an interesting example of breadcrumb navigation used not only for the purpose of showing the current website section, but also its possible subsections (Politics, Business, Health are indeed subsections News).
Vivid colors are applied to graphic elements and titles of each section, in contrast to the majority of online newspapers that tend to use a few colors, strict grids and absolute minimalism.