One of the challenges we face at kor group when designing sites for large institutions such as colleges, is reducing the amount of navigational levels.
The ideal scenario is to reduce the overall depth of the site as much as possible. By reducing a site to 3 or 4 levels, it creates a more user-friendly experience. However there are times that organizational structure or the sheer amount of information that must be housed requires a deep site. As with everything in web design, there are are numerous solutions to this challenge. In our research of this subject, we came across the brilliant posts by Brad Frost, Luke Wroblewski and Paul Boag. Of particular interest are the options shown that move away from traditional nav-bars or drop-down menus. Here are three of the most interesting:
In this approach the user navigates the site using in-body links instead of a traditional navigation bar. The site breadcrumbs help the user identify their location and go back through their pathway. As Paul Boag points out, the much celebrated www.gov.uk is a great example of this solution. The con of this solution is that is does not allow the user to jump branches of the navigation tree.
In these sites, the intention is for the user to utilize the search feature to guide them to the specific content they seek. Not to be confused with a no-nav approach, the search-first site may still have some basic navigation but it’s primary mode is the search tool. This technique can be seen a lot in e-commerce sites and uses a behavior users are familiar with in their use of Google and similar sites.
Breaking a large site in to a group of smaller micro-sites is a great solution as is reduces the number of levels that would be required if all information was housed in a single mega-site. This solution is best suited to an institution or entity that has some very distinct buckets of information. An often cited example is www.BBC.com and the sub-sites used for the different products (news, sport, TV, etc.). In addition to helping solve the deep navigation challenge, it also allows for slight variances in the UI between micro sites. For example, a college may want to adjust the visual theme slightly for it’s graduate programs verses the undergraduate offering.