I have a recipe application that has a "Add Your Recipe" feature that's current implementation looks like this:
Some notes:
- Upon clicking "Add Ingredient", a ingredient form is added. Same for "Add Group Heading", except a long text field is added instead.
- 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.
- 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.
- 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.
- 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!