Details

by Zack on June 10, 2009

← extra vertical spacing
outdented
list items

extra padding

special arrow character
← submit button tooltip
aligned comment
field and preview
← adjusted vertical spacing
← large title transition
to comment area
specialized comment
pull box

Details

  • The article list on this site responds to the right and left arrow buttons on your keyboard.
  • The vertical rhythm article has perfect vertical rhythm.
  • The background of the form in the forms article is a slightly off-white color that helps differentiate it from the rest of the page.

You probably never noticed, and that’s OK. Every design contains 1,000 little details you’ll never notice on a conscious level. Most of these details don’t matter by themselves, and making each visible would make the design too busy. Instead they combine to create a subtle effect of grace in the design. They make the UI feel good.

Quality or not

How do you know if a product is quality? Every product you use was shipped with hundreds of open bugs. It is just the nature of the software business, you have to ship with bugs. But even with all those bugs most software products feel like quality products.

All software must avoid big problems —you can’t crash, freeze, or delete data— but most software doesn’t do that. It is the details that make software feel good. Is everything aligned properly or is it just a little off? Did the TAB key work or did you have to click with the mouse? Did the screen redraw properly or was it a little off? It all matters.

Making something truly fine

Software can learn a lot from physical manufacturing. I have some furniture from IKEA. It’s fine as long as you don’t shake it around too much or lean on it. When you do it creaks and wobbles in a most unsettling way. It hasn’t fallen over yet, but I constantly worry that it will.

I also have a rocking chair from Gary Weeks & Company (no, not the $3,700 mesquite one). The chair is truly fine. It is solid and strong so I never worry when my daughter climbs on it.

At Mr. Weeks’s website you’ll find detailed steps for how the chair is made and why it was designed the way it was. He talks about geometry of the chair, the precise curve of the back, and exacting nature of the manufacturing process. Nobody who sits in the chair notices that, it just feels good. They can’t tell you why, it just does.

Quiet grace

I love software that just feels good. As part of my own process of getting the eye for detail I’m learning why it feels good, but ultimately I just care that it does.

Trying to fix every single little problem will drive you crazy, but leave too many of them and you risk making bad software. So get into a detail state of mind. Put little details in your UI that most other people won’t notice.

The curves on my rocking chair don’t jump out at you. They have a subtle and understated dignity; a quiet grace. Your software can have that if you get out of the way. Ego is never understated. Shape your user experience for your users. Don’t tell them you’re good at this, let them see for themselves.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: