User-Optimizable Design

We who work in user experience typically want to delight our users. However, doing so can be challenging: not only is our user base typically diverse, but our users’ needs and preferences change over time. They become more familiar with our product or system, and even with technology in general. In addition, their devices are often quite diverse as well.

Well, with a little creativity and a lot of user understanding, we can delight more of them more often. What’s the key? We could call it “user-optimizable design”: giving users some key choices to allow them to customize their experience in a way that’s best for them.

Here are a few of my favorites.

My Life Organized: Compact vs. Standard View

I love white space sometimes, but not on my to do list. I’d rather see more of my items at a time so I can plan appropriately. That’s why I love the way my favorite life management application, My Life Organized, gives a me choice of standard and compact view. Sounds simple, but it’s a big deal for me because the compact view makes my user experience so much better.

Compact View
Standard View

Gmail’s Reply-to Function

Frequently I bring up an email I’ve sent and reply to it when I need to send additional information to the original recipient (probably because I forgot something in the first email!). When I do this, virtually every email client puts my email address in the To box, which is almost never what I want. Why would I bring up an email I’ve just sent, and re-send it to myself at the same email address?

To my surprise and delight, I discovered that gmail knows what I really want to do. Even when I reply to an email I’ve sent, it places the original recipient’s address in the To box instead of mine. Every time I use that feature, I’m grateful a company took the time to understand its users.

Choice of Tips at Startup

Some applications, such as Techsmith’s Snagit Editor, allow users to choose whether to see a productivity tip each time they start the application. Techsmith understands that users may appreciate a helping hand at one point, but later get to the stage where they don’t need it.

Keyboard Shortcuts

Not everyone cares to use keyboard shortcuts, but for those who type a lot, they’re a major time-saver. Adobe Dreamweaver and Corel WordPerfect allow users to customize their keyboard shortcuts so they make the most sense fo the user. As a bonus, WordPerfect allows users to choose whether to display keyboard shortcuts on menus.

Ancestry’s Suggested Records

Anyone sleuthing for information on an ancestor likely wants to know about any and every record that exists. In a stroke of genius, Ancestry.com added a Suggested Records panel on the screen that shows information on a single record. Based on the user’s search parameters, Suggested Records shows records that are probably for the same person. Sure, not all the records turn out to be relevant, but the bulk of them are, which saves time and alerts researchers to records they may not have known existed.

Of course, user-optimizable design can be carried too far. Too many options for customization can be confusing and actually reduce usability. But if we understand our users well enough, we can provide them with some key customization options that will give them a better user experience.

The Problem of Proximity

I admit it: As a designer, I’ve occasionally indulged in the fantasy that users carefully (and appreciatively, of course) examine the interfaces I’ve created as they use them. Doing this, they see the logic of the design and are able to complete their tasks without error.

But my own experience using screens designed by others gives me a reality check. When I use a screen, I don’t have the desire or time to analyze it. Instead, I make quick judgments about features and functions based on their context, perhaps looking for key words like “Submit” or “Delete.” I want to complete my task without a hassle and move on.

Lately, though, I’ve used some interfaces that involved a bit of hassle. As I reflected on these experiences, I found a common theme: two elements placed in close proximity made it easy, even likely, for me to make a mistake.

Bait and Switch

When similar elements are placed near each other, it can be too easy to choose the one you don’t really want. For example, the browser image below shows that the x to close a tab is right next to the + to open a new one. It’s inconvenient to open a new tab you don’t want, but it’s worse to close one you didn’t want to close.

close tab and start tab next to each other

AOL’s desktop application has a similar issue with its email inbox. The button to delete an email is right above the link to view recently deleted email. More than once I’ve clicked the Delete button when I just wanted to view deleted mail. (At least when I do that, I can view the email I hadn’t meant to delete, once I click the right element!)

aol delete elements

To solve the problem, it isn’t enough to use different element types (such as a button vs. a link, as on the AOL screen). The better solution is to place the elements far enough apart that the user isn’t likely to click one when they meant to click the other.

Here’s an example. I designed an order fulfillment screen which had a button for saving an order and another for clearing the order form. I didn’t want users to experience the frustration of erasing data they’d meant to save, so I placed the Clear Form button on the opposite side of the screen from the Save Order button, rather than the typical position next to it:

order entry form with save and reset buttons far apart

With this placement, it’s likely that the user will only choose to clear the form intentionally, not by accident.

Hover to Hide

I enjoy family history, so I often visit genealogy web sites. Two of them use hovering where it’s likely to interfere with the task I want to do.

One site offers a History dropdown list which I use frequently. Right above it is a user dropdown menu which is activated by hovering over my logon name.

family history user and history menus

If I overshoot the History menu by even a pixel or two, I accidentally activate the user menu instead, which hides the History menu I’d intended to display:

user menu hiding history menu

Ironically, a more user-friendly approach appears right on the web site: both the Church Websites and History menus are activated by clicking, not hovering, so it’s much less likely they’ll get in the way when I don’t want them.

Here’s an example from a different site. After I run a search and then open one of the results, an All Results link appears at the top of the screen, making it easy to return to the results list:

all results link under menu bar

As you’d imagine, I use this link all the time. But if I overshoot it, I activate the Family Trees menu, which hides most of the link I wanted:

all results link hidden

As a user, I appreciate it when an interface makes it easy for me to make the choice I want, without other things getting in the way.

Making Me Think (Nod to Steve Krug)

Finally, here are several examples of potential confusion due to unclear placement of text. The screen below shows birth information for someone in my family tree. Notice the Sources and Tag options near the bottom of the image. When elements are placed next to each other and separated by a vertical line, they are typically choices on a menu. I assume that if I click Sources, I’ll be able to take some action related to sources; if I click Tag, I’ll be able to do something with tags.

However, this screen breaks with convention: Although Tag functions as I expect, Sources is actually a heading for any sources that may appear below (particularly confusing in cases where no sources appear).

example of unclear placement of text

Here’s another example from a dialog box which allows me to add a link to an email:

example of confusing text on link screen

At first glance, Test this Link appears to refer to the email address, since it’s (sort of) across from it; it’s actually a little lower than the email address, and it’s even farther away from the URL box. But when I click it, it becomes obvious that it refers to the URL box.

Okay, so neither screen is too hard to figure out with a few seconds of thought and experimentation. But shouldn’t UI text be clear without my having to puzzle over it, even briefly?

Here’s a simple change that makes the dialog box above more clear:

The proximity of elements to each other matters. It can enhance the user’s experience or interfere with it. It’s worth a designer’s attention.

Why I Love My Kindle App

You know a reading app has a great design when you find yourself wanting to use its features when you read a paper book. Here are my top five reasons for loving my Kindle app:

  1. Pinch and zoom text. A simple motion lets me increase or decrease the text size, depending on my needs. (In contrast, another reading app I use makes me navigate to a setup screen to choose the font size.)
  1. Choice of background colors (but not too many). I can have black on white, black on sepia, or white on black. My favorite is black on sepia. I like having limited options rather than having to worry about pink on green, for example.
  1. Search. Finding a passage or quote couldn’t be easier. This feature comes in handy at our neighborhood book club meetings.
  1. Highlighting. I don’t particularly like marking up my paper books—it can get messy, and it’s hard to erase if I change my mind. But the Kindle app gives me the freedom to mark a passage with a subtle highlight, knowing I can undo it at any time.
  1. Integrated dictionary. Brilliant! I love being able to long-tap a word and get an immediate definition. It makes my reading more meaningful and improves my vocabulary. This is by far my favorite feature, and yes, I find myself wanting to tap words in my paper books.

I don’t just consider the Kindle app user-friendly; it exceeds my expectations for a great user experience.

Smart Design on a ThinkPad

One of the little extras I appreciated most on my old ThinkPad laptop was the keyboard light. Whether taking notes in a darkened presentation room or finishing up a project while watching the last remnants of a sunset from my home office window, I often used the small light that illuminates the keyboard just enough to type.

There was just one small drawback: the light was activated by holding down the Function key in the lower-left corner of the keyboard while pressing the Page Up key in the upper-right corner of the keyboard. Now in daylight, of course, when the light is not needed, it’s no problem to find the two keys. But in the dark? Not so much. It was easy to hit several wrong keys before finally turning the light on.

Recently I replaced my old ThinkPad (RIP) with a newer, faster model. I loved it—but where was the keyboard light? Not on the Page Up key any more (which had moved anyway) and not on the Delete key, which was now in the upper-right corner of the keyboard. It wasn’t on any of the Function keys either. But I knew the laptop had one because it flickered briefly during boot-up.

Finally, I turned to the product documentation (which I should have done in the first place) and discovered the light was now controlled by holding the Function key and pressing the Space bar. Great idea! There’s no key on the keyboard that’s easier to find in the dark than the space bar. Kudos to Lenovo for a user-friendly change.

Book Review: Universal Principles of Design

Universal Principles of Design, by William Lidwell, Kritina Holden, and Jill Butler, has become one of my favorite design resources. The book is effective as a reference, but it’s also an enjoyable read straight through. It’s a book that practices what it preaches.

The edition I have (2003) covers 100 design principles; there’s an updated edition that covers 125. Not only is the book visually appealing, but its organization and layout make it easy to find information. There are two tables of contents: one which lists the principles alphabetically, and the other which lists them by category. Each principle gets a two-page spread, with an explanation on the left and examples on the right. The explanation is readable and the examples engaging and thought-worthy.

A key strength of the book is its cross-disciplinary approach. Examples come from areas as diverse as technology, psychology, and economics, showing how design impacts virtually every profession and every aspect of life. As a result, the book encourages thoughtful application of these principles to a wide variety of situations.

I find that I come back to this book time and again, for a refresher as well as new learning. If I had one suggestion, it would be for the authors to create an interactive online version, with all the benefits of hypertext and digital media. The basic principles won’t change, though, and that’s what makes this book a worthwhile resource for any designer.

Ambiguity—the Enemy of Clear Design

Design can send confusing signals when elements on the screen seem to contradict each other, or when they don’t follow expected standards.

When I go to turn on wireless on my laptop, I get this screen:

At first glance, it appears my wireless is already on: the most prominent feature on the screen (next to the bright red icon which turns out not to be an icon, but only a graphic) is the glowing green button labeled Radio On. But were I to assume the wireless is on, I’d be wrong: the current status is indicated by text under the word Status immediately to the left.

Furthermore, when I click the icon labeled Radio On, I get this screen:

This one’s even more confusing: I’d intended to turn the wireless on, and after doing so, I get a button that says Radio Off. However, it’s still glowing green as opposed to grey. I can’t tell immediately if the state hasn’t changed, or if wireless really is on, even though it says Radio Off.

To add to the confusion, if I accidentally hover my mouse over one of the other icons at the bottom of the screen, the green glow moves. I haven’t changed wireless status, but now the button in the main section looks even more like wireless is off.

It turns out the green glow simply indicates which button is active when one presses the Enter key on the keyboard. And that brings up the final confusion: the green wireless tower on the far left looks like a graphic because of its placement on the screen and its two-dimensional style. But it turns out that it also indicates wireless state: green if it’s on, grey if it’s off (see the first image above).

Is this screen impossible to figure out? Of course not. After using it a few times and experimenting a little, I know what the buttons do and how to read the current state. Essentially I filter out everything on the screen as noise except for simple text under the word Status. If I want to change the status, I click the button to the right, ignoring its color and text.

But should it have been that hard? Should I have had to puzzle over the elements on the screen or mentally filter out confusion? Probably not.

The examples below show how the screens could be simplified to eliminate much of the confusion. If wireless is on, the following screen could be displayed:

And if it’s off, this screen could be displayed:

Key improvements:

  • The new screen title is clearer.
  • The icon-that-isn’t-an-icon has been removed.
  • The state is unambiguously indicated with the tower icon and accompanying text.
  • The possible action to take is clearly indicated by adding a verb: e.g., “Turn Radio Off” instead of just “Radio Off.”
  • The confusing green glow on the buttons has been eliminated. If I were actually going to put this screen into production, I’d take the time to make one final improvement: I’d use a white glow on the buttons to indicate which is active for the Enter key, so it was clear the glow had nothing to do with wireless state.

Removing ambiguity can go a long way toward making a design more usable.

Kudos to Adobe: Great User Experience

I went to Adobe’s site to update Flash, and I’m impressed. Their page knew I was using Mozilla Firefox, and I was presented with Firefox screen shots to guide installation. No “if you are using such-and-such a browser” choices to wade through. Adobe removed the clutter so I could focus on the task at hand.

Now that’s thoughtful, user-centric design.