UX Fails

UX puzzle: what is grayed out?

The squalid saga of #444 and #aaa’s battle over #fafafa

Okay, I’m shopping for a mini PC for $reasons, do my research, choose a brand and a model. Go to the official site, pick my model, and customizing my set-up and see this:


Can you tell which options are available? (I couldn’t — tried several times to select 4GB/64GB.)

User error, perhaps. Let’s look a little closer:

What you’re seeing is the difference between #444444 and #aaaaaa, probably more noticeable against a white background. Instead, this drop-down features an almost-white background of #fafafa (that’s #fafafa). It’s easier to see with swatches:

Maybe if we ditch the ghostly background for pure white, the gray-vs-gray contrast will be sharper?

Or here they are side-by-side:

By this time you can be absolutely certain I’ve abandoned all intentions of purchasing whatever it was because:

  1. The seller showed me products they didn’t have
  2. The seller made it hard for me to tell what they had vs. what they hadn’t…
  3. …and then pretended I had choices that I didn’t have. (In fact, of the 16 total options available in the various drop-downs, only 7 less than HALF — are actually available.)

Seriously! Here’s the product “customization” module:

I highlighted “New” because it’s the only defaulted selection. That’s right — even though 4 menus offer choices, only 1 is pre-selected.

To continue my list above — 4. The seller made me click when I shouldn’t have to.

So many UX fails… so what should the seller do?

  • Always set a default selection in every chooser. (I know — you worry people will gripe because “I didn’t pick that” but in fact most people who aren’t paying attention when buying don’t pay attention when they receive their product either.)
    • Now you might be thinking “Sure I’ll just put whatever’s the most expensive option as the default and make more money!” That’s what we call an anti-pattern — another way of saying it’s not customer-friendly.
    • Instead? Do this: create a menu that offers presets with labels like: Budget Shopper and Performance Junkie and Build My Own — the first is bare-bones, the second has all the bells-n-whistles, and the third opens up the full list of customization options.
    • None of this works if you don’t actually have product variants available to ship!
  • Think long and hard before listing products you don’t have. Because what are you hoping? I’ll see you’re all out of stock of 4GB/64GB models and come back later? (Guess whether there’s a “email me when available” function (also known as the “Hail Mary of CRO)? Haha you knew there wasn’t.)
    • Not sure if you should list something? Follow this easy rule of thumb: Don’t.
  • In-stock vs. out-of-stock colors should contrast. Users shouldn’t have to squint at the menu or use a color picker to figure out what’s in stock.

You know, I never did buy that mini PC. I seriously doubt any company fronted by a website that bone-headed creates easy-to-use, delightful products.

Leave a Reply

Your email address will not be published. Required fields are marked *