User Interface Design
UI design is one of my many loves, and recently, a few things, like my shiny new digital camera, have gotten me thinking about it again. Now, I’m no user interface designer. I don’t claim to be, I don’t have a degree, nothing like that. This is all what I believe and what I’ve found to be true in my years as a computer user.
There are a few obvious things — Fitts’ Law, which describes how long it takes someone to point at a target, for example — but there are many little nuances that people don’t understand, realize exist, or take for granted.
The most important thing a UI designer can do is make their interface intuitive. It should be obvious what a button does, and how to do a certain task. This extends to things outside of the local interface: if you double click on an icon, you assume that it’s going to open an application. If you need to reply to an email you see in your inbox but that you’re not currently reading, the first thing you’d think about doing is clicking that message, and then hitting the reply button. We, as users, have been trained by years of use to know how to do these things, but there are still many inconsistencies between applications. The number one rule is that if grandma can do it, it’s a good design.
Making things obvious can involve a number of things, from a predictable behavior to a label to an icon. There’s a certain balance you have to acheive between being obvious and dumbing things down, however. The most-used functions are the ones that should be the biggest, most obvious, and easiest to get to. The lesser-used functions are still important, and shouldn’t be hidden away in a hard to get to location. It should take less than three clicks to be able to use them again. Tabbed interfaces demonstrate a variation on this: One palette is open with tools on it, but by clicking once, you see the new tools in that same palette. Clicking again returns to the previous ones. Contextual menus, menus that change depending on what you’re doing, are another way of doing this.
Another UI sin is making your interface too cluttered. There’s an art to this, and some companies have a harder time with this than others. Take the Microsoft website, for example.
While visually pleasing, it’s a navigation nightmare. First off, look at the sidebar. Microsoft is most known for one thing: Windows. No-where on that sidebar is their a link to Windows. It could be under “Products & Related Technologies,” or under “Customer & Partner Solutions.” Further, those links don’t really describe what you’ll find under each one. What is a “Customer Solution?”
Clicking on one of those links brings you to a page with a new interface to grapple with. There’s no longer the title bar at the top, or any information besides the sidebar and some labelled thumbnails. It’s anyone’s guess what happens when you click on the thumbnail. Once you’re at this new screen, you start to see commonly accepted user interface conventions thrown out the window. You can’t click the back button in the toolbar to return to the previous thumbnail view, nor can you go back to the Microsoft homepage. You have to direct your attention to the sidebar, find the “Microsoft.com Home” button, and click that, then redirect your attention back to main content.
Now consider the Apple site.
The very first thing you notice is the new iMacs. Below the picture are two links with images and labels that clearly indicate where they go. Scrolling down the page, you find smaller images, again with labels that tell you where the links they’re attached to go.
At the top of the page is a navigation bar with all the essentials on it: A link to the home page, descriptive, relevant information for people, and a search box that says search in it, and even has a little magnifying glass icon. The navigation bar presents the things that people care about the most — Apple’s Mac, the iPhone and iPod, downloads, and support — in a large, nonintrusive, and obvious way. You know that when you click on the “Mac” button you’re going to find things related to the Mac, and the Mac itself.
The comparisons between the Apple and Microsoft website bring up two important points. The first is that of speed. The Microsoft website forces you to direct your attention for a long period of time to the sidebar in order to figure out where you want to go, and in order to navigate anywhere on the site (that uses that layout: more on that in a moment), you must return to that sidebar, even if you just want to go back. Conversely, the Apple site lets you access information quickly. They have relevant, up-to-date content on their front page, so that if you want to find out about their newest product, all you have to do is click there instead of drilling down through their navigation.
Second, the Apple website uses a consistent layout. That doesn’t mean that it’s exactly the same, but it follows the same flow: Navigation at the top, brief information right away, and below that more specific information, and thumbnails in a row with labels. You’ll also notice that on the Apple site, you know when there’s more content on the page without looking at the scrollbar. Apple’s accomplished this by making sure you see the top couple of pixels of everything below your current view. Your eye picks up on this, and so without ever having to glance to the scrollbar, you know if there’s more on the page.
The Microsoft site, on the other hand, is centralized around a hub-like layout. You navigate to different sites, each with their own information and layout. Every time you go to a new site, you don’t know what navigation scheme you’ll be using, or even what kind of content you’ll find. If I want to figure out what updates there are for Microsoft Office on Vista, do I go to the Office site or do I go to the Vista site? A link may direct you to the proper place, but if it’s on a different site, like an Update website, you suddenly have a new interface all over again. It’s unsettling and disorienting, and makes users more likely to leave.
Interfaces, by definition, are not places to show of a shiny effect. They’re ways that people interact with the device, and so effects should only be used if they enhance the user experience and make it easier for the user to do what they want to do. The interface needs to be responsive as much as it needs to be intuitive. As Andy Ihnatko said, “If the interface stops to catch up with my scroll command, it’s no good to me.” Users are trying to do something, and as a result, any delay in what they’re doing irritates and distracts them.
User interface is an art, and making an interface that works well is a decidedly difficult task. It’s more than just slapping buttons onto a toolbar, and as with everything, the perfect interface doesn’t exist.