Posts categorized in Usability

When Red Can’t Be Read

2009 December 02

virgin-error

Nearly every error mes­sage on the web shows up in the color red. Something about red just screams “warn­ing! alert! fire!” So what’s a web designer to do when red is already promi­nent in the design?

Virgin America chose pur­ple. Since Virgin’s col­ors are red and white, a red error mes­sage would have been invis­i­ble. But this purple-pink gra­di­ent stands out well enough and, unlike red, it doesn’t aggra­vate the reader. If any­thing, it has a calm­ing effect, mir­ror­ing the peace­ful vio­let inte­ri­ors of Virgin’s planes.

Better Butter

2009 October 13

In a post last year, I com­plained about poorly designed but­ter labels that made cook­ing need­lessly dif­fi­cult. The stan­dard but­ter wrap­per gives us only table­spoons, which isn’t use­ful when fol­low­ing a recipe that calls for, say 1/4 cup.

butter1

I’m pleased to announce that at least one com­pany has finally designed a bet­ter but­ter label. Clover, the peo­ple with the silly car­toon cows, has started mark­ing 1/4, 1/3, and 1/2-cup mea­sure­ments on their wrap­pers, in addi­tion to the table­spoon measurements.

butter2

As you can see, their organic but­ter (top image) doesn’t use the help­ful new label — only the non-organic kind. Well, it’s a start!

Criminal Tomatoes

2008 June 24

I was about to run out to the store for some toma­toes, hop­ing to make my first batch of sum­mer gaz­pa­cho, when I remem­bered the sal­mo­nella out­break. I checked the FDA’s web­site for the sta­tus, and encoun­tered these photos:

The first thing that I noticed is that these look like per­fectly nor­mal toma­toes. Salmonella, a bac­terium, is invis­i­ble to the naked eye. So why is the FDA show­ing me absolutely use­less pic­tures of infected tomatoes?

The sec­ond thing I noticed is that the cap­tions seem to attribute blame -- and, there­fore, agency -- to the toma­toes them­selves, as though they actively con­spired to spread dis­ease among the human pop­u­la­tion. The images now look more like police lineup pho­tos, like some­thing on the FBI’s most wanted list:

The Origin of the Apple Key

2008 June 04

Image source: Jason Michael, Creative Commons Attribution-Noncommercial-Share Alike 2.0 License

Most keys on a key­board make intu­itive sense, even to a novice com­puter user, since nearly all of them are labeled with either famil­iar sym­bols (such as let­ters or num­bers) or with rec­og­niz­able words (enter, delete, escape). The Apple key, how­ever, has no famil­iar sym­bols beyond the com­pany logo, a mark whose mean­ing on some­thing that you press is unclear. Also on that key, the pres­ence of a sec­ond, even less-meaningful mark -- the so-called “pro­peller” -- and the lack of a writ­ten label add to user confusion.

Try explain­ing basic user inter­face tasks to any­one new to the Mac, and you’ll see what I mean. You can refer to it as “the Apple key,” which is descrip­tive, but the apple sym­bol has no on-screen sig­nif­i­cance. The pro­peller mark does appear on-screen, but only the Mac-initiated know that pro­peller means com­mand. As a result, the Apple key is now called the com­mand key, but that wasn’t always the case.

Having won­dered about this glar­ing usabil­ity flaw for years, I was excited to dis­cover this inter­view with mem­bers of the Lisa devel­op­ment team from the February 1983 issue of Byte Magazine. The Lisa was Apple’s short-lived, yet ground­break­ing pre­de­ces­sor to the Macintosh. In the inter­view, Larry Tesler, who was in charge of the Lisa’s appli­ca­tions soft­ware, explains how the Apple logo ended up on the keyboard:

[In a pro­to­type ver­sion of the key­board] you saw two keys that said Command on them. The new ver­sion has only one, and instead of say­ing Command it has a pic­ture of an apple on it. The rea­son is that the key’s used as a short­cut to choose a menu com­mand. If you look at a menu, on the right you’ll see this lit­tle apple sym­bol and a letter.

Image source: DigiBarn, Creative Commons Attribution-Noncommercial 3.0 License

If you hold down the Apple key and the let­ter, you get the com­mand. We couldn’t find any way to sym­bol­ize the Command key that would fit nicely in a menu and be rec­og­niz­able to peo­ple. We tried and tried. Finally we decided that the apple looked nice and had a nice sound to it -- “Apple X,” “Apple R” -- and it keeps Apple in the mind of the user instead of “con­trol” or some­thing else. It’s a sym­bol that every­body using this machine will rec­og­nize instantly, so we decided to put it on the key as well as on the screen.

The Macintosh project “bor­rowed” many user inter­face con­cepts from the Lisa team (who, in turn, had bor­rowed from Xerox’s Star), includ­ing the inno­va­tion of asso­ci­at­ing key-combination short­cuts with graph­i­cal menu items. But the Macintosh aban­doned the Apple sym­bol in its menu short­cuts in favor of a geo­met­ric, propeller-like shape that rep­re­sented “com­mand.” Although the new abstract sym­bol is even less mean­ing­ful to the unini­ti­ated, it makes more sense as visual short­hand than the company’s logo. For almost the entire his­tory of the Macintosh, though, this key has been marked with both sym­bols, even though the Mac’s on-screen UI always referred to it as “com­mand” and never “Apple.”

Only in the last year or so has Apple dropped the ves­ti­gial logo from the com­mand key, start­ing with the new alu­minum key­board (below) as well as on the MacBook. The word “com­mand” or at least “cmd” has been added, too -- some­thing that should have been done 24 years ago.

Image source: Declan Jewell, Creative Commons Attribution 2.0 License

Unusable Butter

2008 March 18

stick-of-butter-wrapper.jpg

[Update: Finally, a bet­ter but­ter wrap­per!]

I can cook. I can fol­low a recipe, and I am com­fort­able in the kitchen. But I don’t have my Imperial unit con­ver­sion val­ues mem­o­rized, so I don’t know off the top of my head, for exam­ple, that 16 table­spoons equals 1 cup.

When cook­ing with but­ter, I usu­ally rely on the stick itself to pro­vide me with the guid­ance I need. In this case, the recipe called for 3/4 of a cup. Super, no prob­lem. Okay, let’s see what the wrap­per can do to help us. It says:

1/4 LB = 8 TBSP

1/4 LB = 1/2 CUP

ONE LB = 2 CUPS

THIS UNIT NOT LABELED FOR RETAIL SALE.

How is any of this use­ful infor­ma­tion? I don’t know about you, but I never mea­sure my ingre­di­ents in pounds. But some­where out there, a but­ter label designer thinks that’s exactly what I want to know. And maybe if I worked in a mess hall kitchen, he’d be right, but I don’t.

The prob­lem here is that I have to con­vert my 3/4 cup value into butter-pounds, a very unfa­mil­iar unit. At long last, I see that:

3/4 cups = 3/8 lbs = 12 Tbsp

Finally! Now I count out the Tbsp mark­ers on the label, see that there are 8 Tbsp in each stick. So I need 12/8 or 1 1/2 sticks.

[Also see an update to this post.]

Site content and design © copyright 2006–2008 Scott Murray.