I'm working on a web solution that allows you to create a banner with a product from your online shop. The user will set his shop, we will crawl it and get all the products and display them in categories.

Now, the issue is that when the user has a lot of categories (because his shop is with a lot of categories) the list goes pretty long. When he has a category selected I show him the products in the right rectangle I want to keep as much space as I possibly can in the right rectangle (the grey one), so I can't use that space that much. What do you think?

screen mockup

  • Variations of this question can be found by searching the UX.SE site. Commented Jan 16, 2012 at 10:42
  • I've been browsing a lot and I still couldn't find something that is good for my case. Thanks for trying, anyway.
    – Vlad Gidea
    Commented Jan 16, 2012 at 12:58
  • 2
    @NaoiseGolden Sorry if you think I'm lazy, or if you just assume that I didn't search for this issue. I registered today because i had a problem and I was looking for an answer. I tried different variations of keywords all over the place to find some relevant info and still nothing that useful. My bad. But this is really not the way to welcome users into a community.
    – Vlad Gidea
    Commented Jan 16, 2012 at 13:17
  • 2
    @NaoiseGolden I encourage you to encourage some of the guys on the chat to be more understanding instead of downvoting, I was not asking about fluid facebook stuff or what word to replace with the Home button. I thought I had a good question for you guys and I even uploaded the ui so you guys can see what I mean. cheers
    – Vlad Gidea
    Commented Jan 16, 2012 at 13:20
  • No bad, we are here to help each other. We've all learnt how SE works by trial an error. This question may be useful, or try to re-format your question to make it clearer if you see no answers. Commented Jan 16, 2012 at 13:23

1 Answer 1


The way I see it, you have four options. (And I'm sorry if I'm overlooking one :)

  1. Enlarge the area so you have more space to put your categories in -- You don't want that
  2. Make the category buttons a bit smaller -- Please don't do that, they look perfectly sized now :)
  3. Create categories and subcategories -- but that's not very scalable either
  4. A scroll bar. Click, that's a scalable solution! Since you don't know how many categories there will be, you have a major variable. A scalable solution is then a good thing to go with.

Now, I used to be against in-page scroll bars, but now that I see them popping up everywhere (plus my mother knows how to use them, which means it's foolproof), I think they're not that bad anymore. Just make sure your scroll bar is obvious. Have a look at Facebook for example. Besides having the scroll bar itself, they most of the time also cut off the last item (in the chat), which suggests that there's more to explore.

I hope this helps.

  • Thanks. I went with a scroll bar but in a horizontal position and instead of displaying categories as a button I decided to use an image (the first product image from that category). Also the navigation has changed and it's starting to look better every day.
    – Vlad Gidea
    Commented Feb 13, 2012 at 15:01

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.