When Gruber first linked the TripLog/1040 UI by Stevens Creek, I wasn’t kind either. Bright colors, controls seemingly placed at random. It was the opposite of what designers strive for in our circles. A mess. Soon the Flickr page was a schoolyard of insults. And then something interesting happened. TripLog’s designer Steve Patt posted a comment amidst the bile to share the rationale behind his design. The many who chose not to listen to him won’t learn anything, but the rest of us may find fruit in Mr. Patt’s thoughtful explanation and twenty years of software experience.

The first charge against TripLog is “clutter,” that there’s too much on the screen at once. We’ll get to clutter, but first we have to talk about speed. Patt explains that the #1 purpose of TripLog is to help people track their deductible or reimbursable mileage. If people can’t enter their trips very quickly, the friction of entering data will overpower the motivation to track. For customers, untracked data means miles that aren’t reimbursed. So speed is Patt’s top priority.

What does speed have to do with clutter? I once saw Tufte give a workshop in Chicago where he introduced a valuable concept. He said information may be displayed adjacent in space or stacked in time. Take a book for example. If two dots are on the same spread, they are adjacent in space. All it takes to switch between them is movement of your eye. Compare that to a dot on one page stacked above a dot on another page. You can’t see them at once. You have to flip back and forth between pages to see one dot versus the other.

The trade-offs between elements adjacent in space versus stacked in time are always in the mind of a UI designer. Placing many elements on the same screen reduces the need for navigation and gives users a comprehensive feeling of “it’s all at my command.” Moving focus from one element to another is instant and seamless. On the flip side, separating elements onto different screens slows things down with navigation while increasing clarity. There is more room for explanation and luxurious space when fewer elements occupy the page. The eye has less to filter through. The course of action is more obvious.

So did Patt put too many elements adjacent in space on one screen when he should have separated them out in time? Is his UI “cluttered?”

To answer that we should pull ourselves out of the computer and sink our feet firmly in the customer’s shoes. Patt explains that customers load the application for two reasons:

  1. They want to log miles they just drove
  2. They want to double-check that they logged a recent trip

The first is obvious. Patt explains the second:

There’s a very simple reason, which we know because we’ve been selling our Athlete’s Diary software for logging a different kind of mileage for nearly 20 years. It’s because when you start up the software, half the time you’ll be scratching your head saying, “Did I remember to enter yesterday’s ride (or run)?” ... You want to be able to answer that question immediately, with just a quick glance down to the bottom of the screen.

Half the time people want to add new entries. Another half of the time, people want to verify a recent entry. On top of that, people also like to confirm the accuracy of data after they submit it. These factors together form a motivation to place the “add an entry” and “verify recent entries” features adjacent in space. It’s a decision to optimize for instant access to both features at the cost of showing more elements on screen at one time.

Beyond first impressions

When we talk about “usable” or “intuitive” interfaces, Apple devotees and the web app crowd (myself included) tend to bias toward the first-time user. The idea is an interface is easy to use if new users can figure it out and get running quickly. Or an interface is “clear” if all the parts and functions can be immediately parsed upon eye contact. Typically this means stacking features in time so that each screen has fewer elements and is easier to digest. TripLog, while far from perfect, has a different focus. Rather than first-impressions, Patt is thinking about repetition. Spatial memory and adjacency play a major role in repetitive tasks. How many of you keep an assortment of pens, papers, and peripherals on your desk in specific positions instead of moving them in and out of drawers every day?

Patt’s bias for adjacency and speed continues inside the “Add an entry” block. There are two ways to log a trip: manually enter data in the fields or choose user-defined presets called “Frequent Trips.” Both methods are exposed. However everything can’t be exposed all the times. There are some features stacked in time too. Choosing a date “Other” than Today or Yesterday, selecting a different Car (for IRS purposes), and editing the Frequent Trips list are all behind the time wall and require navigation.

So what did we learn?

The fact that a screen is “cluttered” doesn’t automatically mean it is poorly designed or ill-conceived. To many of us, screens thick with adjacent elements are like cold water we prefer not to step into. The very fact that TripLog is no feast for the eyes attests to the difficulty of bringing clarity and order to a screen relying too heavily on adjacent features. It would be a fun exercise to redesign TripLog for more visual clarity without removing any elements.

However before we criticize we should look for successes. Where TripLog fails on style it may well win on speed and pragmatics. Patt has thought about his work and designed a product intentionally. Following fashion and the status quo is easy. Thinking about your users’ lives and creating something practical is much harder. Patt can work on his colors and alignment, and hopefully please his user base with a helpful tool. Meanwhile the rest of us would be wise to work on the quality and value of our criticism.