by Rick Holzgrafe
"The first 90% of the job takes 90% of the time, and the last
10% takes the other 90%." Ever heard that one? It's true -- when the
programming's done and all the features work flawlessly, you're not nearly
done preparing your product for release.
I think a better quote is "Sweat the details." Tiny details matter more than many programmers think. Your potential customers want to have confidence in your product. The more flaws they can see in it, the less likely they'll be willing to pay, even if the product performs its job perfectly. That may not be rational, but it's true.
So what kind of details are we talking about?
This one took a while for me to learn: people are more willing to buy
a product that looks good. Prettiness is not a substitute for robustness
or functionality, of course. But the better-looking your product is, the
more copies you will sell.
The best advice I can give you here is that if you are not an artist (and especially if you don't have much taste) then you had better find one. Talk a friend into doing it for free, or hire someone you can afford. A tasteful splash screen, a spiffy logo, cool icons and button labels all go a long way toward making a good impression. Every time I've improved the appearance of Solitaire Till Dawn I've had a big jump in sales, and I don't think it's a coincidence. Pretty pays!
Every platform -- Mac, Windows, Unix, you name it -- has a "style."
The Mac especially has a reputation for a completely consistent user experience:
in every application, you find the commands for Quit, Print, Open, Save,
Cut, Copy, Paste, Undo, and many others in the same place, with the same
names and the same keyboard shortcuts. Most Mac developers have learned
by now not to mess with those, because Mac users will turn their noses up
at any application that gets them wrong.
But there's much more to good HI (Human Interface) design than those obvious points. For example:
Lay Out Dialogs and Alerts Carefully -- Many programmers create cluttered, crowded windows. Users prefer to see windows with only a few controls in them and plenty of white space all around. What controls and displays there are should be carefully organized: related controls should be together, perhaps with a box around them to group them and separate them from other unrelated controls. Align checkboxes and buttons so your layout doesn't look sloppy. Place common elements consistently -- the OK and Cancel buttons should be in pretty much the same place in all your windows. If you display an icon ("Stop," "Warning," "Note") put it in the same location in all windows, and so on.
If you simply have too many controls, consider using swappable panels: some way for the user to select a category of controls so that the window displays only those controls and hides the rest. This technique lets you cram a lot of controls into a smallish window without crowding. Have a look at Netscape Navigator or Microsoft Word for some examples.
Apple Computer has published Human Interface Guidelines for Macintosh authors. These Guidelines specify in detail where icons and buttons should be placed, how large these elements should be, how much whitespace should surround them, the proper use of color and sound, and much more. Although they are intended specifically for Mac programmers, the advice is good and much of it is applicable to any platform.
Avoid Dialogs -- The fewer modal dialog windows you present, the better. They interfere with the user's workflow (or "playflow"). Often they are used to report error conditions of various sorts, so a good way to eliminate them is to reduce the number of possible errors that need to be reported to a user.
A good bad example is a solitaire game I saw once. To move a card, you first had to click on it. Then you had to go click on the place you wanted to move it to. If allowed by the game rules, the card would then make the move to the new location. Sounds simple, but it was annoying to use. If you clicked on an illegal destination, then you got an alert window in your face, telling you that you couldn't make that move. Worse, if you clicked a card you wanted to move then changed your mind, there was no easy way to cancel the move. You had to click someplace illegal, suffer the alert in your face, and dismiss it before you could try to move a different card. Most annoying was when you forgot that you had to do it: you'd go click on some other card you'd decided to move instead, the program thought you wanted that second card as the destination for the first, and BEEP! In your face with an alert.
A better interface is to have the user drag the card, and drop it over the intended destination. This is a single click-and-drag, where you push down the mouse button and keep holding it down while the card follows the mouse. When you release the button, the card drops. If the card is not dropped over a legal destination, there is no alert or annoying beep: instead the card just quietly zips back to its starting point, and the user can immediately try to move something else. (An improvement is to have legal destinations highlight as the card is dragged over them. Then it's no surprise at all when the card goes back to its starting point. You already knew it would because the intended destination wasn't highlighted when you dropped the card.)
Another, simpler example is the usual behavior of menu items like Print and Close Window in word processors. These commands are meaningless if there is no document currently open. A poorly-made program will give an error message if the user selects those items without a document open. A better program will show those menu items as disabled whenever they shouldn't be used, and then ignores them if they're selected anyway. No error alert is needed: the user is neither surprised nor confused when a disabled menu item does nothing.
If you can design your interface so that the user can't make a mistake,
you'll eliminate a whole class of user annoyances, and avoid writing a lot
of boring dialogs and alerts.
Too Many Options Are Bad -- This is an easy sin for a programmer to commit. Every time you have to decide whether a feature should work this way or that way, the temptation is to make it work both ways, and give the user the choice in the form of an option. And certainly this is the right thing to do sometimes: I would never argue that all options are evil. But too many options will frighten off users. Not everybody out there likes to think of themselves as a power user. Most people want programs that are simple to understand and use. Anything that looks too complicated will be tossed in the trash.
So how do you keep options to a minimum? One way is to ask yourself how many people will really need this choice. If 90% of your users all want the feature to work the same way, you might be better off just hard-coding it and letting the other 10% be frustrated.
Sometimes options can be "hidden." Peter N Lewis's ftp client Anarchie puts up a progress window during file uploads and downloads. The window shows progress in a variety of ways; one readout is a text-and-numbers estimate of how much longer the operation will take. But not everyone wants to see that information. Instead, some want to know how long it's taken so far; others want to know what time it will be done ("5:35 pm" instead of "12 minutes from now"). And many people will want all of the above. Peter could have put all those different indicators in the window simultaneously; but this would have made a huge, cluttered, unreadable display. He could have put a bunch of options in a Preferences window, but this would just have made the Preferences window complicated instead of the progress window. What he did instead was simple and effective. He left the Preferences window alone, and put only one such readout in the Progress window. But if the user clicks on that readout, it will switch to an alternate form. Click again, and see a third form. Click again, and you're back to the first. Power users learn about this by reading the documentation or the on-line "Tips," but users who don't care may never know the feature is there.
And sometimes, options are just the wrong solution to a problem. A utility of mine (The Tilery) lets you switch easily among open applications by clicking on a tile that displays an app's icon. When you click a tile, The Tilery comes to the front as all applications do when their windows are clicked; it then immediately tells the operating system to bring forward the selected app instead. The Tilery winds up as the second-to-frontmost app, right behind the one whose tile was clicked. This is fine until the user decides to quit from several apps at once. He types command-Q to quit from the frontmost app. Then the next app in line, The Tilery, automatically floats to the front. But The Tilery doesn't look like a normal app, and users tend to forget that it is. The next thing they do is type command-Q to quit from the app they think is now frontmost -- and the bad thing happens: The Tilery quits instead. Very annoying, and I used to get a lot of mail about it.
My first solution to that problem was to put in an option to have The Tilery ignore command-Q (so that you had to select its Quit menu item with the mouse to make it quit). That solved the problem, but in the wrong way: The Tilery no longer quit unexpectedly, but only if you had that option set. You had to read a bunch of documentation to find out what the option was for, and the menu item that controlled it contributed to the general clutter and apparent complexity of what should be a simple utility. And the basic problem still existed: The Tilery wound up frontmost at unexpected times. To quit more than one app, you had to manually bring the second and following apps to the front before you could type command-Q to them.
The real solution was to find a way to have The Tilery remain in the background until and unless it is deliberately brought forward. It took me a while to figure out how to do this, but I did it, and the result is a great improvement. Now when you quit the frontmost app, something other than The Tilery comes to the front to take its place, just as you expected all along. (Confession time: the old Ignore-Command-Q option is still in there, because it was an established part of the user interface by then. And the new feature brought options of its own, so the options interface is now even more cluttered. But at least the right problem is being solved now!)
Organize Menus Carefully and Sensibly -- I'd like to offer you some good and bad examples of this, but I haven't been able to think of any offhand. (If you know some, send them to me!) But the point here is that users shouldn't have to hunt through a maze of menus and sub-menus to find a command. Menus should be organized in a sensible, intuitive fashion. The best I can tell you is that this isn't always as easy as it sounds, but "sweat the details" and try to design a set of menus that is clean, simple, and elegant in its layout and wording.
There's more -- the list of HI details to attend to can seem endless. One source of good feedback is your beta team; your users (later, after you ship) are another. They'll tell you what works and what doesn't: not just bugs, but subtleties of interface too. Your job is to listen when they talk.
They're important. All text that you display to your users, whether it's in the manual or an alert box or a menu, should be properly spelled and grammatically correct. It's part of the overall impression your app makes on every potential customer: the more flaws they see, the less confidence they'll have in your product.
If you're not good at spelling and grammar yourself, find someone who
is and beg or hire them to review and correct your work. Use spelling checkers
if you like, but remember that a spelling checker won't tell you that you
should have written "lose" instead of "loose" or that
"its" should not have an apostrophe when it's a possessive. You
may not think these fine points are important if you don't notice them yourself,
but plenty of your users will.
This one's a real toughie. A truly well-designed application may not need much documentation; it may be intuitively obvious how it should be used. And anyway, lots of users never bother to read the manuals, so why waste time writing them? But many users do read manuals, and I presume you at least want them to read enough to know how to send you your payment!
Knowing how to write a good manual is a career in itself; plenty of people make good livings doing it, and I can't teach you the art in a few paragraphs. (I'm still learning it myself, as any reader of this article can see.) But I can give you a few useful tips.
First, unless your product is dirt-simple, you should ship it with both
a short Read Me file and a separate, comprehensive manual. The Read-Me should
be a text document that briefly covers the following points:
Nearly everybody who might care about your product will want that information,
including users, reviewers, and people who want to put your product on their
Web site or CD-ROM. They'll be frustrated if it's missing, scattered, or
hard to find. Put it all into the Read Me file, and keep it short and to
See To Read or not to Read by Tonya Engst for a good discussion of this subject.
Next is your manual. As I said, I can't tell you how to write a good manual. But before you start writing, think about how your users will want to use it. Few will read it front to back before trying your product. Most will refer to it later, when they encounter something they don't understand, or want to do something with your product and can't figure out how. To help these people, organize your manual in those terms. Instead of documenting every menu command in order, have chapters labeled "How to...." Have a chapter labeled "Trouble-shooting" that people can turn to when they're having problems, and organize it so that people can easily look up their problem and find a solution. (After you've put out a couple of upgrades, you'll know what the most common problems are. In your first release you'll have to guess.)
The first chapter of your manual should explain the rest of the manual: tell what each chapter covers, so users can quickly find what they need.
Use diagrams and pictures: much better than text for explaining some things.
Use any medium you like for your manual, as long as every user can read it. Don't ship your manual in Microsoft Word format; far too many users won't have it. Mac and Windows platforms have a variety of ways to create stand-alone documents that can be displayed and printed on anybody's system; this is usually a good way to go.
Finally there is on-line help. There are a bunch of ways to do this, but again the key is organization: the way you see your product is different from the way the user sees it. The user will be wanting answers to questions like "How can I..." and "Why can't I..." and "Explain this," and your online help, like your manual, should be arranged so that users can quickly find the answers they need.
Jeremy Nelson contributes these extra reasons for concentrating on your documentation, and an argument for making your manual available on the Web:
"Documenting 'features' has a way of accentuating bad UI. If it is hard to write down how to do something, then it is probably too hard to do. After you've gone through the process of explaining how to set the root directory and you've realized it takes 5 pages, you become a lot more convinced that you may as well write the code which removes the need for an explanation...
"I have the documentation on the web, and I use it, quite extensively, as reference for doing support e-mail. Of course, I didn't write some of the applications that I support, but that is the point: in the best case, you aren't going to be supporting the applications you wrote, and the people who *are* going to be supporting them need really good references. Also, I can quote the URL, which includes section markings, that points to the exact point in the documentation where the user's question was answered.
"Which gives me some small personal satisfaction, and actually lets the user get more context than I feel is a good idea to quote in an e-mail reply."
The Next Chapter: Pay Up
Introduction Product Patience Polish Pay Up Propagation Promotion Politics Links