Minimizing Complexity In User Interfaces

Advertisement

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

The first weapon for fighting the villain of complexity is a hatchet. Studies1 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 37signals2 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

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 Maeda3, “When a small, unassuming object exceeds our expectations, we are not only surprised but pleased.”

Minimize Visual Noise

So far, we’ve discussed minimizing complexity by killing or hiding features. But minimizing “perceived” complexity is also important. UX designer Brandon Walkin4 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 Boulton5, “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 Tufte6, 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 TypeKit7 and then look at the modified version:

Typekit Original8
Original version9.

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

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

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 Versions10 (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

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 Machine11 is user interface minimalism at its best. The application exemplifies economy of expression and pays extreme attention to detail.

Invoice Machine12

Freckle13 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 Tracking14

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

Image Spark16

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

Ballpark18

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

Krop20

Fever21‘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.

Fever22

Screenr23 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.

Screenr24

Squarespace25 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.

Squaredspace26

The Final Word

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

(al)

Footnotes

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

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

    Garth Shoebridge

    October 7, 2009 1:42 am

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

    2
  2. 2

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

    1
  3. 3

    Rajesh Trilokhria

    October 7, 2009 2:01 am

    very nice…….

    0
  4. 4

    Great information! Nicely written and very useful!

    1
  5. 5

    Great stuff!

    1
  6. 6

    Nice article… SM rocks ;-)

    1
  7. 7

    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
  8. 8

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

    Looks interesting :)

    1
  9. 9

    Great article. Teaches the principles of UI very well

    2
  10. 10

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

    0
  11. 11

    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
    • 12

      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
  12. 13

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

    1
  13. 14

    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
  14. 15

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

    1
  15. 16

    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
  16. 17

    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
  17. 18

    Well done!

    1
  18. 19

    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
  19. 20

    Perfect.. so useful specially for designers in middle east.. they rarely know about this stuff.. it was useful for me too.. thank you :)

    1
  20. 21

    especially liked the visual noise. nice way of putting the concept together

    1
  21. 22

    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
  22. 23

    Great article!

    Smashing Magazine makes me like usability more and more!

    1
  23. 24

    Very very hot article. Well done Tyler, I certainly haven’t followed some of your points. Will make amends.

    1
    • 25

      Posted on Precious beogglr, Thank you for uploading the prestigious post. I found it handy. Best regards !!

      0
  24. 26

    As in life simplicity is the best way forward and UI design is no exception. Thanks for a good read!

    1
  25. 27

    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.

    1
  26. 28

    Am I the only reader struck by the fact that there are 2–count’em–2! lines of the article text visible on the first page? The right-hand column takes up 45% of the entire interface, and the left hand column has huge ads at the top that push the content almost all the way off the page.

    Do the designers of smashing agree with the points in the article?

    Regards,

    Brad

    1
  27. 29

    Exceptional Article

    Posts like this make me want to become a designer.

    1
  28. 30

    Best Article I’ve read this year! I just started a new project and this immediately set me in the right direction. Thanks!

    1
  29. 31

    I read this because it was RT’d by blellow, who I respect. I am an unsophisticated user, and this article is excellent. (Even I could understand most of it.) I wish all designers and creators could read it and absorb it. I am hampered by not only my limited knowledge, but by older software and hardware and a dial-up connection. I think many designers forget that many users do not have the latest, fastest software, hardware and ISP connections. Anything that streamlines a site or application is gold to me. Very helpful. Thanks and best of luck to you. – Courtney H.

    1
  30. 32

    Excellent !

    1
  31. 33

    This post is an interesting collection of design patterns and principles, although it’s a stretch to lump this all under the banner of ‘simplicity.’ After all, what’s simpler than a blank blank-state? Unfortunately, the way this post is positioned is adding to the tiredest critique in all of web-dom… “it’s too cluttered.” “make it more googley.” Because it doesn’t encourage the development of an accurate vocabulary of design principles to have a meaningful discussion of why something works or not, this mantra of simplicity is highly overrated. Why not preach design literacy.instead?

    1
  32. 34

    Great post…
    very effective in explaining the basics for designing user-friendly UI and a good User Experience…
    Thanx!

    1
  33. 35

    This has come at the perfect time for me. I’m just about to undertake a massive job designing a significant application from the ground up. Thanks SM!

    1
  34. 36

    Thanks for this! Very helpful. Love smashing magazine!!

    1
  35. 37

    very inspiring artikel
    thanks smashing :)

    1
  36. 38

    Simple apps can have simple UIs, complex apps are harder… I have to collect 100′s of input variables from users multiplied by an arbitrary number of locations; 2 fields won’t cut it! These kind of articles just incite my managers to view my work as shoddy.

    1
  37. 39

    the black border around the typekit package is very boring. i have to say that. the rest is cool :P

    1
  38. 40

    Thanks for this post. You make very good points. My notes:

    1. It will always be difficult to decide what should and shouldn’t be there. There will always be users who will say: “I love your app, except it doesn’t have (insert feature here).” You can’t please everyone.

    2. Simplifying the user interface may not be the ideal solution for every app. Some users (or types of users) want to have all the tools at their fingertips — and don’t mind the clutter. We have to think about these users too.

    1
  39. 41

    Is it “Blank State” or “Blank Slate”? correct me if I am wrong. According to http://ui-patterns.com/collection/blank-slate its called Blank Slate when there is no information can be provided on an opening screen of an application.

    1
  40. 42

    What is this “The four seasons” screenshots thing? There is no link and its appealing to me, I would like to know more about it. Good name, tho difficult to google for it…

    thanks for the infos.

    1
  41. 43

    “80% of users use only 20%” – unfortunately those 80% of users don’t all use the same 20% of functionality.

    1
  42. 44

    Real good resources…
    Thanks

    1
  43. 45

    Nice one :)

    1
  44. 46

    Good article but I have to agree with Brad’s comment #26, the beginning of this article is full of clutter (ads, ads, ads). I really want to hear what SM and/or the author thinks

    http://img30.imageshack.us/img30/6474/smashingmag.png

    1
  45. 47

    really useful article. nice !

    1
  46. 48

    Very useful post. Thanks SM :)

    1
  47. 49

    MetroplexInteractive

    October 8, 2009 11:25 am

    You forgot to mention the most important element in good user interface design – user feedback. A designer will never understand how a user is going to interact with an application better than the actual user, so get plenty of feedback from your user group. Break your user group into sub-groups to better understand how each segment will use the application interface. Take the feedback from users and incorporate it into the design – then put back in front of the users for even more feedback. The process never stops – it’s a never ending cycle.

    1
  48. 50

    Floris Fiedeldij Dop

    October 8, 2009 12:04 pm

    Good article. :)

    1
  49. 51

    #26 – How much did you pay for your subscription to Smashing?

    I find the Smashing interface relatively simple to navigate…and the ads, the simplest way to pay for wonderful content.

    1
  50. 52

    Codemaster Snake

    October 8, 2009 5:04 pm

    This post goes into my book mark list

    thanks

    0
  51. 53

    @Vanco

    Definitely agree with your statements on handling complex data applications. All of the apps listed here are beautifully executed, but they all are so narrow in their scope that the design has not been truly challenged by the complication of displaying, say, 300 data entry fields on a single screen.

    There are a number of ways to handle complex and overwhelming amounts of data – but they are not accomplished by simply applying more white space and “Grabbing the Hatchet”. From requirements gathering to the application prototype the designer must be feverishly focused on condensing the data displayed at any one time and organizing it in a logical way for user interaction.

    Edward Tufte FTW!

    2
  52. 54

    Great article,

    80% of the people use 20% of the functionality: TRUE
    But different functionality : TRUE

    Solution: Why not creating different ‘views’ for different kind of users? Dreamweaver, Eclipse, Netbeans do it or let you customize the 20% that you use.

    Huge data entry pages: These systems are not only hard to use but prone to errors, input fields should be splitted in several screens and/or at least grouped in sections, ways to simplify/automate data entry should be used when possible (Yep I have made these ones).
    More than any other this applications require a simplifying mind behind them.

    Altogether a great read for both developers that tend not to care about this issues and designers that tend to ignore functionality and usability on the sake of misunderstood beauty!

    Thanks!

    1
  53. 55

    As always, love your stuff! Keep the great content rolling!

    1
  54. 56

    I was pleased to see Squarespace on your list. I use them for my blog, GigantiCo, and I recommend it to everyone based on its content management interface (they also have great customer service).

    cheers,
    Chris

    1
  55. 57

    Superb article – really helpful tips.

    1
  56. 58

    Less is more, sometime making the more less is the hardest thing to do. This is definitely an insightful article. Thanks for the read.

    Benga creative

    1
  57. 59

    Removing features is what developers are feeling bad to do… but very often is a must.

    2
  58. 60

    Real good resources and very helpful. I will bookmark this

    1
  59. 61

    I like the article. I have a clear goal in my current software project that aims at creating a really awesome interface and a lot of the focus is on usability and making the interface “get out of your way” so you can focus on the actual content and actions.

    When you create interfaces you have to deal with stuff like spatial memory and “recognize vs. remember”. At the same time you need features because people like to do stuff in different ways.

    So the pure aim is to create all necessary features and present them in the absolutely best way possible.

    Not to tout my own horn but I think that my software is on the right track. I try to mimic interfaces that people are used to and I have tools to let people use the same keyboard shortcuts as the “competitors”, aiming at reducing the stuff they have to relearn.

    In the projects blog I actually wrote a similar article on what I believe is the best approach to designing a good interface:
    http://www.luckymountainhome.com/

    I look forward to your follow up

    2
  60. 62

    Awesome Post.

    1
  61. 63

    So many missing images in this post :(
    Please fix so that we can look at the important examples!
    Great post otherwise :)

    thank you

    -1
  62. 65

    I agree with most of the things that you mention: design consistently, never leave blank pages (I specifically like that tip) , dare to take features out if they are not necessary. I however think that “grabbing the hatchet” is a blunt way of handling things: sometimes a specific feature is needed for one type of user, but it isn’t for another type of user. If you’d just grab the hatchet you’d be doing one user A a favour, but user B wouldn’t be too happy about it.

    When designing applications that reach out to a somewhat broader audience, I think designers need to keep in mind that they can’t just create a fits-all solution. After all, removing features that are deemed necessary by a certain type of user may lead to them abandoning the application, which can then lead to a drop in sales/conversion rate/…

    I have the same opinion on hiding features. While in some situations it might be a good/plausible idea to hide certain features and bundle them in a dropdown for instance, I do think this technique should be used with utmost care, as hiding features can lead to users not knowing (and therefore not using) them … due to the negative impact it might have this should not be used as a rule of thumb while designing intuitive interfaces in my opinion. Throughout Don Norman’s book “The design of everyday things” he refers to this specific item as “the visibility”. In order for something to work according to the user’s conceptual model, controls should be visible … if they are not, there is a good chance the user will err.

    A solution to the “grabbing the hatchet”-technique would be adaptive interfaces, in other words: interfaces that adapt to the user’s level of comfortability with the app (ie: their skill in using it). Utopically, this is probably something every UI designer should strive for when designing in his/her app, but this is rarely possible in real-world scenarios due to all sorts of parameters like cost, production time and mandatory testing loops (which also add to the cost and time).

    Having said that, when there’s little to no budget or time for building adaptive interfaces, sometimes there sadly isn’t much else you can do aside from grabbing the hatchet as it is probably the easiest way to trim down your app to an acceptable level.

    In conclusion I think that grabbing the hatchet and hiding elements are techniques that are used a lot (and will be used a lot in the future as well), but they should not be seen as the ideal solutions to solve new or existing problems, there are better alternatives to handle complexity, such as adaptive interfaces.

    0

↑ Back to top