Best practices for table inline action display

Through trial and error the following is the best arrangement I’ve been able to come up with for displaying an inline action in a table. I’d like to explain my objective and see if this is indeed the best I can hope for.

2X_7_70de870a085153a953cc870a678c723e78bc4882.png

The user can reorder this table by tapping on either of the headings or reduce the number of items displayed by using a search term. The objective is to choose which words to study in a “cram” session. The user selects words for study by tapping on the blue box icon (which is an action) and this sets the “Cram” column to “on.” A format rule changes the box to a checkmark.

It is important to be able to tap on the “Cram” header so that the selected items can be displayed together and then unselected efficiently by tapping on the action.

2X_b_bc720a5d5b30cbf39991e682f293a45c229048e7.png

The current arrangement is acceptable to me but I have a few questions.

  1. Is there a way to have the action display alone (without the “On” thumbnail or any other column) and still be able to reorder by tapping on a “Cram” heading?

I don’t really need to have the “On” thumbnail. If I could get the box/check toggle to appear under the “Cram” heading and still be able to reorder when "Cram is tapped, that would be ideal.

  1. Are there any tricks to controlling the width of columns?

I have used an “On” pgn (the background of which is set to transparent) because I’ve found that a text column becomes much wider than I want it to be. I haven’t found a good way to control the horizontal spacing with text columns and other types of columns but thumbnails don’t take up much space so I used an “On” thumbnail. If I could get a similar appearance with text, I think that might be better.

Thanks in advance for your consideration.

1 6 1,418
  • UX
6 REPLIES 6
Top Labels in this Space