Archive | September, 2007
Having been on the development side of things for almost 10 years now, there’s a conversation I’ve heard several times and it goes like this:
“We have a request for feature X”
“Sounds reasonable. Standard X?”
“Yep, should do”
(where X is a shopping cart, search form, login page, etc.)
Alternatively, it’s assumed that because these components are so commonplace that we engineers can pick and choose best practices and build something respectable with little to no guidance.
Seeing software as context-free components leaves so much on the table and it absolutely destroys usability. After all, nearly every interaction is an opportunity for competitive advantage (in the reasonable assumption that your competitors have not done design work) so why throw away a potential differentiator?
Unfortunately this is often the driving force behind many (most?) engineering efforts. In the implementation world it’s terrific and makes business sense, but when it influences the interactions (which it often does) it’s disastrous.
Given the ubiquity of the searching and browsing interfaces for online merchants, let’s take the Altrec product browser as an example, for no particular reason other than I happened to be shopping there today.
First, the positives:
- Generally appealing, especially on the individual product pages. I happen to be a fan of the colour scheme; one shared by Adobe and CNN. I like using the site because of the way it looks and its responsiveness (and its prices :-)
- Obvious links to more information for products with no guessing “Where do I go from here?”
- Ability to choose between grid and list view. Helpful when I care less about extended information and can more easily decide based on appearance. I used this twice today.
- Terrific summaries so I don’t have to dive in to each product for more information. From this page I can see right away that the Zephyr and the Nomad are my likely choices.
What could use improvement from left-to-right, top-to-bottom:
- The category name “Ropes” is repeated. What does “Ropes: Ropes” mean? I’m guessing this is a by-product of their information architecture approach. It’s not going to stop me in my tracks but I did say, “huh?”
- Page browser is shown when there is only one page.
- Inadequate spacing among browse controls. What is the reason for being so miserly with horizontal spacing? Let these components ‘breathe’ a bit, reducing spatial tension. Let’s add 5-7 pixels of padding at least between each, with 13-15 pixels between logical groups.
- Sorting is context-free. I’m browsing ropes, not a group of unrelated widgets. I would like to see “diameter”, “length” and “stretch” for starters.
- “Compare: CHECKED ITEMS” placement: Should be left-aligned over the comparison checkboxes. It’s currently too far away from its playmates and there are no visual cues to relating them apart from having to read and process “Compare: CHECKED ITEMS”.
- The “Compare” label for the “CHECKED ITEMS” button seems to have been done for consistency’s sake (i.e. all components are labeled). This should be a button with no label. I suspect this was attempted but with such crowding it would have suffered from common fate, appearing to be related to the “View” option. Make it a button, move it to the left.
- “Our Price” – whose price would I think Altrec is showing me? Its competitor’s? Remove “Our”.
- “BUY NOW / INFO” is misleading, unnecessary and too much of a visual draw; screaming at you with its fiery red and CAPITALIZATION while you’re trying to read product summaries. It should be removed entirely. You can click on the image and on the product name so no worries on getting product info. It doesn’t add the product to your cart so “BUY NOW” is inaccurate.
- EXCESSIVE CAPITALIZATION – please, stop screaming at me when I’m trying to find something.
“Standard” components need love too! Here’s a quick mockup:
- More breathing room for each individual listing. Same amount of information with less visual crowding through increased spacing and colour combinations.
- Less attention drawn to the brand, more attention drawn to the product. Brand is now placed to the right of the product so that you can more easily scan product names without brands getting in the way.
- More callout of the price, mitigating the need for a label such as “Our Price” or “Price”.
- “Compare Selected” functionality now in close proximity to its playmates (the checkboxes). Relatedness further increased by the use of a consistent background.
C’est tout! There’s still room for improvement (e.g. including prominent product characteristics like diameter and length in the listing), but it’s a Saturday afternoon :-)
I haven’t figured out the words to describe a message like this. There’s no error per se, yet I can’t tell if my click on the “Accept” button was successful.
I’m grateful that Outlook has notified me of my meeting faux pas.
“You don’t have to confirm to yourself, silly!”
- Why did it send me a meeting request I didn’t have to Accept? If I scheduled the meeting I will already have known about it and it will have appeared on my calendar.
- If it is going to send me a meeting request that I can’t Accept, why does it display the Accept button and allow me to click on it? A perfectly arguable design would be to disable it with an explanatory tooltip.
The solution is either to not send me anything or to stop whining and just accept my Accept click.
What worked for me was use of the <noscript> tag:
I haven’t run this through the W3C validator, but it does work on IE6, IE7 and Firefox 2 which is good enough for me :-)
UPDATE 10/04/2007: This does not pass XHTML validation.
It’s Saturday. You’re at work. You get spam from a site you haven’t read in 2 years. You’re in a hurry – you’re busy and you want out of the office, but you’re tired of these notifications.
You click Unsubscribe and land here, the Apartment Ratings website. Quick! Figure it out! How do you unsubscribe?
How quickly did you find it? Did you ever find it? I spent a good deal of time looking for a link to click on, something about “notification preferences” or “marketing” or “unsubscribe”.
It’s the yellow envelope. Click the yellow envelope and you’ll get this:
What’s wrong and what can we improve?
- The biggest problem is upstream: I should have one-click Unsubscribe access from the spam itself. Too often you’re forced back to the site (login, go to preferences, search for preferences) – totally unnecessary. Putting hurdles in front of marketing messages doesn’t get more people to read your babble, it gets them upset.
- The envelope doesn’t appear to be clickable. It looks like an icon label for the “Notify me of new content” setting.
- The rest of the page uses links for everything. Why isn’t “Notify me of new content” a link? Or at least a parenthectically-mentioned “(change)”? There are links below the horizontal rule for Create, Edit, and Delete. And I can even guess from the parenthetical “(0)” that I can click that and manage my favourites.
- When I move my mouse over the envelope, it doesn’t turn into a hand; it stays a pointer. While I doubt the majority of web users will notice this subtle difference, it’s extraordinarily low-cost to implement (cursor:xxx in CSS) and communicates clickability.
- Programmer-speak “Notify me of new content.” How about “Notify me when someone comments on my review” or “Notify me when my reviews get comments” or “Notify me when one of my favourites gets a new review” ?
- Design in general – Why is there a horizontal rule? What appreciable difference is there among all of the data presented on this page? It’s all stuff to do with me, and there’s very little of it. Why are the fonts so small? 11px is as low as you can go, but why not 12? There’s just not much on this page so why a little font?
Off to Planet Granite!
Some UIs are just so confounding, so defying of common sense that you can’t even guess what they were going for.
Courtesy of Fry’s online presence – outpost.com
- Enter “Palo Alto” in the City field.
- <Press TAB>.
- The screen redraws with the red message, “City modified to match zip code” except, since you didn’t yet enter the new zip code, it changes the city name back to what it was.
If you want to change the city, you have to edit the fields in reverse order.
Let’s take a look and see what’s wrong:
- The message is red, which looks like an error (it’s not).
- Display inertia – while programmers think in terms of “onclick,” “onfocus,” and “blur”, nobody else does. Interrupting flow in response to these events is confusing at best, alarming at worst.
- There’s a full page refresh that axes your keyboard focus, so when the page refreshes while I’m glancing at my numpad thinking I’m putting in my zip code, I’m filling “33322″ in the First Name field.
I’m taking a shot in the dark here when I guess that Fry’s is dealing with a lot of returns based off bad zip codes. Since you know where you live, if a strange city appears you’re more likely to notice that than the difference between 33322 and 33323.
The real solution is for the application to stop whining. In the case where I get it right, don’t tell me anything – take my order and be quiet. If the city name and zip don’t validate, are they close enough that the application can figure it out? The chance that I would get my city name wrong seem infinitesimal, unless this is the first time I’ve ever had to fill it out.
What’s surprising about all this is that I’m in the process of giving money to Fry’s. If there’s one “use case” that should be bulletproof, it’s the checkout process.
Unless of course, you’re not interested in making money.
Step into my shower so I can show you the Scrubbing Bubbles Automatic Shower Cleaner.
In addition to being a poster child for Biotherm products, the main attraction here is the shower cleaner.
Here’s what I like:
- No-nonsense naming: It’s not the ShowerFlash! or the StallBuster! It’s the… automatic shower cleaner. Boring, but I wasn’t confused at all about what it did when I saw it at Wal-Mart.
- One-button delivery: That’s it, just one big blue button you press after you get out of the shower. A few minutes later you’re done.
- Caddy: I’m not sure how they missed this, but previous iterations came without the housing, hanging from your shower head, jostling for position with the caddy I already had. Not only can it store all of my junk, it cleans my shower too. The only additional space is takes up is equivalent to a family-size bottle of shampoo.
- White housing, transparent container: In spite of its size, it’s not at all obtrusive. A clear understanding of where it will be used.
Both showers have one of these, can’t see how we used to live without it :-)
After authoring the previous post, I booted up the PS3 and saw there was a message waiting for me. Old one, let’s delete it.
Several Cell processors yet apparently deleting an email is an operation so fraught with peril that not only should my request be confirmed, I should be notified upon success of such a dire undertaking.
The only thing worse than a needless confirmation dialogs are “success!” messages, like a proud child working hard to please their parents. “Look daddy, I did it!” It’s fine to hear this from your kids, but that should tell you what message you’re sending your users about the confidence you have in your application.
“No matter how cool your interface is, less of it would be bettter” – Alan Cooper
We’re all familiar with “less is more,” but there’s a minor variation of this guideline I’ve come to call the “Adding Versus Fixing” dilemma.
In order to address a usability concern, our gut reaction is to add one more bit of text, one more knob to turn, one more button to push… “If they only knew a little bit more or had a little more control, they’d be fulfilled!”
More often than not, these types of band-aids are symptoms of a more significant problem.
- The most often abused example is the confirmation dialog, which has unfortunately become so ingrained as a valid interaction that it’s difficult to convince people otherwise. Concerned with accidental deletion, we throw up the ubiquitous “Yes/No/Cancel?”. The real problem however, is the lack of undo functionality. Instead of adding endless confirmation, fix the real problem and support undo. And not the “oh my God true undo will require a rearchitecture and take years!!” but the “maybe we can allow them to undo only the last thing they did? And not after they log out?” type of undo.
- At a previous employer, we dealt with countless support issues because of our inability to limit choice. If they couldn’t do anything they wanted whenever they wanted, it was viewed as undue restraint. This led to reams of special-casing every time a new operation was added to the system. They never addressed the real problem – too much choice.
Rip off the band-aid and address the root cause.
Overall, my experience with the USPS web site has been a pleasant one. I recently sold several items on eBay and printed many labels. It saves me a trip the Post Office and for that I’ll suffer through most anything, which is a strange selling point – the in-person experience is so bad yet I still patronize the company. Fortunately they’ve done decent work and their UI gets the job done. It’s as much as I can ask from the government :-)
This one particular interaction always trips me up: When you fill out an email address and click on the “Notify recipient” checkbox, the check mark disappears!
<input type="text" id="deliveryEmail" onchange="checkEmailAddress('deliveryEmail', 'emailNotification')"/>
The issue is one of placement. If the check box was not next in the component flow, this would work perfectly. Because it is next in line, this is what happens:
- Fill out email.
- Click checkbox.
- Email field loses focus.
- My click unchecks the checkbox.
Developers are attempting to address the false goal of minimizing clicks. What they fail to understand is that these easy component navigation clicks are invisible to users. They understand that to type or check something you have to click on it. Why break that expectation? I’m typing in one field and without purposefully navigating to another, my focus has changed?
Some people may notice it but I suspect most people are clicking anyway, so they get no benefit. Other people navigating with the keyboard are frustrated because their navigation model is broken.
Don’t pull the rug out from under your users.