4

I have a project I'm working on where the product detail page starts with a SKU, and as you build, or configure the product, it turns into a unique SKU/product. Not very different from a lot other ecommerce sites.

However, there are 3 or 4 configurations to be made. I started going the dropdown route but wanted to take a more visual approach so that the customer can see themselves actually building out a product and how them making one configuration effects their choices for the next configuration to be made. However, now I find out that each configuration might have around 10 or so options. I'm worried about overcrowding the page.

Casa.com does it pretty well, I think.. but their options for #2 have limited text in them...some of mine might have triple that amount.

casa.com

Is casa's approach valid? What other sites take this approach? I've seen Amazon do this as well.

1
  • I think the lesson from the example you posted is that different kinds of options are more suitable to be displayed in different ways. Selecting colour visually makes sense. Some other information may make more sense to select from a drop down menu. Replacing drop down menus entirely with these kind-of-but-not-quite segmented controls isn't a solution either. The key is to design for each classification of option in the most appropriate way you can.
    – Kit Grose
    Jun 30, 2012 at 14:36

2 Answers 2

2

Casa's approach is primarily useful when there are fewer options. There are two competing principles at work here: relying on recognition, not recall (which suggests that users can make more meaningful choices later if they can see their previous ones), vs. reducing the number of variables that the user has to juggle at any one time. A number of studies have suggested that when presented with more choices, users are less likely to make a decision, and may often make sub-optimal decisions - for reference, see Barry Schwartz's TED talk.

Since your approach is to building out a product, then choices that the user makes are going to be dependent on previous choices and may affect future ones. What this path dependence means is that if you continue to display previous choices to users, there will be a tendency to revisit those choices since they remain high in the user's awareness.

Of course with lots of options, this can quickly become overwhelming. Progressive disclosure can go some way towards reducing this problem by hiding future choices, but hiding previous choices may be incompatible with the "building out" method, as the user cannot easily get an overview of what they have built so far when they are forced to rely on memory of previous choices. On the other hand, since Casa has fewer options, they can more reliably display them all simultaneously without worrying too much about overloading their users with superfluous choices.

A variation on the standard progressive disclosure pattern is to have progressive summaries (perhaps built into an accordion-like element) as users complete and collapse choice stages - removing the direct opportunity to choose, but still providing them the information about their choice. An example of this is:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Ultimately, your goals in designing the e-commerce UX are to get the user to checkout as quickly and smoothly as possible, with a choice that they are happy with. Needless choices lead to suboptimal decisions (and sometimes a very slow decision or no decision at all), so look to reduce them where possible.

Making sure that your users have enough information to make meaningful choices is a good goal for satisfaction, but people often want more choice and more information, even when this is not actually good for them. It's a very paternalistic view (and might therefore be somewhat unpopular as a result), but you may actually make your users happier by restricting their options at any given point in the process. Note that this doesn't mean you should stop them going back and changing things, just that you shouldn't present all the previous choices in addition to the current ones.

0
1

If your main concern is that each configuration may have many options, making the interface overwhelming when viewing all of those options, you will probably want to use some form of progressive disclosure. Present only the options for the first configuration and, upon completion of that step, show the options for the second. Or use an accordion to hide the past steps while allowing the user to reveal these details and make a quick change if necessary.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.