Why usable design matters, and what we can do about it

Getting to the Right Forest, Part 2

In The Design of Everyday Things, Don Norman shares the humorous anecdote of Alice, who was driving with her friend Sally. Alice noticed that the rearview mirror wasn’t adjusted correctly on the passenger side, so she asked Sally to adjust it—or at least she meant to. What she actually said to Sally was, “Please adjust the window.”

Sally was puzzled and tried to get Alice to explain exactly what she wanted done with the window. Alice, on the other hand, couldn’t understand why Sally was having a problem responding to such a simple request. Alice’s solution was to repeat the erroneous request, louder and louder each time.

Not surprisingly, Alice’s best efforts didn’t solve the problem because she didn’t realize what the problem was.

Misdiagnosing the problem is a common human failing. But why does it happen? In my own experience, there are two main reasons. First, we have a tendency to be blinded by our own assumptions, our own world-view. Sometimes we realize we are making assumptions, but they seem so obvious that we don’t feel the need to question them. Other times, we aren’t even aware of the assumptions we’re making. Alice assumed she was communicating clearly. It took some time before she realized that she held this assumption, and that it was in fact untrue.

The second reason, easier to see, but perhaps just as hard to address, is that we don’t do the hard work of gathering data and thinking through the problem. Sometimes when I’m coding, I’ll be stumped by a tricky problem. I’ll try everything I can to figure it out—or so it seems. Finally, I’ll decide to post a question to a forum or help group, which of course requires a clear explanation of the problem and what I’ve tried so far. And more than once, I’ve discovered the solution to my problem in the very act of trying to explain it to someone else. I believed I’d thought through the problem and exhausted all my options, but I really hadn’t.

Thoroughly examining a problem can seem tedious and time-consuming, but it’s not nearly as time-consuming as repairing the mistakes that virtually always result from misdiagnosis.

So how can we avoid these traps and increase our likelihood of correctly pinpointing whatever problem we’re dealing with? Here are some suggestions:

  1. Get as close as you can to the problem. If possible, observe it as it happens. Don’t rely on someone else’s account or circumstantial evidence. See it for yourself.
  2. Ask questions. Is it really a problem? What led to it? Why do we need to solve it? What will happen if we don’t? What are our options? What are the consequences of each one? What would we do if money and time were no object?
  3. Write out the problem as a way of thinking it through. It may help to write as if you’re explaining the problem to a trusted friend or colleague. Chances are good that you’ll experience the same thing I did: the very act of writing out the problem will open your eyes to new information about the problem and potential solutions.
  4. Diagram the problem. In the software requirements course I took at Red Rock Research, we learned how to sketch use cases, complete with computers, systems, actors, and actions. What an eyeopener it was to make myself think through a design problem by sketching all the components and their interaction with each other!
  5. Collaborate. Others will likely have a different take on the problem and different insights into it. Not only that, when you get a group of people together who want to make a good faith effort to solve the problem, the ideas and insights of the group will feed off each other. I saw this repeatedly when I led a team of very talented, creative, and ego-free technical writers. As we brainstormed together, the insights and solutions we came up with were better than any of us could have come up with alone. The whole really was greater than the sum of the parts.

If addressing problems is a major focus of good design, then we can’t do better than to identify the right problems.

Getting to the Right Forest, Part 1

Usable design is both about solving and preventing problems. You might think it would go without saying that we want to be solving the right problems. But it’s not always as easy as it sounds.

Some time ago I worked at a place where the intranet search had a poor reputation. Results were all over the place, often with little or no apparent relevance to the search terms entered. I’d estimate that close to 50% of the time I couldn’t find what I was searching for, even though I knew it existed and that the specific search terms I’d used appeared on the page. Eventually I’d find the page by digging up an old email with the link or asking another employee.

Employees complained about the search, and the intranet engineers acknowledged the problem. Then one day I was surprised to hear one of the engineers talk about the need to make the search “fuzzier,” presumably so it would return more results. I remember thinking to myself, I don’t search to be fuzzier; I need it to be more focused! In other words, the problem wasn’t that I was getting too few results; I was getting the wrong results.

Here’s another example. One of my favorite sites beta-tested an elegant and powerful search form. It was in a narrow banner at the top of the page, and it offered flexible options that made it simple to run a complex search. Not only that, the search form stayed unobtrusive but visible as I continued to refine my results. I never had better search results than with that interface.

Then, for reasons that puzzle me to this day, the user-friendly beta design was scrapped and a less user-friendly one rolled into production. The new design dropped some of the most useful features of the beta; in addition, the search form was moved to a panel on the left of the screen. Even with some of the most useful features removed, the search panel was so long that it went “below the fold” on many monitors, making it necessary to scroll down to see the Search button. And because it was necessary to scroll down to initiate the search, results were loaded into the scrolled-down page so users had to manually scroll up to the top of the results.

Users complained about the new design, and soon an “improvement” was put in place: When the user clicked the Search button, the web page auto-scrolled to the top of the page.

Once again, the problem had been misdiagnosed. Having to scroll up after searching was only a symptom of deeper problems with the new interface.

In her thought-provoking blog post How Reframing a Problem Unlocks Innovation, Tina Seelig shares a quote attributed to Albert Einstein:

If I had an hour to solve a problem and my life depended on the solution, I would spend the first fifty-five minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.

Realizing there is a problem is a great first step, but it’s not enough. We need to be sure we’re not chopping down trees in the proverbial “wrong forest.” We’ve got to identify the problem correctly before we can solve it. How to do that is a subject for another blog post.

Microcopy and Disaster Avoidance

If you visited my blog over the last few days, you probably noticed it was down for a while. There’s a usability story behind that.

Last Monday I spent about four hours on a blog post, complete with complementary screen shots. I posted it and all was well, until I noticed that I needed to make a slight edit. I tried to log back in to make the changes, but I couldn’t. I kept getting this error message:

Now as much as I’d love to think that millions of people find value in my blog and were hitting it all at once, that seemed pretty unlikely. So I tried a number of typical troubleshooting strategies, all to no avail. Finally, because the problems started shortly after I upgraded my version of WordPress, I decided to uninstall and reinstall it.

That’s when things got interesting.

I’d installed WordPress using a simple WordPress utility page offered by my ISP, so I went there for the uninstall. On that screen, I was duly warned:

This tool can remove WordPress from your hosting account, or remove the installation from our records. These actions are not reversible!

[Uninstalling] will permanently delete this installation. This includes any files installed, as well as any database tables. Additional themes, plugins, modules, cache files, etc will be left behind.

I’d done enough uninstalls and reinstalls of various products to know that there was a good chance something would go wrong. So I carefully downloaded a copy of my blog site from the server to my hard drive. Then I uninstalled WordPress, reinstalled it, and checked my site. All my blog posts were completely gone.

No problem, right? After all, I’d suspected things wouldn’t go smoothly. So I went to my backup. Aha, there were the post folders, all neatly organized by month and year. I opened them up to start retrieving the lost posts—nothing. The folders were all completely empty.

At this point, I started to get concerned. How was it possible to have a complete backup of my site with no blog posts? Googling brought up an answer I definitely didn’t want: the actual text of my blog posts had been stored in a database table, which had been deleted along with my WordPress installation. Who knew?

Not me. Just to be clear, I have a pretty strong technical background. I’ve worked for IT organizations in various companies and managed web sites. But using WordPress was a new experience for me, and my assumption that content was stored in HTML files turned out to be false.

Fortunately, the story has a happy ending, as you can see from my blog (since almost all my old posts are back). Despite the warning that the uninstall was not reversible, I knew from experience that my ISP probably did have a backup of the database table. I contacted them and they were able to restore all but my last post, which had only existed for a few hours and wasn’t included in the timed backups. (Here’s a shoutout for the great help I received from Dot5hosting to get my blog restored!)

So there’s a lesson here, and it has to do with microcopy. I suspect that the average WordPress blogger is like I was and doesn’t realize blog posts are stored in a database table. That being the case, the following revised microcopy could help others avoid the fiasco I just experienced:

[Uninstalling] will permanently delete this installation. This includes any files you have installed; it also includes all content you have added, which is stored in MySQL database tables. (For instructions on backing up your database tables, click here.) Additional themes, plugins, modules, cache files, etc will be left behind.

There’s a feedback link on the WordPress utility page mentioned above. I think I’ll send them a link to this blog post. If it spares someone else the “adventure” I went through, that would be a good thing!

 

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.

Packing a Punch with Microcopy

Someone recently asked me if I’d ever written microcopy. I wasn’t familiar with the term. But as I learned more about it, it turned out I had written quite a bit of microcopy; I just hadn’t called it by that name.

Microcopy refers to short snippets of text which guide the user, in context, as they complete a task. In a post on bokardo.com, Joshua Porter describes it as “small yet powerful copy. It ’s fast, light, and deadly. It’s a short sentence, a phrase, a few words. A single word. It’s the small copy that has the biggest impact.”

Most often, microcopy is used to

  • instruct (“Enter your credit card billing address below.”)
  • inform (“You can change your choice later on the Preferences tab.”)
  • reassure (“We will NEVER give your email address to anyone else. Period.”)
  • warn (“If you leave the Name field blank, others will not be able to search for you by name.”)

Joshua Porter and Connie Malamed both assert that microcopy can make or break a design. In my experience, that’s not an exaggeration. An earlier post gave some examples of microcopy gone bad, with consequences ranging from confusion to late rent payments.

So how do you write effective microcopy? Consider these guidelines:

  • See things from the users’ perspective. What will they wonder about? Be concerned about? What mistakes are they likely to make?
  • Make it as short as possible while still being absolutely clear.
  • Make it noticeable. Microcopy doesn’t do any good if it falls in the user’s blind spot.
  • Test it on users. Something that might be perfectly clear to you may be obscure to your users.

Getting the microcopy right will go a long way toward getting the design right.

Sending the Right Message

When interface text works well, it’s unobtrusive; it sends the right message instead of getting in the way of the message.

Recently I attended a conference which provided an app for attendees. Among other things, the app allowed me to add other conference-goers as “friends.”

When I tapped the Friends icon to add my first friend, I got a screen that said, “You currently have no friends.” It made me smile because it sounded like some kind of backwards fortune from a fortune cookie. While I knew what was meant, a better alternative would have been, “You have not added any conference attendees as friends,” or “Your conference friend list is currently empty.”

That’s a fairly light-weight example: the end result was nothing more serious than humor.

Here’s another example from the same app, a little more problematic. When updates were available for the app, users got a message on a red background:

The arrow at the end of the message appears to be pointing to the left border of the gear icon, which of course doesn’t make sense. I initially thought that the arrow was just off a little and I needed to tap the gear icon. However, I discovered I had to tap the large red icon on the far right.

Of course it wasn’t too hard to figure out what I was supposed to do. But every time I saw the message, the inaccurate text drew attention to itself and distracted me, however momentarily, from completing the task at hand.

This example is intriguing because the designer was apparently trying to compensate for the inaccurate UI text by making the correct icon large and red, rather than solving the underlying problem. But the problem could have been solved fairly easily:

Inaccurate or unclear interface text isn’t always so harmless. An apartment complex where I once lived gave renters the option to schedule recurring online rent payments. Great convenience, right? So I signed up. When my rental contract came up for renewal some months later, I logged on to the site to make sure the new amount was shown (yeah, they’d raised the rent). I saw a screen like this (fake amounts, of course):

The title—Current Monthly Charges and Monthly Auto-Pay—led me to believe I was looking at my monthly auto-pay. The new amount was correct, so I logged off, confident that my rent would be paid on time.

Several days later, I found a demand for payment taped to my door.

I logged back in to the site, looked at the screen, and it still took me a few minutes and some playing around to figure out what was going on. Apparently when my contract was renewed, my old auto-pay was deleted. But the screen gave no indication of a cancelled auto-pay. It wasn’t until I clicked Schedule Monthly Auto-Pay that I was taken to a screen informing me that no auto-pay was set up.

When I examined the screen more closely, I realized the auto-pay columns were blank, and the sum in the Auto-Pay Amount column amount was zero. But I had focused on the section heading and rent amount, which were correct, so I didn’t realize there was a problem.

The simple addition of the text shown below would minimize the chance of error (and save a lot of hassle for renters):

Clear, accurate interface text can make the difference between a design that works and one that doesn’t.

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.

Why Else We Design: Of Fences and Ambulances

There’s a poem written in the late 1800s by Joseph Malins about townspeople living near the edge of a cliff. (Googling brings up a number of different versions). Because people kept falling over the edge, the citizens decided something had to be done. Two solutions were put forth: build a fence at the top of the cliff, or put an ambulance at the bottom of the valley.

In the poem, the vote came out in favor of the ambulance. After all, the slip over the cliff only might happen. But once someone falls, well, there’s real damage to take care of.

As crazy as it sounds, in real life we see examples of this type of thinking all around us. We see it when products are developed without thoughtful design. We see it when products are released without adequate testing. We see it when software offers us choices with no indication that one might be wrong—until we get an error message after choosing the wrong option. And the cost of correcting a mistake is virtually always higher than preventing it—often exponentially.

In an earlier post, I asserted that design is about solving problems. That’s true, but I think it goes further. Good design makes the right path clear and minimizes the chances of going down the wrong path. In other words, good design stops problems from happening in the first place.

Design Bloopers #2: Tablet Power Management

I love my Evo tablet—it has revolutionized the way I manage my life. Like most tablet owners, I try to maximize battery life. One of the main ways I do so is by keeping the screen on its dimmest setting when I’m indoors.

But my tablet has an odd quirk: when it alerts me that the battery level has reached critical, it simultaneously adjusts the screen brightness to the highest setting! At the very point when my tablet most needs to conserve battery power, the tablet changes my setting to drain the battery even more quickly.

Was this intentional? I doubt it. I can’t imagine a developer coding a battery alert to include a power drain. So it was probably caused by a unexpected line of code somewhere. But once again, it points to the importance of testing designs in realistic scenarios to make sure they work as expected and are free of glitches. User testing adds to the cost of the project; but failing to do user testing costs even more.

Beyond Fad to Functionality: Hop Off the Carousel

Someone at work asked a group of colleagues to check out a new beta web site. The home page featured one of those trendy, large carousels that took up about half the space “above-the-fold” on my large monitor.

“Looks great!” a couple of people quickly commented. And the image on the carousel was lovely. But I found myself wondering if anyone had thought about how the carousel affected user experience, rather than how pretty the picture was.

Then another colleague raised the same concern. As the discussion went forward, a number of issues surfaced from our own experience:

  • Interference with user goals. When users visit a site, they usually go for a specific purpose. Chances are good that the carousel content will have nothing to do with that purpose, so the carousel can make it harder for users to accomplish their goals.
  • Interference with communication. In addition, carousels typically take up a large chunk of screen real estate. In doing so, they push other content below the fold or even off the screen, making it harder for users to find information they need.
  • Quick obsolescence. Carousels have a short shelf-life. Once users cycle through the images (if they have the patience for it) the carousel becomes old news.
  • User tune-out. More likely, users don’t cycle through the images. So there’s a good chance they won’t see content the site owner thinks they will see.

That got me thinking—these carousels seem to be everywhere. So was I missing something? Or was this another example of a trend being adopted because it “looks cool” and “everyone’s doing it” without considering its impact on usability?

I did a little digging and found this telling post on conversionxl.com. It turns out that extensive usability tests concluded pretty much the same thing: carousels are ineffective. As one UX advocate, Lee Duddell, humorously noted:

Carousels are effective at being able to tell people in Marketing/Senior Management that their latest idea is now on the Home Page.

They are next to useless for users and often “skipped” because they look like advertisements. Hence they are a good technique for getting useless information on a Home Page (see first sentence of this post).

In summary, use them to put content that users will ignore on your Home Page. Or, if you prefer, don’t use them. Ever.

‘Nuff said.