Post image for Streamlining user interfaces, part 1

Streamlining user interfaces, part 1

by Mike B. Fisher on March 11, 2009

Quick summary: Cluttered displays make for a poor user experience. Part 1 of this 2-part article discusses the importance of reducing clutter.

When evaluating interfaces and user experience for clients, many of my recommendations relate to simplifying displays and processes. In this first of a two-part article I’m going to discuss why streamlining is so important. In part two we’ll cover how to go about it.

Isn’t more better?

There are many reasons information displays and interactive processes end up more complex and difficult than they ought to be. Certainly feature creep is a common factor, as is design by committee and failure to research user needs upfront. But regardless of the influencing factors the end result is that interfaces often include more options and more information than necessary – often to the point of being counter productive. And while there are a few situations where more really is better, it’s generally not the case.

Why isn’t more better?

I’m going to borrow a metaphor from noted motorcycle racing instructor Keith Code. All human beings have a finite amount of attention at any given moment. Suppose that we think of a person’s full attention as being akin to a dollar they can spend. Each element in a person’s world that they wish to pay attention to costs them a portion of that dollar. In a perfect environment if your users are using your website or application while sitting in a quiet room free of distractions they can spend that entire dollar’s worth of attention on anything they see on screen.

But of course this isn’t a perfect world.

In the real world people contend with a multitude of distractions at any given moment: ringing phones (let’s say that costs a dime), loud co-workers (another dime), perhaps crying babies and barking dogs (ouch – at least 50 cents), and maybe a looming deadline for work (call that 15 cents) or even an oven full of pot roast (maybe another dime?). Everything that’s not directly related to what the user needs to accomplish right then and there costs a portion of the dollar’s worth of attention. So by the time a typical user begins to interact with your software or website, they may only have a few cents left to spend. Once their dollar is spent there’s nothing left; they simply can’t focus effectively.

How much do your screens cost?

Continuing with the dollar metaphor let’s say that every major element within your screen costs a nickel’s worth of attention. So a very simple website like Google takes roughly a nickel, maybe a dime if you want to count the ancillary links.  By comparison very complex screens that are stuffed to the gills with forms, images, animations and so on might be most of a dollar all by themselves. If your user is spending 40 cents of their dollar before they even begin to use your website or application, and your first screen costs another 60 cents – well, you’ve got a problem before the user has even started.

It’s not surprising that users often find simple, streamlined displays to be more appealing and less intimidating.

Attention cost: a study in contrast

Let’s consider two examples at opposite ends of the visual complexity spectrum. On the left Google’s home page; on the right is Go Daddy, a domain registrar.

google's website employs a very simple, usable interfaceThe Godaddy website features a more convoluted layout that's more difficult to use

Applying our dollar-attention metaphor to these screens it’s obvious that the Google screen is “cheap” while the Go Daddy screen is “expensive”. Now you might argue that the Go Daddy website does more (after all, they sell domain names, hosting, and all manner of other related services). But consider this: in the US Google’s website is the #1 gateway to all the information on the Internet. All of it.

I’d say Google’s home page is a real bargain in terms of its attention cost.

Another way to look at it: the squint test/blur test

Let’s look at the same problem from a slightly different perspective. Human eyes don’t process everything in front of them at the exact same instant; they very quickly scan from one part of the field of vision to the next and interpret things one at a time. The more things compete for a user’s attention the harder it becomes to find the ones that are important. One way to judge the complexity of a layout is to squint at it and see if the important areas are still easy to discern and tell apart from one another. For our purposes however we’re going to use a Photoshop blur effect since I can’t tell if you’re squinting while you look.

(By the way the “squint test” is also used by graphic designers as a way to see how a design might look like from a distance, or under imperfect conditions. And it’s used by fly fishermen to see how a lure might look to its intended audience.)

Here are the same two home pages with a Photoshop blur effect added:

Google's website is still usable even when applying the "blur test".Godaddy's home page is problematic when seen through the "blur test".

As you look at these examples consider these two questions:

  • Where is the most important functionality and information?
  • How well does it stand out from everything else?

In the Google example the answer should be fairly obvious since even with a blur we can still see that there’s one field, and it’s right in the center of the screen. Going back to Go Daddy (I don’t mean to harp on them but really…) we can see that under blur/squint conditions it’s harder to know what’s important. Sure, there’s a big orange area in the middle of the screen – that’s probably important. But there’s also an orange area to the left, as well as numerous colorful graphics spread across the page – and multiple forms scattered throughout.

As a side note (since sooner or later someone will accuse me of having it in for Go Daddy) let me point out that there are plenty of other examples of websites and applications that don’t fare well with the squint/blur test. Would you say it’s obvious where to find the key information and functionality on these pages?

Where are the key interface elements of this screen?Which areas of this screen are most important?

Okay, so maybe more isn’t better

I’m hoping you’re with me on this: with interface design less isn’t just more, it’s essential. Helping users focus on their goal(s) and enabling them to find information quickly and move through interactive processes with minimal friction is good for everyone. For users it means less time needed to find and do what they want, a greater chance of success, and greater satisfaction. For companies it means happier customers, higher conversion and transaction rates, and lower support costs. Who wouldn’t want that?

In part 2 of this article we’ll open the hood and look at some things to think about as you approach simplifying your screens and processes to make them faster and easier to use.

Photo credit: annia316. Creative Commons licensed.

Be Sociable, Share!

Related posts:

  1. Simple user interfaces: the snow plow principle, part 2
  2. Simple user interfaces: the snow plow principle

Leave a Comment

Previous post:

Next post: