Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Minimizing Complexity In User Interfaces

Clean. Easy to use. User-friendly. Intuitive. This mantra is proclaimed by many but often gets lost in translation. The culprit: complexity. How one deals with complexity can make or break an application. A complex interface can disorient the user in a mild case and completely alienate them in an extreme case. But if you take measures first to reduce actual complexity and then to minimize perceived complexity, the user will be rewarded with a gratifying experience.

We recently faced this very challenge while designing two Web-based applications, including an enterprise-level content management system. What follows are several techniques that have helped us streamline complex applications into lightweight user experiences.

Grab The Hatchet Link

The first weapon for fighting the villain of complexity is a hatchet. Studies have found that 80% of users use only 20% of software features. Not only are all those unused features a waste of development time, but they frequently detract rather than add value by making the application more difficult to use. Applications that try to do everything often struggle to do anything well. A successful application is a lean application: one that isolates a single problem and solves it brilliantly. As 37signals1 would say, “Underdo your competition.”

The best way to get a lean streamlined application is by eliminating features. When deciding whether a feature is necessary, the default answer should be “No.” Make features really fight to be included. If it doesn’t help the majority of users accomplish their frequent tasks, then it should probably be left out. Don’t get me wrong, being the one who swings the axe is tough, but when customers wax lyrical later on about how easy the application is to use, you can take all the credit.

Hide Complexity Link

If you can’t kill a complex feature, the next best thing is to hide it. Too often, rarely used yet complex features take up more screen real estate than frequently used yet simple features. This shouldn’t be. A good user interface should make the most common tasks the most prominent and then hide rare tasks so that they don’t get in the way.

When we were redesigning our content management system, we weren’t able to kill one complex feature in particular: the bulk edit function. In the previous version of the CMS, an entire column of a main screen was devoted to the bulk edit basket. The feature consumed about 30% of the screen real estate, but we found that very few people actually used it. Our solution was to introduce a single icon with a number beside it indicating how many items were in the basket. Clicking on the icon or number revealed the list of items in the basket through a modal dialog. This saved a huge amount of space and prevented the majority of users from being distracted from their primary task.

Bulkedit 1 Bulkedit 2

In the words of design guru John Maeda, “When a small, unassuming object exceeds our expectations, we are not only surprised but pleased.”

Minimize Visual Noise Link

So far, we’ve discussed minimizing complexity by killing or hiding features. But minimizing “perceived” complexity is also important. UX designer Brandon Walkin2 says, “The amount of visual noise in an interface has a great deal of impact on the perceived complexity of the interface.” Keeping visual noise to a bare minimum will make an interface seem easier to use. The two primary tools for reducing visual noise are white space and contrast.

White space, as defined by Mark Boulton3, “is the space between elements in a composition.” White space should be your default layout tool. One rule of thumb is never to introduce a design element if you could accomplish the same goal with white space. You will be surprised by just how much you can accomplish with white space alone.

While white space should be used in abundance, contrast should be used as little as possible. Design theorist Edward Tufte4, who is responsible for the notion of the “least effective difference,” urges designers to use the smallest visual variation required in order to effectively communicate an idea. Practically, this means emphasizing what’s important and dialing back everything else.

To illustrate both of these points, take a look at this pricing chart from TypeKit5 and then look at the modified version:

Typekit Original6
Original version7.

Typekit Modified
Modified version.

You’ll notice that the modified version contains a dark heavy border, not unlike the default border around HTML tables. Which version does a better job of minimizing visual noise? (The answer, of course, is the original.) Plenty of white space and minimal contrast help reduce visual noise and will make your application feel simpler.

Reduce, Reuse, Recycle Link

As an application begins to take shape, problems often recur in various parts of the application. And recurring problems characteristically tend to have similar solutions. Look for ways to reuse components of the interface. Reusing elements for different purposes has two advantages: less development time is needed, and a more consistent experience is given to the person using the application. If a user learns how to achieve one task, they can apply that same knowledge to accomplishing a second task as long as it is implemented consistently.

In the process of designing a CMS, we spent a lot of time perfecting form validation. We outlined invalid fields in red and even added red validation bubbles to indicate how many errors were in each section of the form.

Later in the process, a version comparison feature was added to the requirements list. Instead of creating an entirely new mechanism, we piggybacked on the validation framework. Form fields that had changed were outlined in blue, and we used blue bubbles for section totals. It was quick for us to deploy, and the interface was already familiar to users.

Validation

Version Compare

Reusing interface components is another way to reduce perceived complexity because users will then quickly become familiar with the application and know what to expect from it.

The Blank State Should Not Be Blank Link

The blank state is how an interface appears when no data is available, such as when someone uses an application for the first time. As designers, we spend most of our time figuring out how best to present content, and too often we forget that content simply won’t always be there.

It is vital to build in sensible defaults. The blank state is often the first impression someone has of a product and can be a deciding factor in whether or not they even get started using the application. A good blank state acts as a wayfinding device, helping the user take their first few steps.

Versions

The people behind Versions8 (a subversion client for Mac) obviously put a lot of thought into the blank state of the application. The application prominently highlights the top two actions a user might want to take when using it for the first time.

It bears repeating: don’t forget the blank state!

Showcase Link

We’ve all seen plenty of cluttered, complex software. Applications that effectively minimize complexity, however, are a bit harder to come by. Here are few that pull it off with flying colors.

Invoice Machine9 is user interface minimalism at its best. The application exemplifies economy of expression and pays extreme attention to detail.

Invoice Machine10

Freckle11 just makes you want to keep track of your time. The conveniently condensed interface shines with energetic color, turning a routine task into something fun.

Freckle Time Tracking12

Image Spark combines sleek black-and-white gradients with elegant typography. Its interface has few controls, making it simple to get around.

Image Spark

Ballpark13 has clear controls and an uncluttered interface, without being sparing in its use of color.

Ballpark14

Krop15, at its core, is just two form fields: location and keyword. It takes literally about five seconds to find relevant job postings.

Krop16

Fever17‘s entire purpose is to reduce the barrier between you and blog posts you’re interested in. It accomplishes this through a simple, unique interface.

Fever18

Screenr19 is an amazingly simple tool for recording screencasts and posting them to Twitter. It is notable not for all of the features it has, but for all of the features it doesn’t have.

Screenr20

Squarespace21 does a great job of hiding complexity. While it is a full-featured Web publishing platform, it does an impressive job of hiding its power behind a simple user interface.

Squaredspace22

The Final Word Link

First, reduce actual complexity by eliminating unnecessary features and then hiding what you can’t eliminate. Secondly, reduce perceived complexity by minimizing visual noise and reusing elements. And finally, use the blank state to help orient users.

Minimizing complexity in the user interface will help people learn your application more quickly, use it more effectively and be happier all the while. As jazz musician Charles Mingus said, “Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.”

Further Resources Link

(al)

Footnotes Link

  1. 1 http://gettingreal.37signals.com/ch02_Build_Less.php
  2. 2 http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/
  3. 3 http://www.alistapart.com/articles/whitespace/
  4. 4 http://www.edwardtufte.com/tufte/books_vdqi
  5. 5 http://www.typekit.com/
  6. 6 http://www.typekit.com/
  7. 7 http://www.typekit.com/
  8. 8 http://www.versionsapp.com/
  9. 9 http://invoicemachine.com/
  10. 10 http://invoicemachine.com/
  11. 11 http://letsfreckle.com/
  12. 12 http://letsfreckle.com/
  13. 13 http://getballpark.com/
  14. 14 http://getballpark.com/
  15. 15 http://www.krop.com/
  16. 16 http://www.krop.com/
  17. 17 http://feedafever.com/
  18. 18 http://feedafever.com/
  19. 19 http://screenr.com/
  20. 20 http://screenr.com/
  21. 21 http://www.squarespace.com/
  22. 22 http://www.squarespace.com/
  23. 23 http://37signals.com/svn/posts/1952-i-gave-a-talk-on-ui-fundamentals-for-programmers
  24. 24 http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/
  25. 25 http://www.cennydd.co.uk/2009/ux-london-in-review/
  26. 26 http://www.d7ux.org/
  27. 27 http://www.amazon.com/Designing-Obvious-Common-Approach-Application/dp/032145345X
  28. 28 http://gettingreal.37signals.com/index.php
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Tyler Tate is a user interface designer at Vyre in London. He is the creator of the 1KB CSS Grid, and his latest venture is TwigKit.

  1. 1

    Hi there Tommy,

    The CMS screenshots are of Vyre’s content management system. I have some more screengrabs on my Flickr page and a rough screencast up as well.

    Cheers,
    Tyler

    1
    • 2

      October 5, 2011 This guy has psoted so many times about me and my sick chicken Pearl that I can’t decide if he has a crush on me or is just morbidly obsessed with reading about animal deaths. Shit, I didn’t even read my own post as many times as he seems to have read it. Like, you wouldn’t watch Shoah (9 hour documentary on the Holocaust) repeatedly because that would be totally fucked up and distressing. I think this guy is an animal death pervo and I for one would like him to stop stalking me (and you!). Gives me the freakin’ creeps.

      1
  2. 3

    This is a great article.

    But, the techniques described here are not enough for the complexity of a data entry web application – the kind I am working on for our clients’ intranets.
    How to put 40 or 50 fields on a single screen, without scrolling (or, at least, minimizing scrolling)?
    How to connect several programs (or panels) in a chained flow, and not losing the information between them?
    How to integrate 5 or 6 grids full of columns and data?
    Fancy CSS does not help there. Big size fonts, “letting it breathe” and other decluttering techniques can not be applied.
    Here are a few examples of what I have to deal with every day: Picasa Album

    1
  3. 4

    Charles L Mauro CHFP

    October 7, 2009 6:21 am

    Interesting piece. However, after 30 years as a human factors engineering professional (aka usability expert) I can say with confidence that creating true simplicity in the face of increasing complexity is determined more by the attributes of the corporate culture where development is taking place than by any simple set of do’s and don’ts.

    3
  4. 5

    Garth Shoebridge

    October 7, 2009 1:42 am

    Another great one. Taking the usability out of usability. Thanks Smashing

    2
  5. 6

    Very well. Nice job. Thanks very much, it’s an exciting article.

    1
  6. 7

    Rajesh Trilokhria

    October 7, 2009 2:01 am

    very nice…….

    0
  7. 8

    Great information! Nicely written and very useful!

    1
  8. 9

    Great stuff!

    1
  9. 10

    Nice article… SM rocks ;-)

    1
  10. 11

    Johan de Jong

    October 7, 2009 2:23 am

    The only key phrase I can find in this post is: Less is More! Which should be used by every designer in the world!

    @all designers: Please don’t design complex items, since it’s very hard for a programmer to code in design. The best thing to do is create a (hidden) box where the programmer can do his/her thing on her/his way. When the coding is done all you have to do is modify the CSS to make it look nice ;)

    1
  11. 12

    What is the featured CMS, with the version compare screen?

    Looks interesting :)

    1
  12. 13

    Siddhant Mehta

    October 7, 2009 2:29 am

    Great article. Teaches the principles of UI very well

    2
  13. 14

    Great article Tyler, every point you make is spot on. Shame not all GUI designers follow this.

    0
  14. 15

    This was a great read, considering we’re about to embark upon a re-design of our in-house CMS.

    1
  15. 16

    This can probably be stated until eternity because people will never learn.

    Then you might ask, how the hell did they end up in charge and with all the money to spare? Well, there’s always a dumber fool willing to part with his money.

    As important as this article is, it will fall flat where it REALLY needs to be presented.

    1
  16. 17

    This article highlights an important topic. For many sites, it is an important issue. Many thanks for this article.

    1
  17. 18

    Ironic that the slugline ‘Minimizing Complexity In User Interfaces’ is followed by an advert using the most vile and disgusting animated gif I have had the misfortune to see in many a long while, one so bad that it throws me out of the article before I’ve even started reading it……

    1
  18. 19

    Nice article. Not sure if I completely agree with the points about axing features. If your product is attempting to do to much then that is an issue of its core design, not the user interface.

    This may be a utopian vision, but a ‘truly’ nice interface should not sacrifice functionality. Instead functionality should be presented to the user in a way in which they do not notice it – from its presence or omission.

    1
  19. 20

    Well done!

    1
  20. 21

    I think you guys misunderstand those studies claiming that users use only 20% of the features of a given product. It may be true that users only use 20%, but it’s likely to be a different 20% depending on who you ask. For example, I never use outline, commenting, or mail merge for word, but for others that is a deal breaker.

    1

↑ Back to top