3

Scenario

I have a visibility flag against document attached to a student profile. Administrator is the persona of Student profile. Administrator manages student profile and in the student profile we have a section of documents. Administrators can add student documents and they have the privilege to set it visible to student or not.

Interaction

enter image description here

Question

Now as you people have gone through the interaction, you must be able to figure out that the checkbox control of visibility becomes enabled when we select a document.

Our team is not convinced on having two check boxes in one one row. Should I be using a radio selection button or a toggle switch? Or maybe try to change the icon of visibility flag from checkbox icon to eye icon?

Variations I've implemented

enter image description here

But this was also rejected as it was too overwhelming in the row.

Kindly suggest some solution. Thanks !!!

2

I'm suprised you named the case of a switch but did not visualize it and went directly to a more complex one like segmented tabs.

Normally a checkbox would be optimal for a binary option, but in this case you correctly noted that there might be confusion since there are two.


I think you were already on the right path here. A switch works for binary options just as well as a checkbox (though it is usually picked for options that resemble the methaphor of ON/OFF in the real world).

It's tolerable in this case:

enter image description here


You could probably use an eye icon too, if that fits the design more:

enter image description here

Though, this one is not as perfectly clear as the switch (as users might confuse when it's on or off).

In the end it's not so much about which icon is the most correct one, but about what is the most clear and friendly solution for the user.

  • Well yes I had visualized the switch box just as you have mocked. But switch box works in order to provide an immediate effect. In our case changes will be applied when user closes the dialog by clicking the button "Add Selected Documents". Refer to this article: nngroup.com/articles/toggle-switch-guidelines – Sheraz Jan 7 at 11:02
  • 1
    @Sheraz That's true and a good point. As I put it in the last sentence, in my opinion it's much more about making the user understand than to use each element 100% precisely for its purpose.To not break any conventions though, the eye approach seems the least space consuming. Or anything similar looking. It's basically the same thing as a checkbox, just styled differently, and that's your main issue after all, two similar looking checkboxes are confusing. So have two different looking ones :) – Big_Chair Jan 10 at 9:21
  • Yeah I have went with a clickable radio button with eye off and on state with label "Visible to Students". – Sheraz Jan 10 at 11:35
0

You can use the principle of your radio button but implement it inside a dropdown if really you need to save space

  • 2
    Could you further elaborate your answer? – Levano Jan 7 at 9:12
  • A drop-down usually has a neutral state like Select Value or something. In our case, we have two values "Visible to Student" or "Not Visible to Student" along with no neutral values. So is it advisable to use a drop-down in such case? – Sheraz Jan 7 at 9:22
  • @Sheraz No, it really is not. Nearly all guidelines suggest using drop-downs only in cases where you have too many options. – Big_Chair Jan 7 at 10:33
0

One way of solving your two-checkboxes problem is to change the interaction for selecting documents. As I understand it there is a two stage process for adding a student document. First the user must click the unlabeled checkbox of all the documents in the list and then confirm the selections with the [ Add Selected Documents ] button.

This interaction pattern is useful in situations where there are multiple actions available for an item in the list e.g. an email list. But it seems unnecessary here as the user has only one action. Setting visibility cannot be counted as an action in this context because its usage depends on the selection operation.

I would replace the selection checkbox with an [ Add ] button on each document and do away with the [ Add Selected Documents ] button. enter image description here.

Using the [ Add ] button allows the user to retain the document as their locus of attention while they manipulate it. The [ Add ] button also makes it more explicit to the user what operation the current checkbox maps to. This change would have further ramifications for the design of course but I think it will simplify this interaction for the user.

P.S.

Beyond the visibility operation becoming enabled, there is no visual change to the document to indicate that it has been highlighted. There should be a stronger visual indication for the selection operation, maybe a change in the background colour of the item.

0

I suggest replacing the check boxes with one button with a labels and styles that change. Labels - "Share" and "Unshare" or something similar . One button - white text font on button with color background. The other clear background and color font.

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.