The Sophistication of Simplicity

If something is simple, it’s easy to understand or do. But as DaVinci said, “Simplicity is the ultimate sophistication.” It’s very difficult to make a web site interface simple, especially if the content is complex.

This is where elegance comes in. Elegance in this context means “pleasingly ingenious and simple” – a smart solution to a challenging problem. Interfaces that aren’t elegant are complicated, creating more difficulty and confusion instead of clarity.

Let’s look at some ways the complexity of content intersects with the elegance of an interface:

Elegant interface, Simple content

Tweet #1 web site

It’s hard to get content simpler than this. The site, “Tweet #1,” is mainly just a text field to enter in a twitter address. Their content is simple and their interface is elegant. Don’t be fooled, though – that doesn’t mean sites like this are always easy.

Going back to our definition of elegance, it needs to be pleasingly ingenious and simple. It’s easy to convert simple content into a simple interface, but more difficult to make it enjoyable when it seems you have so little to work from.

Complicated Interface, Simple Content

A very overwhelming political candidate's web site

The site above is an example of an interface that could easily be made elegant. The content itself is not that involved; it’s mostly links, navigation items, photos, and text. The layout and design ends up being painfully complicated, though, and so injures the whole site.

Although this is an extreme example, any site can go this direction if a hierarchy of content isn’t created from the outset. Everything on this page is screaming for attention and so nothing gets it.

Elegant Interface, Complex Content

Flickr web site

Alternately, it’s possible for complex content to be handled in an elegant interface. Flickr handles billions of picture uploads and corresponding data, as well as providing photo organization and social management, all in a way that feels simple.

I’m sure the Flickr developers and designers would tell you that getting to this point was not a simple task, though! This is the most challenging (and most rewarding) scenario for creating elegance.

Complicated Interface, Complex Content

Craigslist

There is a lot of white space on the Craigslist web site, so it might not seem very complicated at first glance. Complication in this context, though, is to create more confusion than necessary.

Instead of utilizing columns to help scan information, they cram all of the text together and sometimes use text weights and color to differentiate. Their interface evolution has been historically obstinate in this way, despite all of the designers who have suggested changes and offered to help. Many of the suggested Craigslist redesigns are shortsighted, though, and succeed in making it more attractive but not elegant.

Aesthetic appeal and outright beauty often sway our thoughts about web interfaces, but beauty is not something to pursue in itself. If we pursue elegance in the face of complexity, beauty will flow out of that hard work!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Elliot Birch

    Brilliant article. I particularly liked your comments on CraigsList. While it isn’t widely used here in Australia I have always wondered why they didn’t make some effort to streamline some of the user experience.

    I mean they can only benefit from that right? One way they could improve CraigsList is remove a lot of the crap from the home page and include a better search functionality. For example, they could add in an autocomplete or something similar that would dynamically point them in the right direction. If you search for “Chairs” it might insert the “Furniture” category in a location easy to see that relates it to your search.

    Just thoughts! But again, loved the article.

    • http://twitter.com/hortongroup hortongroup

      Nice article, thanks. So many of our web design projects require SEO considerations, so simple designs are usually bypassed unfortunately :(

  • http://www.thejazzband.co.za Theo Bunge

    Often a very difficult concept to explain to a client.

    Thanks for this one.

  • http://www.facebook.com/webnician Billy Stanley

    You get my compliments just for making your comments constructive over that Hutchins Web site.

  • Grace Kan

    Hello, Emily,
    Thanks for the interesting article!!! You used a interesting way to explain for some cases. I guess you have done some related work to balance the interface and the contents. I’m a student and currently doing similar work like organize the information on website and trying to find about the kind of briefs that people like yourself work to. I was wondering if you have any, let me see some samples?? It is okay show me the past brief.
    I would like to thank you in advance for your consideration of my request and I look forward to hearing from you.

    My Email adress is tonna.enece@hotmail.com

  • http://www.facebook.com/AdmiralRob Rob Muller

    Well written and sorely needed. This reminds me of the difference between yousendit.com and wetransfer.com. They both do the same thing, but yousendit is more complicated of an interface. Wetransfer is very elegant.