I've spent a lot of time thinking about the most efficient way to handle a user inputting a recipe into a form. There are a couple different options I've seen across the internet, from offering up a giant text area to having a separate field for quantity, metric, ingredient, etc.

The overall goal would be for the form to be easy enough to use that people actually provide their content to the service (without pulling their hair out), but secondary to that would be once the recipe is in the system the content is flexible enough to allow modification of serving sizes to scale quantity, converting between english and metric, etc. The idea of allowing a text area and writing some backend logic to parse also seems flaky based on the idea that people aren't consistent with their input. Additionally, you might need to handle things like "a pinch" or "season to taste", which are most arbitrary quantities.

Has anyone had a good experience with an interface that captures a lot of granular details easily?

  • 4
    Please show us your work so far, otherwise this question is mostly a design request.
    – JohnGB
    Commented Feb 13, 2013 at 1:36
  • Fair enough. Mostly I've been trying to think about ways to capture such explicit data in my mind as I visit examples, but I'll try to put together some visuals in the next day or two. Commented Feb 13, 2013 at 1:46

3 Answers 3


As you've alluded, the design of the form depends very much on how you are going to use the data. More specifically, you need to decide or know how you want to display recipes to know how granular the form needs to be. Without this, you can't really design an effective form.

For interest, this principle applies no matter what the domain. There is no "one right way" to collect addresses, for instance, because it depends on how that information is going to be used. For direct printing on the front of an envelope, a single big text box — into which the user enters the postal address however they see fit — will be fine. But for other uses – e.g. being able to filter data by town — it may be necessary to collect the address in a more granular fashion.

  • 1
    I will argue with that. You should not design anything from the "how it will be used internally" perspective. It should be done with users in mind, and not the way data will be proceeded. For example, you may collect addresses with help of the single input, automatically parse the values and display them the way you want. Commented Feb 13, 2013 at 10:14
  • I'm not suggesting that the design should just blindly replicate what is needed internally. But I don't see how any data collection interface can be successfully designed without knowing what data is needed. After all, a form is just a tool for getting data – working out what data it must collect has to be the first step. Then, once you've done that, you can work out what you need to do to ensure that collection meets users needs. In summary, a great UX is the sweet-spot between business and user. Commented Feb 15, 2013 at 0:21
  • A good UX is about User, and anything else is on the second place. I'm arguing about link between "collecting data and displaying it". Yes, you should know which data you will need but it should not affect how granular your input form should be. I may have a single input and parse it internally and gather all the data I need and display it the way I want. Commented Feb 15, 2013 at 12:06
  • 1
    It is naive to say a good UX is about the user before everything else. There is no UX without an organisation behind it to build and maintain the system. And software that does everything for everyone suits no-one, so you need to ahve a clear vision. It is also naive to suggest that data can always be parsed internally. Every client I've every worked with – many of them very competent and dedicated – has had some (legitimate) barriers to doing this, e.g. legacy systems, or the data not lending itself to accurate parsing (e.g. splitting names). Commented Feb 16, 2013 at 4:32

I designed a little 'calorie counting' app, which works in a similar way to selecting ingredients for a recipe.

Ingredient Selection Interface

The screen was split into two sections. On the left hand side, there was an area to search for the ingredients. The ingredients can be drag-dropped over to the 'selection area'. Once you drop an ingredient, you are prompted for the quantity:

Inline form to select food item quantity

You can easily enter a quantity in default units (the most commonly used units) or select another unit from the dropdown. The quantity is also a blue link, which will bring up the same entry box when clicked.

To delete an ingredient, you can hover over it and a delete button appears. This obviously doesn't work well with touch, so it may be a good idea to show this permanently:

Deleting an ingredient.


It wll be quite natural, I think, for the users to at least put each ingredient in another row of a text field. What came across my mind is asking users to write it in a very natural way, like: "a pinch of salt", "100 grams of butter", "a tbsp of cocoa", "2 eggs", "one carrot", "two and a half tomatoes".

Some of the above are fractions or relative quantities, while the other ones are the number of things. The ones that are fractions can be easily determined by using "of", for the other ones, there is some representation of a number, either in numerical or descriptive form.

Now - it needs more study of course - you cold add some logic based on this, splitting the quantity from the ingredient name, and putting them in two columns of a table. Then you cold align the ingredient name to the left in the right column, and put the quantity aligned to the right in the left column.

You could try to achieve it also by building a dictionary of commonly used ingredients names and quantity names so that the logic would correctly assign it to left or right part. It could even evolve, learning from the new data entered by users.

Last, but not least, I think it would be great if you provided a live preview in the UI to discipline them, showing how the data will be presented.

Users could also see an interface split into two parts: one for quantity in general (numbers, factors, description) and the other one for ingredient name. It could mimic a simple ruled notebook rather than look like a form. Users could switch between them using tab key. More on te image. enter image description here

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.