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

Improve this question
3
  • 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, 2016 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, 2016 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, 2016 at 17:55

1 Answer 1

Reset to default
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!

Improve this answer
3
  • 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, 2016 at 5:08
  • I would like to know your version of solution as well.
    – Pavithra Olety
    Aug 14, 2016 at 3:09
  • Thank you Pavritha! Tabs are a good idea, I'm going to try it.
    – Wayne
    Sep 1, 2016 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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