I'm working on a website redesign for a company that has a lot of b2b products & services. Their current solution is very content heavy (overwhelmingly so) and involves a very linear approach to navigation (where users have to drill down to deep levels of the site to find information about their products).

We've got the client to cut back their product information to a few key points about each product (enough detail to answer key questions and interest users to pick up the phone/contact sales) and I'm trying to come up with a UI solution that allows people to easily explore their offerings in a very flexible way.

What I've come up with so far is a listing of all their products with filtering and sorting capabilities (by which industry the user is in, what their job role is, or what problem they're trying to solve) as well as the ability to search for specific products.

I want to try to avoid taking the user to a detail page for every product so they don't have keep clicking back and forth between a detail page and product listing - as this may be more of a browsing/exploratory experience once the user has narrowed the list of products down. Does anyone know of any good examples of a UI that would allow users to easily explore a list of products and details without using a detail page? So far I've tried expandable panels/details, but some members of my team were concerned that there may be too many details for an expandable panel.

  • 1
    Unfortunately, I think this question can not be answered generally. The list of features to implement, the amount of filters and sorting methods, using a quick view or not and so on and so on HEAVILY depends on your use case. If you would specify the product or the user audience, the device (mobile & desktop filtering e.g. is heavily different, in the worst case) - this could help.
    – Jan
    Nov 11 '15 at 15:16

Ikea has a great implementation of product catalog that may serve as inspiration for the problem you're trying to solve, though I'd imagine service catalog may not have any visual components.

As you move your cursor over each product, you get most important product information (dimensions and colors) a hover-over, so you don't have to drill-down into full product detail page.

Ikea probably spent some time determining what piece of information would satisfy the needs of most users 80% of the time, and put them in the hover-over, so you will need to do a similar research to see what would cover 'your' 80% scenario, and fine-tune as you go.

You can check try it here http://www.ikea.com/us/en/catalog/categories/business/20649/ but I've pasted an animation below to prevent link-rot.

enter image description here

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