Best Method for Adding Ingredients

Question

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

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!

Answer 1

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}

Answer 2

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.