Deep Analysis of User Interfaces

Several questions pop up now and then: Why is the Start button on the bottom-left? Who decides where the close button goes, and why must we use these little boxes called “windows”, when we maximize them to fit our desktops anyway? But it was 4 am; we were sleep-deprived, and had deadlines.

But the questions still remain. How do interfaces work for us, and why in heaven’s name do we actually enjoy some of them?

Let’s start with some background...

The Science

Yes, there’s actual science at work here, and it dictates both the way user interfaces (UIs) are laid out, and how they become enjoyable.

The Law

All interfaces — more specifically, the ones that require pointing — start with a mathematical model called Fitts’s Law (some people will tell you it’s Fitt’s law, or Fitts’ law). They are wrong. The law describes the time to acquire a target (that is, be able to click on a button, hyperlink, or menu item) as a function of the distance to it, and the size of the target. You can test this right now: if your mouse cursor is in the middle of your screen, it’ll take you less time to reach an icon that’s closer — obviously. If you turn on Large Desktop Icons, you’ll be able to hit those icons faster — by milliseconds, of course, but those add up.

There are important conclusions to be drawn here. Firstly, big targets are good. Secondly, targets should be as close to the mouse pointer as possible. The most important conclusion, however, is this: the edges and corners of the screen are infinitely huge.

Think of it this way: no matter how much you move the mouse, the cursor will never go beyond the edge. So unlike a target that’s placed in the center of the screen, you’ll never overshoot a target that’s placed at its edge.

What does all this mean? Ah, but we must keep you on the edge of your seat for a bit longer. There’s another aspect to UIs, and it comes from the science of happiness.

The Flow

Since the 80s, Apple has been throwing its weight behind an interface style called Direct Manipulation (DM). With the ability to point and click at objects on screen comes the desire to control them — to move and rotate and push and pull and drag and drop (aha!) — and DM interfaces must fulfill those desires. Interfaces should feel like ‘driving a car’.

But why driving?

In 1990, Mihaly Csikszentmihalyi, a Hungarian professor studying happiness, described the concept of flow — a state of mind where you feel immersed, involved, and in control. And one very important source of flow is…yes, driving.

And so, DM interfaces must give you a sense of flow. Games do this all the time — the best games, as you have no doubt experienced, match themselves perfectly to your skills. They never feel so hard that you want to give up, but never so easy that you feel bored. Like driving.

And so, armed with these two pieces of knowledge, we can explain the mysteries of the universe! At least, those that pertain to interfaces.

The Answers

And now, we come back to some of our original mysteries, and some new ones.

The case of the Windows Start button

Now that we know the implications of Fitts’s law, this one isn’t hard to crack: corners are good, so if you’ve got something important you want users to access — say, a single button that gives users access to every function on their computer — you stick it in a corner of the screen. You’ll notice that even though the big, round start buttons in Windows Vista and 7 don’t touch the corner, you can still activate them by just throwing your mouse cursor to the bottom-left and clicking.

The case of the Mac menu bar

This one is a common irritant for Windows users who are used to menu bars being inside their programs — on the Mac, the menu bar is always on the top of the screen. Despite the culture shock, this is a good thing, according to Fitts’s law. The top edge f the screen is infinitely high, so no matter how far up you move the mouse cursor, you’ll always be able to use the menu bar.
The case of the contextual menu

You can’t really appreciate the importance of a right-click (contextual) menu until you’ve used a one-button Mac mouse. Not that Macs don’t have the contextual menus — the pre-Mighty mice just don’t have a right mouse button. But that’s not the issue here.

We have contextual menus because of the ‘keep the targets close to the cursor’ bit of Fitts’s Law — the menu appears wherever you right-click, and the menu item you want is a short distance away. The contextual menus we have today aren’t the best solutions, though: they’re vertical, so if the item you want is at the bottom, you have to move the cursor a longer distance than if it were at the top.

The best way to create contextual menus that embody all that Fitts would approve of is the pie menu — all the menu items arranged in a circle—though very few programs use one. There are two good things about pie-shaped menus: first, all the menu items are the same distance from your cursor, and second, you don’t need to remember the names of the items — eventually, you’ll be able to access them just through motor memory.

The case of the Mac Dock

We seem to be a bit fixated on the Mac, don’t we? The Dock is one of the ‘likeable’ things that Steve Jobs goes on about, and makes for some really nice-looking promotional material. But is it Fitts-y good? Let’s look at what we have, here: it’s on the bottom edge, so that’s nice. It’s got big, shiny targets; that’s nice too. What isn’t nice, though, is that those big targets take up a lot of vertical space — on wide screens, which don’t give us much vertical space anyway. You can work around this by making the dock really tiny, but turning on magnification so the icons get bigger when you approach them.

To add to the annoyances of the dock, it gives you moving targets. As you open more programs, the dock resizes itself, taking the Trash icon with it. So if, at any point, you thought you’d commit the Trash’s location to your motor memory, tough luck.

And yet, this happened:

The case of the Windows 7 taskbar

As Microsoft’s answer to the Dock, the Windows 7 taskbar inherits much of its silliness — the unnecessary height (there really wasn’t much wrong with the original short-but-wide taskbar, really) and the confusion between open applications and regular old shortcuts, to name a couple. On the other hand, it does bring some useful targets closer to the mouse cursor by way of jump lists — you can access recent folders, web pages, and so on just by right-clicking on the program’s icon. UI design-wise, then, there’s nothing to jump about, but there’s nothing overly awful here, either.

Moving on, then.

The case of the 3D desktops

This is another thing we must blame Mac OS X for. Features like Exposé brought to us the idea that windows don’t need to be drawings on a screen — they can be real objects than can be tossed around a screen, spread out like a pile of papers, and brought back together. Then came Microsoft’s Aero in Vista, and the Compiz/XGL/Beryl/whatever in Linux systems. Working with windows became so much more satisfying — grabbing your Linux desktop and rotating it like a cube, watching windows scroll like a pack of cards — it all became so much more real. A little more like driving a car.

Yes, its Direct Manipulation at work here, for a change. Now that even the most basic graphics card can handle the load of windows that are rendered as 3D objects, we can look forward to even more DM-oriented interfaces. BumpTop, for example, tries to bring the direct manipulation joy that you get out of your physical desk to your virtual desktop (it’s even got pie menus, incidentally). It lets you grab files and toss them around, resize their icons, and all sorts of things that you can do with real physical files.

And while we’re on the subject of DM, we can use it to explain one thing that’s baffled us for ages.

The case of the Enter that renames

If you’re using the keyboard to navigate the Finder on the Mac, you’re in for a nasty surprise if you try to open a file or folder by hitting the [Enter] key; for the Mac interprets hitting [Enter] as your desire to rename the file, rather than open it. After spending days reading about the science of UI design, we were able to explain nearly everything we saw and interacted with, except for this one silly, silly thing. And so, we turned to Bruce Tognazzini, who founded the Apple Human Interface Group. As you read, remember that DM is a mouse-centric philosophy: “Apple wants to facilitate direct manipulation, and that means that you can change the names of things without having to go somewhere else, like a properties window, to do so. There is no need or reason for someone to click on a document with the mouse, then move to the keyboard to press the Return key to open it when double-clicking will do.”

It’s a fair argument, but it confirms another thing that’s annoyed us about Mac OS X: Apple doesn’t expect you be using the keyboard that much; tough luck, keyboard warriors.

There. Now we can get some sleep.

End note

If, by any chance, none of these mysteries have ever bothered you, you might want to re-think what you’re doing with your life. Too many TV rays mush-ifying your brain, perhaps?

Without knowing what makes for an optimal experience, you can’t begin to customize your OS to work better for you. For example, Ubuntu users: get rid of that silly top panel and reclaim the top-right corner for something better — like closing maximized windows. And don’t think you’re being a ‘power-user’ by using small icons in toolbars — you’re actually slowing yourself down.

If, armed with this new knowledge, you’re able to solve your own unique UI mystery, share it with people. If you manage to customize a program in a way that makes the UI better, share that too.