Building better bullets

Bulleted lists don’t have to be boring. Here’s some design ideas to bolster your bulleted lists.

Bulleted lists are a great option when you need to break up a gray wall of text. Rewriting a paragraph into a list allows you to draw attention to important information. Your reader will find those items faster as they scan your page. You may also find that you can communicate more efficiently and effectively by shortening your text into a series of bullet points.

Stop. Rewind. Let’s try that again.

Bulleted lists are a great option when you need to break up a gray wall of text. A bulleted list can:

• Draw attention to important information
• Support your reader’s tendency to scan text
• Communicate ideas more efficiently

Did you read that list easier and faster than the first paragraph in this article? The points were probably easier to grasp. Your attention didn’t wander.

Usability tests have shown that readers gravitate towards bulleted lists. But bulleted lists don’t all have to look the same. They can have personality and style that ties in with your overall layout and brand.

Let’s look at how we can elevate your basic bullets. We’ll use the example of a list that you might find on a hotel webpage showing you four special packages: last-minute escape, weekend romance, family movie night, and spa retreat.

Position and size

The most basic improvement you can make to your bulleted list is to examine the placement of your bullets.

Some software applications lack good default bullets. A bullet might be too small or too far from its associated text.

In the above example on the left, our default bullets are so far from their associated text that everything in the list feels disparate and ungrouped. When we move the bullet closer to the text, like you see above on the right, each list item is its own unit. Your list flows better. When you enlarge the bullet points, the list elements have more presence and emphasis.

Note: In traditional typography, bullets are outdented into the margin instead of indented. This placement is not often seen today. Unless you have a compelling reason to place your bullets outside the margin, this isn’t a tradition you need to follow.

Color

Consider adding a hint of color to your list by changing the bullet color. The color will draw your reader’s eye to your list.

Choose a color that ties in with your brand and your page design. Make sure there’s enough contrast between the bullet and the background color to meet accessibility color contrast standards for readers with visual disabilities. And finally, consider overall color on the page. If there’s a lot of color elsewhere, changing the bullet color might not draw your reader to the list. In that case, a large black bullet could actually be a better choice.

Shape

Bullets don’t have to be a small round dot. Your software may offer other bullet shapes that you can easily define instead of the dot. You can also use icon art for your bullets, as shown below.

In this example, we also changed the text color. This creates a color block that will stand out on a page full of gray text. Keep in mind, though, that if the entire page is saturated with color, the color here may not stand out. Find the right balance on the page.

A quick note about using hyphens as bullets: You’ve probably seen or used hyphens instead of dots in casual writing or note-taking. If you’ve used Markdown, you used a hyphen to build an unordered list. But remember, Markdown converts your dash to the dot. While it’s not technically wrong to use a hyphen as a top-level bullet in your visual communications, it’s informal and lazy. Avoid.

Mixed icons

You’re not limited to using the same bullet icon for all bullets in a list. If there are icons that are good representations of each list item, you can vary the bullets.

Use this approach sparingly, and be cautious and intentional. If there are other icons or illustrations on your page, impact will be lost. These could also make a layout feel cluttered. If your eye can’t find a natural, logical path through the page, the icons could get in the way of the page flow instead of helping your reader consume your important points.

Make sure your icons are consistent in size and style. All icons should have the same visual weight. Line weights should match in all the icons. The meaning and significance of icon should be obvious to the reader.

If you want to use unique icons for each list item, keep reading—the horizontal box approach may be a better choice.

Boxes

Sometimes your bulleted list doesn’t need to look like a bulleted list. When your list items are succinct, like simple noun phrases, a series of horizontal boxes might be an excellent alternative to a vertical list.

Text for each list item using this method must be short, no more than a few words. Full sentences won’t work. Icons are optional. Keep in mind that this visual treatment will slow your reader down. That’s not necessarily a bad thing. You may want your reader to pause and spend more time on the information you are presenting.

Bulleted lists don’t live alone on a page. Even in a slide deck, they’re surrounded by other slides. The list design you choose depends on the content that surrounds it. The list’s information, its importance, and where it lives in the page hierarchy will always drive its presentation.