What is the best way (or better ways) to handle multiple interactions with a single row of information on mobile?

Question

I have a desktop site which has a table with multiple columns, a checkbox on each row, and actions related to that row. The checkbox is used to carry out a particular action (most used) for multiple rows at a time. Other actions currently are not that frequent across multiple rows. The image is for the mobile version of the same site. On a small screen, these actions can become difficult to tap. Are there some better ways to handle this?

The interactions are:

1. the checkbox
2. the title of the row, which leads to a new page
3. the menu icon, which reveals the set of actions which can be carried out for that row

Edit : This a draft version. The header and search box are just placeholders.

Answer 1

I have 2 suggestions.

1. Let the tap on a row open a new screen related to this row with various actions including opening a new page:

2. Transform your list to an accordion and let the tap on a row expand the item and show all related stuff:

Personally, I like the 2nd more, as all possible actions are immediately visible and there is no switching between screens back and forth.

Answer 2

I'm going to look like an apple fanboy here but anyway...

1. Assuming the checkboxes are to allow the user to select a number of items and delete, move etc... that item, have you thought about having an edit state which has to be activated by the click of a button at which point the checkboxes are revealed and other interactions on the row are disabled?

2. Have you also considered using the Apple's method used on the iPhone mail app (among other places) to interact with emails in a list (see image below) where the user can swipe left or right to complete/reveal actions for the email? (If the device has no touch capacity, these options coud be revealed by the 3 dot button you currently have)

Answer 3

Some suggestions:

• Usually checkboxes have a label associated that, when clicked, checks/un-checks the checkbox on desktop at least so, if you include a checkbox, I suggest you avoid triggering some other action when clicking on the text (right now "Redirect" in your example).
• The search button looks like an input or the input like a button (I am not sure if the line above it is the input), so try to clarify that.
• The header row is not clear enough in my opinion. You could either layout the UI differently or give it more contrast.

Try not to add more than 2 actions to each row. If you follow this, you will need to balance which action is more important. You could remove the checkbox and add it to the app bar (like some Android apps do) or the "Go To" could be left behind in the simple menu.