The described behaviour sounds good to me in general. I illustrated some details in a document https://docs.google.com/presentation/d/1ktB152TDOfMFOi98DsqKGLuls7Xw3-vZ0q0IJYN98t8/edit?usp=sharing (feel free to add comments if any clarification is needed). Some details to consider:
- When topics are loaded above the current viewport we don't want them to affect the viewport position (with respect the current topic the user is viewing). The default behaviour of browsers is to push content down generating a "jump" effect. This seems to be avoidable if the scroll is manipulated as new content is added to keep the relative position ( example http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html ). - I think that the issue of moving beyond a gap can be addressed by deciding which side of the gap to fill based on the user position (more detail in the document linked above). With the current implementation I have been able to see how topics were created from the gap and keep appearing (we are not adjusting the viewport when adding new items, and those are always added to close the bottom part of the gap). - Preloading strategy and transitions can help to avoid gaps and communicate what is happening when those are unavoidable. Currently content just appears suddenly. A transition where the existing elements move and the new ones fade-in would help to communicate what happens to each piece of content https://medium.com/@pasql/transitional-interfaces-926eb80d64e3.
Pau
On Fri, Nov 21, 2014 at 9:57 PM, S Page spage@wikimedia.org wrote:
It's great Shahyar has got the TOC in a state where we can see jumping down working. Try it at http://flow-tests.wmflabs.org/wiki/Talk:Sandbox (please don't add or hide/delete topics to this, it's crafted specially to test TOC. You can experiment on Talk:Flow_QA or your own user_talk page.)
If you click on e.g. topic 73 it works strangely (try it and see). We think Flow is trying to load topic 73 but it's at the bottom of the page which triggers loading topics 11-20, and then the view jumps around as topics show up.
We knew this would be hard to get right. Danny and I explored some use cases.
- You click on topic 73 and there's a gap above it.
- TOC requests that topic and some topics around it (e.g. N-3 through N+7)
- TOC disappears
- Flow shows a Loading more animation at the bottom of the page and
positions the view at it.
- When the topics show up, Flow positions topic 73 just below the fixed
header as usual.
While this is in progress, we need to disable the usual bottom of page Load more behavior -- don't try to load 11-20. There should only be one load going on at the very bottom of the page.
(Note ErikB doesn't think there's a performance win in asking for only topic 73 then making separate API requests for topics 69-72, etc. Nor is it easy to provide a variable response "Give me enough topics to fill four [PageUp] operations from topic 73")
When Flow adds topics 70-77 to the page I think we need a "gap indicator" at the top of them to indicate there is a gap but Flow isn't yet trying to load stuff to fill it. On a fast computer and connection the user might never see this.
- You scroll up from topic 73
Because Flow has loaded some topics above 73, you can scroll up into content above, preserving the illusion of perfect scroll. As you get closer to the gap (topics 11-69), Flow tries to fill in the gap to preserve the illusion of a complete page. When scrolling up into a gap Flow should always load bottom-up, i.e. it requests topics 60-69. The dormant "gap indicator" turns into the active Loading more animation
The problem is, while this is going on the user can scroll around past the gap indicator/Loading more animation. Quiddity and I think that's fine and Flow should let the user freely move around in the browser window; Danny would like to stop the user scrolling past the gap -- "You wanted to scroll up to some topics above, Flow is loading them, sit tight."
- You scroll away from a loading more gap.
In either 1 or 2, you can scroll away from the gap in at least one direction, or you can open the TOC and jump somewhere else altogether. When the API request returns the topics intended for the gap, Flow inserts them. Question: do we reposition the view? Yes for the click in the TOC, but unclear for scrolling around. I'm not sure what the default browser behavior is if you insert a bunch of content in the DOM above what the user is viewing.
- You scroll back into the gap
After loading topic 73 and scrolling up a bit, say you jump to top of page, then scroll back down towards topic 10. Flow is still filling the 11-69 gap with topics 60-69. Now you're scrolling down into the gap, you probably want the usual Load more behavior, so Flow should request topics 11-20.
- Should there be two loading indicators in the gap? I think so, a gap may
be being filled from the bottom and from the top at once.
Furthermore, you aren't near the bottom of the view because topics 70-77 are there, so if you're holding down the space bar or scrolling in order to force loading more topics, it won't work. You'll scroll right past the gap and into the topics lower down. I think this is OK, you're probably back on a quest to get to the "end" of the board.
- Now you bring up the TOC and click topic 49
Like step 1 above so
- TOC requests that topic and some topics around it (e.g. 46 through 56)
- TOC disappears
- Flow shows a Loading more animation ...
where? The one gap is loading topics 60-69 from step 2 and 11-20 from step 4, now it's loading a third group!
I'm sure there are further use cases and challenges. Next step is probably for Matt, Shahyar, Pau, Danny, to explore this with other interested parties.
Some design approaches we aren't pursuing:
- Detailed "68 missing topics", "load/loading 10 above" messages or
controls -- Flow only shows the Loading more animation in the gap.
- Flow knows the topic titles in the gaps from the TOC, but it doesn't
show them -- Flow only shows the Loading more animation.
- Flow doesn't communicate the size of the gap. unlike e.g. a PDF viewer
it doesn't know how tall topics are. It just places a Loading more animation in the gap.
-- =S Page Features engineer
EE mailing list EE@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/ee