Siolon

A Primer on Information Architecture: Navigation

Nav­i­ga­tion and IA

Nav­i­ga­tion is with­out a doubt one of the most essen­tial ele­ments of any inter­face, and as a result ade­quate time and thought is nec­es­sary to ensure your interface’s nav­i­ga­tion is usable and com­pre­hen­sive.  From the all impor­tant global nav­i­ga­tion that stays the same through­out the site, to local nav­i­ga­tion which changes based on the con­tent of the page, to con­tex­tual nav­i­ga­tion which exists within the con­tent itself.  They all work together to form a pow­er­ful nav­i­ga­tion experience.

• Infor­ma­tion Archi­tec­ture as an Exten­sion of Web Design — fea­tures some good points on nav­i­ga­tion and IA.
• Infor­ma­tion Archi­tec­ture Deliv­er­ables: Site/Navigation Struc­ture — a good arti­cle on con­vey­ing your IA sug­ges­tions for nav­i­ga­tion through deliverables.
• Essen­tial Nav­i­ga­tion Check­lists for Web Design
• Where Am I? — a fan­tas­tic arti­cle on improv­ing your nav­i­ga­tion by high­light­ing con­text within your site’s IA.

Types of Navigation

There are typ­i­cally a few types of nav­i­ga­tion: global, local, contextual/supplemental.  Some­times you may only need one, but other times you may need all three depend­ing on the amount of con­tent and the com­plex­ity of the inter­face.  Under­stand­ing how and when to use these dif­fer­ent types

• Global nav­i­ga­tion is a nav­i­ga­tion struc­ture that stays con­sis­tent through your appli­ca­tion to pro­vide famil­iar­ity and a good overview of your site’s content.
  • Global nav­i­ga­tion design pattern
• Local nav­i­ga­tion is a nav­i­ga­tion struc­ture con­tin­gent on the cur­rent content.
• Con­tex­tual nav­i­ga­tion refers to nav­i­ga­tion that is embed­ded within a site’s con­tent to facil­i­tate fur­ther brows­ing.  The best of exam­ple of this is Wikipedia which links con­tent together inside the articles.

Bread­crumbs

Hansel and Gre­tel weren’t the only two who wanted to get back to where they started.  Bread­crumbs, when well thought out and imple­mented in mod­er­a­tion, can add a dynamic and usable ele­ment into your interface.

• Loca­tion, Path & Attribute Bread­crumbs — an excel­lent overview of approaches to bread­crumb navigation.
• Bread­crumb Nav­i­ga­tion Increas­ingly Use­ful — Jakob Nielsen’s analy­sis of the effec­tive­ness of breadcrumbs.
• Design Cop-out: Bread­crumbs — a very insight­ful arti­cle on the thought nec­es­sary to imple­ment bread­crumbs and not using them to “cop-out” of other aspects of IA.

Pag­i­na­tion

Pag­i­na­tion is often an over-looked aspect of effec­tive nav­i­ga­tion archi­tec­tures.  When com­bined with a thought­ful search archi­tec­ture it will increase find­abil­ity drastically.

• Pag­i­na­tion Gallery: Exam­ples And Good Prac­tices — an incred­i­bly rich arti­cle out­lin­ing com­mon mis­takes and best practices.

Nav­i­ga­tion Design Patterns

Design pat­terns are a great way to see how oth­ers are start­ing to stan­dard­ize the way they approach cer­tain aspects of design and their result­ing inter­ac­tions.  Most often, nav­i­ga­tion mis­takes are made, because the designer doesn’t take into account exist­ing pat­terns that users may be famil­iar with.

• Pat­terns in Inter­ac­tion Design — here is a great list­ing of pat­terns related to nav­i­ga­tion styles includ­ing accor­dions, fly-outs, and much more.
• Ele­ments of Design — an inter­est­ing gallery of cre­atively styled navigation.
• Infor­ma­tion Archi­tec­ture mod­els: Guide to web site nav­i­ga­tion pat­terns — an overview of dif­fer­ent approaches to mod­el­ing the con­tent in a nav­i­ga­tion scheme.