User:Hhhippo/Flow/Compact nesting

The following is a proposal for a compact nesting system that aims at combining the ability to display complex structured discussions, as known from wikitext talk pages, with the limited consumption of horizontal screen space Flow is striving for.

Background

Discussion pages on Wikipedia often host conversations with quite complex structure, rather than just linear chains of comments. Currently, this structure is represented by displaying each reply to a previous post at an indentation level increased by one, compared to that parent post. On classic wikitext talk pages, this can lead to rather high indentation levels, often mitigated by 'outdents' which are not part of the discussion structure, but serve to limit the amount of horizontal space needed to display the thread. The current implementation of Flow limits the number of indentation levels to three. This automatically limits the horizontal space consumption, but it does so by misrepresenting all posts at logically higher levels as level-three posts, thus severely reducing the possibility for structured discussions. An ideal system would combine horizontal compactness with the ability to represent the full structure of a discussion.

The structure of many threads is actually largely linear, either serial (each post being a direct reply to the previous post, currently displayed diagonally), or parallel (each post being a reply to the same original post, displayed vertically). A smaller, but nevertheless essential group of threads can be described as complex; they exhibit both serial and parallel components (e.g. a post with more than one 'child' but also at least one 'grandchild'). Since these threads are not linear, they are currently displayed in a two-dimensional structure.

Proposal

Example 1.

The main idea of compact nesting is to display both parallel and serial chains of posts vertically aligned, and only start a new indentation level where that is needed due to the complexity of the thread. The distinction between parallel and serial chains is made by graphical elements other than indentation.

Example

The concept is illustrated by Example 1. The discussion consists of two top-level posts by users A and G, three parallel replies to A (by B, C and F), and a serial side chain consisting of the posts by C, D and E. Any post that is the only direct reply to its parent post is displayed on the same level as the parent post, with a short vertical line connecting the two. If a post has two or more direct replies, they are all shown on the next level and connected to the parent by a vertical line running through the space created by the indenting. The triangular icons, together with the text showing the number of replies, serve as links for collapsing/expanding the whole sub-structure. (One reply to user F is collapsed in the example.) Since these icons are placed in the existing post-footer line, and the short vertical lines in the existing gap between posts, this system doesn't need any additional space compared to the current Flow implementation.

Analysis

A very small-sample spot check on a random discussion page indicates that

• classic talk page discussions can easily reach nine levels of indentation,
• about a third of the comments are above level three, and would lack context in the current implementation of Flow,
• with compact nesting, all threads on that page could be displayed without loss of context using no more than three levels of indentation.

Partial collapsing

Example 2.

As an addition to compact nesting, partial collapsing could help the reader to keep track of the discussion structure. Imagine the following scenario, using the above example: A reader has read posts A, B, C, D and E. The next one is F, a direct reply to A, and possibly older than D and E. The reader might at this point have forgotten what A actually said, and post A might not be on the screen anymore. Instead of scrolling up to re-read post A, and then down again to continue with post F, the reader now clicks the line that branches off at post C and leads to post F. This collapses all replies to post A that are above post F, leading to the display in Example 2.

Now post A and its reply F are visible together without scrolling. The collapsed posts can be expanded again by a click on “(2 more replies)”.

This feature should be made more discoverable by a suitable mouseover effect when hovering over the vertical connection lines:

• The horizontal line leading to (2 more replies) could be replaced by two parallel diagonal lines interrupting the vertical lines, symbolizing "something was cut out here".
• On mouseover, these diagonal lines would turn black, and little arrows/triangles would be added, one pointing upwards above and one pointing downwards below, symbolizing "expand".
• The link areas for collapsing and expanding should be the same, to allow for an easy undo of either action without moving the mouse.
• The mouseover glyph for partial collapsing could be the same as for expanding, but with both arrows inverted.

ToDo: Update examples with this. How should the partial collapsing link area look without mouseover?

Additional ideas

Auto-collapsing to support activity monitor

• When looking at a Flow board/topic with recent activity marked as suggested here, all side chains that don't contain new or updated comments should be collapsed automatically.
• For this use case it would be good to also have a way to apply partial collapsing to first-level comments (note they don't have vertical lines, or should they maybe?).
• Apart from the individual 'expand' links (n more replies), there should be buttons somewhere to expand all comments and to re-apply the auto-collapsing (per topic and/or per board).
• In the auto-collapsed state, only new/updated comments and their direct ancestors would be shown, but no siblings, parent's siblings etc.

Default collapsed state

• Add an option to each post's context menu to manually set the default state of that post's reply chain to collapsed or uncollapsed. Use case: semi-hiding a finished side-thread that is not important enough to be refactored as its own topic.

Collapsing topics

• Apply a similar style to the un/collapsing function for the whole topic (instead of 'click title'): Start the bottom line in the topic title box with the collapse/expand triangle icon, followed by n comments as part of the same link, and then the Reply link and the time stamp.
• This 'collapse topic' icon could cycle through three states (collapse all, auto-collapse, expand all) when used with the activity monitor.

Maximum indentation level

• There should probably be one, but it could be rather large, since threads needing many levels (resulting in narrow text areas) will be rather uncommon.