A teacher opening an extension's settings needs to see what each choice means and whether it has been saved. A smaller panel is useful only if that task remains clear. The question for this Edmetry Focus design study is how existing controls can fit together before more local styling is added.
Start with one group
The study uses an Appearance group with temporary choices. It is a synthetic example for design review, not a new version of the installed extension.
| Part of the interface | What it communicates |
|---|---|
| A small count badge | How many choices are selected, in words such as “1 of 3 selected”. |
| An expandable group | Where related choices live. |
| Labelled switches | Which individual preferences are on or off. |
| Expandable explanations | Extra detail about a choice. |
| A full-settings link | Where to continue in a wider layout. |
The badge is information, not an action. Its count describes selected preferences; it does not confirm that filtering has been applied to a browser tab. Opening an explanation should leave those preferences unchanged.
Keep the meaning of each control
The proposed arrangement composes existing shared patterns. It does not require a new component. The extension remains responsible for its words, preferences, saving and recovery.
The browser's native disclosure element provides an expandable section with a summary label (MDN Web Docs, n.d.). For switches, W3C guidance calls for a stable label, an exposed on/off state and keyboard operation; related switches can be grouped with a fieldset and legend (W3C, n.d.). These are useful starting points for implementation, not a guarantee that a finished interface is accessible.
Compactness should come from grouping and spacing while preserving readable labels, visible focus and reachable controls. Essential warnings and save failures should stay easy to find, including when a group is closed or text is enlarged.
What the study establishes
The synthetic composition has been checked in Chromium, Firefox and WebKit for keyboard use, labelled controls, nested explanations, forced-colour focus and narrow text reflow. Those checks support review of this particular arrangement.
They do not establish reliability in the installed extension, successful preference recovery, compatibility with other extensions or a classroom benefit. The proposed nested explanations also depend on a shared styling correction that has not yet been adopted by Focus.
The next decision
Review Appearance in both the popup and full settings before extending the arrangement. In the extension, test changing a choice, closing and reopening settings, pausing filtering, and recovering from a failed save. Check that keyboard users can reach every control when text is enlarged.
Then ask intended users whether the choices and saved state are clear. If they are not, revise that group before repeating it elsewhere. A successful design review is a reason to run the next test; it is not evidence of improved learning.
Sources
MDN Web Docs (n.d.) The details disclosure element. Available at: MDN HTML reference (Accessed: 20 September 2026).
W3C (n.d.) Switch pattern. Available at: ARIA Authoring Practices Guide (Accessed: 20 September 2026).