iOS Pattern for a List with a Sub-setting on Some Items

Question

I have an iPad app interface that feels a little weird to me and I'm wondering if anybody has seen a good solution to this situation. (I've changed the content so that I can post it here---my app is not really about cookies and cake so sorry if the content feels a little contrived)

Here's the scenario:

• You have presented the user with a modal dialog where they will set a bunch of things and then tap create. (Let's say they are setting up a menu for a catering company or something like that)

• On one section of the dialog, the user can choose from a list of things (they can select only one), and one of those items comes with a sub-setting (In this example it's Cookies, they can choose how many)

• There will be more options soon (otherwise a button bar at top might work, right?) ...but let's say we know that in the next year we will add Fruit Salad, Cupcakes and some other things.

• Let's also say that you want to interface to feel like stuff is there (otherwise a single line that calls up a carousel of options might work, right? but it would look too sparse)

Here's a mockup:

Answer 1

For selecting the cookies option, you typically would either use a picker or a table view. Apple provides guidance for which to use:

In general, use a picker when users are familiar with the entire set of values. Because many of the values are hidden when the wheel is stationary, it’s best when users can predict what the values are. If you need to provide a large set of choices that aren’t well known to your users, a picker might not be the appropriate control.

As much as possible, display a picker inline with the content. It’s best when users can avoid navigating to a different view to use a picker.

Consider using a table view, instead of a picker, if you need to display a very large number of values. This is because the greater height of a table view makes scrolling faster.

If you use a picker, you could either make it always visible or display it only when the user taps on the "Cookies" row.

You are correct to show the selected option text in the detail label, but I would recommend against using a checkmark. The typical pattern would be, if you are displaying a table view for the user to pick the option from to use a disclosure indicator accessory (the little right arrow), or if using a picker view, use no accessory at all.

For some good examples, open the iOS 7 Calendars app. Tap the button to create a new event. In the modal view, you can see an example of using a picker view for the dates. Notice there is no table row accessory (no checkmark or arrow). Now, below the date is an "Alert" row. This row uses a disclosure indicator accessory because tapping the row opens a new table view.

Answer 2

Quantity seems to be a property of Cookies in your example. You can use an arrow to lead you to another interface where you can select the quantity.

Answer 3

The solution I've chosen to go with actually comes from a friend of mine but I thought I would share it here.

1. the user taps on cookies
2. when they do they get a dialog (a scroll wheel with numbers and units in this case) to set the quantity.
3. a check mark appears by cookies and also the quantity

I like this solution because it still makes it clear that only one item in the list can be selected and the user can modify the quantity by tapping on it at any point. In cases where there are no settings attached to an option there will be no extra tapping.