Ways to improve readability of recipe ingredients?

Question

I am building a recipe website and I'm trying to improve the readability and scannability of the ingredient lists. I've tried a bunch of different options but I'm not sure what is best.

Here are some styles I've tried

No formatting:

• 1 pound skinless, boneless chicken breast halves - cubed
• 1 cup sliced carrots
• 1 cup frozen green peas
• ½ cup sliced celery
• ⅓ cup butter
• ⅓ cup chopped onion

Bold amounts:

• 1 pound skinless, boneless chicken breast halves - cubed
• 1 cup sliced carrots
• 1 cup frozen green peas
• ½ cup sliced celery
• ⅓ cup butter
• ⅓ cup chopped onion

Bold numbers:

• 1 pound skinless, boneless chicken breast halves - cubed
• 1 cup sliced carrots
• 1 cup frozen green peas
• ½ cup sliced celery
• ⅓ cup butter
• ⅓ cup chopped onion

Almost every cookbook/website I've looked at follows the 'no formatting' style. Is that really the best option?

Answer 1

First of all, if you are just looking at a text list of ingredients then I would say that it probably isn't going to matter too much which option you go for.

Out of the 3 options I would personally prefer the "bold amounts" option. The reason being is that the quantity is the part of the recipe that a person is more likely to need to look at more than once. So the bold part helps to draw attention to that part quicker.

Your examples don't really highlight this need as you are likely to have the quantities for those ingredients prepared in advance before cooking. However, a liquid measurement (e.g. 200ml vegetable stock) is probably something the reader will want to double-check the quantity of during the cooking phase. So I would say that needs to stand out more.

---

That leads me to my actual suggestion...

Option 4: Table

Create a simple table. It doesn't even need to have any styling, so it appears as just text. However, the key part is the spacing between the amount (column A) and the ingredient (column B). Having these as separate columns will make it much easier to scan for the user.

1 pound   skinless, boneless chicken breast halves - cubed

1 cup     sliced carrots

1 cup     frozen green peas

½ cup     sliced celery

⅓ cup     butter

⅓ cup     chopped onion

---

After further thought, it might be worth taking the table approach a step further and splitting out "ingredient" and "method". For example:

Quantity    Ingredient        Method          

1 pound     Chicken Breast    Skinless - Cubed
1 cup       Carrots           Sliced         

Play around with the order of columns and see what works best in your final design.

Answer 2

additionally to @musefan's idea with a table: using a monospace font for the numbers (or everything) can help parse the entries faster visually. it also adds some "wrote that recipe on my typewriter" kind of vibe, giving the recipe more authenticity. ;)

Answer 3

I noticed how the other answers focus on improving the layout of the ingredient list. I'd like to add to that a suggestion for making the recipe more convenient to parse while cooking it.

You could add the quantities in the text as well. I like to double check that I add the correct amounts so when I get to the step

Mix the sugar and flour, then slowly add the milk while stirring.

I keep going back and forth to the list at the top to verify the amount of sugar, flour and milk. Something I hardly ever see but would prefer is having the quantities right there, either explicitly as

Mix 100 g of sugar and 250 g of flour, then slowly add 0.5L of milk while stirring.

or, on a digital medium, by having the option to touch or hover the ingredient and see the quantities.

This will allow you to format the steps for optimal preparation, while formatting the ingredient list at the top for optimal purchasing. For the latter you can use the suggestions already provided, whether that be writing the ingredient first ("chicken breast, diced, 200 g") or putting it in tabular form.

Answer 4

Think about the way people will use the ingredients.

Before they can cook them, they have to go to the shop to buy them.

When you go to the shop, do you go to the '1 pound' aisle, or the chicken aisle?

I would suggest front-loading your lines:

• skinless, boneless chicken breast halves, cubed - 1 pound
• carrots, sliced - 1 cup
• frozen green peas - 1 cup
• celery, sliced - ½ cup
• butter - ⅓ cup
• onion, chopped - ⅓ cup

Answer 5

First, ingredients, not quantities, give a better idea of how the recipe will taste and look and how it will be cooked (No fats? Probably boiled.)

Second, quantities should be taken as rough estimates.

Third, the order of the ingredients helps readability. If you fry onions, carrots, and celery for an Italian soffrito as the first step of a ragú, then oil, onions, carrots, and celery should be placed first. Otherwise, you need to locate the ingredient among others scanning the list up and down.

So I basically agree with @Natalie L but changing the order of ingredients and adding bolds (I'm assuming the steps for the recipe.)

• butter - ⅓ cup
• carrots, sliced - 1 cup
• celery, sliced - ½ cup
• onion, chopped - ⅓ cup
• chicken breast halves, skinless, boneless, cubed - 1 pound
• green peas, frozen - 1 cup

Answer 6

Don't ignore the fact that people have been reading recipes for literally hundreds of years, and you are trying to both re-invent the wheel, and train people to read a different format than they are used to. There are many well-known stylistic conventions for recipes, and you should not violate these without very good reason.

• Do not implement a non-standard ingredients list, such as putting the quantity after the item name ("Chicken, 11/2 pounds" is not a format that is used by experienced cooks and publishers).
• Do not add emojis.
• Do not use fraction character glyphs; they can get replaced or appear incorrectly if the text encoding or font is rendered differently by different OS/Hardware/browser combinations.
• List all ingredients before procedures.
• Look at several well-regarded cookbooks and copy their formatting and style conventions to resolve any questions.
• Browsers have built in search; you don't need to make recipes more "scannable" when all it takes is Control+F to find the word "chicken" every time it appears on the page.
• Watch the punctuation: Hyphens are not m-dashes. Commas are not colons.
• Do not use bullets to further decorate a list that is obviously a list.

Answer 7

Aligning the table like other answers have suggested is a good idea. However, when I'm cooking this happens very frequently: I go get butter, forget the amount, then I look back to the list and have to find butter on it again.

This is just an idea, but it might help to have emojis on each line. This provides a quick visual reference for going to a particular line.

• 🍗 1 pound skinless, boneless chicken breast halves - cubed
• 🥕 1 cup sliced carrots
• 🥣 1 cup frozen green peas
• 🥣 ½ cup sliced celery
• 🧈 ⅓ cup butter
• 🧅 ⅓ cup chopped onion

Even if one has to resort to placeholder icons for some rows (like peas and celery above), it feels like it might still help with visually scanning the list.

Answer 8

PROVIDE TWO VERSIONS OF THE INGREDIENTS

1. Order used, grouped by step.
   If the first thing you do is season the meat, then the spices and meat should be first. Then a blank line. Then the onions and peppers that you use in the second step. Then a blank line. Etc. If you use the same ingredient in different spots, it should be in both of those spots, with the amount for each step.

2. Shopping view
   Items should be grouped by type. Meats together. Fresh produce together. Canned goods together. If an item is used in multiple steps, it should only be listed once with the total amount needed

Answer 9

I am personally very fond of the way recipes are presented in The Joy of Cooking, where they are listed only once, within the flow of the recipe's instructions, set out on lines by themselves and bolded. I'd type an example but I don't know how to format it here; if you find the 2019 version of the book on Amazon and choose the page previews, one of the pages shows partial recipes in this format. Joy of Cooking is the only place I've seen this so I'm guessing that not a lot of people like it, but I find it invaluable. For shopping and ingredient prep, you just scan down the recipe and the boldface lines jump out at you. Then as you're following the steps the ingredients are really clear, none of this "wait now when was the garlic supposed to go in" or "hey it says to add butter but it's not listed at the top". I don't do a lot of cooking, so perhaps I'm in the category of people who need recipes presented really stepwise. Any recipe I expect to make again, I will usually re-type in this format for my own use.

Answer 10

While you have some very good answers I think that the general approach has one (big) issue: we are trying to port best practice from one medium (printed book) to another completely different medium (web application). Kevin (in his answer) has a VERY good point and I would expand further.

Printed books have one layout and it's a compromise for all the steps, your web application can (and should) adapt to the different phases the user will go through. User should be able to easily move between the different views which IMHO are:

• Scan the recipe to determine if it's a viable option. Cooking steps should be hidden (but available with a single click). Here I am interested in:
  • List of ingredients: to know if I have - or I can easily obtain - everything I need. The best ordering is debatable, I'd probably match the order used when cooking, with the exception of secondary ingredients - like salt and oil - which I'd list at the end. "1 carrot" could be perfectly fine here (additional information might be presented slightly dimmed to aid quick scanning.) Do NOT include cooking details here: sliced carrots is not what you buy and it tells nothing about how many carrots you actually need. As someone else already mentioned you should - when possible - given an option to change the unit of measure (this is especially true when working with an international audience); alternatively you might - at least - provide a link to perform the conversion elsewhere (Google is easy to integrate, for example).
  • Allergens: this is what you want to bold in the list for this step. To bold allergens is a fairly well established convention and it's useful when you're trying to determine if the recipe you're reading is an option for your and your guests.
  • Time to prepare, difficulty, cost. These are common in many recipes and I am interested to see them only in this step.
  • Suggestions (for example as tooltip or tapping on an ingredient) for alternatives. Rationale: that White Delight sweet potato might not be available but maybe a readily available orange Nemagold works well too.

• Shop for ingredients: here you need the list of ingredients. You all know the pain of going through the shopping list multiple times because it's not ordered properly (vegetables, meat and so on). A nice to have shopping view where:
  • User is able to reorder the list. Rationale: you might shop from different places (vegetables from the street market, canned food from supermarket, etc) and each supermarket could have a slightly different organization. This really matters if the list is long.
  • User can remove items from the list. Rationale: no need to buy what they already checked they have at home and for sure you do not want them to print the list or to write it down by hand.
  • A simple way to share the list as plain text with another application (or at least in the clipboard). This is useful if, for example, you need to ask your SO to buy something on their way back from work.
  • If possible (and ONLY if adjusted to the user's location) you could provide links to online supermarkets (even better if you could pre-fill the list but...)
• Cooking: here the list is NOT required. For each step the user should have everything they need to complete that step. Someone mentioned that when cooking you often need to go back and forward to the list of ingredients:
  • Divide the process in small clear steps. Current step should be clearly identifiable (I hate to scan a big wall of text every 30 seconds because I had to move my eyes away from the screen to...cook). Do not hide next steps (I might prepare in advance.)
  • Tell me everything I need about the ingredients: "Chop the carrots (the two of them)...". Rationale: I immediately know what I need to use and how much of it (in case I bought a package, not the exact number). This saves me the trip to the list of ingredients. If you provided alternatives then they should be visible (especially if they need a different cooking/preparation) also here and with the same mechanism (tap, tooltip, etc).
  • Give me a quick way to see the list of ingredients without scrolling the page (or, worse, navigating away). Rationale: if - for any reason - the previous steps weren't enough then I can quickly tap, read, dismiss the list without losing the current step.
  • If possible give me the possibility to add notes (both here and in the ingredient list). This is especially useful if some materials are not widely available (which is often the case when cooking something from another country.)

As last thing: do not forget to give the user an option to print the recipe (1st and 3rd views together) and the ingredient list. Someone will want/need to use a printed version when cooking. Because of this:

• The printed version should contain ONLY the necessary information. No links, no trivia.
• User might want to print it with bigger characters.
• For the printed version you should consider all the other good answers you had here.