We had a meeting this afternoon to talk about the Table of Contents
for Flow boards -- May and Jared (design), Shahyar and Jon (front-end),
Danny (product) and Nick (community).
The purpose of the
Table of Contents is to encourage browsing through topic titles for a
quick overview of the discussions on the board, and allow quick
one-click navigation from one topic to another.
This seems like a simple thing to do, which turns out to be technically more complex than you'd think. :)
The core that I think we're agreed on is that the ToC lives in the right rail on desktop (either fixed on its own, or connected to a fixed sort bar, with an icon replacing the current collapse icon).
The thing we're trying to figure out right now is the UI when a user jumps to a topic that's further ahead than we can easily load at once.
For example: on page load, we load all the posts for topics #1-10. If I scroll down past #10, we lazy-load the next set of topics: #11-20.
So, starting at the topic with #1-10 loaded:
-- If I click on ToC item #5, then I scroll to that topic, easy.
-- If I click on ToC item #15, then we lazy-load 11-20 and scroll to 15, easy.
-- If I click on ToC item #37....... we have to figure out how to represent the intervening topics without actually loading the full #11-37 all at once.
Shahyar, May and I came up with a possible solution -- loading the intervening topics just as a topic title, similar to our current most-collapsed state.
So if I jump from the top to #37, we've got #1-10 fully displayed, then a list of topics from #11-36, and then I scroll down to #37, which I see in full.
At that point, if I scroll back up from #37, I'll see just the compressed topic titles. I can click on a compressed topic to open it up. If I use the ToC to jump from #37 back up to #28 (which is currently compressed), then I scroll to #28 and it's automatically loaded for me.
That's not perfect, but it's got potential as a next thing to try. May is going to work on some mockups, which we'll look at in the Design check-in meeting on Wednesday.