##### 1. 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.
---
##### 2. 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.
---
##### 3. Designs ([[ https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=204%3A6925423%3A18072 | Figma ]] 🎨)
**⚠️ “If- ⚠️ **If you’re reading this it’s too late”**:** All images used below might be updated by now. They’re here for demo purposes only. Make sure to check out the latest designs on [[ https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=423%3A18072 | Figma ]].
All images- Notice that used below might be updated by now. They’re here fr and article talk pages uses the same component system with minor demo purposes only.ifferences, Make sure to check out the latest designs on [Figma](https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=204%3A6925)that’s why this task has not been split into two.
#### 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,### 3.1. 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 notUpdates to user talk pages ([Figma](https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=423%3A18080))
---#### Before
{F34974921}
#### 2. Updates to user talk pagesAfter
| **Before** | {F34940589} | | | | || 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08
| **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{F34974928} | {F34974924} | {F34974938} | {F34974955} | {F34974940} | {F34974942} | {F34974944} | {F34974947}
- 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**Changelog:**
- General: Updated visual designs and information hierarchy ([Figma](https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=423%3A18072))
- Watch- App bar:
- L- Added link to profile pageuser talk page in app bar (blue)
- Edit history- Overflow menu consists of
- Share
- View in browser - Language
- List item IA - Watch
- A dynamic profile image / avatar. It outputs the first letter of the user that has posted the latest update. - Link to user profile
- Color scheme to be defined (cre- Edit history (link to native problem solving is welcomeedit history T297759)
- A list of users that are participating in a certain discussion (truncates usernames after 1 line (see #2) - Share
- Time/date (same as in 'Notific- Tabs: 'Discussions' and 'Archived' tab to distinguish active from archived conversations')
- The subject of the discussion (truncated after 2 lines)- Sort: Added 'Date updated' as a new sort option. Pushes newest subjects to the top ↑ (or bottom ↓, depending on sort preference). The default will still be 'Date published ↓'
- The latest message in the subject (truncated after 1 line)- List items
- Item overflow menu
- Subscribe (topic subscriptions)- List items consist of:
- Mark as unread or Mark as read- Talk page title
- 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.Users: User icon, Updates to article talk pages
| **Before** | {F34940637} | | |
| **After** | {F34940640} | {F34940642} | {F34940645} | {F34940647}ser name(s)
| | #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) - If multiple people are involved in a discussion, list them as following:
- The “custom header” at the top of article talk pages is displayed in a yellow box (#7 #8 - Username1, Username2, Username3 +2 (make sure to keep usernames on 1 line and truncate with +%number at the end if they don’t fit on 1 line)
- The new footer (#2) features a link to the corresponding article page - A preview of the latest message in the thread, truncate at 2 lines
- Overflow menu IA (app bar) - Amount of replies the subject has received
- Watch - Last comment indicator (display in Android’s system time)
- Read article- Tapping a list item leads to a detail of a conversation (1 tap target)
- Share- Overflow menu of a list item contains (06)
- View in browser - Subscribing to a topic (05, 06)
- List item IA - Mark messages as read/unread
- Share a link to the subject
- The subject of the discussion (truncated after 2 lines- Swipe action to mark message as read/unread (similar to notifications)
- Footer (01)
- Time/date (same as in 'Notifications')- Contains link to the user talk’s native edit history
- The item overflow menu is defined in chapter 1.- Contains link to user profile page
---
#### 3### 3.2. Updates to the subject viewarticle talk pages ([Figma](https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=423%3A18120))
| **Before** | {F34940688} | | | | | |
| **After** | {F34940690} | {F34940692} | {F34940697} | {F34940715} | {F34940699} | {F34940724} | {F34940729}#### Before
{F34974907}
#### After
| 01 | 02 | 03 | 04
| | #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{F34974972} | {F34974978} | {F34974981} | {F34974983}
**Changelog:**
//Disclaimer: Only lists differences from user talk page designs.//
- Now featuring better indentation and inline replies- App bar:
- 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 IAFeatures link to article talk page in app bar (blue)
- Title of the talk- Overflow menu features link to article page + article link
- Header image
- Title of the subject- Uses the article’s header image (if available). Height: 84dp.
- Amount of people participating in this subject- Template (yellow): previews contents of the template on three lines in plain text. Notice the updates to the designs.
- Amount of comments in this subject- List item differences to user talk pages
- Topic subscription status- Don’t contain usernames
- Overflow menu- Don’t contain message previews
- Subscribe (Topic subscription)- Footer
- 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.
- L- Contains link to the articlee’s native edit history
- L- Contains a link to templates usedhe article page