26 September 2007 ~ 0 Comments

JavaScript Detection and Redirection Trick

Technology

With the advent of cross-site scripting attacks and other browser security issues, approximately 4-6% of us have disabled JavaScript completely. Unfotunately, the navigator object does not include a way to check for JavaScript execution the same way it allows a check for cookies.

A number of workarounds exist, none of which work if your application consists of one page (rare) or if the page that has to detect JavaScript is a deep link (not rare).

  • Use JavaScript to drop a cookie, then check for the cookie. Sure you can drop the cookie, but during that single page load you need to be able to see if the cookie was dropped and act accordingly. But if JavaScript is disabled, you can’t make the check.
  • Use JavaScript to fill in hidden form fields. Again, it assumes you can deal with a server round-trip to discover that JavaScript is disabled.

What worked for me was use of the <noscript> tag:

<head>

<noscript>

<meta http-equiv=”refresh” conetent=”0;url=/noJavaScript.html”/>

</noscript>

</head>

…which immediately redirects the client to the specified URL should JavaScript be disabled.

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.

23 September 2007 ~ 0 Comments

I Should Click on What?

Usability

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!

23 September 2007 ~ 0 Comments

I Can’t Even Tell

Technology Usability

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

  1. Enter “Palo Alto” in the City field.
  2. <Press TAB>.
  3. 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.

17 September 2007 ~ 0 Comments

Scrubbing Bubbles Automatic Shower Cleaner

Usability

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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 :-)

16 September 2007 ~ 0 Comments

PlayStation 3 – All Brawn and No Brains

Usability

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.

16 September 2007 ~ 0 Comments

The Answer Isn’t More, It’s Less

Usability

“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.

12 September 2007 ~ 0 Comments

…Paved With Good Intentions

Technology Usability

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!

We won’t take too much time to bemoan the inclusion of a group box around a single control ;-)The developer is attempting to solve a problem that doesn’t exist via the use of “helpful” JavaScript.

<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:

  1. Fill out email.
  2. Click checkbox.
  3. Email field loses focus.
  4. JavaScript checks the checkbox.
  5. My click unchecks the checkbox.

The more important issue to consider is that this JavaScript is attempting to solve a problem that doesn’t exist, akin to pages that automatically advance the tab order when you’ve completed filling out a field.

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.

10 September 2007 ~ 0 Comments

What on Earth is a ‘Permalink’?

Usability

Courtesy of the Buy.com product search results page:

  • How many people know what a “permalink” is?  And when did we start differentiating between “permanent” and… non-permanent links?  If there’s one thing that will make the web more usable, it’s the idea that some links are temporary.  As if bookmarking isn’t complicated enough…
  • The way it’s been presented is that it looks like a label for the “product zoom” toggle.
  • The lightning bolt / shock icon doesn’t exactly imply permanence. I can’t imagine many folk eager to click on icon which we’ve only experienced as a warning label on power transformers.
  • Less of your interface is better. If “permalinking” is so important, can’t you mod_rewrite or engineer your app in such a way that it doesn’t have to be requested?

And yes, that’s some engineering on my part to search for ‘usability’ so that something so ridiculous shares the screen with something so not ;-)

09 September 2007 ~ 0 Comments

Neither Rain nor Snow nor Error Messages…

Usability

Having had a recent blowout on eBay after our latest relo, I’m in the midst of updating my shipping information when…

And you thought the government wasn’t helpful. Here’s the scary part from the USPS CSS:

.stackTraceRed {
color:#CC0000;
}

Someone actually took the time to verify that this is what a stack trace would look like. There’s no excuse for this sort of lazyness in development. Anything is more useful.

In related news, I really enjoy the conversational tone of the Scotch tape I’m using… “Yet Strong In Use!”

08 September 2007 ~ 0 Comments

Chase Online’s Search Form

Usability

Objective – Locate a Comcast charge made during August.

Means – Chase Online’s credit card search interface.

Issues – How long do you have?

  1. Several near-alignment and centering issues. I’m hard-pressed to find a single instance of alignment in this entire interface. It appears unprofessional and amateur.
  2. Components are jam packed together as though there were issues with how much vertical space is available on a web page. This is well “below the fold” so a few more pixels won’t hurt.
  3. “Select Account”… I have no choices available to me here and I’m looking at my credit card right now! What else could I possibly want to search? State Farm? My medical records?
  4. “Search for” in the header doesn’t flow into any other part of the interface. “Search for… Select Account”?
  5. Choices in the “Since Last Statement” combo box reflect how the bank thinks about my activity, not how I think about it: “Last Statement”, “2 Statements Prior”, “3 Statements Prior”, “All Transactions”.  Hey geniuses, if I knew where it was, I wouldn’t have to search for it!
  6. The “From” and “To” fields are blank slates. I have no idea how I’m supposed to format my input into these fields. How about some bounded date-input components? Or a JavaScript-based calendar picker like the ones travel sites use?

Guys, you’re running a massive bank here. Drop minimum wage on a high school student to clean this up. Because you’re my bank, I’ll get you started.

The first option defaults to the last three months. The second option defaults to the current calendar year. Only Chase can tell me if this is what people are typically interested in, but it’s certainly better than what I’ve been using for the past few years on their site.

« First« 7 8 9 10 11 »