BoxStuff

Creative Digital Marketing

  • Simpler Site Navigation


    05 March 2009

    When a site has considerable breadth and depth of content, finding an easy way to navigate through it becomes increasingly challenging. The familiar and mostly very effective metaphor for top level navigation is tabs with second level submenus located in a secondary bar (e.g. Amazon, Apple etc). When a third level is required, we often see another menu appearing in the typical left or right hand column next to the content. Then to help clarify where you are within the site, the breadcrumb menu is deployed.

    A different way was brought to our attention by the bright folk at Teehanlax who blogged about a new concept which they christened the ‘Tabbed Breadcrumb’ menu. As it’s name suggests it combines the tabs and the breadcrumbs and multiple levels of navigation in to a rather elegant and satisfying solution.

    We decided to try it out on SailingNetworks.com:

    Below are a series of screenshots showing the top, second and third levels of navigation using the old and new styles.

    Top level (new)

    Sailing Networks new navigation one

    Top level (old)

    Sailing Networks old navigation one

    Second level (new)

    Sailing Networks new navigation two

    Second level (old)

    Sailing Networks old navigation two

    Third level (new)

    Sailing Networks new navigation three

    Third level (old)

    Sailing Networks old navigation three

    And we like it. So we’re also making it an integral part of the admin interface for all our web apps….