A small grammar of interfaces
Rules I keep returning to when arranging information on a page — and the few I have learned to break.
Every interface is an argument about what matters. The order of elements is a claim. The size of a label is a claim. The decision to hide something behind a disclosure triangle is a claim — often a cowardly one.
I have been collecting rules for about six years. Not the kind that come in style guides, but the kind that come from getting something badly wrong and then staring at it for long enough that you understand why.
Rule one: show the data first
Before you design a list, look at the actual data. Not the schema, not the mock, not the prettified example — the real, embarrassing, inconsistently-cased data that your future user will paste in. The interface that looks beautiful with your handcrafted fixture will fall apart the moment someone writes a title that is seventy characters long.
Rule two: a label is not a substitute for placement
If you have to label something to explain where it is, you have failed at placement. Labels should name things, not orient users. This sounds obvious until you look at most navigation systems, which are mostly maps with words.
The rule I have learned to break
Don’t align everything to the grid. Sometimes the most interesting tension in a layout comes from one element that refuses to align. A date that floats slightly right. A pull quote that escapes the column. The rule is useful precisely because breaking it costs something.
I am still collecting. The list is not finished and probably never will be.