What's an intuitive way to enter several heterogeneous fields?

Question

I need to give the user a way of entering (at most) three fields. For example, for a list of ingredients for a cooking recipe, each entry has a quantity, a unit and a label, e.g. 2 big egg(s), 1 pinch salt, 50 mL milk, etc. As you can see, some fields are mandatory while others are conditional.

My idea was to use either a textbox or a numeric stepper for the amount, and autocomplete for the unit and the label.

On one hand I would like to keep the types of the entry controls homogeneous (as much as possible), but on the other hand, in the case of units which are a small set, using the autocomplete control seems like an overkill.

What solutions are there?

Answer 1

Perhaps another way to think about this problem is how to get the most information from the user from their first input, and use this to make it easier for them to complete the rest of the entry.

With this approach in mind, I would put the ingredient type first, as an autocomplete field, then dynamically restrict the unit dropdown based on the ingredient selected. Therefore, the user enters the information in a logical order (item, amount, unit), and the options available to them change dynamically, before they open the dropdown.

Let's take your examples. The first column is an autocomplete, the second a plain input field, and the third shows the possible options for a dynamically restricted dropdown.

Item     Value     Unit
------------------------------
Milk     50        [ml]
                   [cups]
                   [teaspoons]

Eggs     2         [disabled]

Salt     1         [g]
                   [teaspoon]
                   [pinch]
------------------------------

For an item that you haven't pre-defined a restricted unit list for (e.g. myrhh), you can just display the full list and allow the user to choose. Hopefully this would be an edge case.

I wouldn't bother making the unit dropdown an autocomplete, unless the number of items is extremely large. The item field does deserve an autocomplete, however, as it is likely to be large.

Going forward, I would inspect the database to identify the most commonly logged items that do not have a hard-coded restricted item list, and use this to improve your application in subsequent releases.

Answer 2

If you feel adventurous, try to parse the text, showing an example next to the text input. In this way, it wouldn't slow down typing.

But technically, it will be a challenge: you'll need to allow several aliases (l = litre = liter), and show errors ("3 milk") or warnings ("4 l mlik").

Another possibility would be to choose ingredients by photo. This would definitely take longer than type it in, but it may be more fun (if the design is pleasing and so on).