17

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?

  • 15
    This is only quasi-related to the question, but one way to significantly improve usability of a recipe website is to make sure the entire recipe fits on one page (do the opposite of Allrecipes dot com). This might make you e.g. have multiple columns of ingredients to achieve it, which may have other UX implications. – Yet Another User Jul 7 at 11:03
  • 19
    At the risk of sounding snarky you could also consider converting to units most of the world understands. Cups are baffling to people used to measuring in grams and converting from volume to weight is tricky. – Keith Loughnane Jul 7 at 13:47
  • 12
    As a side note, you may wish to also consider offering metric units as an option. Reading American recipes can be quite frustrating. I don't actually own any measuring devices that has "cups" on, despite having half a dozen or so measuring jugs and such. I suspect thats the case for most non American users. Additionally measuring most things by volume is a bit bonkers in my opinion, weight should be the sensible default! – James B Jul 7 at 14:09
  • 2
    Are your ingredient quantities always listed first? If so, I question the benefit of simply always bolding the first number (or number + measurement) since they're already pretty easy to locate there next to the bullet. (In fact, I might find bolding the ingredient more helpful as I'm trying to scan for "how much of this onion was I supposed to chop again?") – A C Jul 7 at 21:11
  • 3
    @KeithLoughnane Believe it or not, some websites actually do target US users, and that is actually ok. – barbecue Jul 8 at 13:40

10 Answers 10

42

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.

| improve this answer | |
  • 11
    Also, a table allows you to align numbers better. if you ask for 100g of fluor and 10g of something else, the 10 should be below the 00 of the 100. Thats often very hard to typeset when using lists, but quite easy with tables. – Polygnome Jul 6 at 22:16
  • 7
    I am one who cooks new recipes every day and I agree with needing to double check the quantities often and in a rush. I prefer the bold amounts. The table suggestion to me is just meh and runs together without more spacing. – Rob Jul 6 at 23:57
  • 3
    Additionally, with a table, you can do some cool stuff, like, adding a checklist. Just add a stylized checkbox on the first column and you're set. This allows to quickly glance over and see what may have been left behind. You really don't want to make a cake and forget flour... – Ismael Miguel Jul 7 at 9:03
  • 5
    @Graham: Personally I would handle this by providing a user setting to choose preferred units, then all recipes can dynamically display the desired units rather than having multiple columns taking up extra space. – musefan Jul 7 at 10:14
  • 3
    Another advantage of the table format is that the user can easily sort the ingredients as needed: by alphabet, by order of use, by quantity... – pabouk Jul 8 at 8:39
8

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. ;)

| improve this answer | |
  • 2
    Some fonts have a specific "tabular numbers" option which does this while retaining consistency with the rest of the text. developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric – smithkm Jul 7 at 20:06
  • 1
    Considering that the OP is asking about a web site, not a TXT file, there is definitely no need to use a monospace font. It's very easy to vertically tabulate text using CSS styles. – Gábor Jul 8 at 20:03
4

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.

| improve this answer | |
  • 10
    This can actually backfire, because then you have to go back to the list of ingredients and check if you're told to add all of it or just some of it. – Maurycy Jul 7 at 22:50
  • 1
    While this suggestion may be useful to somebody, it doesn't actually answer the question that is being asked, and should be removed. If you feel this answer is valuable you could create your own question and post this as an answer to it. – musefan Jul 8 at 6:29
  • @Maurycy That's really only going to be an issue if you measured all the ingredients beforehand, and you can probably remember well enough what you measured a few minutes ago. – scatter Jul 8 at 8:07
  • 1
    @scatter: Depending on the recipe, there can be quite some lag between the various steps, in which case you measured the ingredients 10s of minutes ago and you've been doing something else in the mean time, possibly another recipe in parallel. – Matthieu M. Jul 8 at 9:22
  • @MatthieuM.: Exactly. The whole point in a recipe is not to have to remember things! Otherwise the recipe could just say: step 1. make cake. step 2. eat cake :D – musefan Jul 8 at 9:41
3

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
| improve this answer | |
  • 6
    Someone who's making a recipe will check the "what" once or maybe twice: when getting the ingredients out, and perhaps when shopping. The "how much", on the other hand, is checked repeatedly: when getting the ingredients out, when shopping, when measuring, when double-checking after adding, etc. Front-loading on the "what" makes it harder to do the more important task of measuring. – Mark Jul 7 at 22:29
  • 1
    @Mark but I'm not interested in "how much" of just anything, I want to know "how much" or a particular thing. I am scanning for the ingredient, and then double-checking the amount. It helps me if the scanned-for thing is front-loaded. – Jacob Raihle Jul 9 at 8:56
  • @Mark can you give any evidence for this? – Natalie L Jul 9 at 9:28
3

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
| improve this answer | |
1

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.
| improve this answer | |
0

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.

| improve this answer | |
  • There's some space for researching common amounts of stuff here, so you can maybe repeat emojis to give a quick idea of amount (🧅 next to 🍗🍗🍗🍗 may indicate not much onion for multiple servings of chicken) – mgarciaisaia Jul 7 at 21:11
  • 6
    Emojis are a slightly bad idea. Not all devices and fonts have all emojis. In my case, the 🧈 ⅓ cup butter and 🧅 ⅓ cup chopped onion show as mojibake. In this case, just a rectangle instead of an emoji. Also, for someone reading it with a screen reader, it can cause issues. The best would be to use, say, a font that has all the symbols and then hide the emojis for screen readers. – Ismael Miguel Jul 8 at 9:22
  • 8
    I'd definitely recommend against using emoji in a recipe. They add more confusion instead of clarifying. – Mast Jul 8 at 11:58
0

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

| improve this answer | |
0

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.

| improve this answer | |
0

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.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.