0

Our list is simple and keeps the trend of an alternating background to show that its a list. Now, after showing it to a client, he asked me: "So, how do i view an item on this list?", Then it had me wondering how. Back in the days when i was still a web developer i used to add an action column with buttons for viewing, editing and deleting. Nowadays the item is clickable and swipable. What signifiers could i use to make the list item look like it is clickable?

1

Like most solutions, it depends on context. Am I on desktop or mobile? Is it opening a window/modal/page? Can i perform an action on the list item? Am i jumping into a new flow? Before deciding on a pattern, i would take some time and think through the task flow and get in the mindset of the user and what they want to accomplish when they land on that page.

With that said, here are a few things you can implement for quick wins on desktop:

  1. Leverage existing styles Style the list item copy in the same way you style links. User's will already understand the items are clickable.
  2. Leverage known signifiers Add a hover state and change the mouse cursor to a pointer when hovering over an element. Most users 'read' with their mouse.
  3. Iconography Add an icon to let the user know there is more information available. This could be as simple as adding an arrow or chevron to the right of the column or a document type icon if thats whats being opened.
  4. Supporting Copy If all else fails, add some copy near the list items to encourage the user to interact with those elements. For example, if i'm viewing a list of my previous credit card statements, I'll see something like "tap below to view previous statements." It's common knowledge that if you need to explain your interface to the user, you need to rethink your approach but this is useful as a temporary solution if you pressed on time/resources.

p.s. The alternating pattern in your list is known as zebra stripes. More jargon to throw around the office and with clients :)

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.