3

I'm currently redesigning a System Settings page, which is a mix of preferences/configuration, functions, control panel and settings menus.

So far I've taken layout inspiration from various control panels and advanced settings, for examples: Amazon mega menu, Firefox browser settings, Windows 10 Settings, MacOS Preferences.

However, I have not been able to find any solid guidelines, user studies or even usability/design comparison articles between settings layouts. Does anybody know of such material? It's not easily searchable.

Each link goes to a separate page, some pages have tabs to split related content. The problem is finding the right navigation method for such a "control panel" flow, as it seems there are no standards and each example has flaws and deficits.

I'm not really looking for pointers on this design as I've already analysed it, but research material or guidelines for these types of pages from which I can gain insight and inspiration would be appreciated.

2 Answers 2

1

There's a very similar question abut this on here:
Best layout for a settings page
Though, your question is different as it focuses on design guidelines explicitely.

Google's Material Design and Apple's Human Interface Guidelines offer design advice for mobile interfaces. Of course that is different from a desktop but the underlying principles of the guidelines can apply to any interface.

There is also this section about settings from the book "Designing Interfaces". It is not very long but it does offer guidelines.

1
  • I'll accept this as an answer as the "Designing Interfaces" reference was useful, although brief. Jan 31, 2018 at 8:07
0

This problem is hard to solve without thinking 'Grouping' case. If you group things logically correct and your users can grasp that logic easily, your listing can reach a success. Many System Settings pages are lack of good grouping and good search so the user cannot find what s/he is looking for. There is no guideline that shows standards I know but it should not be there either. Every application has their own complicated settings. They provide different solutions, for example, OSX uses grouping with icons first, then they show checkboxes and other stuff like. Some other prefer vertical tabs for grouping first and then provides controls underneath it.

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.