3

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!

Improve this question
3
  • 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 Mar 28 '13 at 11:58
  • @user113215 Thanks, I think your right. Should I allow the option to delete all the ingredients? – Muhambi Mar 28 '13 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 Mar 28 '13 at 17:24
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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1

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.

Improve this answer
3
  • 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 Mar 28 '13 at 0:33
  • @Salman. I know a lot of recipe apps, which use the order of Muhambi (Quantity, Incredients). e.g. Yummysoup, Paprika .... – sysscore Mar 28 '13 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 Mar 28 '13 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.