I need to display a list of ingredients for a cooking recipe on my site. I was wondering if there is a right way to sort the different fields in each line:

  • the name of the ingredient
  • the unit
  • quantity.

Most websites use the following pattern: [quantity] [unit] [name]

But is it really the best way to do it? Shouldn't the name come first, since it's what we want to know first (I mean, knowing that I need 150g of something won't help me, but knowing that I need flour will sure do). Also, the unit is optional, so it might be less confusing if it is put at the end right?

What do you think? Is one of the solution better than the other?

  • Similar question: ux.stackexchange.com/questions/20439/… (I don't think it's a duplicate though).
    – JonW
    Jun 3, 2014 at 14:15
  • @JonW I read that one but it's more about the placement of the whole list.
    – evuez
    Jun 3, 2014 at 14:28
  • 1
    I think you're right about "knowing that I need 150g of something is meaningless until I know what it is", but you're quibbling over tiny changes. You never see 150g Milk and only read the 150g to come back later to figure out what the ingredient is.
    – Perchik
    Jun 5, 2014 at 13:23

3 Answers 3


I think the pattern most websites use is actually the best pattern for recipes because this is how you would say it. Therefor it is easier to remember (because it takes less work for the brain to process), especially with a lot of items:
1 cup of milk VS. milk: 1 cup.

Since the reader/user is actually making a dish and not working on the computer/tablet, making thing easy to remember (at least for the short term) is a good thing. This enables the user to focus on the task at hand and spend less time reading a computer/tablet screen.

  • Also, when making a recipe, this is how you actually perform the tasks. First you find a one cup measure, then you fill it with milk.
    – Perchik
    Jun 5, 2014 at 13:34

I agreed with Rudt that the conventional format is most easily readable, not least because it is the conventional format. But it might be helpful to a user making up a shopping list to have the ingredients named first, something like this:

Milk    150g
Butter  4oz
Flour   6oz
Oil     Dash
Salt    To taste
Pepper  To taste

You could this as an alternative display option.


There are times where the expected pattern for something is so ingrained that to do anything else would just be confusing. As developers and designers, we sometimes want to change things to meet new standards. That isn't always a good idea.

I don't think I have ever seen a recipe presented in any other way but this. Cookbooks, recipe cards, online cooking sites all seem to do it this way (I'm sure you can find an example that differs, but a significant minority)

There are times when user's expectations far outweigh any new and improved design standards. If you push to hard for something new, you risk losing a large percentage of users whose well established expectations are not being met. While it is tempting to be different to set yourself apart, don't set yourself so far apart that no-one comes to visit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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