### Background
Start explorations of visual treatments of user talk page vs article talk pages. Our survey for experienced editors and comparative analysis revealed, that a visual refresh of the talk pages list and detail view should be considered. The comparative analysis revealed that a focus on other people in the interface and features to preview ongoing discussions in the list view. We are thinking of it as enhancing the current experience not drastic changes, as new users were mostly able to accomplish their goals.
---
### User stories
- When viewing user and article talk pages, I want a visual distinction between the two, so that I realize that they have different purposes and have better orientation.
- When viewing user and article talk pages, I want to have a preview of the discussion topics in the list view, so that I can get a better idea on the topics that are discussed.
---
### Designs ([[ https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=204%3A6925 | Figma ]] 🎨)
**⚠️ All images used below might be updated. They’re here for demo purposes only. Make sure to check out the latest version of [Figma](https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=204%3A6925).**
#### 1. Updates to user **and** article talk pages
- A tabbed view for active (Label: Discussions) and archived (Label: Archived) discussions
- New search and sort options, defined in T298250
- Most recent topics at the top instead of bottom
- Last edited UI element is positioned in a newly introduced footer. Previously it had a fixed position at the bottom of the screen. This way, it is consistent with the article view, plus there’s more room for content that matters.
- List item IA
- Menu item
- Subscribe (for topic subscriptions)
- Mark as unread or Mark as read
- Share
- Meta information on a topic is featured in a newly introduced footer element, it features:
- The amount of people involved in a discussion
- The amount of comments in a discussion
- A 'Subscribed' indicator (with bell iconography) to indicate if a topic has been subscribed or not
---
#### 2. Updates to user talk pages
| **Before** | {F34940589} | | | | |
| **After** | {F34940585} | {F34940592} | {F34940605} | {F34940607} | {F34940610} | {F34940612}
| | #1 User talk main | #2 User talk main full | #3 User talk overflow menu | #4 Item menu | #5 Swipe actions | #6 Read state
- A link to the talk page in the app bar (`colorAccent`) makes sure that people can easily navigate to the article page of this talk page (if not arriving from there in the first place)
- Overflow menu IA (app bar)
- Other languages
- Watch
- Link to profile page
- Edit history
- Share
- View in browser
- List item IA
- A dynamic profile image / avatar. It outputs the first letter of the user that has posted the latest update.
- Color scheme to be defined (creative problem solving is welcome)
- A list of users that are participating in a certain discussion (truncates usernames after 1 line (see #2)
- Time/date (same as in 'Notifications')
- The subject of the discussion (truncated after 2 lines)
- The latest message in the subject (truncated after 1 line)
- Item overflow menu
- Subscribe (topic subscriptions)
- Mark as unread or Mark as read
- Share (a link to this reply)
- Swipe actions to mark items as read or unread (see #5 #6, same as in 'Notifications')
- The new 'ABOUT THIS TALK PAGE' footer (#2) features a link to the profile page of the user
---
#### 3. Updates to article talk pages
| **Before** | {F34940637} | | |
| **After** | {F34940640} | {F34940642} | {F34940645} | {F34940647}
| | #7 Article talk main | #8 Article talk main full | #9 Article talk overflow menu | #10 Item overflow menu
- The header image is using the lead image of the article (when available)
- The “custom header” at the top of article talk pages is displayed in a yellow box (#7 #8)
- The new footer (#2) features a link to the corresponding article page
- Overflow menu IA (app bar)
- Watch
- Read article
- Share
- View in browser
- List item IA
- The subject of the discussion (truncated after 2 lines)
- Time/date (same as in 'Notifications')
- The item overflow menu is defined in chapter 1.
---
#### 3. Updates to the subject view
| **Before** | {F34940688} | | | | | |
| **After** | {F34940690} | {F34940692} | {F34940697} | {F34940715} | {F34940699} | {F34940724} | {F34940729}
| | #11 Subject full view | #12 Subject view overflow menu | #13 Username menu | #14 Replying | #15 Expanded state + item menu | #16 Collapsed state | #17 Variant B with colored usernames
- Now featuring better indentation and inline replies
- Indentation per @cooltey’s comment: we need to define a max amount of indentation for replies to stay legible (e.g. 4 levels of max indentation, we might need to experiment)
- Page IA
- Title of the talk page + article link
- Title of the subject
- Amount of people participating in this subject
- Amount of comments in this subject
- Topic subscription status
- Overflow menu
- Subscribe (Topic subscription)
- Share
- Edit source
- Find in page (works the same way as in an article)
- Reply / message IA
- Username
- Tapping it reveals popover (Link to profile + user talk)
- Date / time
- Contents of the message
- Inline reply button
- Sharing of an answer makes it easy to copy a link and share it via external communication tools (WhatsApp, Telegram, Signal, etc.)
#### 4. Future considerations (V2)
- Subject view → Article toolbar on talk pages?
- Onboarding → How do users access user talk pages?
- How might we incorporate the bottom toolbar in talk pages? It’d have benefits like 'Save to reading list' or 'Find in page' at the familiar places
- How might we let users display talk pages in tabs? What benefits would it have?
- User talk page list view: how might we introduce a setting to let people choose how many lines of text they want to see in the list preview?
- Attach related pieces of information at the bottom, e.g.
- Link to article
- Link to templates used