I've seen a lot of Tablet PC applications, and when it comes to the user interfacesome are good, but others are not so good.
I'm not talking about the underlying application design, or the back-end connections to databases, wireless networks or the Internet. Rather, many applications simply weren't intuitive to use with a stylus in one hand, tablet in the other.
In some cases, the applications were nothing short of annoyingand we all know that annoying software turns into neglected shelfware. Worse, a bad experience might turn users off the Tablet PC concept altogether, hurting your chances for selling them new tab-friendly applications.
Based on my experiences, and with some input from my colleague and from überprogrammer Larry O'Brien, I've come up with a list of eight essentials of good Tablet PC user interface design.
These should all be "Doh!" in their obviousness, but be honest: Do all the apps that you've created adhere to these simple design goals? If notwhy not? And what are you going to do about it?
1. Make Everything Simple and Obvious
Keep it simple. Unless you're building development tools, realize that the intended user of your tablet applications should not have to be an expert in using Windows XP, and especially in the nuances of tablet technology. It might be used by a busy doctor or nurse, or real-estate professional, a shipping clerknot a PC power user. Don't expect the user to experiment to figure out how things work... he or she won't.
The beauty of the Tablet PC is that someone can just pick it up and run the application. Your overarching design goal should be to make the Tablet PC plus your application into an intuitive appliancenot a personal computer running some piece of software.
2. Make Help Task-Sensitive
Your app should be so intuitive that the innocent should never need to call for online help. But put the online help there anyway! Make the link to online help easy to find. Make the online help context-sensitive, in order to minimize the amount of searching (and frustration) by the user; consider making it task-focused, rather than GUI-widget focused. I.e., here's how to do this, vs. here's what that icon means.
And start at the very beginning: The user might simply be frustrated with using the stylus. That's not Windows' problem, or the user's problem. That's your problem to solve, if you want a happy customer.
3. Everything is Alive
Modal applications, or applications that change state, aren't intuitive. If the user can see a GUI control, she should be able to use that control. Grayed-out boxes and icons can be frustrating: "Sorry, Charlie, you can only do that in 'equation-editing mode.' " Argh!
If pressing a certain button in a particular context simply doesn't make senselike trying to save an empty database recordthere are two ways of handling it. One is to gray out the "save" button. The other is to let the user press the "save" button, but then pop up a note explaining why that operation doesn't work, and describing what the user needs to do. Which do you think is best?
4. Be Careful about Clustering
Where's the $%#!@# eraser? How do I change the ink color? How do I get the rubber stamp tool? Whenever possible, try not to hide the icons or controls that users might want to have. Of course, you can't always have every single control visible: Not only would that clutter up the screen, it would also create a big, non-intuitive visual mess.
So, how do you handle all the choices? Cluster icons or controls togetherwhen it makes sense for your specific application and user group.
You can use multiple tapping of icons to change a tool or function; for example, tapping a pencil-tip icon might turn it into a brush-icon; tapping again might turn it into a rubber stamp. Alternatively, tapping the pencil-tip icon might slide out a palette that contains the brush and rubber stamp. Or you might have separate pencil-tip, brush and rubber-stamp icons visible at all times. Maybe try all three approaches, and do user-interface testing or ask beta customers which works best.
5. Drop-Down Menus are Bad
On my primary workstation, I love drop-down menus. On a tablet, I abhor them.
Sitting at my desk, I can spin my optical trackball (my desktop is way too messy for a mouse!) and select a menu in an instant. On a tablet, it's a huge nuisance. Tap the right menu bar item. Look at the drop-down list. Choose an item, or expand a choice. Tap, drag, tap. Oops, that's not what I wanted. Tap, tap, drag, tap. That's better.
The default Windows drop-down menus represent a difficult element to tap accurately for many users; basically, the menu represents a stack of long, skinny rectangles, and sometimes pressing the wrong one can have nasty consequences (like pressing "paste" instead of "copy"). Users shouldn't have to tap File, then Save. The drop-down menu is a mouse-friendly construct; for the stylus, use intelligent icons for such common functions.
6. Supersize Stylus Fields
There's nothing as frustrating as trying to write in a box that's too small. That's true when you're working on paper, and even more true when you're working on a tablet, which isn't as comfortable or familiar a medium for all but the most experienced Tablet PC experts.
When collecting handwriting information, such as in signature fields or notes boxes, allow for larger handwriting than you would normally make on a printed form. Writing comfort stems from muscle memory and the reduced friction of a stylus moving over glass leads to larger strokes.
So, make those handwriting input fields generoushuge, even, by conventional standards. The bigger, the better, within reason of course, but in this case, size does matter.
7. Understand the Tablet PC Screen
Even the best Tablet PC display isn't as big and bright as a typical desktop monitor or LCD panel. Tablet PCs are also used in environments where the lighting is suboptimal. Cool fluorescent light, for example, can swamp a tablet's backlighting and make the colors look bizarre. Strong daylight can wash out the screen's brightness.
In my opinion, this is more of a problem with tablets than with standard Windows laptops, because of the anti-glare coating on many Tablet PC screens. Also, tablet screens are held more horizontal (facing straight up, or close to it); desktop and notebook screens aren't. So, to my astigmatic and nearsighted eyes, the colors on a tablet never seem as bright as on regular notebook.
I'm not complainingbut this is something to think about, particularly if you're trying to use color differences to distinguish the different state of icons, for example. It may be hard to tell black from gray, or dark blue from purple, in the less-than-perfect environment where many tablets are used. Even telling red from black may be hard to see in the bright sunshine.
My suggestions? Don't use color to distinguish things, unless color is an essential element. Indicate a selected tool or mode with XORthat is, binary-reverse the color scheme. Put a slash or X through an unavailable choice, in addition to turning the choice gray. And make sure that icons look good, and that your app is usable, under all sorts of real-world lighting conditions. Take the tablet to the park, to Starbucks, to Home Depot.
8. Talk to the Hand
Where are your hands right now? If you're using a desktop or notebook, they're both on or near the keyboard. (If they're someplace else, I don't want to know.) If you're scrolling thorough this document with a tablet, there's a good chance that your meaty fist, wrapped around the stylus, is covering part of the screen. Doh!
Never forget that the user's hand and arm can obscure large portions of the screen. The part of the screen that's blocked will vary depending on whether the user is left-handed or right-handed. It depends on whether the tablet is held in a portrait or landscape mode. It also depends if it's being carried or is sitting on a flat surface.
What can you do? Try to avoid putting explanatory text next to, or below, a data entry field. Put that text above the field, where the hand's not likely to clock it. Don't use call-outs in multiple panels. If you do need to put text to the left or right of the input screen, at least make the panels movable so that both left- and right-handers can move them around appropriately.
(And make sure the UI remembers where users put things. I really dislike UIs where I move a dialog box from screen center to a convenient location, but next time it comes up in the middle again.)
Be sure to test your applications on both left-handed and right-handed users, and be sure to accommodate both sets. (It's too bad that Windows doesn't detect if the tablet's being held or not, and which hand is using the tablet. Wouldn't that be neat?)
Got User Interface Tips?
There's more to say about good user interface designand I'd like to hear what you think works well, what doesn't work well, and what's really horrible. If you can take a picture, that's even better. and we'll revisit this topic in a month or two.