Consistency is a Virtue
In the early 80s, I attended a workshop in New York featuring noted graphic designer Jan White, where I learned about the importance of consistency in publications design. I was able to apply his concepts to the first annual report I designed, one that went on to garner national awards.
Jan did an excellent job of demonstrating consistency in design without curtailing “creativity.” His lessons need to be relearned by some web (interface) designers.
Fundamental
Interface consistency is one of the fundamentals in design, articulated in more books and papers than I care to cite at the moment. It takes two forms: internal consistency and external consistency.
In terms of navigation (interface), internal consistency means that the designer uses names in a consistent manner and that the navigation elements appear in the same ordering at all times.
The result is that an individual using the web site can develop a coherent model of the system (Web site). This is not possible if the the system changes frequently or at random.
External consistency means that inteface items on one website should be consistent with the norm that is “The Web.” Although it can be argued that standards on the Web are in a state of development, there are some areas where de facto standards are in place. External consistency allows an individual to port skills across systems (in this case, Web sites).
Discord
When navigation “objects” move around, willy nilly, the resultant discord is not only jarring on the eye — it also makes it more difficult for the site visitor to find what she is looking for.
The example (just one) is Webgrrls International. In addition to consistency issues, there are also predictability ones, but this column focuses on consistency.
The Webgrrls home page is busy – but the designer appears to have set up “classic” navigation with a button row at the top of the page. The convention (external consistency) that has developed is that navigation buttons across the top of a Web page take you to section headings. The old adage, “if it looks like a duck and quacks like a duck, it is a duck” applies in this case.
Based on this design, the section headings appear to be
- Mission
- Inspiration
- Wisdom
- Influence
- Spotlight
- Participate
The first “jar” occurs when following the link “mission” – the right navigation sidebar reveals a different set of section headings:
Now the section headings appear to be
- About Webgrrls
- Join Webgrrls
- FAQ
- Member’s Area
- Leader’s Area
- Tech
- Online Mixer
- Chapter
In addition, there is no listing entitled “mission” under the About Webgrrls section, although it appears that this is the section we are in currently because About Webgrrls is “expanded” (another example of lack of external consistency).
Consistency : Ordering
One of the most common breaches of navigation consistency is changing the order of a navigation list. The WGI site exhibits this problem:
 |
 |
Suddenly, navigation elements that were “at the top” are at the bottom; and vice versa. Furthermore, Mission appears in the navy header bar, suggesting that it is a main subject. However, it is only accessible via the home page and does not appear on any subsequent navigation bars.
In addition, there is the additional lack of consistency (in the right-hand example) because more than one section is “expanded” — how to tell which section you are in at a glance?
Finally, there is inconsistency in the subsection listings, as illustrated below:
 |
 |
Consistency : Section Headings
For most of the site, the section heading is indicated in the navy header bar. The first exception noted was Mission. But Mission is not the only orphan; Participate is also a stand-alone page treated as a “section” by the header but not included in the navigation menu.
|
 |
Another inconsistency is illustrated with the sub-section “List Archive” – which is
part of the Chapter section. However, it is treated as though
it were a section heading.
 |
 |
Bottom Line
Consistency, both internal and external, is a virtue in navigation design. It is important when planning a site to anticipate content growth, so that new information can be incorporated in a consistent and predictable manner.
References