To date, we have talked about the [Usability Improvements portion](https://www.mediawiki.org/wiki/Talk_pages_project/Usability) (T249579) of the [Talk Pages Project](https://www.mediawiki.org/wiki/Talk_pages_project) as being comprised of three core elements:
1. Topic Containers (T269950)
2. Clearer Talking Affordances (T255560 + T267444)
3. Page Frame (T269963)
The assumption being that the combination of the three elements mentioned above will be effective at doing the following:
- Helping **Junior Contributors** instinctively recognize and use talk pages to communicate with other volunteers
- Helping **Senior Contributors** easily decide what talk pages, and the discussions within them, are worth focusing on.
This task is an effort to decide how – if at all – the scope of these three elements ought to be changed to increase the likelihood that we'll be able to deliver on the project objectives.
=== Requirements
1. Create design concepts for clearer talking affordances (T255560 + T267444) and talk page frames (T269963) //and//
2. Combine the design concepts for clearer talking affordances (T255560 + T267444), talk page frames (T269963), and topic containers (T296119) into one cohesive design
=== Phased roll-out annotated designs
==== Topic Containers
//[[ https://www.figma.com/file/DDPwDc8T6b97Vy7uNYyBUp/Talk-Pages-Visual-Improvements-T269950?node-id=2388%3A41791 | Figma link ]]//
Our first experiment aims to improve the junior and senior contributor’s discussion - level reading experience. We are also trying to make the visual cues for contribution more obvious, should readers desire to increase their engagement.
- ==H2== Styling
- Discussion metadata
- Collapsible discussions
- Prioritize actions (e.g. Subscribe with overflow menu)
{F35040178 width=800}
{F35040180 width= 800}
==== Clearer Visual Cues (aka Talking Affordances)
[[ https://www.figma.com/file/DDPwDc8T6b97Vy7uNYyBUp/Talk-Pages-Visual-Improvements-T269950?node-id=2388%3A41494 | Figma link ]]
- Replying to a specific comment
- Starting a new discussion
- Highlight signature
{F35040184 width=800}
{F35040187 width=800}
==== Page Frame
//[[ https://www.figma.com/file/DDPwDc8T6b97Vy7uNYyBUp/Talk-Pages-Visual-Improvements-T269950?node-id=2388%3A41232 | Figma link ]]//
Evolve organizing elements to guide contributors to the appropriate actions or spaces around the page .
- Sticky Header
- Table of Contents
- Page title styling
- Actions
{F35040190 width=800}
{F35040192 width=800}
=== What it should look like when it's all put together
//[[ https://www.figma.com/file/DDPwDc8T6b97Vy7uNYyBUp/Talk-Pages-Visual-Improvements-T269950?node-id=2161%3A38885 | Figma link (this includes mobile views) ]]//
{F35040199 width=800}