Developers are starting to get the message: A Tablet PC is not a standard desktop or notebook PC. It's easy to think that the Tablet PC is simply just a notebook with a bright swiveling screen, a pen, a few new UI widgets and a few extra bits crammed into the operating system.
In a previous article (Eight Essentials of Tablet User Interface Design), I presented some suggestions that applications programmers and UI designers should keep in mind while constructing tablet applications. Some of those suggestions are very specific to the tablet platform; others, in my humble opinion, are general Windows UI points that are simply more important on the tablet platform.
Thanks to feedback from readers of that first article, as well as additional notes I've taken on UI design based on watching people use the platform, it's my pleasure to present eight more user interface design suggestions.
1. Avoid cascading drop-down menus.
I watched my fathera very PC-savvy photographerstruggle with my tablet. He wanted to play with photo editing using Photoshop CS, an application that he has on his own regular notebook; he liked the concept, but found menu navigation to be difficult. The hardest part, it turned out, was the drop-down menus, particularly when they cascaded at multiple levels.
His hands, while rock solid when aiming his Nikon at a red-shouldered hawk, shake slightly when holding the stylus, so he kept selecting the wrong item.
Figure 1. Avoid cascading menus, like these in Word 2003.
Figure 1 shows an example of cascading menus from Word 2003; I'll admit to looking for a particularly egregious example. In short, avoid them.
Here's a mini-tip: If you're shopping for a tablet PC to deploy "to the masses," take a look at the ergonomics of the stylus. My dad found the included stylus on my Fujitsu T4010 to be almost painful to use, as well as frustrating to remove from and return to its little socket next to the screen. He found the Cross Penabled Executive Pen to be far more comfortable and accurate to hold.
2. Avoid the need for scrolling documents.
Thank heavens for the scroll wheel! I have a wheel on my travel mouse (which I use when typing large documents on my Dell notebook or Fujitsu tablet), as well as the Microsoft optical trackball that I use with my desktop workstation. Even now, while writing this document, the scroll wheel lets me quickly run up and down the document without moving the insertion point in the document.
In case you haven't noticed, there's no scroll wheel on a Tablet PC. Scrolling vertically through a Word document or Web page, or in two axes through an Excel spreadsheet, requires precision tapping and dragging on scroll bars. And on a 12-inch screen, Windows' default scroll bars are small. Whenever possible, try to avoid scrolling.
Figure 2. A 'next page' button is a welcome addition to an app's interface.
If you need to provide a way to navigate through large documents, perhaps simply adding a big "next page" button would helptapping is easier than scrolling. Acrobat offers both a scroll bar and navigation buttons. You can see the tool tip below the right-facing triangle on the Acrobat Reader screen. That's much better than the itsy-bitsy "next page" buttons in Office 2003. But I wish it was even bigger.
3. Place tool tips above, not below.
Speaking of tool tips, have you ever noticed that your hand covers them? Chris Stevens wrote a note that pointed this out: "It drives me nuts that tool tips or balloon help shows up to the right
and below the pointer. When using a stylus, the pen and my hand block it. Would be much nicer if the balloon went up not down."
I couldn't agree more.
4. Stand up for portrait mode.
When I'm working in keyboard mode, like I am right now, the screen is in the horizontal landscape mode. When I'm holding the Tablet PC, the vertical portrait mode seems 100 percent natural. Until, that is, I find out that a Web site or legacy Windows app expects the user's screen to be at least 1024 pixels wide. In portrait mode, my Fujitsu's screen is only 768 pixels widewhich few apps are willing to accommodate. (Yes, I can hand-hold in landscape mode, but it ain't comfy.)
Mark Payton pointed that out, saying, "Most Tablet users I know who use their tablets as writing pads use portrait mode. Most applications are designed to be wider than they are tall. Some Web sites force you into a sort of horizontal scroll tic as you move the page back and forth trying to read the lines."
I'm not sure what advice I can offer, except to remind you that the tablet screen is narrow, and if your app uses a lot of horizontal real estate, things could get ugly pretty quickly. Treat those pixels as if they were priceless gems! Also, if your responsibilities include Web development, please please please test your pages to see how they look on a vertical tablet or other narrow display device.
By the way, in mid-March Fujitsu recently announced that a forthcoming tablet display option would be to offer a 12.1-inch 1400 x 1050 pixel panel. That's excellent news; this higher-resolution screen will allow tablets to offer realistic desktop-replacement display capabilities. Using that tablet in portrait mode, with a width of 1050 pixels, should solve many user interface problems.
8. Remember color preferences.
In my first article, I discussed problems having to do with viewing color palettes. Mr. Payton added, "Remember that some folks have varying degrees of color blindness and color differences that appear crystal clear to you may not to them." Very trueI'm mildly red/green color blind, but hadn't thought of it specifically in the Tablet PC context. But perhaps that's why my eyes have so much trouble reading the tablet under low-light conditions.
A short article on this topic is "Usability Interface: Accommodating Color Blindness," by Paul Hoffman. Another is, "Can Color-Blind Users See Your Site?" by Robert Hess.
I had also written in the earlier article a suggestion that an application should use a persistence mechanism to remember where users put things: if the user drags a dialog box or tool palette to certain part of the screen, next time she launches the app, that UI element should be in that same place.
Mr. Payton wants to extend persistence to colors and as well: "I enjoy doing the crossword on the crossword puzzle power toy, but the first thing I have to do each time I load it is change the color scheme because the default red and green colors both look muddy brown to me. I can distinguish between them only at the cost of several eye-straining seconds of staring."
It's good that the New York Times Crossword Puzzle lets you change colors. It's bad that it doesn't remember those choices. Let that be a lesson!
Keep those Tips Coming
I'd like to thank everyone who wrote in regarding Tablet PC user interfaces do's-and-don'ts. We'll revisit this topic soonso if you have more ideas, suggestions, pet peeves and work-arounds, .