Header hierarchy in setting dialog



  • enter image description here

    Should the “experimental function” use a smaller header since it's controled by the developer mode toggle switch?



  • You could use size to determine the hierarchy, but you also have weight and position to indicate subordinate controls.

    Settings panels are not frequent locations an average user visits. This means that when they come to the settings panel, it's common they won't remember previous settings, or remember all the dependent relationships if it's not visually obvious.

    You could try:

    • Using a heavier weight to indicate the section titles
    • Nesting the 'Developer Mode' functions to indicate they are controlled by the main switch.
    • Adjust the subheaders

    In the example below, I added another section to show how this could be differentiated as your application adds more configuration options.

    enter image description here




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2