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.
May's card is here:
https://trello.com/c/1Mdiy4Fn
Danny