The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

A Mild Case Of Borderitis

The image on the right is a snapshot of a portion of Gandi’s website, a domain registrar I use. The website uses boxes and borders to structure content, and it works fairly well. The problem is, there are areas of the site where all the boxes and borders converge, forming areas of border overkill.

At the bottom there you can see about 5 borders packed together in a row. Yes, grouping related items together is good to show hierarchy and relationships, but sometimes you get carried away. Let’s call this a mild case of borderitis.

Here’s what the bottom area looks like in full width:

There’s quite a few things going on here. There are a couple content sections, both wrapped inside a container. Inside the bottom content section there’s also another box for “Helpful Hints”. Here are just the borders:

I think this can be simplified without losing any information. First of all, we can probably remove the outer wrapper because it doesn’t serve much purpose (it does flow into a navigation at the top, but there are ways to get that to work without the wrapper being required to go all around the content).

We can also get rid of the box around “Helpful Hints” and simple separate it with one full height border from the content on the right. I wouldn’t merge the two content boxes (top and bottom) because the stuff inside is fairly different so it benefits from this extra separation. Here’s what we get:

Much cleaner. Here’s what it could look like on the actual site:

Our borderitis problem is resolved with just a couple of tweaks. Oftentimes you can simply take away a bounding box and separate the area from other content with a single border, making the interface lighter and less cluttered. Sometimes you don’t even need a border at all, just separate the content with plenty of white space.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: