2

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 '18 at 5:58
0

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 '18 at 7:54

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.