AEN UI

Web designers have known that screen real estate is one of the most valuable property of a web page. When designing web sites, we take real care to have the most important elements prominently displayed at the top of web pages, a.k.a “above the fold/scroll”. But sometimes there simply is too much “important” information to squeeze into the first fold of a web page. These can be important company introductions, main and sub navigation menus, tabs, breadcrumbs, logos, etc.

Breadcrumbs

Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. Generally, an arrow is used as hierarchy separator, although other glyphs can be used to represent this.[source: Wikipedia]

Tabs

In graphical user interfaces, a tab is a navigational widget for switching between sets of controls or documents. It is traditionally designed as a text label within a rectangular box with its top borders rounded. Activating a tab (usually by a mouse click) makes its associated content visible and the tab itself usually becomes highlighted to distinguish it from other inactive tabs. Only one tab can be active at a time. Use of tabs to display non-static content gives rise to Tabbed document interface, e.g. used in Mozilla browser and many text editors such as SciTE.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes and thus they are often employed to give the user interface a more “natural” look.[source: Wikipedia]

What you see here is a typical website layout that incorporates tabbed navigation and breadcrumbs, each page-wide row occupying significant vertical space. It is clear that the breadcrumbs only occupy a small percentage of the entire row of horizontal space allocated to it. The same goes for the tabbed navigation. We can definitely make better use of the space.

Tabcrumbs

While working on a client project which I had to make efficient use of space to keep important page elements above the fold. So I sat down and came up with some ideas and one of them is what I call “Tabcrumbs”, the tasty combo of tabs and breadcrumbs. If you are a web designer or have experience with making web sites, you would have guessed what it is. Tabcrumbs is a combination of navigational tabs and breadcrumb trails. This approach allows the web designer to save lots of precious vertical space and also make better use of horizontal space.

Are there risks? Is combination better than separation? Is saving space worth having the user learning a new user interface feature? I think tabcrumbs are not a drastic new feature and does not require change in user behavior, compared to the crazy and popular navigation in Flash sites on the web. You can still clearly see a breadcrumb trail and tabs and not see something else.

What are your views? Do feel free to criticize.