Home » Blog

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.

  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?

    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.

  2. 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!

  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?

    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.

  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.

    There are two top tasks:

    1) Downloading a site (or partial site) for offline usage.

    2) Downloading a site (or partial site) for backup.

  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?

    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.

  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.

    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!

  7. 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!

  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.

    I’ll do this in the next section.

  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.)

    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.

  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.

    Check!

  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.

    Check!

  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.

    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.

Correcting the reality distortion field: Learning the right lessons from Steve Jobs

There have been many stories about Steve Jobs lately. Walter Isaacson’s authorized biography Steve Jobs came out this week and is now the #1 bestselling book. Isaacson has hit the talk show circuit hard—I must have heard essentially the same interview at least four times this week.
Through Isaacson, here is what we are learning about Steve Jobs:

  • Steve Jobs was an arrogant jerk. A harsh but concise summary. He often treated his family and coworkers quite badly. He was quite full of himself.
  • Steve Jobs was cruel and humiliating. He didn’t hesitate to humiliate employees. Many Apple employees lived in fear of being fired—and rightly so.
  • Steve Jobs valued his own personal opinion above everything else. Jobs famously said “People don’t know what they want until you show it to them.” As a result, Apple has downplayed user research. Apparently Jobs wasn’t all that interested in the opinions of Apple employees either as he routinely ignored their input.
  • Steve Jobs was a demanding perfectionist. He wanted everything to be just right, and wouldn’t accept anything else.
  • Steve Jobs was a great innovator. At least, that’s what everybody says. But unless you define “innovation” as “perfecting ideas invented by others,” I believe Apple isn’t especially innovative.

Isaacson (like everybody else) is in a state of wonderment as to how this all managed to work out so well. All this worked out because, against the odds, Jobs was usually right.

I’ve seen other managers attempt to do similar things, and the results are consistently disastrous. For example, endlessly obsessing over colors might put you on everybody’s “A list,” but probably not the A list you have in mind. Being an arrogant, cruel, humiliating, self-absorbed, perfectionist jerk isn’t normally the road to success. It would a tragedy if this turned out to be Steve Jobs management legacy. Steve Jobs wasn’t successful because of these characteristics, but in spite of them. Not just anybody could have pulled this off—Steve Jobs himself was just barely able to be Steve Jobs. I fear that we are in for a generation of Steve Jobs wannabes screwing up every project they touch.

“You aren’t Steve Jobs, so don’t act like him.”

Exposing the reality distortion field

Let’s consider one example. When Isaacson describes Jobs’ famous reality distortion field, he explains how the Macintosh team said a project would take three months to complete. Jobs insisted that they do it in only two weeks, and lo and behold, they amazingly got the project done in two weeks.

This is pure BS. The reality distortion field here is that Steve Jobs deluded himself into thinking that is what actually happened. In the real world, when a team of talented software developers say a project will take three months to complete, it will probably take a bit more at best. People rarely overestimate. If they worked double time, perhaps they could get a week and half’s worth of work done in a week’s time. It is simply not possible for a team to deliver three months of real work in a couple weeks.

My experience is that if a project manager insists on doing a project in less time than the shortest estimate, the project will end up taking more time than the longest estimate. I can’t prove this, but Steve McConnell comes awfully close in Rapid Development: Taming Wild Software Schedules.

In the section Overly Optimistic Scheduling, McConnell tells the story of Microsoft Word for Windows 1.0. Based on metrics, McConnell estimates the optimal schedule to be 460 days. The shortest estimate the team gave was 395 days. Bill Gates insisted that it be done in 365 days. How many days did it actually take? Try 1887—5 times longer than planned! Why? Because cutting all the corners required to pretend that the product could be done in a year meant that the resulting code was poor quality crap that all had to be redone (or “stabilized”). This is how ignoring your team’s estimates usually works out, and I doubt that Jobs’ results were any different.

The Right Lessons of Steve Jobs

I think that Steve Jobs was absolutely brilliant visionary and project leader. But the brilliant part isn’t the story being told by Isaacson—those are mostly character flaws. Here’s my summary of the brilliant part:

  • Focus on experiences over features and technologies. The user experience is the only thing that matters. To users, the user experience is the product. Therefore, the user experience rightfully drives the design and features and technology are enablers—not the other way around.
  • Make it delightful. Well-designed products make an emotional connection. They are a joy to see and a joy to use. They are designed to make users fall in love with them.
  • Do less better. Better to do a few things well. Have a few, well targeted products instead of many, poorly positioned ones. Better to have a few great features than many not-so-great ones. Nail those and move on instead of constantly fixing problems in hastily designed and implemented features. Jobs once said “Quality is more important than quantity. One home run is much better than two doubles.”
  • Keep it simple. The simplest design that does the job well is better than a complex design that can potentially do everything. Well-designed simplicity is powerful—don’t let anybody sell you that tired “simple means simplistic” nonsense.
  • Set a high bar. Good enough is not good enough—aim for insanely great. Set high expectations for your products and your team. Have pride in the quality of your work.
  • Get it right the first time. Don’t start work on an innovative product until the technology is ready. Ship a product when it’s ready, not when it’s due. Don’t take three times to get it right.

These are the right lessons—the part of Steve Jobs’ life that you should aspire to emulate.

If you do only one thing: Remember that Steve Jobs’ vision, focus, and high standards are what made Apple great, not his personal character flaws.

A hypothetical Steve Jobs

Like the rest of the technology world, I am mourning the loss of Steve Jobs two weeks ago. Steve Jobs had an extraordinary understanding of the human side of technology, and courageously believed that technology should not only be useful but enjoyable—that it should make an emotional connection. He revolutionized the computer, music, and cell phone industries by doing a few things extremely well, keeping things simple and delightful, and waiting to release products until the technology was ready instead of merely possible. He led an extraordinary life and founded an extraordinary company.

To get an idea of how extraordinary, I’ve been asking myself some hypothetical questions. What if the circumstances where different? What if the real Steve Jobs:

  1. Had graduated from college?
  2. Had not been fired from Apple?
  3. Had not started Next?
  4. Had not bought Pixar?

Would Apple’s results be the same? Better? Worse?

To raise this thought experiment a notch, suppose Steve Jobs’ doppelganger (a different person with similar skills, philosophy, personality, and temperament—let’s call him SJ2) were to land a job in the following circumstances:

  1. A brash, young SJ2 at Jobs’ first Apple (pre 1985)
  2. A brash, young SJ2 at Scully’s Apple (1985 – 1997)
  3. A brash, young SJ2 at Jobs’ second Apple (post 1997)
  4. A brash, young SJ2 at Gates’ Microsoft (pre 2000)
  5. A brash, young SJ2 at Ballmer’s Microsoft (post 2000)
  6. An older, experienced SJ2 at Ballmer’s Microsoft (post 2000)

How would this person’s career go?

Of course, this is crazy hypothetical so there are no right or wrong answers. Please share your thoughts in the comments and compare your answers to mine.

UI is Communication book

Breaking news: My contract for my book UI is Communication was just approved! More later but if you are interested in being involved, please let me know.

 

Windows 8 Explorer redesign: My analysis

Yesterday I stumbled across Improvements in Windows Explorer on the Building Windows 8 blog. I found this post interesting because while it is superficially impressive, I see some fundamental UX design mistakes that I suspect will result in the redesign falling short of expectations. Students of my UX Design Essentials course and readers of my blog should recognize them immediately.

For a fun UX design challenge, read the UX Design Essentials Curriculum and The Politics of Ribbons, then read their post and see how many problems you find.

OK, what did you find? Let’s proceed…

What I like

First, for the good part. Here’s what I like with the Windows Explorer redesign:

  • Data driven decisions. The use of data instead of personal opinion deserves praise. However, there are several traps with using data to make design decisions, and I think the Windows 8 team walked right into them. More below…
  • Improved Details pane. The redesign looks much better than the current design and makes more effective use of screen space.
  • Copy path. This is a frequently needed Windows Explorer command that deserves its promotion to a top-level command.
  • More visible advanced search UI. The current Windows Explorer advanced search features are almost invisible and difficult to use.

I’ll add to this list as I discover more things, but this is it so far.

When you are a ribbon, every problem is an undiscoverable command

Guess what? Windows Explorer is getting a ribbon. What a surprise! Didn’t see that one coming. To be a bit snarky, I think Improvements in Windows Explorer could be accurately retitled How we used data to justify a ribbon for a simple utility that probably doesn’t need one.

Don’t get me wrong, I love the ribbon and think it is a fantastic UI innovation. But from The Politics of Ribbons:

The ribbon has one significant strike against it: it is the heaviest commanding solution there is. A good UX design principle is to use the simplest, lightest weight solution that does the job well, so applying this principle suggests that—given its weight—a ribbon should be among last commanding choices, not the first.

In UX Design Essentials, I identify the classic UX design process mistakes. Here’s #3:

Falling in love with one (usually first) solution.

It’s a good bet that the ribbon was not only the first choice, but the only serious choice considered. Using a ribbon was likely a politically driven decision justified with data. Look at the data…we just had to use a ribbon!

A good design process is about making choices on behalf of target users to create a product that satisfies their goals. But you can’t make a good choice if you have only one option to choose from. Focusing on a single solution short-circuits the design process.

To convince me that this is a great design, I want to see an exploration of simpler, lighter weight alternatives and a demonstration that the ribbon approach is in fact better. And if you practice effective prototyping, you can’t argue that would take too much time and effort.

Utilities: we’re just not that into you

Windows Explorer is a utility, meaning that it is typically used to support tasks initiated in other programs. It’s what Alan Cooper describes as a transient application, not a sovereign one.

This is a significant detail because it affects how people use the program and how you should make design decisions. Here are some implications:

  • User goals are elsewhere. Window Explorer is used to manage files, but nobody really has the goal of managing files. Users’ goals lie elsewhere—they want to browse the web; view their photos; play their music; view, create, and share documents, and keep their information secure. Users prefer to do these tasks in their current context, so, for example, you open Office documents using the Open or Recent commands within the app. Note that the iPad and iPhone don’t even expose their file systems, so there’s no need to manage files on that platform.
  • Usage is infrequent and brief. As a utility, users don’t spend that much time with Windows Explorer and that time is usually to perform a task step (initiated elsewhere) as quickly as possible.
  • Most users have low motivation. Users aren’t motivated to spend much time in Windows Explorer. Isn’t not a destination worthy of investment. If advanced users are motivated to learn more about its features, it’s in order to spend even less time with it or to automate tasks.

Bottom line is that users want utilities to perform tasks as quickly and simply as possible, then move their attention elsewhere. A complex utility, with lots of stuff you really don’t need, undermines this goal.

Doesn’t this feel UI way too complex for what should be a simple utility? Do you really want to wade through all this stuff to find a command? Do all these commands need to be visible on the screen all the time? Don’t you think there must be a simpler alternative that does the job better?

With over 200 commands, Windows Explorer looks like it was designed by a feature hoarder. If your top 10 of 200+ commands are 82% of usage, time to start cutting back.

BTW: Here’s a useful ribbon guideline that I think is appropriate:

  • Don’t use the scalability of ribbons to justify adding unnecessary complexity. Continue to exercise restraint—don’t add commands to a ribbon just because you can. Keep the overall command experience simple.

Well put!

The highlighter test

The highlighter test is a simple, quick way to evaluate how effectively a UI is using screen space. Gather your top tasks, perform those tasks using your design, then highlight the UI elements that are potentially useful for those tasks. If almost everything is highlighted, you’ve done a great job. If not, you’ve got some work to do.

Here’s my highlighter test for the Windows Explorer ribbon:

Note that I highlighted only 3 of 19 visible ribbon commands. Crikey!  The reason is that I use shortcut keys, context menus, or direct manipulation (usually drag and drop) for all the other commands. Yes, the data shows that Paste, Properties, and Copy are top commands, but that data also shows that 85% of usage comes from context menus and shortcut keys. I don’t expect the ribbon to change that much.

One benefit of traditional menu bars that deserves some appreciation is that you can fill them with every command you’ve got and nobody is going to care much. Not true with a ribbon.

Power user value propositions and personas

The key to user-centered design is to identify your target users, understand them well, and make good decisions on their behalf. Improvements in Windows Explorer mentions power users quite often, but doesn’t mention typical users specifically. Looks like the Windows 8 team is targeting power users. Nothing wrong with that if it’s appropriate.

A value proposition states the reason your target users will want to buy and use your product—especially when compared to the alternatives. Their post suggests that power users are using after-market add-ons like TeraCopy, QTTabBar, DMEXBar, StExBar (which BTW the ribbon-based Windows Explorer won’t support anymore). Power users also use command line and Windows Power Shell.

The “when compared to the alternatives” part of the value proposition is a killer here. While their post makes a strong case that the redesigned Windows Explorer has many features power users will like, they didn’t make the case that power users are going to care. Will a Windows Power Shell user switch to Windows Explorer because of the ribbon and a few new commands? I doubt it. And if not, are power users really the right target?

Good value proposition work would have revealed this all-important problem.

But wait, there’s more. Let’s start to create a persona for power users with a few key characteristics:

  • Wants to work as efficiently as possible.
  • Motivated to learn and memorize program features and commands to work efficiently.
  • Greatly prefers keyboard over mouse.
  • …

BTW: I wouldn’t expect “Desire to respect Explorer’s heritage” to make this list. Your design priorities should clearly align with your target user.

Now assume that you are a power user and want to copy the file you just selected. Which approach are you more likely to take:

  1. Type Ctrl+C.
  2. Move mouse to ribbon, click the Home tab, click the Copy command, move mouse back down to where you were working.

For this power user persona, I just don’t see #2 happening here. I know that the Windows team no longer uses personas. Perhaps they should.

What I would do instead, part 1: Scenario-based design

At this point, you might be thinking: OK then, what would you do instead? Glad you asked!

Note how the Windows 8 team is  focused on data, features, and feature discoverability. I mentioned in the introduction that using data is a much better way to make decisions than personal opinion. But there are several traps using data, the most important being that using data is often used as a substitute for thinking.

Data tells you “how much.” Knowing “how much” is important, but knowing “why” is far more important still. Raw data doesn’t tell you the users’ goals or what they are trying to do. It only tells you what they did and how often.

For example, the Windows data shows that Properties is the second most frequently used command. Why? Why do suppose users want properties so often? Is looking at properties a common task or goal? When you see a file, do you immediately think “I really want to see its properties”? No! The Properties command is a means to an end, but never an end it itself. The user is trying to perform some other task and checking Properties appears to be required in order to do it.

While a good design (that mindlessly follows data) would make the Properties command more prominent, a great design (that leads with data) would strive to eliminate the need for the command in the first place!

How do you do that? With scenarios! A scenario describes a specific target user trying to achieve a specific goal or task in a specific environment. Their post mentions Windows Explorer supports many different scenarios like viewing photos, playing videos, and playing music—then completely ignores that fact when justifying design decisions.

Remember: Windows Explorer is a utility that helps users manage files—a goal that most users rarely have!

A better approach is to design for the goals that users really do have. Design the best possible experience for viewing photos! The best experience for playing videos…for playing music…for protecting users data…for finding stuff. Supporting these scenarios should drive the design decisions, not raw data. So, for example, if you view a folder of photos, the top-level commands should be focused on the top photo tasks—and nothing else! And if done properly, excise tasks like displaying Properties go away because they are no longer needed.

Unlike task-based design, scenario-based design considers the user’s context—a great way to eliminate unnecessary complexity. In any given context, the user isn’t likely to need 200+ commands, but more like 5.

If you watch the video at the end of their post, Alex Simons show some tasks that look like scenarios. But those feel fake to me. Why? Remember that Windows Explorer is a utility and scenarios are tasks done in a specific environment. Real Windows Explorer scenarios should rarely start or end in program itself.  These aren’t “end-to-end” scenarios but rather what I call “technology vignettes”—scenarios fragments artificially limited to the component you are working on, but not tasks that users really do. Designs that hold up well with “technology vignettes” routinely fall down when evaluated with real scenarios—especially for utilities. They aren’t “end to end” but “middle to middle.”

What I would do instead, part 2: Nail the basics!

I really want things to work properly. I’ve found several basic features in Windows Explorer that just aren’t quite right yet, but in the interest of time I’ll limit myself to four:

  • Better performance and responsiveness. I don’t like waiting, especially unnecessarily. I don’t want to wait for Windows Explorer to load; to display thumbnails, previews, properties; to enable commands or drop context menus; to copy, delete, or rename files, etc.  Given a choice between a responsive app and just about any collection of new features you could name, I’ll chose the responsive app.
  • Better search. Google has set the bar for search user experience and Windows search falls well short. Too slow, too hard to use. I would happily trade a ribbon for better search any day.
  • Better presentation and previews. Windows Explorer currently has 8 view modes (!), many of which aren’t that useful. It also has a knack for choosing the wrong one by default so I constantly have to change it. And is it really that hard to choose appropriate column widths in Details view so important data isn’t cropped unnecessarily? Any why are file previews so often broken and don’t work in zip files?
  • Smarter error handling. Regarding scenarios, bulk file handing scenarios are important. Bulk rename (example: photo files) doesn’t work well.  Bulk file copies often fail because of some easily ignorable problem. Windows Explorer should just report the problem and move on instead of dropping dead in its tracks. (Sometimes these problems display a dialog with a Skip button, but I’ve discovered that Skip usually Cancels instead.)

These details weren’t mentioned in their post. Hopefully the Windows 8 team is addressing them, but I fear that focusing on the ribbon will distract from nailing the basics. I’ve seen that happen before.

If you do only one thing… When evaluating a design, take a step back and ask yourself what is driving your decisions. Technology? Features? Politics? Schedules, deadlines, and budgets? Data? While practical realities, these shouldn’t be the driver. Instead your design should be driven by providing value, satisfying user goals and tasks, delighting users by doing a few things exceptionally well. If you are using data, don’t let it become a substitute for thinking. Take the time to understand what the data is really telling you.

 

Want to learn more? Be sure to check out the UX Design Edge training courses. Every technique I’ve mentioned here is presented in UX Design Essentials.

Disagree? Leave a comment!

« Older Entries |

For more information, please contact info@uxdesignedge.com

All Content Copyright © UX Design Edge