So I'm making a website (and web app for mobile) to sell t-shirts, and the client wants to be able to display all the fabrics available. Right now we have a displayed sample shirt and below it is a row of textures where the user is able to hover over a bunch of fabric textures and the texture the mouse is currently on will be imposed on the display shirt.

We're piloting 4 fabrics for now but will eventually have 50 fabrics to choose from. Some of the fabrics can fit under a specific material (like synthetic, jersey, or jean) so I was thinking about organizing some of them that way when it comes to 50+ fabric options.

Any ideas on how to best organize all the textures with scalability (4 to eventually 50 fabrics) and render options in real time while user hovers over fabric options?


This is actually an Information Architecture question and you're basically on track with your intended approach. Simply create a taxonomy tree from which you can create the different branches, just as you say.

Quite probably, an user looking for synthetic won't care about denim, or wool, or silk, or whatever, so simply create a 2 steps process:

  1. Make user select main taxonomy (for example, denim)
  2. Display the available fabrics for such taxonomy

And that's it.

A note: instead of on_hover, I recommend you replace that behavior by on_click. First, because you'll avoid accidental changes on the visualization. Second, because people on mobile won't be able to visualize the different fabrics since there's no on_hover behavior on mobile

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.