3

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

enter image description here

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

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:

enter image description here

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

enter image description here

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

0

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?iPhone select multiple emails

  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)

iPhone Mail email actions on swipe

  • I'm not really pro this approach. These hidden gestures still have a long way to go before the regular users would see them intuitively. I think this will be the year of (hidden) gestures, so more general consciousness about it might gain some traction, don't think we're there yet though. – TristanSchaaf Jan 5 '18 at 15:55
0

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.

  • thanks for the suggestions. The header /search bar have been just put up as placeholders. In actual, they won't look like that. My main concern was the interactions on the row. I cannot move the checkbox to the header section. It's a responsive site. The header won't function like an app bar. So ideally is a checkbox interaction on a mobile site a bit too much if I already have a redirect link on the same row?(the link to new page cannot be removed) – saurabh Mar 9 '17 at 10:09
  • @saurabh in my opinion, the problem is having a checkbox and its label acting like a link. I wouldn't think the text is a link seeing the checkbox next to it, neither. So, I think that the row should do one or the other. But maybe I am focusing too much in this concept and actually testing the app might give a different impression. Let's see what others suggest :) – Alvaro Mar 9 '17 at 10:35

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.