Minimizing Complexity In User Interfaces

Clean. Easy to use. User-friendly. Intu­itive. This mantra is pro­claimed by many but often gets lost in trans­la­tion. The cul­prit: com­plex­ity. How one deals with com­plex­ity can make or break an appli­ca­tion. A com­plex inter­face can dis­ori­ent the user in a mild case and com­pletely alien­ate them in an extreme case. But if you take mea­sures first to reduce actual com­plex­ity and then to min­i­mize per­ceived com­plex­ity, the user will be rewarded with a grat­i­fy­ing experience.

We recently faced this very chal­lenge while design­ing two Web-based appli­ca­tions, includ­ing an enterprise-level con­tent man­age­ment sys­tem. What fol­lows are sev­eral tech­niques that have helped us stream­line com­plex appli­ca­tions into light­weight user experiences.

Grab The Hatchet

The first weapon for fight­ing the vil­lain of com­plex­ity is a hatchet. Stud­ies have found that 80% of users use only 20% of soft­ware fea­tures. Not only are all those unused fea­tures a waste of devel­op­ment time, but they fre­quently detract rather than add value by mak­ing the appli­ca­tion more dif­fi­cult to use. Appli­ca­tions that try to do every­thing often strug­gle to do any­thing well. A suc­cess­ful appli­ca­tion is a lean appli­ca­tion: one that iso­lates a sin­gle prob­lem and solves it bril­liantly. As 37signals would say, “Underdo your competition.”

The best way to get a lean stream­lined appli­ca­tion is by elim­i­nat­ing fea­tures. When decid­ing whether a fea­ture is nec­es­sary, the default answer should be “No.” Make fea­tures really fight to be included. If it doesn’t help the major­ity of users accom­plish their fre­quent tasks, then it should prob­a­bly be left out. Don’t get me wrong, being the one who swings the axe is tough, but when cus­tomers wax lyri­cal later on about how easy the appli­ca­tion is to use, you can take all the credit.

Hide Com­plex­ity

If you can’t kill a com­plex fea­ture, the next best thing is to hide it. Too often, rarely used yet com­plex fea­tures take up more screen real estate than fre­quently used yet sim­ple fea­tures. This shouldn’t be. A good user inter­face should make the most com­mon tasks the most promi­nent and then hide rare tasks so that they don’t get in the way.

When we were redesign­ing our con­tent man­age­ment sys­tem, we weren’t able to kill one com­plex fea­ture in par­tic­u­lar: the bulk edit func­tion. In the pre­vi­ous ver­sion of the CMS, an entire col­umn of a main screen was devoted to the bulk edit bas­ket. The fea­ture con­sumed about 30% of the screen real estate, but we found that very few peo­ple actu­ally used it. Our solu­tion was to intro­duce a sin­gle icon with a num­ber beside it indi­cat­ing how many items were in the bas­ket. Click­ing on the icon or num­ber revealed the list of items in the bas­ket through a modal dia­log. This saved a huge amount of space and pre­vented the major­ity of users from being dis­tracted from their pri­mary task.

In the words of design guru John Maeda, “When a small, unas­sum­ing object exceeds our expec­ta­tions, we are not only sur­prised but pleased.”

Min­i­mize Visual Noise

So far, we’ve dis­cussed min­i­miz­ing com­plex­ity by killing or hid­ing fea­tures. But min­i­miz­ing “per­ceived” com­plex­ity is also impor­tant. UX designer Bran­don Walkin says, “The amount of visual noise in an inter­face has a great deal of impact on the per­ceived com­plex­ity of the inter­face.” Keep­ing visual noise to a bare min­i­mum will make an inter­face seem eas­ier to use. The two pri­mary tools for reduc­ing visual noise are white space and contrast.

White space, as defined by Mark Boul­ton, “is the space between ele­ments in a com­po­si­tion.” White space should be your default lay­out tool. One rule of thumb is never to intro­duce a design ele­ment if you could accom­plish the same goal with white space. You will be sur­prised by just how much you can accom­plish with white space alone.

While white space should be used in abun­dance, con­trast should be used as lit­tle as pos­si­ble. Design the­o­rist Edward Tufte, who is respon­si­ble for the notion of the “least effec­tive dif­fer­ence,” urges design­ers to use the small­est visual vari­a­tion required in order to effec­tively com­mu­ni­cate an idea. Prac­ti­cally, this means empha­siz­ing what’s impor­tant and dial­ing back every­thing else.

To illus­trate both of these points, take a look at this pric­ing chart from Type­Kit and then look at the mod­i­fied version:

Orig­i­nal ver­sion.

Mod­i­fied ver­sion.

You’ll notice that the mod­i­fied ver­sion con­tains a dark heavy bor­der, not unlike the default bor­der around HTML tables. Which ver­sion does a bet­ter job of min­i­miz­ing visual noise? (The answer, of course, is the orig­i­nal.) Plenty of white space and min­i­mal con­trast help reduce visual noise and will make your appli­ca­tion feel simpler.

Reduce, Reuse, Recycle

As an appli­ca­tion begins to take shape, prob­lems often recur in var­i­ous parts of the appli­ca­tion. And recur­ring prob­lems char­ac­ter­is­ti­cally tend to have sim­i­lar solu­tions. Look for ways to reuse com­po­nents of the inter­face. Reusing ele­ments for dif­fer­ent pur­poses has two advan­tages: less devel­op­ment time is needed, and a more con­sis­tent expe­ri­ence is given to the per­son using the appli­ca­tion. If a user learns how to achieve one task, they can apply that same knowl­edge to accom­plish­ing a sec­ond task as long as it is imple­mented consistently.

In the process of design­ing a CMS, we spent a lot of time per­fect­ing form val­i­da­tion. We out­lined invalid fields in red and even added red val­i­da­tion bub­bles to indi­cate how many errors were in each sec­tion of the form.

Later in the process, a ver­sion com­par­i­son fea­ture was added to the require­ments list. Instead of cre­at­ing an entirely new mech­a­nism, we pig­gy­backed on the val­i­da­tion frame­work. Form fields that had changed were out­lined in blue, and we used blue bub­bles for sec­tion totals. It was quick for us to deploy, and the inter­face was already famil­iar to users.

Reusing inter­face com­po­nents is another way to reduce per­ceived com­plex­ity because users will then quickly become famil­iar with the appli­ca­tion and know what to expect from it.

The Blank State Should Not Be Blank

The blank state is how an inter­face appears when no data is avail­able, such as when some­one uses an appli­ca­tion for the first time. As design­ers, we spend most of our time fig­ur­ing out how best to present con­tent, and too often we for­get that con­tent sim­ply won’t always be there.

It is vital to build in sen­si­ble defaults. The blank state is often the first impres­sion some­one has of a prod­uct and can be a decid­ing fac­tor in whether or not they even get started using the appli­ca­tion. A good blank state acts as a wayfind­ing device, help­ing the user take their first few steps.

The peo­ple behind Ver­sions (a sub­ver­sion client for Mac) obvi­ously put a lot of thought into the blank state of the appli­ca­tion. The appli­ca­tion promi­nently high­lights the top two actions a user might want to take when using it for the first time.

It bears repeat­ing: don’t for­get the blank state!

Show­case

We’ve all seen plenty of clut­tered, com­plex soft­ware. Appli­ca­tions that effec­tively min­i­mize com­plex­ity, how­ever, are a bit harder to come by. Here are few that pull it off with fly­ing colors.

Invoice Machine is user inter­face min­i­mal­ism at its best. The appli­ca­tion exem­pli­fies econ­omy of expres­sion and pays extreme atten­tion to detail.

Freckle just makes you want to keep track of your time. The con­ve­niently con­densed inter­face shines with ener­getic color, turn­ing a rou­tine task into some­thing fun.

Image Spark com­bines sleek black-and-white gra­di­ents with ele­gant typog­ra­phy. Its inter­face has few con­trols, mak­ing it sim­ple to get around.

Ball­park has clear con­trols and an unclut­tered inter­face, with­out being spar­ing in its use of color.

Krop, at its core, is just two form fields: loca­tion and key­word. It takes lit­er­ally about five sec­onds to find rel­e­vant job postings.

Fever’s entire pur­pose is to reduce the bar­rier between you and blog posts you’re inter­ested in. It accom­plishes this through a sim­ple, unique interface.

Screenr is an amaz­ingly sim­ple tool for record­ing screen­casts and post­ing them to Twit­ter. It is notable not for all of the fea­tures it has, but for all of the fea­tures it doesn’t have.

Square­space does a great job of hid­ing com­plex­ity. While it is a full-featured Web pub­lish­ing plat­form, it does an impres­sive job of hid­ing its power behind a sim­ple user interface.

The Final Word

First, reduce actual com­plex­ity by elim­i­nat­ing unnec­es­sary fea­tures and then hid­ing what you can’t elim­i­nate. Sec­ondly, reduce per­ceived com­plex­ity by min­i­miz­ing visual noise and reusing ele­ments. And finally, use the blank state to help ori­ent users.

Min­i­miz­ing com­plex­ity in the user inter­face will help peo­ple learn your appli­ca­tion more quickly, use it more effec­tively and be hap­pier all the while. As jazz musi­cian Charles Min­gus said, “Mak­ing the sim­ple com­pli­cated is com­mon­place; mak­ing the com­pli­cated sim­ple, awe­somely sim­ple, that’s creativity.”

Fur­ther Resources

• Watch Ryan Singer’s talk on UI Fun­da­men­tals for Pro­gram­mers (even if you’re not a programmer).
• Man­ag­ing UI Com­plex­ity by Bran­don Walkin is a good read on per­ceived complexity.
• Read a syn­op­sis of Don Norman’s UX Lon­don ‘09 talk, In Favor of Complexity
• Check out Leisa Reichelt and Mark Boulton’s work on the Dru­pal 7 redesign project. They were given a ton of com­plex­ity and it’s inter­est­ing to see how they’ve been sort­ing through it.
• Design­ing the Obvi­ous: A Com­mon Sense Approach to Web Appli­ca­tion Design by Robert Hoek­man Jr.
• Get­ting Real: The book by 37signals. If you haven’t read it yet, lock your­self into a small room with your lap­top for the rest of the after­noon until you fin­ish it.

(al)