As web applications become more interactive, there has been a tendency to turn them into their desktop brethren.  As a simple example, the close button as it appears in Microsoft Outlook Web Access 2007.

This is akin to using the MDI (Multiple Document Interface) which Microsoft promoted and disowned years ago.  This was the idea that a window could contain multiple windows – a desktop within a desktop; a usability nightmare.

Moving on, the most notable point of comparison is the dialog.  Yahoo’s YUI even makes creating them easy to do – draggable and everything.

The most notable offender in my day-to-day experience is the strangely named “Rally Program” by Rally Software Development.  Let’s say you’re working on a User Story and you’d like to change one of the many bits of associated data, for example the state or rank.

In order to change them I have to seek out the Edit function (virtually hidden in a pull down).  Here we have a small section of the Edit dialog:

One is left wondering why the extra step is necessary.  If we imagine dialogs as some suggest (i.e. “separate rooms”) this becomes a clear form of excise.

My father used to work for the PGA Tour and once met with Ron Jaworski.  At the time I knew of him as the backup quarterback for Dan Marino.  I remember him saying “If you can touch it, you can catch it.”  I’m sure his wide receivers heard that a lot :)

Likewise I have a similar saying for information in applications – if you can see it, you can edit it.

Rally Program does feature inline editing in some instances, not nearly enough however.  Fortunately Rally Software has a very friendly and responsive product team so I have no doubt things will improve in the future.

From our VP of Marketing:

What’s most interesting to me is the focus not on WebEx as it relates to our internal usage, but how our customers relate to us through WebEx.

Have you considered how your customers’ users’ customers (i.e. Cooper’s “served personas”) experience your product and what that might say about your customers? Recall how the above email ends:

” …is much more aligned with the usability and simplicity that customers expect from [us].”

This speaks to design on Norman’s “reflective” level as discussed in his book Emotional Design, paraphrased below from Reimann (a contributor to About Face) on UXmatters:

“reflective—The least immediate level of processing, which involves conscious consideration and reflection on past experiences. [snip]. The most interesting aspect of reflective processing as it relates to design is that, through reflection, we are able to integrate our experiences with designed artifacts into our broader life experiences and, over time, associate meaning and value with the artifacts themselves.”

Essentially, what does this say about me and/or my company?

Creative Labs learned this lesson the hard way. Apple threw concern for cost and features to the wind and took over the MP3 market that Creative basically created with their Nomad line of players.

Are your customers in danger of leaving for this reason?

How convinced are you?

My first experience with Hellgate: London was an error dialog.

“Could not find language.dat”

A quick visit over to the Flagship Studios’ forums (HGL developers) only to find that it’s my vault.

The relevant section:

“…is the result of you people installing through [the wrong file]…you must run the setup.exe on the DVD”

setup.exe? Can you find it? Quick! You hurriedly unpack your shiny new game and click on the first thing you see that looks reasonable.

The “HGL_x86 Windows Installer Package” looks good to me – I have Hellgate, I’m running on an x86 CPU and I want to install it. The tooltip confirms my line of thinking. The install proceeds without warning, only the game won’t start. D’oh!

There is a simple solution here – place the installer packages in a subdirectory. If the contents of the DVD looked like this:

What do you think the chances were of me making this mistake?  With only one real choice, little to none :)

When deciding whether or not to use a link or a button, I have one simple rule – links are for going, buttons are for doing.  Take this example from the Microsoft Windows Vista photo printing wizard.

While I may have some improvements in mind for the layout, the usage of standard (or now standard) components is spot-on.  Buttons are used to alter the flow (continue or exit) whereas links are used for navigation.

The links bring up additional configuration dialogs that alter the print operation but keep you in the flow.  While this has the potential for distracting you from the flow with multiple nested dialogs the likelihood of usage detracts from that concern.

Concern should be expressed at the over-usage of links in desktop applications but like any new component, designers will get a better feel for them over time.

I have mixed feelings on the usability of eBay in general. They’ve optimized the selling flow and rightly so as they make all of their money on listing and final value fees. Twice this week it occurred to me that I should be listing additional items in my early spring cleaning. Selling is so terrifically easy that between meetings I was able to list both items in about 3-5 minutes.

In the past I’ve pointed out the over-abundance of controls in the mail interface. Today I want to talk a bit about the modification of navigation elements in that same interface.

As a seller, I often perform two operations:

1. Check the total selling price of all of my items (the single green number on top of my “Selling” page).
2. Respond to messages (i.e. questions from potential buyers, payment-related issues after items have closed).

Both of which are easily accessible from the left-aligned navigational structure in the “My eBay” section of the website.

As you can see I’ve sold 9 items with 1 pending and while authoring this post, another message has just arrived. Let’s respond to that message.

Note that my left navigation is gone even though the breadcrumb indicates that I’m still in “My eBay”. Normally I’d just hit the Back button. Taken out of context, that would be my analysis as well. Typically, however, I respond to messages which means several presses of the Back button to get back to My eBay. The problem with this approach is that I frequently “overshoot” my target: the “Sold” items page.

How about using the “My eBay” quick links in the top right?

Nope, can’t get back to sold items from there. Note my confusion, as indicated by the question mark. Thus begins the multi-step process of figuring out which of these links will take me closest to the Sold page (all of them, it turns out will put it one click away).

This “reeks” of separate teams designing the interface, or at least of the messaging interface being designed in seclusion without a holistic view of the selling and settlement processes.

A dialog from the Cisco VPN installer reminded me of an episode of Seinfeld.

Seinfeld Season 9 – “The Maid”

JERRY: What’s around you?

KRAMER: I’m lookin’ at Ray’s Pizza. You know where that is?

JERRY: Is it Famous Ray’s?

KRAMER: No. It’s Original Ray’s.

JERRY: Famous Original Ray’s?

KRAMER: It’s just Original, Jerry!

JERRY: Well, what street are you on?

KRAMER: Hey, I’m on first and first. How can the same street intersect with itself? I must be at the nexus of the universe!

Cisco’s VPN software is/was notorious for its stability issues on the Mac. Of course skepticism followed me to my Vista laptop. Every so often it would forget all of my connection settings forcing me to re-enter several bits of easily-forgettable information: IP addresses, obscure passwords and VPN configuration settings.

Let’s get the latest version.

Start the installer:

This is an upgrade from a previous version yet the installer is asking me to uninstall… itself? I must be at the nexus of the universe!

Consider the following:

1. Cisco was able to detect this condition.
2. Cisco wrote the installer for this application.
3. Cisco wrote the installers for all previous versions of this application.

Perhaps Cisco, with its intimate knowledge of its own software, might be able to handle all of this for me? Isn’t this what computers are great at? Automation?

“Aww c’mon Rob!” you’re thinking.  “Just uninstall and reinstall yourself.  It can’t be that hard!”  Here’s how that process went:

1. Uninstalled original client which crashed the machine.
2. Uninstalled (again) ‘successfully’.  Reboot.
3. Installed new client, detected remnants of previous install (even though I uninstalled it), rolled back install progress, started some sort of Cisco uninstall.  Reboot.
4. Installed new client (again).  Reboot.
5. Installed new client (again for the third time) and was successful.

Let’s learn from Cisco and Yahoo!’s less-than-stellar examples of error reporting – if we can detect it, we can probably do something about it.

McAfee’s update notification configuration dialog has several options for us to choose from. Unfortunately they all suffer from the same fundamental problem:

Each of them requires user intervention.

The less aware users are of our applications, the better. This is difficult for many from both sides of the aisle to internalize (business, engineering) and I believe it is primarily a psychological concern – many people lack the courage of their convictions that their applications should be instilled with.

A security update is available? Download and install it! Big download? Chunk it and do it in the background. Requires a reboot? That’s fine, the machine will be rebooted eventually. In the rare case where it’s a code red, a prompt is acceptable – those situations are few and far between though.

The normal mode of operation for our applications should be not be to “stop the proceedings with idiocy” (to quote Alan Cooper) but to proceed as one would expect.

Borrowing from Fowler’s “Refactoring,” I’m using the phrase “bad usability smell” as something that tips us off; that things might not be quite right.

In order to return my notebook warranty, HP provided a link to an online FedEx label printer.

Notice the two bits of instructional text: “(Please select one or more labels)” and “Click the Continue button for dropoff/pickup options.” Why is this a bad smell? Such a simple interface should not require instructions. It doesn’t use any complex components. Checkboxes and buttons have been in the mainsteam for almost 20 years. We have:

• (2) Buttons
• (1) Checkbox
• (2) Links – We can ignore links since navigability is implied, they should be ignored by users as well.

What’s wrong?

1. The “Print Selected Labels” button is out of sequence. If the first step is to “select one or more labels” it should be after the checkbox(es).
2. The enabled/disabled state of “Print Selected Labels” is all but impossible to discern.  By disabling it, they’re giving you a hint that a requirement isn’t met, but by such obfuscation there’s no way you’ll be able to tell when it’s disabled.

   

3. The “Continue” button should be a link. It’s acting just like a link, moving you on to the next step – a navigation function.
4. The “C” section heading is in the same font size as the table headings.  If the function is different (section label v. column header) it should look different.
5. Arial and Times fonts are mixed – why?

Instructional text usually tells us that the text itself should be incorporated into the interface.  Quick mockup:

There’s much room for improvement and I’m late for work.  Hopefully someone else picks it up and runs with it :)

Due to a shipping delay on a notebook I ordered from HP, I was given a $50 coupon at the HP store. With the ridiculous price of toner, I already knew where it was going. First however, a quick price check at Amazon.

Until Amazon suggested it, I would have never thought of giving someone toner as a gift. I mean, it’s great for several thousand sheets, so why not?

“Every time you print Yahoo Maps directions, I want you to think of me.   That’s right, I didn’t forget.  HAPPY ANNIVERSARY, BABY!

And when my wife has shed her final tears of joy, we’ll take a picture of the special moment and upload it to Amazon.

If your wife doesn’t own a laser printer, chances are she does have a mobile phone.  Well here’s the perfect gift for your loved one to go along with that Valentine’s Day cherry red cell phone:

How did Norton snag Ricky Martin for the cover?

You can have all the credit for these great gift ideas. After all, I’m only the messenger.

A quote from the under appreciated Bill and Ted’s Excellent Adventure.

I’m considering replacing my Citizen watch as it’s more a decorative timepiece than anything else (the battery is dead, I wear it when I need to dress up a bit). Let’s have a look at the ESQ SWISS website.

1. The ubiquitous “Skip Intro” as a Flash movie greets us. Select “Canada” when prompted. The entire site is Flash based which precludes deep linking – landing inside the site because a search engine or other site directed you there.
2. Resolutions are trending upwards and the majority of us are at 1280 x 1024. The content of this site (excluding the navigation) is limited to a minuscule area of the screen some 425 x 425 pixels wide.  Normally I have to aggressively resize images to fit them in the blog; this is pretty close to what you’ll see at the ESQ site.
3. The font size on this screen is 9px – very tiny.  Taxing to read even with my 20-20 vision.  Copyright or disclaimer text?  Sure, not the navigation for your site.
4. All of the wording is in CAPITAL LETTERS removing the font hints that we rely on to rapidly process text. The effect isn’t as disturbing here because of the short headings.
5. Usage of the letter “U” in place of the word “You” is somewhat surprising given the appearance of and market for ESQ wristwear. The watches run from a few hundred to a few thousand dollars. Do you envision the wearer of the diamond studded watch texting “omg u have 2 see my nu watch!!” to the girls in 1st period English? Not likely.

I’m interested in a watch and “STYLES FOR U” seems like a good pick… I mean I have to pick something and I have no idea – may as well pick the first one. The drop-down (shown below) is “COLLECTIONS” (variously coloured rectangles are mine):

1. Here we have a list of approximately 20 ESQ collections and unless you’re an ESQ employee you’ll certainly be lost. “KINGSTON”? “SIMONE”? “MUSE”?
2. The drop-down has a thin, 1-pixel line on the left and no other defining characteristics, overwriting the navigation with invisible borders in a way that makes the page appear broken (indicated in green).
3. The absolute worst problem with the ESQ site is how there is no overview of a line of watches. In order to view a complete collection, you have to manually page through dozens (hundreds?) of watches one at at time. This process is slow and painful to sit through.
4. The previous and next watches are desaturated and shown to the left and right of the current timepiece. This is a hint that there are things off screen in either direction yet both distract from the timepiece front-and-center.

Contrast this with the Roots Canada website:

Do you feel as though you cannot predict which kinds of watches you’ll see when you click those headings? Notice also the use of a representative watch from each collection, making the text headings almost redundant – simply reinforcing our idea of which style we’re about to choose.

Let’s have a look at the Classic Watches.

I can tell right away I’m interested in only one watch and that happened in 1 to 2 seconds. Seconds. Detour Watch for Men – Brown. We process colour preattentively which eliminated half of he watches before I even know what I was looking at.

To examine the same number of watches at ESQ’s site, it would have taken 15-30 seconds.

If you knew of a way to speed up decision making by 15-30x, would you do it?