Lists

by Zack on June 14, 2009

Lists

  • Design is good
  • UI is important
  • User experience matters
  1. Think about your design
  2. Create a good design
  3. Enjoy your design

The bullet point is the most misused punctuation mark in the English language. That seemingly harmless dot has lead us to present complex and interesting information as a watered down list of meaningless soundbites. In Dilbert the budget impact on six hundred projects goes through dozens of layers of management and are summarized as:

  • Oxygen is good
  • Competition is bad
  • I like jello

Before it reaches the CEO they are advised to take out the one about competition. This type of summary is familiar to anyone who has ever seen a PowerPoint presentation. Edward Tufte makes the case that these types of PowerPoint bullets were responsible for the Challenger Shuttle disaster.

Despite all of this, bullet points and lists in general are still a valuable tool for helping your users navigate their way through organized data. Lists are quite complicated. They can be as small as two items or as large as the Google search results for website. In this article I’ll show you how to format lists in and out of text so they help show your data instead of hiding it.

Lists in text

Putting a list in your text is asking the reader to stop the normal flow of their reading and consider your information as a separate group. Lists work best when they compliment the text rather than replace it. Use them to show examples or give more details.

Bullet points in different fonts bullets Many fonts create a custom shape for their bullet points.

Markers

The marker is the glyph you use to denote each item of the list. For lists of associated objects without an imposed order bullet points are the most common. When presenting instructions numbers are useful to show a specific order and help the reader keep their place.

HTML and CSS supports 21 different list markers as well as an option to add a custom marker. Most of them are too complicate to use in most situations. The point of the list marker is to guide the user through the list, not distract them from it. Markers that take more of your attention than the data in the list are the tail wagging the dog.

Alignment

The default style of tools like Microsoft Word are indented lists. Indented text is very jarring in a document, and that’s fine in a business memo when the indented list is meant to grab your attention before everything else. In a website or other software indenting some text for no reason makes is stand out too much.

Before books were all designed using computers most lists were left-aligned with the text. This allows the list marker to guide the reader without making the text appear separate from the rest of the document.

  • Lists make text stand out even if you don’t want them to.
  • Alignment is important.
  • Lists should help the reader, not grab their attention.

Lists without markers

Lists don’t have to use item markers. Lists without markers are very effective of longer items that don’t work well in bullet lists. There are many examples on this site including the instructions for creating big and small.

Lists out of text

Outside of text lists are a useful UI metaphor. The most common lists outside of text are search results. Results lists use the list metaphor as a form of navigation. Instead of presenting pure data they present a list of options for more information.

Most of the time lists the are separate from text are complex lists. A list becomes complex when you introduce multi-row list items, hierarchy, or columns. Google search results are a good example of this. So are the search results of this site.

Complex lists are more powerful, but they require additional tools to make them manageable. There are many ways you can add clarity to your complex lists:

Alternating color between rows helps guide the user to where one row stops and the next begins. Alternating list colors should always be light so they text shows up well and the list doesn’t resemble a television test pattern.

Spacing list items properly also shows where one item stops and the next begins. Lists with single-line items can use normal line spacing, but those using multi-line items should put at least a full line-height space between each list item.

Columns organize complex list data into more manageable chunks. They also help make the list clean and easy to read with proper alignment. When using columns most lists want column headers. If you skip them make sure the list data is crystal clear without them.

Borders are another way to denote one list item from the next. Just like alternating colors, borders must use subtle colors and style to avoid distracting from the data.

Humans like to organize and categorize information; the results are lists. The most important rule of lists is that the items in them should go together. If the list doesn’t group data with a clear commonality then it is just noise.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: