Are there any established design patterns for complex product configuration?

Question

Thanks for looking!

Background

I am a software engineer (not a UX designer) and am helping a very good manufacturing client redesign their online store.

This particular manufacturer sells products that are configurable and can each have accessories and configurable as well. Occasionally, the accessories have accessories that are configurable. So 3-4 levels of configuration.

Problem

I am struggling to find a creative way to help them design an interface that is not overwhelming to the user. In practice, the user keeps drilling down further and further into product => configuration => accessory A => configuration => Subaccessory A.1 => config => Accessory B => Accessory B config, etc.

Question

Are there any established design patterns to handle complex, multi-tiered configuration? I am probably using the wrong search terms, but can't find many examples on line.

Of course, I have looked at things like the Nike website and various car brands, but usually that configuration is just one level deep (shoes may have different color schemes) whereas I need multiple levels (widgets may have different whatsits. Whatsits may have different whosits).

Any help is appreciated.

Answer 1

Interesting question.

Would be very difficult to give a complete answer without a lot of additional details, So I will try to give some thinking points.

Some questions to consider

1. Main prducts
   

   • Are there numerous products, each with their own accessories, OR
   • Is it one or two products with a customizability range of accessories, OR
   • Somewhere in the middle.

2. Accessories

   • Do they facilitate personalization? Specialization? Improvements upon the existing or new features??
   • Is it probable to always buy accessories, or are they more like extras?
   • Is there a special marketing requirement to sell more accessories?
   • Are there many options for accessories, or is it just a few per product?

The answes to these questions will have a drastic effect on your solution, so consider them carefully.

Possible answers and effects

1. There will only a few canonical products which are then customizable to a big variety of end-products. So we can have a two-tier decision process:
   

   • First decision - Select your producthead
   • Second decision(s) - Customize it.

   This two-tier system should be reflected in the UI. Meaning, I might want to select my producthead, and then (maybe in a lightbox?) make all the tier 2 decisions.

   We lose all context to other productheads here, purposely. This presumes the accessories are less important than the product, and no decision I can make accessory-wise will affect my choice of product.

2. All the accessories are interchangeable between products, and may carry considerable weight decision-wise. For example, i I choose the most expensive accessories, it might make me change to a less expensive main product, so I can fit the accessories I want into my budget.

   This actually means the accessories are more important than the main product, and should be decided upon first. The main product here acts a little more than a case or house to be configured.

   Here I would select my accessories first. Perhaps "gather" them incrementally (like with an "Add" button) and only finally select my case.
   

3. Middle way: If there are multiple products where the accessories fit most (i.e. like many configuration of a desktop PC where each can have the same display or keyboard):

   This is the most complicated situation. If only some of the accessories don't fit all products you can't have them as a final decision. However, some do fit all so you might want to give up the ones that don't and still change products.

   This requires a more complex, "smart" solution. Perhaps suggest alternative to non-interchangable accessories? Simply removing them or not allowing to change product limits usage a lot, I think. Try to come up with a form and work out a clever solution to any change that's made to that form. I don't see a way out of just hard-programming every case.

Final remark

Think about presentation here. Definitely try to have a visualization showing each decision, adding each accessory to it, highlighting where necessary, just basically showing decision' effects.

This is no easy question, and I have definitely not provided an end solution, just a few thoughts to get things going.

Good luck!

Answer 2

Breadcrumbs are your friends here. By allowing users to view what they've done already, you should be able to show them how their choices effect the current outcome. It might be prudent to include simple language with your crumbs. If possible, displaying an image of their custom product would certainly provide interest and context.

Answer 3

This an old question but I'll throw in my 2 cents anyway.

The way drilling is described by switching between structure and config would be confusing to the user. An alternative approach is to have structure and config in separate panels side to side. This is similar to an IDE where file/object hierarchy is shown on the left and content on the right.

The structural panel would show the hierarchy of components, and all the structural ops are done there (adding/deleting/moving etc), when a certain component is selected, its config is shown in the config panel and config ops can be done in the config panel.

If there are other aspects to the component than config, or if there are multiple config aspects, you can tab the config panel to switch aspects. For example showing an image or sketch for the sub component or the full product can be done using the tabs.

Template/default configs (not mentioned by OP) can be applied to a component in the structure panel by choosing from a pop-up list.