Why are we doing this?
Rethinking the visual UI of the threading was done to:
Adapt and implement the new features developed on the web by the Editing team for their Talk pages project
Find a better way of showing nested threads than using indentation. The indentation (as seen on we ) takes up too much space on mobile, shrinks the line width and is less clear on a smaller screen.
Create more visual hierarchy & distinction between topics & threads.
Audience story
As a contributor/reader, I want to be able to identify each topic, easily read the full thread of comments and know who is replying to whom under each topic
Relevant information
Access
- Topics found on each article talk page will be collapsed when first opened. Contributor/reader can see comments once they tap anywhere on the topic cell.
Once tapped the cell will open (accordion) and display all topics (all comments visible).
Organization
- Comments will be organized from least to most recent.
- The contributor will be able to respond to any comment in the thread.
The UI
- Minimum height of the reply field will be 4 lines. No maximum.
- Each comment will have a
- A ‘reply’ button at the end of it.
- The signature and timestamp at the end of it.
- Link to the author's username.
- The ‘sticks’
- The number of sticks will indicate how deep a comment is nested.
- Width of all ‘sticks’ cannot take more than half of the available field width.
- If a comment is nested deeper than can be displayed via the sticks, a ‘+ [ x ]’ value will be shown to indicate how much deeper the comment is.
- Longest ‘sticks’ are closest to the text, shortest ‘sticks’ farthest from the text.
- ‘Stick’ height decreases by 8px
- ‘Sticks’ are 6px apart.
| Example | Field: Max. 1/2 field of sticks, and min. 4 line-height field | Shorter comment deeply nested | Longer comment | Longer comment deeply nested | |
 |  |  |  |  | |
See more information about the UI in the - Figma file ‘Talk pages screens & specs'
