UX Design Edge

Feature Hoarders: Extreme Edition

I have an odd fascination with A&E’s Hoarders and TLC’s Hoarding: Buried Alive. It’s a sad human tragedy, where people harm themselves and their loved ones only because they collect too much stuff, let it all pile up, and refuse to throw anything away.

It’s harsh to say, but I’ve seen many apps that look like they were designed by feature hoarders—the equivalent of room after room of features and options of questionable value that have piled up over the years because nobody was willing to make the hard decisions to get rid of them.

This post explores why feature hoarding happens and what you can do about it.

Potential value

I should start by saying that I sympathize with hoarders to some degree. While I don’t get the shopping sprees (I get more delight in not buying stuff), I understand their reluctance to throw things away. When I look at something, I try to see its value and I’m reluctant to throw away things that have value.

If you watch a few episodes and listen to hoarders explain why they collect all their junk, phrases like “potential value”, “I’ll use that someday”, or “that will make a great gift” keep coming up. Emotionally, they see value even though rationally the odds of that value ever being realized are extremely slim.

Feature hoarders think about questionable features and options the same way. Even though the features aren’t necessary and rarely used, feature hoarders see the potential value and cling to the idea that one day somebody will find them useful, no matter how unlikely.

The value of simplicity and organization

While hoarders overestimate potential value, they severely overestimate actual value. They also underestimate the value of simplicity and organization. Being able to easily find and use things that you really need is far more valuable than having possession of things you don’t use.

The key to simplicity is to understand that the features and options that users will use are far more significant than those they might use. Ease of use equals use, so things that are easy to find and use have more value. Ultimately, potential value doesn’t matter much.

A bad day for user-centered design

If you were to ask a usability professional how to make a difficult design decision, there’s a good chance they’ll say “Just ask your users.” This isn’t always good advice, and these hoarder shows illustrate why. When dealing with hoarders, every day is a bad day for user-centered design.

Have you ever noticed how user centered these shows are? The hoarder is involved with every decision. In the beginning, the consultant/therapist/expert asks the hoarder item by item “Can we throw this away?” Each time, the hoarder’s answer is an emphatic “No!”, often accompanied with an “I’ll use that someday” or “I’m going to fix that” rationalization. This grinding process usually ends with shouting and tears.

The problem with user-centered decisions here is that users are good at giving their goals and setting priorities, but they are poor at making the tough, detailed decisions. If you were to ask users if they want something, the answer is almost always yes. I call these “Do you want fries with that?” questions, and as a designer you shouldn’t ask them.

A better approach would be to ask the hoarder to go through the house and point out their favorite things and the things they use the most. Then, remove everything from the home (including the hoarder), clean everything up, strategically replace and reorganize what the homeowner really needs, then evaluate the results with the homeowner.

Changing culture

Still, I appreciate what the consultants/therapists/experts are doing. Is relatively easy to clear out a house—it’s much harder to change the behavior that lead to the hoarding in the first place. If the expert doesn’t change the behavior, the improvement will be temporary at best.

Remember: the junk is there for a reason. The hoarder thought it was a good idea to buy and to keep all that junk, and without a behavior change they will do it again.

If you are trying to simplify a UI, I recommend understanding how that complexity got there in the first place. Chances are those unnecessary features and options are there on purpose, and that purpose was well intended. Somebody thought the features were a good idea at the time. Perhaps customers requested them directly. Simplicity requires saying “no”—it’s much easier to say “yes.”

Sure, you can declutter a user interface, but unless you change your team’s culture by setting a higher bar for adding features and a lower bar for removing them, that clutter will soon return.

Making the tough decisions

The top takeaway of these shows is that decluttering is much easier said than done. So, what can you do to declutter your UI? Consider using one of these techniques:

• Gather real user data If you have the ability to gather actual usage data, you’ll have a strong case from removing unused or rarely used features. While I don’t advocate using data without interpretation, as long as there isn’t a discoverability problem, removal is usually the right interpretation.
• Highlight your top scenarios With your team, make printouts of all your screens, perform your top tasks, and highlight what you actually use during those tasks. Take a good hard look at what didn’t get highlighted. What bad thing would happen if they were removed? With this activity, you’ve demonstrated the answer: not much.
• Try a simplified version I’m a strong advocate of considering design alternatives. One alternative to always try is a simplified version of your current design. Instead of going through the grinding process of cutting feature by feature, just go directly to the simplified results and give it a try. I bet you’ll be surprised how nobody misses what was removed.

A devious use of iPhone design

Here’s a fun exercise to help your team simplify a UI and perhaps even change its culture. Assuming that you don’t already have one, have your team design an iPhone app. (If your app does many tasks, do this for a few top tasks.) Before starting, you might want to quickly review the iPhone guidelines, point out that there is only so much screen space, typing is a pain, and that the best iPhone apps focus on doing one task well.

Once you are done, evaluate the results by performing the top tasks. If successful, chances are your team will say things like “This is great!” and “If we had this, I don’t think I would use our original app anymore!”

Now, take a step back and compare the iPhone app to your original app. Justify the complexity of the original app. Do you really miss the features that were removed? Does the ease of use, speed, and delight of the simplified iPhone version more than make up for the missing clutter? Is there any reason why your original app can’t be more like the iPhone version?

I bet your team will have trouble justifying the complexity of your original app. The iPhone platform demands simplicity and starting from a clean iPhone slate allows your team focus on the essentials without legacy baggage.

If you do only one thing… Don’t be a feature hoarder. Focus the UI on the features and options that your users actually use, not on what they might use. Value simplicity, organization, speed, and efficiency by getting rid of what gets in the way. Get in the habit of creating simplified design alternatives and seeing if they work better. Chances are, they will!

Looking for UX design interview questions? Show candidates a complex UI and ask them to simplify. When they recommend removing features and options, challenge them by explaining why there are there and seeing if the candidate can still convince you to remove them. The ability to make a persuasive case for simplicity is a valuable design skill.

• Comment on this »


• Design process

Don’t design like a programmer, part 2

In my original Don’t design like a programmer post, I explored a common UI design trap that programmers often fall into, where you have a data structure, map that directly to a UI, and expect the results to be a good user experience. Sometimes that approach works just fine, but often it does not. The original post explains the potential usability problems in detail. This is an easy trap to fall into if you are thinking about the code instead of your users. As a developer myself, I’m very sympathetic here.

Someone named pankratiev put a link to that post on Y Combinator Hacker News and my site traffic just exploded—so much that my web host couldn’t handle it. (Thanks pankratiev! Please do it again!) While the feedback and comments have been positive, the top request was to show examples of good designs too.

I will start that challenge with this post. I finish with a proposed design in Part 3.

First, the original designs

Here’s the first UI in the post:

Actually, I didn’t say this was a bad design—rather I showed how this UI is a direct mapping of this data structure:

     struct UserOptions {

          bool        Option1;

          bool        Option2;

          String      Option3:

          String      Option4:

          ...

     };

I made this example generic to focus on showing how a programmer might map a code directly to UI. Is this a good UI? Impossible to say without knowing more, but the original post gives reasons why the odds are against it.

I then ended the post with this example:

I chose this wGetGUI example because it so clearly illustrates several of the problems I mentioned in the post. For example, note that almost all the controls are text boxes, check boxes, and command buttons, which map directly to strings, integers, Booleans, and function calls. You can just see the underlying data structures that need to be filled out:

     struct RetrevalOptions {

          bool        NoClobber;

          bool        Timestamping;

          bool        ContinueFileDownload;

          int         Quota:

          ...

     };

This is the UI everyone wants me to redesign—to something that doesn’t look like it was designed by a programmer. There are some problems with this task though:

• A good design requires applying a process, not jumping to a solution.
• A good design requires understanding the target users and their goals, top tasks, environment, etc.
• Unfortunately, I’m not a target user and don’t know anything about the target users and their goals, etc..

And as a courtesy to the wGetGUI developer, I really should add one more:

• It’s presumptuous to redesign somebody else’s UI without being asked.

So for this post, I’m going to outline a process but not attempt to improve the original design. This might seem like a cop out, but it’s actually the first key takeaway:

Key takeaway #1

You can’t significantly improve a user experience if you don’t understand its target users.

Sure, I could possibly make some minor improvements to the labeling, layout, tasks flow, and control usage, but that is hardly a giant leap for design. It’s not like changing a check box to a pair of radio buttons is going to be a big revelation.

UX design CSI: Focusing on the code is backwards

At this point, I’m going to take full advantage of fact that I’m not a wGetGUI user and look at the design from a fresh perspective. If I were more familiar with the tool, it would be easier to rationalize the design.

Key takeaway #2

Target users aren’t you. They have different knowledge, goals, and preferences.

My first observation about this UI is that I haven’t a clue what to do with it. A programmer might say “Well of course not, you haven’t read the documentation. RTFM.”

Key takeaway #3

Good UIs are self explanatory. Users shouldn’t have to read a document to figure them out.

I’m wondering what the tool is for. Shouldn’t the UI explain itself? Why should I have to figure it out? (Update: I tried to deduce what the tool was for, then later RTFM. Turns out I was completely wrong!)

Key takeaway #4

Don’t make me think…I shouldn’t have to figure things out using thought and experimentation.

Note that this UI presents settings and commands, but no obvious tasks. What are the tasks…what I am supposed to do? Am I supposed to know everything already?

Key takeaway #5

Good UIs are task centric, not feature or technology centric.

Just as the UI reveals how the programmer mapped the data structures to the UI, it also reveals the design process used. Something like:

Code -> UI

Instead, the process should look more like:

Target users -> goals -> tasks -> UI -> code

Key takeaway #6

The UI drives the code, not the other way around.

Starting with the code gets it backwards.

A process for doing it right

I’d now like to outline what the “target users -> goals -> tasks -> UI -> code” process might look like. There is any number of ways to do this, but I’ll outline a process that a programmer could actually use. No masters degree in design or UX professional staff required.

1. Define the product. Write a short paragraph to explain what the product is for. What is its value?  How does it differ from existing solutions? Why does the world need it? Why will people care?
2. Define the target users. Write a short paragraph to define the target users and their relevant characteristics.
3. Define the user goals. Write a short paragraph to explain why the target users are going to use the UI. What goals do they have? What problems are they trying to solve? What is going to satisfy them? Disappoint them?
4. Define the top user tasks. Write a short paragraph to outline specifically what the target users are most likely going to do. Focus on the top six or so tasks—not everything that might be possible. If you have defined more than six, you’re not focusing enough.
5. Define the user’s context. When and where are they doing these tasks? What facts do they know and data do they have? What do they not know? What other tools are they using? What other solutions are available?
6. Explain each top task to a friend. Suppose that you are explaining each top task to a friend who is a target user. Pay attention to how you would explain it: the steps, the order, the details, the language you would use, etc. Also pay attention to the things you wouldn’t bother to explain. The way you would explain the task in person is the right way to explain the task in the UI. This explanation drives the remaining steps.
7. Map your natural explanation into a page flow. Break that task explanation into steps, give each step a title that explains what the user is supposed to do, and list the elements required to do it. Don’t worry if you aren’t sure yet or if only one page is required. You can revisit this step as needed.
8. Design each page. Start with the page with the title that explains its purpose (exception: skip the title only if the purpose is so obvious that the title is silly). Give the layout a natural left-to-right, top-to-bottom flow. Start the task in the upper left corner or upper center. Emphasize the elements that need emphasis, and deemphasize those that don’t. Put related elements together so that their relationship is visually obvious. Map the interaction to the simplest, most constrained controls that do the job. To simplify the page, consider displaying optional elements on demand. Make the control to complete the task or advance to next step obvious.
9. Simplify and optimize the task flow and pages. Evaluate the design to make the operation simple and natural. Remove unnecessary effort or knowledge. Try to eliminate any frequently repeated actions. Provide reasonable default values. Take full advantage of previous user input, and avoid having users reenter information. Prevent input and other types of errors. To simplify, focus on what users will do instead of what they might do. Visually, remove unnecessary visual elements (like boxes, lines, 3D, meaningless icons.)
10. Review the communication Now compare the design to what you did in Step 6. They should match—after all, that’s the way you would naturally explain the task in person so any discrepancies suggest problems. For example, if you mention five options in your explanation, but your UI always offers 40, you’ve got a discrepancy.
    Make sure the purpose of each page and control is clear. Sometimes adding a word or two makes a huge difference. But don’t worry: the goal isn’t to have a lot text, but rather less, better text. Iterate as necessary.
11. Review the results. Now compare the design to what you did in Steps 1 – 5. Does it fulfill its purpose and provide value? Does it enable the target users to perform their top tasks to achieve their goals in their actual context? Any discrepancies suggest problems. Iterate as necessary.
12. Test with real users. You’ll never be sure that you’ve got it right until you test with real users. There are many ways of doing this, but direct observation is important. People have a tendency to blame themselves for mistakes, so they might not self-report all problems. Iterate as necessary.

Done!

If you design like a programmer, you might be doing a little of Steps 7, 8, and 9 before you start writing the UI code. That’s at best—at worst you are skipping all these design steps and going directly to writing the code. If so, mapping the data structures that the code needs to directly UI will be an obvious, natural thing to do.

Isn’t this a lot of work?

Some of you might be thinking: What a pain! I’d rather just map the code to a UI and take my chances.

Sometimes that approach works just fine. But if not, you’ll later have to choose between unhappy users and lost market share vs. starting over. This above process wins long-term because you are more likely to get the UI close to right the first time. Having to start over or fix fundamental usability problems complaint by complaint, bug by bug is a much bigger pain. But you know that, right?

Want to learn more? Check out UX Design Essentials and UX Design Basics

If you would like to learn more about the process I’ve just described, please consider taking my UX Design Essentials course or my online UX Design Basics course. I’ve designed both of these courses to help non-designers get started in UX design.  I’ve only scratched the surface here.

• 1 Comment »


• Design process