I got a notification from Social networking site LinkedIn to say some old colleagues where on the network and I might like to link to them. Looking through my contacts on the site, I noticed a puzzling navigation element that read:

Page: Bur-Smy Vea-Woo

You can see this on the screenshot below. Cryptic enough for ya? This is an example of mystery meat navigation – links that provide little or no clue about where you will go or what will happen when you click them.

My first theory was that they were some sort of stylesheet switcher. But nope, it’s simpler than that. When I clicked, the contacts displayed changed and the penny dropped. It was an alphabetised pager that shows the contacts in my list from Burns to Smyth and from Veale to Wood. Obvious, right? Nope, this is a clear sign of over-engineered code.

The function of these links would have been much more obvious if whoever coded these pages had saved themselves the trouble of splitting my list in two and then parsing out the first three letters of the first and last contacts in each section of the list. Making each link three letters long makes it less obvious that I’m looking at an alphabetised pager, the extra letters are noise, not signal. To make matters worse, they split the list based on the number of contacts displayed on each page, so the alphabetisation is uneven (B-S and V-W) which is counter intuitive. Instead they could have done this:

Page: A-L M-Z

I know, there are no As in my contact list. And yes, I know this might lead to a list that is split unevenly with a few things on page one and many on page two. But if an even split is your criterion here rather than splitting the list up alphabetically, why not just use a Next – Previous link instead? So when designing navigation, remember that:

• Sometimes, less is more – don’t add noise to the signal, keep it simple.
• Pick the right tool for the job – alphabetical ordering may be the first scheme you think of, but it’s not always the best.