1

I am trying to figure out a good interface for a ”complex” problem. I am working on an e-commerce solutions that sells what they call “Kits”. Each kit is in essence a bundle - or perhaps even closer a parts list - of different product items. The twist is that the user should be able to change the individual items in the kit.

An example could be a bicycle where you could change the seat, the handlebars, the lights, the luggage carrier and the bicycle basket for instance (It is not a bikeshop we are working on. I am just using it as an example). The webshop has hundreds, sometimes thousands, of products in the individual categories (Seats, Handlebars, Lights etc.). It is not just a limited list of options. My point being that I cannot just show a simple list of items in a dropdown or something like that. Each item in the kit, has its own productpage in the webshop, and can be purchased on its own, and located in categories with faceted search, subgroups etc.

How do I present all these options – which are basically all products in the webshop – under a “Change item” button in the kit?

I know that one solution would just be to make a search field that the user can do a search in, but IMO - at least, that does not really show the vast options the user has in the case. Also the user has to know exactly what to search for, and in this case it is more about “browsing” for the right alternative IMO.

Any ideas?

1

This isn't a full answer, but maybe you can draw inspiration from a system like Alternate.nl's system builder? enter image description here

1

What about this - treat your "kit" much as we normally treat a "shopping basket".

So, have a function like "start new kit" or perhaps the user simply chooses to add to their basket "kit 137B" as you usually do.

Now let the user browse around the whole site normally.

when the user browser say handlebars, there's a button "add to the kit I'm constructing!"

if you do that, it will say "we've removed the Bell998 handlebars and added the Shimano256b handlebars to your kit under construction"

You could have the "kit you're currently working on" "up top" through the whole site, just as one normally has the current basket up top. (I mean you'd have both "current kit you're working on!" and a conventional "basket" up top.)

Eventually on the kit view, you could click "finalise kit and move to shoppign basket!"

(In shopping basket, the user may have a completed kit, or even more than one. You'd need a button "work on this kit!" Then it would go to the "kit under construction" position at the top of every page. Once again, the user could browse totally normally, but when they click to buy a wheel, it would offer you to put that wheel in to your actioning kit.)


Regarding the three stickers challenge ...

no problem on that one. You'd have a "max count" on certain items.

Normally when I choose say Bell302 handlebars, it's knows I am replacing the Smith333 handlebars. You could say the maxCount on handlebars is "1"

But if I choose GoBigOrGoHome sticker, it knows there us a maxCount "3" on stickers. So it flags that area as red -- you have to delete one.

Note too that some items "have to be 1" (you are not allowed to not have a handlebar, say). Again, just the same, that would be flagged as "red" ... cause the count is zero, not one.

So it's very consistent! No problem for your interface.

Tip: on the car sites (mercedes, ford etc) try some for the "fantasy car assembler" systems (they are often Flash modules). it will give some nice UX ideas about how to flag those situations ("you must choose one of these three accessories" "if you choose X we will delete Y" and so on.

  • Good idea. I was actually thinking of something along these lines also. One of the problems with that solution is that most of the kits has multiple items of the same type. Like in the Bike example, there could for instance be 3 stickers in the kit, that the user could place on the bike frame (can’t find any better example - sorry :)). How would the system, in your example, know which sticker the user was changing? I think you would have to change each item one at a time, and then perhaps it would be too cumbersome for the user. I don't know. – treksterDK Sep 29 '15 at 8:08
  • Sure, see my new edit! – Fattie Sep 29 '15 at 11:46
1

This may sound silly, but you may want to take the "pizza" approach.

Many pizza websites have a list of incredibly common pizzas:

  • Pepperoni and Cheese
  • Sausage and Green Pepper
  • Ham and Pineapple
  • Etc.

At the same time, many pizza website also have a pizza wizard that you can step through and build your own pizza. Similarly, if you pick a premade pizza, you can enter the build process and modify the pizza to make it your own.

Many car websites do this as well, as do website hosting companies, and well... Quite a few places.

However, if you're looking for a quick fix to patch up the current process, then this may not be the best approach. You could always go the "coupon fulfillment" approach. For example:

Sally has a pizza coupon for 1 large pizza, 1 large soda, and one side. Somewhere on the screen, she can see that she has not yet added all of the items needed to complete the coupon to her cart. She can:

A) Search freely, adding items to her cart.

B) Click one of the "item types" (pizza, soda, side) next to the indicator that she is missing the "items" necessary to complete the coupon. Showing her a filtered list of items that can be added to satisfy that part of the coupon.

C) Remove an existing item in her cart that exists on the coupon

At any point, when all of the requirements are met, the status of the "coupon's fulfillment" changes.

I realize this is very rough, but you get the idea. I like pizza.

UPDATE

Here is an example of how to employ this process when you have a large number of options for a given "part type" in a "kit"

enter image description here

This is not a fully flushed out approach, but should be useful in illustrating what we're trying to accomplish. A user wants a kit, and they want to be able to customize the individuals parts of that kit.

  • Cycle through the list of item types they need to choose. Indicate the part type they are choosing next, and provide context as to why they are choosing a part of that type (They're building a kit!)
  • Display a grid or list view of parts that are of the current "part type" that needs to be fulfilled. To preserve context, consider a button under each part, that when clicked, provides more info about the item (and maybe even the top associated reviews/ratings).
  • These parts should still be filterable based on tags/properties/search terms.
  • Allow for pagination so the user can cycle through a large set of results

Many other practices could be employed here to make working with a large number of parts easier, but it depends heavily on what comprises a kit and what those parts are. Regardless of your implementation, make sure there is a way for users to exit this process, or re-enter it should they leave.

  • 1
    Another good example would be purchasing desktop computers online (e.g. Dell website). Each computer comes with a default set of options. User can then choose to accept this as is, or configure each part and see the price gets adjusted accordingly. – nightning Sep 28 '15 at 17:52
  • Also a good idea. I think your approach is similar to @joe-blow. So my comment would be the same here. In the Dell example, I think the list of items you can choose from is rather "limited", and they are able to present them in a simple dropdown - or radio list - if I remember correctly. – treksterDK Sep 29 '15 at 8:20
  • Good point on calling it a "wizard" – Fattie Sep 29 '15 at 11:47
  • @treksterDK I updated my answer. I really think this is a solid approach. If you don't see how this can work with a "vast number of options", I would appreciate some feedback as to why you don't think it would. – Daniel Brown Sep 29 '15 at 13:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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