Recipe Index Lists

In a previous article, I discussed the six common elements that make up a Recipe Index page. Today, I’ll show some examples of using lists on a Recipe Index page.

Ingredient Tags

The most common use of lists on a Recipe Index page is to display ingredient tags. These aren’t as popular as they once were, as it is usually more convenient to type the ingredient into a search box.

An important rule to remember with lists: arrange the things you wish to compare in columns, not rows. In other words, it’s far easier to glance down a list than scan across a list.

Here are some examples.

Cooking Classy

We used four columns with the letters going down each column.

Well Plated

This arranges the list a little differently and does not follow the rule — notice how it’s harder to quickly scan all the “A” items as we have to look both down and across. Some sites have a “jump to” box for each letter at the top. This doesn’t work so well on phones where the boxes take up a lot of vertical space.

Pinch of Yum

This design does not follow the list arrangement rule — notice how it’s harder to quickly scan the items.

Other Uses

If you have a lot of different ways of organizing your recipes, lists can be a compact way of showing them all. Plus, it can feel a little overwhelming scrolling through a long grid of images showing all the different meals/course types.

The readability rule of arranging things you wish to compare in columns not rows still applies.

Pinch of Yum

Their Recipe Index uses lists everywhere but it is hard to scan as they’re not following the readability rule.

Upcoming Website

We’re currently working on a food blog redesign where the client wants the page to be super clean, compact, and fast-loading. Here’s how it will look. Notice how easy it is to scan down the lists:

I haven’t seen many examples of this style used in food blogs. Have you?

Enjoying these articles? Please let me know. I’d love to hear your feedback!