I Love My Backpack!

Every once in a while there is a product which is so well designed that every time you use it, it brings a smile to your face. The parts of the product complement each other so well that it is a joy to use. For me, one of these products is my backpack.

My backpack?!

I know that's what your thinking. Of all the products I might own and want to write about, why am I writing about my backpack? What could be so special about a backpack? And what does this have to do with user interfaces anyway? (if the last question is the most important to you, then just skip to the end of this post)

The bag in question is the Kata R-103 (note that their web site is www.kata-bags.com) and it's a backpack that fits both my camera gear and my laptop gear.

What makes it so great? First off, let's go with the obvious reasons:

• It fits everything that I want to carry. Here's what I normally pack:
• Nikon D70s with three lenses
• Nikon SB-800 flash
• Camera battery charger
• Spare battery for the camera
• Spare batteries for the flash
• Spare memory cards
• Instruction sheets for camera & laptop
• Small bag containing camera and flash accessories
• Flash remote control
• Lens cleaning pen & cloth
• My 15.4" Dell laptop (and formerly, my 15" Toshiba laptop)
• Kensington power adapter, including cable for car & airplane use (if you're in the market for a universal power adapter, I highly recommend it — it's another product that makes me happy).
• Mouse (corded, normal size)
• Ethernet cable
• Two USB cables
• USB hub
• USB Compact Flash card reader
• A couple of USB drives
• Laptop security cable
• GPS for my laptop
• Earbud headphones in case
• Blank CD-Rs
• Mousepad
• Papers
• Business cards
• Pens
• Kleenex pack
• Folded up canvas bag
• When I'm traveling, I'll also toss in my cell phone, keys, an inflatable travel pillow and maybe a few magazines or crossword puzzles
• It's incredibly comfortable. The list above is pretty large. Fully loaded, it can weight 25 pounds and I have worn this laptop for hours at that weight. It is very well balanced. It can easily be adjusted and comes with both a chest strap and a waist strap. With the laptop removed, I've taken it on an extended hike, including some climbing, with no problem. The way the support harness is designed, the bag is less likely to cause you to sweat than most bags.
• It's configurable. The inside compartments can be easily rearranged. There is no useless space, pretty much no matter how you rearrange it.
• There are two openings — a large one for access to everything (and it really opens up) and a small one for access to just your camera and a second lens — plus a separate compartment for your laptop. The backpack works well if you don't have a laptop in it and it even works well if you only have a laptop in it.
• It fits in the overhead compartment on every plane I've tried it on, even small commuter jets (where it's a tight fit). That is not true of all of the competing bags.
• It's very well padded. I tripped once and hit the backpack on a curb, with no damage to anything inside (or the backpack either).
• It is constructed extremely well.
• It doesn't scream "camera bag" — many people think it is a regular backpack.

As good as this bag is, they did made a few mistakes.

• The bag is mostly black. The zippers are black. The zipper pulls are black with black extensions. Despite the bright yellow interior, it is not always obvious when the bag is fully zipped up. I replaced the zipper pulls with bright blue ones (I wanted yellow, to match the interior, but could not find them) and I always zip the bag the same way so that it's obvious whether it is open or closed.
• On the top of the outside, there are too small zippered compartments, about the right size for some cards, keys or chewing gum. Unfortunately, their zippers open down rather than up like all the other zippers, which means they can work themselves open if they get knocked. I lost some chapstick once. I never put anything in these two compartments that I'm not willing to lose.
• A 15.4" widescreen laptop is a tight fit because of the non-rectangular shape (you have to make sure to push the laptop down toward the wide end to get it in). A little extra room would have been helpful.
• The external tripod holder is clunky and difficult to remove when you're not carrying a tripod. I simply don't use it and carry my tripod or monopod separately. But, I ran an elastic cord through the loops for the tripod holder and use that to hold a lightweight jacket on the outside of the pack.

I looked at a lot of bags when I was looking for this bag and it seems to me that the market is divided into three groups:

• Bags for storage. Most of the bags fit in this category. A lot of them look like boxes with straps. For the most part, they seem to be designed for people who carry their packs rarely and want to maximize the amount of gear they can fit.
• Bags for carrying. The Crumpler bags, which are pretty well regarded, fit into this category. They carry the equipment very well and they are very comfortable to wear. But, removing camera gear is a multi-step process and you can't easily leave them open while accessing equipment because of the way the laptop is stored in them. They also do not carry the laptop well if you've taken out some of your camera gear.
• Bags for use. I really only saw one bag in this category and that's the Kata. It's easy to wear, easy to take on and off, easy to access the gear. It's a working bag, almost as much of a working bag as a traditional one-strap camera bag (I still own one and I never use it). The Kata doesn't fit as much as some bags and some people will find that the Crumplers are more comfortable (but, as noted, the Kata is very adjustable).

As you can see, it's not the case that one size fits all. Which bag is the best for you will vary depending on how you plan to use it. I started by doing research on the web. The Kata was not even close to the top of the list based on what I'd read online (among other things, it was one of the most expensive bags). Next, I went over to Glazer's Camera in Seattle. I brought a lot of my gear, including my laptop, and I sat down on the floor with five different bags (Kata, Lowepro, Tenba, Tamrac, and Crumpler). And it became very clear, very quickly, that the Kata was the best for what I wanted it for. They only had one in stock and I bought it on the spot. If you're looking for a bag and you have a local camera store where you can check them out in person, I recommend it.

So, what does this have to do with user interfaces anyway? (if you skipped ahead because you're only interested in software, here's where you should start reading again) We can learn a lot from what Kata did right:

• They decided what the use case of the backpack was (roughly, active usage) and they designed the bag around that. I can tell this by the two compartments and the separate opening for quick access to your camera. Plus, they have the integrated camera strap that I don't personally use. Recognizing use cases isn't the same as making up scenarios or personas.
• They realized that the most important thing to their customers was what they put in the backpack, not the backpack itself. The outside is nondescript. The inside is bright yellow so gear stands out in sharp contrast. Every part of this bag is there to hold or protect the contents.
• They knew that their customers would be using it for long stretches at a time, so they focused far more on comfort than most of their competitors.
• They knew that not all of their customers were the same. They made both the inside and the outside very adjustable.
• They made security and safety a no-brainer. It protects what's inside and it doesn't throw you off balance (for me, even at 25 pounds). The fact that the company also makes lightweight body armor probably doesn't hurt here.

Final Note: If you're actually interested in the bag instead of the lessons learned, Kata also makes two similar bags — the R-102 for camera-only use (on the right below), and the R-101 for 12" laptops and a bit less camera gear (in the middle below). Note the R-103 does come with a piece of removable padding for use with a smaller laptop. And Kata make a lot of non-similar bags too (plus body armor, apparently).

 

Images are from Kata Bags and are used with permission

Avoid Too Much Salt

I watched National Treasure last night with my family. This morning, my son and I watched the DVD extras. Before the deleted scenes section, the director, Jon Turteltaub, told us that the original cut of the movie was four hours(!) long. In comparison, the final cut was just over two hours.

We all like sugar. We all like salt. But, if you have too much salt, the cake isn't going to taste good. -- Jon Turteltaub.

He explained that, individually, each of the scenes that they cut were good. He lamented that some great performances were removed, including some by actors who no longer appear in the movie. But, as a whole, all the extra scenes made the movie worse, not better. It's the same with software. It's not any good if you ship the four-hour version of your software. It's big and confusing, loaded with things that don't advance the goals of your users, which is always (always!) to accomplish their objectives, not yours.

• Cut anything that doesn't move your product in the right direction.

It's really hard to edit a movie after it's in theaters. And it's really hard to cut features after you've shipped them. You can one-up Jon Turteltaub by cutting features before you write (or shoot) them. Don't let great work end up on the cutting room floor because you weren't willing to cut features.

Hiding Things from Users

Microsoft Windows has a "clever" feature which hides the extensions (or suffixes) of files. So, if you have a file named "example.gif", Windows will show you the name as "example". Unfortunately, if you also happen to have a file named "example.doc", Windows will also show its name as "example", making it look like you have two files with the same name.

In general, hiding things from users isn't a good idea. I've never understood why Windows has this feature (worse, it's on by default and the way to turn it off is buried, in the View tab of the Folder Options dialog box, so a lot of users don't even know it exists).

Here are some theories:

• Macintosh envy. On the Macintosh, filenames have types which are independent of the name. So, you can have a document named "example" rather than "example.doc". It seems friendlier to not have extensions. But, Apple did it right -- the filename actually is "example" and you can't have two files with the same name.
  
  
• Fake security. If the extension is hidden, users can't change it , which means they can't turn a TXT file into an EXE. Unfortunately, this opens a security hole. If you name a file something like "example.jpg.exe", Windows will show its name as "example.jpg", which everybody knows is a picture, not a program. It can't be dangerous, right?
  
  Malware has exploited this Windows feature.
  
  
• Simplicity. Users are just confused by all those extensions -- let's hide them. This is like lipstick on a pig. The extensions are an essential part of the way Windows works. That's unfortunate, but true. Hiding the extensions increases complexity by introducing something that users frequently need to know but they cannot see.

There is one legitimate reason for hiding the extension that I can think of and that relates to the second point above -- it's way too easy for users to accidentally change the extension of a file and doing so will make the file (temporarily) unreadable. That's a valid concern.

It's an important enough concern that Windows has dealt with it in another place. When you rename a file in a folder window, Windows checks to make sure that you're not changing the extension. If you do, you get this warning:

How many times have you seen (and been annoyed by) this dialog? I see it all the time because I'll type a new name and forget to retype the extension. And, making matters worse, most of the time, neither Yes nor No will do what you want. Clicking Yes will continue the rename, forcing you to rename it a second time to get the extension back. Clicking No, discards whatever you just typed, which you probably want. I want the "let me type the extension now" button.

Fortunately, the basic problem can be fixed with a very simple change based on a very simple principle:

• Don't expose your schema.

A schema is the definition of how a system is designed and structured internally (these days, you'll most often hear the term schema used to refer to a database definition). But what you show users doesn't have to have anything to do with your schema. On the Macintosh, the filename and file type are two different file properties. On Windows, they are one property. Neither of these facts has to have anything to do with how they are shown to or edited by users. Both systems should do it in the way that works best for users.

The vast majority of the time (I would guess >99%) of the time, when a user renames a file, they don't want to change the extension. This makes it pretty clear that the Rename operation should only rename the base part of the filename and not the extension.
For those users who need to change an extension, an alternate option can be provided on the right click menu. And for those still using DOS commands, it should keep working the way it does -- this is about UI, not batch scripts.

Extra point. I got inspired to write this post last night when I was helping a friend over the phone. He needed to change the extension of a file but couldn't until he turned off the option (which is something I recommend everybody do). Unfortunately, he is using Microsoft Vista, which has cleverly hidden the Tools menu in folder windows. A quick Google search told me that it will magically appear if you hold down the Alt key. What were they thinking?! What else have they hidden?

In summary:

• Try not to hide information from users, especially information they need to know anyway.
• Don't expose your schema.
  
• If you realize that you have a very common use case, optimize for it.
  

Unnecessary Subtlety

One of the flaws that I see again and again in visual user interfaces is what I call unnecessary subtlety.

Here's an example. One of these highlighted buttons indicates the current state; the other indicates the state that will be chosen. Which one?

Unnecessary subtlety, n., visual subtlety in a user interface which serves no non-visual purpose, usually indicated by a minor difference in shape or color between different screen elements or the same screen element in different states.

In visual interfaces, subtlety is frequently a good thing. When you're working on a document, you want the interface of the word processor to be subtle -- after all, the most important thing to you is your document, not the word processor.

I don't know why it happens, but graphic designers seem to get so enamored of the beauty of what they're drawing, that they forget what the point of a visual element is. Let's be clear:

• The point of a visual element is to convey information to the user.

There it is -- and it's pretty simple. It's not to be beautiful. It's not to look good on marketing materials. It's not even to make users happy. Now, I'm not saying these are bad things. They're not. But none of that matters if the visual element doesn't accomplish its objective.

• If it does something when you click it, it should convey that it is clickable. If it changes when you point to it, the change should be obvious.
  
• If it's a status indicator, the status should be conveyed clearly.
• If it conveys information, it should actually convey that information easily, quickly, and in a way that the user can be confident that they have the correct information.
  

One of these buttons indicates that the current text is bold and that clicking the button will make it unbold; the other button indicates that the current text is not bold and that clicking the button will make it bold. Which one?

One of these buttons has been selected with the keyboard and pressing the Return key will execute that action. Which one?

Each row of icons has one icon which indicates a current state of the selected object. Which ones?

Some of these words are hyperlinks. Which ones?

What is indicated by these icons? Does the open mailbox indicate that you have mail? Does the phone that's off the hook indicate that you are on a phone call?

Two of these four icons show status information. Which ones? And what statuses are they indicating? (hint: one of them that might to show status information cannot, in fact, do so.)

These last two examples are on the border between unnecessary subtlety and unnecessary cuteness. I'll talk about that, along with the opposite extreme of garishness, at a future time.

Finally, this example indicates a failed search in Outlook which clearly shows "No items found.".

Or is it? Notice the little icon in the upper left corner. This tiny icon, about 1/6" high, is the only indication that the search is still in progress. To its credit, the icon is animated, but that's hardly enough since you can't do anything in the application until the search completes (if you actually want the results, that is). In addition to unnecessary subtlety, Outlook compounds the error by displaying an incorrect status -- "No items found" really means "No items found yet." No status would be better than a wrong one.

The good news is that all of these examples are easily fixable. Just remind yourself:

• The point of a visual element is to convey information to the user.

Update 2/23: I didn't say where the examples were from, but it was pointed out to me that there's no reason not to. In order from top to bottom, they are Blogger, Microsoft Word, Microsoft Windows, Adobe Illustrator, BlackBerry 7100, and Microsoft Outlook.