6

Let me explain a problem at first!

I am making a mockups for a web service hardly consisted of tables. Every table has action at the end of each row. So, every set of actions refers to certain row. At some parts of application it is possible for a row to be in active or inactive state. I am wondering how to represent these states, and how to handle them.

Let me show you three options I have on my mind..

enter image description here

  1. I am a bit scared of using design that is actually tailored to fit forbidden actions at a given situations and circumstances. The state I am trying to point out is "Inactive" not "Disabled". I am still able to apply all those actions as for active row. This one approach is most appropriate for one considering space and design. Still users can assume that disabled (inactive) state could become active and they may wonder if they need to perform an action to make them active. What is good actually in this case.

  2. I use special column for displaying active and inactive state. Row with checked green circles indicate active state, and those with empty cells indicate inactive. This way user is even able to sort table through column (in each example table is sortable though column) but it takes a horizontal space and I do not have it enough in my app. Still, user uses set of actions from the last column to change the state.

  3. Special column which is actually editable. Like in previous example the column indicates active and inactive state. The difference is that in this one example I am using check-boxes , so the to perform state change you do not need to go for set of actions at the end. I don't think I made some improvement with this approach, considering that these actions are next to each other and it takes just one click more to change state from set of actions at the very end or each row.

What you think is the best solution and I would gladly hear some other solutions if there are any..

Cheers!

Improve this question
2
  • i see no use of showing state of active/inactive cause both are editable to change its state. Also i prefer to have edit button on hover of row.
    – Jivan
    Oct 17, 2016 at 11:57
  • They are always editable but for some further use the inactive ones are not available for use. Regardless of current state each row is always editable. So, the state active/inactive refers on some further actions..
    – Jerry
    Oct 17, 2016 at 13:02

4 Answers 4

Reset to default
4

I always believe and trust that the discussions / feedback / debates always yield better (or best) options. So, here is the refined solution.

enter image description here

Version 1 (first option)

I did some brainstorming and came up with 2 options. The idea is to save the page horizontal real estate and an extra column, especially for the smaller screens / mobiles.

enter image description here

Example 1:

  1. The extreme left column colours (green and red) indicates the state
  2. Elements on top right corner act as a Legend as well as filtering
  3. Change the state of each row by clicking on Edit

Example 2:

  1. Extreme left column indicates the states, sorting can be done by clicking on column header.
  2. Change the state of the each row by selecting / deselecting checkboxes (if editing is permitted to the users)
  3. On hover over (row), the “Actions” button is displayed.
  4. Top right corner elements are used to show the legend, if you can educate the users, then this can be ignored and removed.
  5. This design doesn’t work for mobile devices as the actions button is shown on hover over

Not sure if you have any common / separate actions based on the multi / random selection of rows. For instance: Delete, change state, etc.

Improve this answer
4
  • Deekshit! Thank you for such a innovative response, you just gone out of my way of thinking and I like it :) .. Let me answer you in details.
    – Jerry
    Oct 17, 2016 at 13:47
  • I pressed "Enter" accidentally in previous comment so it just posted comment immediately.. bad UX :)
    – Jerry
    Oct 17, 2016 at 13:49
  • I did it again haha .. 1. I really like both of your solution, first one a bit more.. First, I have some common actions like delete, copy, and so on, so the checkbox-es are mandatory in table. I am not sure about two checkbox-es next each other, as even following my style-guide checked row is colored with certain color, and it can be pretty confusing for users seeing state color and checked color. 2. All the users will be taught of using application, but still we all need to keep in mind users short and long memory , which is actually very short :D , so I would keep legend Thank you!
    – Jerry
    Oct 17, 2016 at 14:15
  • You should never use color alone to indicate a state, especially not red and green. They will appear as the same color to those who are red-green colorblind.
    – Eric Stoltz
    Oct 17, 2016 at 16:41
1

In my opinion, this should be more simple:

  • on click on the checkbox, the row is selected (see this DataTables example - Checkbox selection;

  • in the last column, you have a settings icon that opens a dropdown with all the options (edit, disable) or the last two columns are reserved for the actions (Activate/ Disable and Edit), but not checkboxes because it is confusing.

Improve this answer
4
  • The question is how would differentiate between active vs inactive for the rows which indicate the state of each row, you also need to consider how to save the horizontal page real estate.
    – Deekshit-CUA
    Oct 18, 2016 at 10:54
  • @Deekshit Sorry, but it doesn't make sense what you say. I think you make this more complicated than it is. If a row is disabled, what importance it has if it is in an active or inactive state? For me inactive and disabled has the same meaning, but even is not like that, for a disabled row, the only action that matters is activated it. Anyway, the row will look in the same way, no matters what values are in the columns.
    – Madalina Taina
    Oct 18, 2016 at 11:07
  • Thanks for the quick response. We are not talking about disabled row. The row, technically speaking is a record which could be in active or inactive state. Based on the state, the options could be different.
    – Deekshit-CUA
    Oct 18, 2016 at 11:25
  • @Deekshit In this case, I think my answer could be a solution. It is what I'd do in this situation. The first checkbox is to select the row. A row inactive has different background and color for the text than the active ones. No checkbox or icon for the option activate/ inactivate (or what you put there), just text and the select in the last column. It seems simple to me, I don't know what it should be considered more.
    – Madalina Taina
    Oct 18, 2016 at 11:31
1

I think your second example isn't that bad at all. You could just combine the two columns and use a hover state for the dropdown (I hope it's desktop only). It's a bit cleaner this way, for example like this (with hover on an active and non-active row):

enter image description here

Improve this answer
0

I have used a very simple technique for a few years that has solved this problem. Simply make your inactive rows have a grayed text while your active rows normal weight black text. Since your controls will be enables no matter what the user still knows that they can take actions.

I have also added checkbox filters at the top of the list for active and inactive. These serve two functions it allows the user to get the inactive items out of the way and teaches the user what the gray text means.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.