0

I'm redesigning a very old portal page that shows several lists, each of which could be very short or up to several hundred items long. As you can see in the attached image, the current UI mechanism is to use scrolling divs, along with a "show more" button that expands out a given list.

After a lot of research, I'm still having trouble designing a more modern/elegant solution for this. I'm not a big fan of scrolling divs, but in this case it seems to work. Anyone have any ideas for a better way to display multiple lists of varying lengths?

Thanks! enter image description here

  • Welcome to the site, @Wayne. Can you give a little more context. Is this for a web or desktop application? Do people ever need to see the contents of multiple lists simultaneously? What are the relationships between items within a list vs between items in different lists? – Graham Herrli Aug 13 '16 at 0:28
  • Wayne, just want to confirm, do you want all 3 boxes data viewable? If yes, let me know, I have one more solution, also it will be less clutter. @Pravithra solution is a good idea but in that case you may have to back and forth to view the data. – Sourabh Rangdal Aug 13 '16 at 5:08
  • Thanks all. Sorry for my delayed response, a family emergency has been distracting me. This is for a responsive web application, and another challenge is that these lists are part of a view that is configurable per user. So the question of relationships is that this is a "list of lists" that will be built dynamically according to user prefs. @Pavritha's idea for tabs may work, and I'm going to try that first. But tabs also may be challenging on smaller screens. I still welcome other ideas. Thanks – Wayne Sep 1 '16 at 17:55
1

To avoid excessive div scrolling, you can have a tabbed structure:

Training tracks | Enrolled | Featured Items

And at a time user's focus is on a single category. You can also have flags for showing any critical or head's up information next to the category name like this:

Training tracks (3) | Enrolled (2) | Featured Items

Let me what you think!

  • Pravithra, I exactly thought the same (gmail using the same - Primary / Social / Promotions ) and I would like to share one more example – Sourabh Rangdal Aug 13 '16 at 5:08
  • I would like to know your version of solution as well. – Pavithra Olety Aug 14 '16 at 3:09
  • Thank you Pavritha! Tabs are a good idea, I'm going to try it. – Wayne Sep 1 '16 at 17:55

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.