I am having some trouble deciding on where to place two actions in one list item.

This is how the list item looks like.

List item

So this design is V2, and in previous version the item only had one function in which case a click anywhere would bring you to a second page.

In this version there is also an arrow on the right side which causes the item to expand and reveal quick-access items which has a horizontal scroll to see all the items. Usually there are only three and most will fit on the screen, sometimes you would have to scroll a little bit.

Expanded area

I've kept the item click action where it bring you to the next page, but if you click on the arrow specifically the item will expand.

I've gotten some feedback where it seems confusing, and people expect the item to expand if you click anywhere on the item.

What's a good way to separate these two actions? The quick access items in the expanded area are also available in the next page, but it could be useful to access those items faster since they are on the bottom of the next page.

I considered moving the page click to be an additional item in the expanded area.

  • Have you also considered putting a hyperlink text (Something like "View Complete Details") with an underline, below the 3-36 Aerosol? What about changing the expand icon to a "+" as the default state and "-" when the accordion is expanded? You can then accompany "View Complete Details" with a small ">" arrow.
    – Chandan
    Nov 21, 2018 at 5:58

2 Answers 2


Is long-press taken? You could use that as a sort of power-user feature. Then you'd have the whole button as a link to the next page, but if you hold instead of tap you get a shortcut menu. It's analogous to rightclicking context menus on a PC, and it's a common theme in mobile too.

  • That's not a bad idea. It's usually not very obvious that you can long-press an item, but as you said, power-user. Thanks I will think about it. :)
    – Ezzy
    Jun 24, 2018 at 7:54

Is the "expand" only revealing a row of additional actions? In that case, you should replace the expansion indicator with an overflow menu ("meatball" icon / three vertically stacked dots), and move the actions to a Menu. Clicking the text of the list item will do the expected thing of navigating to a detail view of the item, and actions associated with the item will be visible in a context menu, which is easily discoverable and usable from mobile because there's an icon to trigger it, rather than having to guess about a long-press.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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