How to design the input field for recipe ingredients

Question

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?

Answer 1

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.

Answer 2

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

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:

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:

Answer 3

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.