Don’t design like a programmer, part 3 « User Experience Design Consulting & Training

Don’t design like a programmer, part 3

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.

I ended the post with this example, which shows what happens when you fall into this trap:

This has been my most popular post and the feedback has been very supportive. Still, several people said that they weren’t satisfied that I ended the post bad example without showing a good one, and asked me to provide an example of a good design. Easier said than done!

My first step towards this goal was Don’t design like a programmer, part 2, where I outlined a design process for good design and its various attributes. In this third post, I would like to put everything together, apply the process, and show a partial mockup of a good design that is user centered and avoids the “designing like a programmer” trap.

Two critical design problems

My original post was not a critique of the wGetGUI UI, but rather an exploration of a common UI design trap that programmers often fall into when designing UI. wGetGUI was just an example.

There are two critical problems with the original wGetGUI design that I must point out before continuing:

The purpose of the program is unclear. You need external knowledge to understand what the program does.
The mechanics of the program are unclear. You need external knowledge to understand how to use the program.

While these are design problems are quite common, I believe they are unacceptable. The purpose and mechanics of a well-designed program should be obvious from inspection, and should never require external knowledge, experimentation, or documentation to understand. The old programmer acronym of RTFM should be replaced with DTFUI.

By contrast, the more obvious design problems—the over complexity and exposing everything on a single surface—are of secondary importance and easy to fix.

Applying the design process

OK, let’s get down to business and apply the design process outlined in Part 2. Let’s call the new UI SiteNabber.

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?
SiteNabber is a simple utility for copying website files, primarily for site backup or offline usage. Without SiteNabber, users either have to copy the files manually or use a complex utility.
Define the target users. Write a short paragraph to define the target users and their relevant characteristics.
The target users for SiteNabber are intermediate computer users. They have enough knowledge about computers and the Internet to want to copy a website’s files, but they aren’t so advanced that they would prefer using a more complex existing solution. Experts who want to control every detail aren’t target users!
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?
The top user goal is to perform the download/backup task with minimal hassle, both in terms of effort to use the program as well as time to download the files. SiteNabber users need enough control over the task to avoid wasting time by using an efficient approach and not downloading files they don’t want.
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.
There are two top tasks:
1) Downloading a site (or partial site) for offline usage.
2) Downloading a site (or partial site) for backup.
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?
Users may own the site content but probably do not (if they owned the site, they would probably use a specialized site archival tool). Consequently, users probably don’t know the structure of the site, its specific file types, or their sizes.
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.
Here are the steps to copy a website:
1) Determine the url for the website you want to copy.
2) Chose the folder you would like to copy the files to.
3) Start the copy process.
4) Unless there is a problem (such as files that are too large to copy), that’s it!
Map your natural explanation into a page flow. Break that task explanation into steps, give each step a title that explains what users are 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.
Page 1: Gather the required input from Step 6, provide access to options. The title should explain what the utility is for.
Page 2: Give progress feedback, deal with any problems found. No input required. Title: Copying website files…
Page 3: Show task completion. No input required Title: Website copy complete!
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.
I’ll do this in the next section.
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.)
I’ll jump ahead here and point out that the target user knows the website url and where to copy the files to, but doesn’t know anything about the files being copied. But the target user does have the goal of not wasting time or disk space. Consequently, the options should optimized avoid wasting time and space by default.
A good optimization goal is that users should be successful on the first try instead of trial and error. That is, instead of attempting the copy, failing because of some problem, canceling, tweaking the settings to avoid the problem, and then starting over; the UI should be designed to handle problems as they are found.
Another optimization is to preserve all previous input and settings so that users don’t have to reenter them.
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.
Check!
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.
Check!
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.
Beyond the scope. But if you are a user, please send me your feedback.

A couple important takeaways

While working through the above process steps, two important takeaways really jumped out at me:

For a simple utility like this, these design process steps don’t take very long—you just have to think them through. Thinking them through by writing code is the opposite of agile. Saying that you don’t have the time to apply this process isn’t a convincing excuse.
The steps strongly suggest that the original wGetGUI is designed for a target user probably doesn’t exist. Its target user wants a simpler, easier to use UI than the command line version, yet somehow knows what all the command line options mean. This is the Using variable or technology names as control labels trap I identified in Part 1.

Page design

Now let’s cut to the chase and design some pages!

Page 1: Gather input, perhaps with an Option dialog.

Here is the main page that identifies the program and its purpose, gathers user input, and provides access to options.

The large main instruction at the top of the page explains the purpose of the utility. Should no longer be a mystery.

The website and folder combo boxes are used to get the source and destination for the copy. Combo boxes are used for efficiency, since previous input is likely to be reused in the future. The Browse buttons (labeled with ellipses) are used to display picker dialogs to help users with providing the input. Once everything is set, the user initiates the task by clicking the prominent Copy website button.

The options required for efficient copy are selected by default. Instead of sprinkling options everywhere, the options related to the source are accessed using Source options and the options related to file copying are accessed using Copy options. General advanced options are accessed using the Advanced button. I’ll look at options in more detail in the next section.

Page 2: Give progress feedback, deal with any problems found.

Here is the progress page:

The purpose of this page is to communicate the overall progress. Gory details like the current filename being copied aren’t necessary so they are omitted. I’m assuming target users really don’t care.

An interesting design challenge is to deal with large files that users might not need to copy without having to abandon the task and start over. Note that the first page has a Prompt for large files option. If that option is set, files that are larger than some specific size are prompted before copying. Here’s how that UI might look:

Here files greater than 1 GB are prompted. Users can select to copy them as they are found or wait until the initial copy is done, select the desired files, and click Copy large files. I haven’t tested this solution, but there is a lot to be said for eliminating trial and error.

Page 3: Show task completion.

Finally, the last page gives clear feedback that the task as been completed:

As a convenience, the page gives a link to the destination folder to complete the task from the user’s point of view. If in the top scenarios users are likely to want to access that folder immediately (which I’m not assuming here), a better approach would be to not display this feedback, but just close the program and display the folder to show task completion.

To wrap this section up, note how the pages closely match the task steps outlined in Step 6. If they were different, that would suggest a design problem.

Handling the options

Handling all the options is clearly a challenge with the wGetGUI design. In the interest of time and space, I won’t mockup screenshots but rather describe a good solution.

There are several techniques to simplify a UI. These are the most useful for this program:

Removal If an option is unlikely to be used, just remove it! Here are some reasons to remove options:
- There is one option that always works well, so alternatives aren’t needed.
- The program can determine the right thing to do automatically, so users don’t need to be involved.
- The option is so obscure that nobody uses it.
Goal based Better to have a few, high-level settings based on the users goals than a whole bunch of directly exposed technology knobs and dials that require users to map to their goals.
Contextual While anything might be (theoretically) possible in general, only a few things are likely in a specific context.
Organized Options are easier to find when well organized. If the options don’t fit well on a single page, the traditional tabbed property sheet is a good standard solution.

Let’s apply these techniques and handle the options in a variety of levels:

Level 0: Removal Just do the right thing without involving the user. For example, if a file already exists in the destination folder with the same size and timestamp, it’s the same file. No need to download, no need to ask. Given the target users defined in Step 2, it’s appropriate to be aggressive here. Remember that super experts aren’t the target.
Level 1: Surface most important, frequently used options For this proposed design, the Prompt for Large Files option is important enough to be surfaced to the top level. If the design had goal-based options (suppose the options for backup are different from those for offline viewing), those should be surfaced as well. I don’t think the other options justify surfacing. Certainly not a good idea to surface all of them!
Level 2: Contextual options The source and copy options are accessed contextually using the Source options and Copy options buttons.
Level 3: Advanced options I used an Advanced button to present any remaining options—assuming any remain. Ideally these would fit comfortably on a single page, but I would use a traditional tabbed-based presentation if not. Normally I recommend against using an Advanced label (generally, it’s better to use a more specific label), but that label is appropriate here because the remaining options really are advanced and infrequently used.

The design process puts a lot of emphasis on defining and characterizing target users and their goals. The challenge of handling the options illustrates why: good design decisions completely depend upon the needs of the target users. Don’t fall into the other classic programmer trap of designing for yourself or presenting everything the same way.

Handling the details

I haven’t yet performed Step 12: Test with real users, so there’s a good chance that I have some details wrong. This is normal and expected. Here is some feedback that might come up with real users:

I need all those options! The proposed design eliminates only the options that aren’t really needed—so any disagreement lies with what is really needed. To simplify, the focus should be on the probable, not the possible. Yes, I suppose it is possible that somebody using a website copy program doesn’t want to copy html files, but it sure isn’t probable. Better to remove such options.
Your design isn’t practical.The original wGetGUI design is a UI for a command line program, so you can’t get progress feedback (or some other problem.) Feasibility often comes up as an issue, so I want to make two important points:
- The user experience should drive the technology, not the other way around. Saying that the technology can’t support a good UX is usually a poor excuse. Fix the technology!
- Decisions made by backend/API developers affect the user experience. Such developers often claim that their work doesn’t affect the UI. This is nonsense. But this attitude explains why so much software has poor performance and responsiveness, poor error handling, poor feedback, and can’t be canceled.
But I like the original design… If so, that’s great. You had the motivation to learn how to use the utility, but most users don’t. This proposed design is targeted at those users.

If you do only one thing… If you design UI like a programmer, please try to apply the design process outlined in Part 2. It really does work and it gets you focused on your users instead of the code.

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.

Comment on this »

Design process

UX Design Edge

Blog

Recent Posts