How to list items with variants in an iOS Table View?

Question

I'm looking for an elegant way to show a list of items in a Table View, where most (not all) items will have 2 variants.

If I lay the items out as is (with A and B represented by icons):

---------------
Item 1        A
Item 1        B
Item 2        A
Item 2        B
Item 3
Item 4
Item 5        A
Item 5        B
---------------

Pros:

• Lets the user select a specific item/variant right away.

Cons:

• The list may appear "defective" to the user as it shows lots of "duplicates".

The other way is to remove the variants from the list. The user would select an item first, then switch between A and B in the content view.

---------------
Item 1
Item 2
Item 3
Item 4
Item 5
---------------

Pros:

• A more conventional list.

Cons:

• An extra step for the user.
• One of the variants will need to be the default, e.g. if A is default then users looking for information on B across items will have to constantly switch to it in the content view. This is what I'm most concerned about.

Thoughts?

Answer 1

This sounds similar use case to a list of clothing items. "Skinny Jeans, Size 2", "Skinny Jeans, Size 3", etc. The variants in this case being the sizes available.

With only two variants, it seems unlikely that two steps is the best answer; if the list of variants was larger (as in my example with clothing sizes) I would recommend a separate step. But icons are insufficient methods to differentiate between variants. In fact, lists of only two types of icons are often tiring on the eye, and provide little utility. Instead I would recommend having the variant right in the text of the item just like how I listed the sizes. Hopefully the two variants have real names that are better than A and B, or it may still be confusing to the user.

Answer 2

Sounds like the answer is a custom table view, where each item label appears once, and you have buttons letting you choose A or B.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

The content matters too much to generalize this design for any data. Would A and B be available flight tickets, for example, the categories "Economy" and "First class" would be too important to omit.

I can also imagine scenarios where there does not have to be a default category, or forcing the user to choose a category, just to browse the info, for example by displaying both. Again, it depends on content. You probably just have to work with how you can make a "conventional list" contain the info you need, without making it look like duplicates.

This question is not only about the design of your cell items, but also things like sort order, and the design of the drill-down view presented when selecting one of the list items.