Case Study: Logitech ScanMan


Our "pretend it's magic" design tool was particularly effective in one large design project. The scanner division of the Logitech Corporation in Fremont, California, retained us to help design the software for a whole new generation of desktop scanners for the home and small-office markets.

graphics/11inf06.jpg

Logitech's new scanner device, code-named "Peacock," uses a new generation of scanning technology and connects to the computer with the USB port. About the size of a rolled-up newspaper, this inexpensive product is small and unobtrusive enough to sit handily on your desktop. You can insert any one-page document into its slot, and a small motor pulls it through to the other side, scanning the image as it goes.

Logitech's company philosophy has long centered on small, auxiliary hardware components given a premium value by the software that accompanies them. This certainly sounds good when viewed from Logitech's engineering point of view. But it's not such a good approach for the user. It isn't goal directed.

Logitech assumed that numerous software features added value to the hardware device. After all went the thinking adding features in software is a lot cheaper than adding features in hardware. This reasoning examines the cost-benefit equation from the manufacturer's point of view rather than from the user's.

The predecessor to the Peacock product overflowed with features, and each member of the Peacock team marketers, product managers, programmers, and senior managers had pet features that he advocated aggressively at strategy meetings. But if there was ever a product that called out for a featurectomy, it was Peacock.

We rarely find it necessary to eliminate features to smooth out a product's interaction. However, in the case of Peacock, the widely held idea that Logitech added value with lots of software features was erroneous. Our personas and scenarios made it very clear the product's interface was overburdened with unneeded, unwanted, and unused features.

As usual, we began our process by creating our cast of characters. Here's how we arrived at them.

The scanner had a street price of around $150. For a consumer product, it was quite powerful, with a high resolution and color, but still not in the league of professional, flatbed scanners that typically sold for $800 to $1,000.[2] It was clear to everyone that the main marketplace for this product was the user in a small office or home office, called SOHO by demographers.

[2] As usual, time and the plummeting prices of silicon have changed the scanner landscape considerably. This was all true in January 1997.

Malcolm, the Web-Warrior

We created the persona of Malcolm, the Web-warrior, to represent the SOHO user. He is a young man who has started a small consulting business at home creating Web sites. He isn't very technical, nor is he a graphic artist, but he is familiar with computers and knows that fast-loading, simple images are better than lush but slow-to-download graphics. The Peacock scanner allows him to get medium-resolution images into his Web sites easily without unreasonable expense or complication.

Chad Marchetti, Boy

The Peacock scanner also had significant appeal to people with home computers who scanned in pictures and documents for personal, rather than business, use. To represent the home user, we invented the persona of Chad Marchetti, a 10-year-old boy who uses the scanner to make his homework projects look better with color images.

Magnum, DPI

We knew that professional graphic artists would demand thousand-dollar flatbed scanners, so we deemphasized that market segment. However, we also knew we couldn't ignore that market altogether because "from tiny acorns mighty oaks grow." A young, freelance graphic artist just breaking into the business wouldn't have any cash to spare, and Peacock would get him through his first year or two until he could afford an industrial-strength product, but only if he could squeeze sufficient performance from Peacock.

To represent our acorn, we defined a persona named Magnum, DPI. (His name is a play on words using the old Tom Selleck TV show Magnum, P.I. and the acronym for dots-per-inch, the common measure of the resolution of a digitized image.) Magnum might not represent a large user segment, but he is certainly an influential one. All of his home-computer-user friends ask his advice when it comes to graphics software and peripherals. In another year, he'll be able to buy a flatbed scanner, but until then, he'll make do with his Peacock.

Neither Malcolm nor Chad knows much about image manipulation. Malcolm is too focused on other things, such as building Web sites and making money. Chad is too focused on other things, such as not losing his pictures in the file system. Neither sees much reason to twiddle with pixels. They both want to scan images in, crop them to size, and then place them in documents they are using. The documents, not the images, are the end result. We found that they shared three significant goals:

They don't want to manage scanners, resolutions, or settings.

They want to find their scanned images quickly and easily.

They want to get their scanned images into other documents in other programs quickly and easily.

Magnum, DPI is a different breed of cat: He does know about resolutions and he is comfortable with various image-manipulation settings. Knowing this, you might assume that adding such features would benefit Magnum. However, Magnum already owns Adobe Photoshop. This powerful, complicated, and expensive image-manipulation program is his primary tool, and he knows it inside and out.[3] Whenever he has any task to do, regardless of how small, he uses Photoshop. Any attempt that Peacock might make to duplicate the functionality and power of Photoshop would be feeble. Like Pee Wee Herman stepping into the ring with George Foreman, Peacock wouldn't last a round with the champ. We shouldn't even bother putting effort into something that won't be used and can only embarrass us.

[3] I would love to give this powerful, complicated program an interaction redesign! Note: At least a half-dozen people who previewed this manuscript underlined this footnote and added a comment like "You and me both!" or "Please do!"

However, two out of three of Magnum's goals are identical to Chad's and Malcolm's: He wants to find his images easily, and he wants to get his images into another program (Photoshop) easily.

The only setting that Magnum might make during the actual scan is specifying the physical resolution of the scan in dots per inch. In older, slower scanners, there was always some speed advantage to be had by scanning at a faster, lower resolution, so Magnum saved time with the setting. The new Peacock scanner is much faster, and its maximum density is a healthy 200 DPI. In full color, this takes only about 20 seconds for an 8 1/2- by 11-inch sheet of paper. There just isn't any advantage to having Magnum spend 10 seconds changing a setting that only saves him 5 seconds of scan time, yielding a lower-quality scan for his trouble. Why would anyone even Magnum want to lower the DPI setting if the scan speed was sufficiently brisk at maximum resolution? This insight allowed us to see that the goals of all three users were happily in accord, and we could make our users happy and still dispense with almost all of the features.

Playing "Pretend It's Magic"

During brainstorming, we played "pretend it's magic." We found that Chad was quite content getting images into his computer without even using a scanner. This exercise showed that the one thing that Chad and Malcolm and Magnum didn't want was to manage scanner hardware. From this perspective, it was easy to see that the only thing he wanted to manage was the scanned image after it has been entered into his computer. He doesn't care if the image is scanned in with black magic, but after it's inside the computer, he needs to be able to find it, crop it, and put it into his other programs.

Most competing scanner products and Peacock's predecessor just dump the images and the user into the Windows file system, letting them use the conventional hierarchical display to store, manage, and retrieve their scanned images. That file system is really very hard to use and unhelpful.

The file system requires Chad to create a name for his new scanned image and then choose a place in the file system hierarchy for storing it. When Chad wants to find that image again, he has to remember what he named it and where he put it. It just so happens that remembering such trivia is something that Chad, being human, isn't very good at. The computer, having a hard disk, happens to be superbly well suited to remembering such trivia, but it doesn't bother. Instead, it forces Chad to do the work of remembering the name and place.

In our design, the scanner software never forces Chad to name and place his incoming images. Instead, it quietly takes the image in and manages its storage for Chad. When he comes back at some future date looking for the image, in addition to simply recognizing it in a thumbnail, he can recall it by any one of a number of its attributes, such as when it was scanned, how big it is, whether it includes text, or whether he exported the image into some other program.

Instead of letting Chad and Magnum control the hardware by fiddling with various scanner settings, we concentrated instead on three more-important things:

We eliminated all scanner-management interface idioms.

We made it impossible to lose scanned images in the file system.

We made it trivially easy to put scanned images into documents in other programs.

We looked at all the available image-manipulation functions and decided that there were only three indispensable ones. The rest could be omitted or would be performed later in other, better-suited programs, such as Photoshop. The three functions were:

Crop: Clipping the sides of the image

Resize: Changing the size of the image

Reorient: Turning the image onto its side or back

graphics/11inf07.gif

Our suite of functions was very small, but they were necessary and would be used frequently, so we decided to make them of an extremely high quality and very easy to use. The net savings in coding many fewer functions gave the programming team the necessary time to put more effort into these three.

World-Class Cropping

All computerized cropping tools I've ever seen work in the same inappropriate way. The user clicks and drags a rectangle with the mouse. The point where the click occurs is the upper-left corner of the cropping rectangle, and the point where the drag ends is the lower-right corner of the rectangle. Everything outside this rectangle is permanently discarded, and what is left inside it becomes the new image. This method is quick, simple, and easy to program and to explain. Heavyweight graphics program Photoshop uses it, for example. Nevertheless, it has severe drawbacks. Mainly, the drag-rectangle method is hard to control, and it has to be done perfectly in one smooth motion. It's all too easy to get three sides of the crop rectangle correct, and then to find it nearly impossible to correct the fourth side without disturbing one or more of the other three. Also, the permanent nature of the crop means the program cannot accommodate two different crops of the same image.

Our crop-tool solution solved both of these significant problems in simple, easy-to-learn, and easy-to-understand ways. Each of the four sides of the scanned image has its own permanently visible crop handle. This handle offers clear affordances for direct manipulation. All Chad needs to do is click and drag on a handle to receive immediate and proportional visual feedback of the consequences of his action. As the crop handle moves in, the outside part of the image is shown in a ghostly gray. This makes it clear that the image is being cropped but also hints that the cropping is not permanent. Chad can just as easily drag the crop handle back out, once again revealing the original image in full color.

graphics/11inf08.jpg

As Chad moves one crop handle, he instantly sees that the four sides are independent and that moving one doesn't affect the others. He can adjust and fine-tune the cropping as many times as he likes. This is a very different sensation from using more traditional cropping tools, in which the act of cropping is modal and permanent, and must be done perfectly in a single motion. Very few computer users have the manual dexterity to perform this action well. Chad certainly doesn't. What's more, the nature of cropping is visual and typically iterative. Even fine artists will take a few tries before they settle on a final crop. Older tools simply didn't support this behavior. The crop tool we provided for Logitech did it quite admirably.

Even after Chad settled on a crop setting, the crop function was not permanent. The current crop settings were merely considered attributes of the image, which was always stored as a complete image. (There was a menu item for making the crop permanent if disk space was at an unusual premium.) This meant that Chad could scan in a photo of his family, crop down to an image of his mother for a homework assignment, and then three months later return to that same image and recrop to show only his father for a letter he was writing. Any other scanner program would have forced Chad to scan in the image a second time.

World-Class Image Resize

Resizing an image in most graphics programs entails entering dimensions into a dialog box. The dialog offers great precision and the ability to stretch an image disproportionately, but the precision is rarely needed and out-of-proportionality is rarely wanted. Although the dialog box offers what is not wanted, it doesn't offer what is wanted: the ability to see how big or small to make the new image. A resize control should be visual.

Our resize-tool solution is a small, red angle positioned on the bottom-right corner of the scanned image. When the cursor rolls over it, it visually changes very slightly, growing in size by a couple of pixels. This is what I call the pliant response, and it hints to Malcolm that the object can be directly manipulated. When Malcolm clicks and drags on the red angle, the image resizes in real time either larger or smaller, depending on the direction that he drags the angle. The image always stays in correct proportion. Disproportional resizing is Magnum's job, and he uses Photoshop for it.

Adding to the utility of the resize control are the dimension lines extending from the sides of the image. These change in real time as Malcolm drags the angle, giving him immediate quantitative feedback about the exact size of the image. A function on the menu allows Malcolm to set the dimensions to show in units of pixels or metric measure, instead of English measure.

graphics/11inf09.jpg

World-Class Image Reorient

The capability to rotate a scanned image is a function typically found in graphics programs. There are three general uses for a rotation function.

graphics/kolam.gif Rotating portions of images to change the composition

graphics/kolam.gif Straightening a picture that was scanned very slightly off the vertical

graphics/kolam.gif Reorienting a sideways or upside-down image to right side up

Most scanner products including Peacock's predecessor have a rotation tool that allows its user to perform all three functions. We looked at this power and complexity from Chad's, Malcolm's, and Magnum's points of view and decided to take a very different approach.

We immediately discarded rotate use number one. Only an artist needed it, and none of our users was an artist. Magnum was closest, and he would use Photoshop's powerful rotate function.

Rotate use number two, called alignment, cannot work well because of limitations of the technology. Virtually all rastering devices, such as video screens, scanners, and printers, render straight lines that are just one or two degrees off the vertical or horizontal with ugly zigzags called "aliasing" or "the jaggies." After a line has been scanned in with the jaggies, no amount of computer processing can straighten it, and using the typical rotate function to force the line to the vertical creates a dizzying optical illusion that makes for a cure far worse than the disease. As if that weren't bad enough, the software needed to rotate an image just a couple of degrees is extremely complex and sophisticated. Most other scanner products proudly include this less-than-useless function as a fine example of what Po Bronson meant about engineers when he said, "Blindness improves their vision."

If an image is scanned in a degree or two off, it's much faster, better, and easier just to line it up better and scan it in again. The scanner hardware not only facilitates this solution with its precisely aligned rollers and high speed, but it also makes it very hard to align the scan incorrectly in the first place.

Rotate use number three is reorientation. It is easy to inadvertently scan an image in sideways or upside down. It is easy and effective to use software to flip an image 90°, 180°, or 270°, orienting it correctly.

Thus we designed a "reorient" tool instead of a "rotate" tool, and once again we took pains to make it the best of breed. In the upper-left corner of the scanned image is a blue circle, similar to the red resize angle. When the cursor flies over the circle, it visually changes into a slightly larger circle, once again hinting at pliancy.

graphics/11inf10.jpg

When Malcolm clicks and drags the circle, a bright-green rectangle appears around the edges of the image. This rectangle, called a bombsight, indicates where the image will land when Malcolm releases the mouse button. As the circle is dragged past the corner of the image, the green bombsight snaps to the next cardinal alignment: 90°, 180°, or 270°. Malcolm can easily see in advance the effect his actions will have on the image. He clearly sees that alignment is only allowed on cardinal directions and that free rotation or alignment correction is not available here. All of our personas understand the feature instantly.

World-Class Results

At our client's request, we did some user testing on this product and discovered a remarkable thing. We expected that all the test subjects would be very pleased with our interface and would be able to understand it and use it easily. In this we were not disappointed. What surprised us was that every one of the test subjects expressed the opinion that Peacock was the "most powerful." In literal terms of the number of features, this was far from true. In terms of effective power realized by the user, we had increased it significantly.

When the ScanMan product finally shipped, it generated a stir in Logitech's tech-support department because it received remarkably fewer calls about using it than was normal for a new product.



Inmates Are Running the Asylum, The. Why High-Tech Products Drive Us Crazy and How to Restore the Sanity
The Inmates Are Running the Asylum Why High Tech Products Drive Us Crazy &How to Restore the Sanity - 2004 publication
ISBN: B0036HJY9M
EAN: N/A
Year: 2003
Pages: 170

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net