Why Do Designers Put Links in Unordered Lists?

February 03, 2008

I was looking through my Mint referral logs and found that someone arrived at my site by searching for “why do designers put links in unordered lists?” (in all caps, I might add) I thought that it was a valid question and worth a write-up because the underlying topic is an important and often overlooked one.

When I first started working with websites I looked at everyone’s HTML and CSS. In doing so I found that everyone else was putting their navigation into unordered or ordered lists. Naturally, wanting to imitate the best, I followed along. But it was awhile before it hit me why it was that we put our navigation into lists rather than a paragraph, a dictionary list or whatever else you could think of.

The underlying reason is because of the natural structure of HTML. HTML should be read just like you would any other document. You have your headings, your paragraphs and your lists. The paragraphs work well for your regular content and your headlines for breaking up and sectionalizing your materials. Lists then come alongside and indicate order or a serialization of information. An example would be a table of contents in a book.

If you took the same content from your book’s table of contents and tried to write it in paragraph form it would be a very confusing result. You could sit down and read the table of contents as you would the regular chapter information but why would you want to?

Sidenote: there is a tendency in some of the newer web designs that I have seen to display their navigation in a more conversational way, utilizing a paragraph. Personally, in that context I think that’s the best suited element. A great example of this would be Happy Cog Studios.

It’s kind-of the same way with navigation in your HTML, you have a set of directions that you want people to be able to follow in order to get to the proper place in your content/structure and you want them to be able to do it quickly. A list is the most likely and expected form of displaying that content in an appropriate way. The great thing about using a website that is written in HTML and styled with CSS is that you can then change it to look however you want, so you’re not always stuck with a vertical bulleted list.

Placing your navigation within a list also makes it easier to manage. If you had a three page site it would not be hard to keep track of your navigation even if it was thrown into the structure without a relation to anything else. Consider, on the other hand, what happens if you have a large financial website with a heavy structure, you will need to have some way to centralize your content; otherwise it will just be ridiculous to see navigation spread around and without a regard for any type of hierarchy.

Unordered versus Ordered

To my knowledge there’s not much of a difference between unordered and ordered lists. They’re written exactly the same way but the primary difference is that ordered lists show a set of numbers whereas unordered show bullets. Most people I know use unordered lists, probably out of habit and convenience. The people I know that use ordered lists probably do so to keep from inheriting globally defined styles from other unordered lists since they probably use ordered lists less often. Neither seems to be a poor choice, it appears to me that it’s all about using the structures with which you are comfortable. (in this case anyway…)

It is possible that there is a sleight hierarchy placed on the order of elements in an ordered list, though I have my doubts and have not been able to find confirmation about that as of yet. Overall, it probably won’t make a big difference whichever way you go with it as long as it is within a list of some type.

So…

The reason really has to do with using the appropriate content in the proper structure… using the right tool for the job, as it were.

Share on Twitter | Share on Facebook | Bookmark on Delicious |