A trend I’ve been seeing more of lately on websites is taking usability a step backwards by reverting to old tactics that sacrifice usability in order to retain the “design aesthetic.”

Above (via the Ford website): How is reading this much copy in a small, scrollable area convenient or easy for online shoppers?

This mentality reminds me of the early days of web development where print designers tried to make the transition to designing for the web without understanding the constraints and ways to leverage the web medium for interface design. A design would be done, printed and viewed for approval, and then the content would be crammed in to fit with the design aesthetic. This is not how the web works! Users scroll, websites offer interactive features, and there are ways to expand design templates elegantly.

Concern over “below the fold” syndrome

There’s a valid concern that content appearing “below the fold” (below the initially viewable area in the browser without scrolling) on a website is not seen and not clicked on as often. Usability and eye-tracking studies have proven this. However, in the below full-screen example, we’ve done a disservice to the end-user by putting copy into such a small, scrollable area that it renders it rather useless:

This is a case where the template design fails to accommodate the content on the site. When the template doesn’t work for the content, it results in usability issues. When you have supplemental content to display in an interface on a website, it’s best to leverage the benefits of the interactive medium. See the below example in our product configurator:

Above: Here we have more information available to further explain these options. So as to not overwhelm the end-user, we don’t want to always display all content on screen so we give them the option to “learn more.”

Above: After clicking “learn more,” we use an animation to give the effect that the “learn more” text is extending the length of the “inside mount” option. This is a much more elegant and user-friendly way of retaining the design aesthetic while maintaining the usability of the site. See it in action anywhere you see the “learn more” link.

Voice of the consumer should prevail

These design deficiencies really should get flushed out with “best practices” documentation and usability testing and the voice of the consumer or end-user should prevail. While its tempting for online product managers to create aesthetically-pleasing sites, this can’t get in the way of the usability and the reason why the consumer is visiting your site in the first place – for information to purchase. Impede their research and they’ll quickly be on another website looking at competitive products.

(This is the first post in a series in which I intend to review online product configurators across industries. We’ve built a product configurator from the ground up because no viable off-the-shelf options were available for our complex products. This has resulted in complete immersion of website usability, consumer insights, and an intimate understanding of the challenges in offering made-to-order products online.)

I work in the home decor industry, blinds and shades in particular. The shopping process for understanding, selecting, ordering, and installing custom blinds and shades can be daunting if it’s unclear what is available to you as a consumer. Plus, when it comes to home decor and fashion, there is a lot of emotion involved — how you furnish your home says a lot about you and your family so the last thing you want to do is make a very expensive design mistake.

More Options = Better. Right?

Not necessarily. However, the Blinds and Shades industry is an old industry rooted in differentiation by product options and colors. In an industry determined to never be outdone by its competitors, window treatment manufacturers both benefit and suffer from being able to cater to the millions of variations of window sizes in consumers’ homes to the unique decor tastes of consumers laying down their hard-earned money. The engineering and manufacturing behind the products is complex, but when it comes to presenting an ordering screen to an untrained user, it’s a whole new challenge.

DIY Product Configuration & Ordering

The problem that has manifested is an industry offering such confusing products that only a designer or decorator could assist a consumer in purchasing. So, how does one create a website to help DIY’ers who choose to go at it on their own?

When taking all of the products, colors, options, and manufacturing limitations into consideration across 100+ billion ordering combinations, this makes for a very complex product configurator. Mocha or Chocolate colored finish? Inside or out-side mounted installation? Motorized or cordless control mechanism? What type of decor do you have in your room? What type of room will this blind or shade be installed in? If you’ve gone through the process of outfitting your home with new blinds, you know that it’s challenging.

Key components to a product configurator are all about usability

Usability in a product configurator means:

1. Showing options with photos or videos
2. Offering feature/benefit statements for each option
3. Categorize options into digestible steps
4. When a conflict is detected, provide messaging in plain English and in a relevant location.

Step 1: Showing options with photos or videos

One of the fundamentals. Consumers will buy what they can see. Case in point, here is a $1,530 “Track Pack” option on the Ford Mustang without pictures:

Step 2: Offering feature/benefit statements for each option

A couple years back I was looking at Ford Mustangs on Ford’s website. In the configurator, I was presented with an option of a rearend gear ratio of 3.73. I went back recently and took a screen shot of this because Ford is still doing it. What’s wrong with this picture?

I don’t know what the factory default rear axle ratio is. Being a “car guy,” I know the benefits of gearing up or gearing down, but without being able to compare this option to what’s offered by default, it’s hard to justify the $495 price tag. I have to leave the product configurator and search around on the site to see if they’ve listed the default rear axle ratio specifications somewhere.

Step 3: Categorize options into digestible steps

Oh, how it’s daunting to enter into a product configurator without an understanding of how many steps or questions there are to answer. Blinds and Shades in particular can be upwards of 25 questions just to get to a completed configuration. The tricky part is dividing the total number of questions into logical buckets or steps. Consumers do not configure products in linear fashion, particularly when comparing pricing online, changing options, and running into option conflicts. They hop around, jumping out of predefined order. It’s important to categorize questions so a consumer and quickly remember where they saw an option.

Step 4: When a conflict is detected, provide messaging in plain English and in a relevant location.

Again, Ford is on the right track by showing the conflict, but what is always difficult to decipher is the why behind conflicts like this:

What’s happened here is the 3.73 rear axle package is already included in the “Track Pack” option. In order to understand this however, I have to separately click on the “Track Pack” option and the “Rear Axle Package” option to see if I can come to my own conclusion as to why these two options cannot be ordered together.

In the case of blinds and shades, I’ve configured a Cellular Shade that is 83″ wide X 60″ tall:

I’ve chosen the “cordless top down/bottom up” option but I see an error message that explains the why behind the conflict, not simply “this option cannot be ordered.” It allows me to either alter my measurements on my shade or choose another control option. I don’t have to click around on the options to understand why this particular option cannot be ordered.

Earlier this year the Amerock.com website become another branded site that our E-Business team was to manage. The challenge that came with this responsibility was migrating the “look and feel” of the existing site to a different platform. What entailed was about a week of work to craft a new set of stylesheets that essentially made the “new” site look nearly identical to the old site.

We did however take liberties in updating products based on new product rollouts and added functionality that didn’t previous exist. Here are some before and after screen shots:

Product Navigation (Old)

Old site consisted of a 4-layer navigation schema:

1. Choose Product Category
2. Choose Product Type
3. Filter Product List (Choose 1 Finish, Style, and/or Collection)
4. View Product (See details, finishes, etc.)

The problem with this style of navigation is it forced the end-user to make too narrow their product selection too soon in the process just to see a product list. Finish coordination across product types is important in cabinet hardware, so the desire to see “all products with a satin nickel finish” needed to be possible. With the old site, this could not be done.

Above we see Decorative Hardware product types.

Here we see a product listing, but we can only choose from thedrop-down menus for further filtering options.

And here we see product details with finishes. Lots of unused real estate.

Product Navigation (new)

A simple 2-step process exists:

1. Choose Product Category (from the main navigation of the site)
2. Select multiple filters and see your product results

Select multiple filters across multiple filter types. An additional bonus is seeing the filter “counts” so there’s no guesswork when you’re clicking on options wondering if you will see any additional product results or not.

Clear visibility in the left-hand navigation of what filters are selected and which product results you’re viewing. Additionally, there are “results per page” options as well.

Product comparison also didn’t exist on the old site. It is now available on the new site.

Image zooming was also unavailable on the old site. Thanks to Adobe Scene7′s dynamic image zooming technology, we use it on all product pages to enable the end-user to zoom in on-the-fly on the product image.

Table Stakes

It seems odd to be showing some of the above features as they are mostly “table stakes” features these days. However, there are many large e-commerce sites that still do not offer simple things like product image zooming, unlimited product comparison functionality (do I really need to be limited to comparing 3 products at a time so the site design stays scaled proportionately?), and “results per page” customizations. Amerock.com is now fairly level-set with these “table stakes” features an we begin the continuous improvement with repeatable processes.

In an attempt to solicit feedback, Scion commits an end-user faux pas which drives me nuts. In a previous post, I showcased a similar end-user violation by Men’s Health.

Website accessibility is no different than in-store accessibility within a retail environment. Would you design your store aisles and product shelving so only people that were 5’10″ or shorter could fit into the aisles? Of course not. Even if the majority of your customers may be 5’10″ or shorter and only a small percentage must duck and maneuver their way through crammed aisles, this small percentage are being turned away for really no reason other than poor planning. There is no excuse for this type of website accessibility limitation because it’s not a bug — it was literally a decision made to specifically not develop a survey (of all things) to be accessible to everybody.

When working on the bleeding edge of technology with ajax and dealing with the browser-specific intricacies of javascript (among many other challenges of a web 2.0 implementation with an older end-user demographic), we spend a large percentage of our time in the QA stage testing features of Levolor.com across operating systems and web browsers. From Windows 2000 running “vintage” versions of IE6 to Mac OS X running Safari 3, Levolor.com is very accessible.

We’re human and do admit to making mistakes — and sometimes the capabilities of an older browser simply cannot support web 2.0 functionality — but at the same time go out of our way to ensure an optimal experience for all of our visitors from accessibility to usability. Popular brands like Scion need to embrace similar strategies for all online touch-points.

The kid in me still loves chocolate milk. However, chocolate syrup has been missing from our fridge for a while now so I picked up a new container of Hershey’s chocolate syrup today while running a few errands. I was pleasantly surprised to see they had redesigned the cap on the bottle. Here’s a picture of the old style (remember how it would always not get fully closed and would get all crusty?):

Here’s the new and improved design which, so far, stays much cleaner, easier to open, and easier to use:

Sometimes it’s the little things in life that make me happy. Oh, and by the way, Chip’s Ahoy has improved the labeling on their product so you don’t accidentally open it on the sides of the packaging (see my original post where I accidentally mauled the package):