5

We are working on a fairly complex B2B app. It's been in active development for many years and as a result, we've ended up with a bunch of settings that we have to present in the admin panel. It looks like this:

enter image description here

That's just a part of it. We have a lot more long checkbox list throughout the admin panel.

Things we've done so far:

  1. Replace checkboxes with toggles to make it visually more interesting. I think it worked out pretty well. You can clearly see which items are enabled.
  2. Split long lists into smaller ones and put them into individual boxes.

Still, there are a lot of checkboxes and we can't reduce the number of settings at this point.

My question is how do you make it more readable and less overwhelming?

P.S. I don't need an example on how you can simplify those specific settings on the screenshot. I'd love to hear ideas that I can apply to any long list of checkboxes, not just this specific one.

  • Do you have analytics-type data on which settings are being used? First step, I'd guess, is to remove the ones that nobody uses. – Ken Mohnkern Feb 27 '17 at 19:56
  • @KenMohnkern, we've already done that. As I noted in the question, we can't remove any more of the settings. – Max Al Farakh Feb 27 '17 at 19:58
  • Sorry, missed that sentence. So this is a question about organization of a large set. – Ken Mohnkern Feb 27 '17 at 20:02
  • @KenMohnkern exactly – Max Al Farakh Feb 27 '17 at 20:06
7

I'd try hard to add subheaders. Yes, these are all "Notifications", but they are notifications regarding different events.

For example, something like the following may work better (obviously make your own decisions on what logical groupings make the most sense for your scenario/audience).

Additionally, note the last two options. I personally thought it was confusing for the last two options to be negated when all the others are not ("Do not include..." and "Do not send..."). It made me think too much about it when it's paired with a Boolean input device.

"Okay, this feature is disabled, so it will include the attachments??"

To me, it sounded less ambiguous to read it as "Include attachments..." and "Send 'autologin' links...".

However, if you'd rather represent the setting's status as it currently reads in your screenshot, I think a change in wording would still reduce the ambiguity. E.g. "Exclude attachments..." and "Exclude 'autologin' links..." To me, it's the difference between -1*x and -x with the latter being clearer.


Notifications

GENERAL

  • Ticket confirmation (the ones users get after submitting a new ticket)

NOTIFICATION RECIPIENTS

  • Notify all administrators of new tickets
  • Notify technicians of new tickets in their categories (remember to edit the category permissions)
  • Notify ALL technicians in a category when a customer updates a ticket (not just the ticket-technician and ticket-subscribers)
  • Notify ALL technicians in a category when another technician TAKES a ticket
  • Notify ALL technicians in a category when a KB article is created or updated

TICKET STATUS CHANGES

  • "Ticket closed" notification

NOTIFICATION CONTENT

  • Include attachments into outgoing notifications
  • Send 'autologin' links in email notifications
3

Try to put under the same block settings that are related. In the attached image I used checkboxes but you might want to use toggle buttons. Also, as @maxathousand explains more completely in his answer, I would avoid using a negation for an enabled/true value ("Do not send...").

enter image description here

  • Yes, avoid the negation as I mentioned a while ago ;) – maxathousand Feb 27 '17 at 20:49
  • Thanks @maxathousand I used it in the image but thought I would clarify it, no copying intention :) I'll edit and include a reference to your explanation which is more complete. – Alvaro Feb 27 '17 at 20:52
  • No worries! :) Wasn't sure if it was a coincidence or not. – maxathousand Feb 27 '17 at 21:02
  • yeah, changing his options from the get go would work well too. specific categories for each group. – the other one Feb 28 '17 at 10:37
1

Looking at this book:

https://www.usability.gov/sites/default/files/documents/guidelines_book.pdf

One heuristic that links into general rules of reducing users workload, is to "Provide users with good ways to reduce options".

This generally means grouping the options into broader categories. For example taking a brief look at your screenshot a notifications category and an other options category would be a simple way to reduce the workload just by dividing into two.

If you have a VERY long list of options, longer than in your screenshot, then it is a good idea not just to have these clearly labelled categories but to even have them togglable and minimised by default. Though as a disclaimer this requires good category names.

0

Since you have done the analytics and there is no way of removing any of the notification than have you looked into the option of grouping them in some meaningful way? Knowing all the options available then you might be able to combine them under several groups. Leave the option to toggle individual notifications but also toggle the entire group itself.

0

One possible idea, that won't remove the need for long lists, but might keep them hidden more of the time, would be if you can have a few pre-defined sets of settings (like some installers offer "Minimal", "Typical" and "Custom" options).

For some sets of options (e.g. the example notification options in the question), the pre-defined categories might be somewhat arbitrary ("Minimum notifications", ... "All notifications"), but for some groups of options, there may be more natural, domain-specific names for collections of several options set one particular way.

By the sound of it, you'd still need a "Customise" option in most cases, to allow fine-grained control of each option, but it may be that most users won't need to go down to that level most of the time.

0

Since you mentioned the list is quite long, you can try putting different settings under different categories(like a menu) instead of segregating it under different headings. So the user will actually jump into a category to change the settings. This can make the page look less content-heavy.

Also, adding a search would help a lot for the user to find the particular option.

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.