I have a recipe application that has a "Add Your Recipe" feature that's current implementation looks like this: enter image description here

Some notes:

  1. Upon clicking "Add Ingredient", a ingredient form is added. Same for "Add Group Heading", except a long text field is added instead.
  2. If you hover over the outside of any of the text fields a 10px light grey border appears, and the cursor changes to a move cursor, and you are able to drag and switch the order of any of the rows.
  3. All except for the first row, there is a delete X icon next to the side, indicating you can delete that row. The reason there isn't on the first, is because I figured every recipe must have at least one ingredient.
  4. You can't see it because I have text in every box, but there is a placeholder that says "QTY" ,"Ingredient", and "Group Heading" in the corresponding input boxes.
  5. If you type a number greater than 1 in the Quantity text field, the Select automatically switches to plural form.

Is this method too confusing? What are the bad UX elements?

Thanks for all help!

  • Allow deleting the first ingredient (other ingredients should slide up). Isn't it just as likely that the first ingredient could be a mistake as the second or third?
    – quietmint
    Commented Mar 28, 2013 at 11:58
  • @user113215 Thanks, I think your right. Should I allow the option to delete all the ingredients?
    – Muhambi
    Commented Mar 28, 2013 at 17:00
  • Definitely. Enforce the rule about having at least one ingredient when the user attempts to submit the form, not by limiting which list items can be deleted. If all of the list items are removed, automatically create a new empty row.
    – quietmint
    Commented Mar 28, 2013 at 17:24

2 Answers 2


I would place the field descriptions on the top (similar to a table).

For selecting of the type of quantity, I would use an editable field with autocompletion. User can type directly quantity, type and incredients without switching the input device.


download bmml source – Wireframes created with Balsamiq Mockups


Some comments

  • What I am missing the first place is a HEADER/HEADING mentioning what are the fields below about.

  • In your case, Ingredient (Carrots, no stem) is more important than its quantity. Swap their positions and put Ingredient Name first, then the quantity and finally the packaging type (Bunch, Packet, Piece etc)

  • I fail to understand (my fault) that why we need "Other" and "Another Set of Content - Ingredient" added by default? Most of the recipe would have 3+ ingredients and a good practice could be to start with 3 Sets of Ingredient/Quality fields and have "Add Ingredient" button after them. Thus all 3 fields will look similar and somebody had to add "OTHER" ingredient, he would use the same set of Ingredient, Quantity and Packaging Type. If you want a text-field where users would add something different from "Ingredient, Quantity, Type" grouping, you may have a "Instructions/Comments" Text Area to be used for that. So it would be 3 Ingredient Groups + 1 "Instructions/Comments" Text Area to begin by default.

  • OTHER ingredient is lacking quantity and package type. Is there any reason for that? If there is one, it is not evident.

  • If a link was performing an operation/action, I would expect it to be a button then hyperlink. So "Add Ingredient" and "Add Group Header" could be replace with Buttons.

  • Add Group Heading is not clear. Replace it with "Add Heading" if possible.. but I have an opinion that even if you take this option out, your functionality wouldn't affect neither your users will loose any needed understanding. In the list of Recipe Ingredients, ingredients are mostly listed without grouping them by their kind.

  • Thanks for the comments! You've been incredibly helpful, especially your third bullet. I've been on the edge of taking this out, but I think I will now!
    – Muhambi
    Commented Mar 28, 2013 at 0:33
  • @Salman. I know a lot of recipe apps, which use the order of Muhambi (Quantity, Incredients). e.g. Yummysoup, Paprika ....
    – sysscore
    Commented Mar 28, 2013 at 10:24
  • 1
    @Muhambi If you remove the "Other" type (free text field), make sure the Quantity and Unit columns are optional! I definitely have a use for ingredients without a measurement (e.g., "black pepper to taste", "enough milk to loosen the sauce", "lime wedges for serving"). I also disagree about the ordering suggestion -- there is definitely a natural order here: All recipes I've seen (online or in print) always lists the quantity (if any) before the ingredient name. I also disagree about groupings -- this is very helpful for complex recipes and is commonly used (esp. when writing the directions)
    – quietmint
    Commented Mar 28, 2013 at 11:46

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.