I'm working on a user preferences settings page where a user can choose between products and features for themselves. The "Product Settings" section below is where the user can select a product and configure some of its settings.

enter image description here


I'm confused about a few things regarding the interaction and user expectations.

  1. What should the default selection be? Should it be something like in the wireframe above with "Choose a product from the left" written? or should it default to the first product's configuration view?

  2. Should clicking on the product name also automatically activate the checkbox? Especially because some products do not have any settings to configure yet and can only be either activated or deactivated. enter image description here

enter image description here


This layout and interaction is largely inspired by Safari's extension settings workflow. Is this a common design pattern? Is there a general name for such a layout?

enter image description here

1 Answer 1

  1. If there's a concept of default product, have that selected (and moved to the top). Or, just have the first product selected. I don't see any viable reason for not having anything selected.

  2. Clicking on the product shouldn't enable/disable as it isn't clear what the checkbox does. I would refrain from using the exact same pattern as the browser because extensions have been around for a while and enabling/disabling it is a standard pattern. I'd suggest going with a standard Enable / Disable button. And have the settings disabled (hidden) until the project is enabled.

Your Answer

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

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