Page MenuHomePhabricator

Create designs for talk pages side panel in the article
Open, MediumPublic

Description

Background

From T297625:

We learned from user testing, as well as research performed by the Editing team that it would be helpful for users to see talk page content in context of an article.

User story

When reading the article, I want to read the article’s discussion topics without having to leave the article, so that I can decide to contribute to the article or start a new discussion.

The task
  • Create high fidelity mocks and interaction definitions for a talk pages side panel.
  • Include way to access the entire talk pages view

For more details, check out the parent task: T297625

Designs (Figma)
Talk pages side panel.png (1×720 px, 511 KB)
Talk pages side panel-1.png (1×720 px, 211 KB)
Talk pages side panel-2.png (1×720 px, 218 KB)
Screenshot_20220118-191619.png (2×1 px, 100 KB)
(outdated)
  • Accessing the article talk page button next to the article title opens up a side panel
  • Talk page subjects take users directly to the details view of a subject (full screen)
  • The app bar title in the side panel, as well as the full screen icon take users to the full view of the talk page (screen 4)

APK:
https://github.com/wikimedia/apps-android-wikipedia/pull/3139/checks

Event Timeline

scblr renamed this task from Create designs for talk pages side panel to Create designs for talk pages side panel in the article.Jan 12 2022, 10:31 AM
scblr triaged this task as Medium priority.Jan 12 2022, 10:43 AM

Hi @scblr, I would like to claim this ticket, is this ready for dev?

Hi, @scblr, the implementation is completed. Please check the APK in the ticket description.

Screenshot_20220228-171201_Wikipedia Dev.jpg (2×1 px, 435 KB)

@cooltey tried to test it with the apk from the task’s description, but the links in the overflow menu and footer lead to a separate view. This is the preferred behavior but does not allow me to test it (since there’s no button next to the article’s title yet).

Despite a few color updates to the sidepanel (comparison below, details on Figma), the screenshot you posted looks good though!

DesignvsImplementation
Talk pages side panel.png (1×720 px, 211 KB)
Screenshot_20220228-171201_Wikipedia_Dev.jpg (2×1 px, 435 KB)

Hey @cooltey — great work so far!

01) Can the upper area of the side panel have the same height as the app bar? (the grey line sits a bit lower in the same panel). Also same vertical font centering and icon size as in the app bar (if it’s not the same).

Screenshot_20220302-185831 copy.png (2×1 px, 247 KB)
Artboard.png (1×1 px, 415 KB)

02) Tapping a topic in the list leads users to the subject view, which is great. After tapping back from the subject view — the panel should be open again.

Screenshot_20220302-185831 copy 2.png (2×1 px, 244 KB)

03) Mentioned in the previous comment:

Despite a few color updates to the sidepanel (comparison below, details on Figma), the screenshot you posted looks good though!

DesignvsImplementation
Talk pages side panel.png (1×720 px, 211 KB)
Screenshot_20220228-171201_Wikipedia_Dev.jpg (2×1 px, 435 KB)
  • Can we also update the TOC with these designs?
  • The separator lines might need adaptation as well (they’re lighter in the designs)

04) The edit history info at the bottom should take users to the edit history of the talk page — it currently doesn’t do anything

Screenshot_20220302-190419.png (2×1 px, 254 KB)

05) Swipe actions: If the panel is open, the same swipe action as for the TOC (swipe right) should close it.

Hi @scblr, the APK has been updated. Please download the updated APK from the ticket description.

! In T299033#7748242, @scblr wrote:
Hey @cooltey — great work so far!

01) Can the upper area of the side panel have the same height as the app bar? (the grey line sits a bit lower in the same panel). Also same vertical font centering and icon size as in the app bar (if it’s not the same).

Screenshot_20220302-185831 copy.png (2×1 px, 247 KB)
Artboard.png (1×1 px, 415 KB)

Done! And I also make the title also clickable, not sure if that is what you want.

02) Tapping a topic in the list leads users to the subject view, which is great. After tapping back from the subject view — the panel should be open again.

Screenshot_20220302-185831 copy 2.png (2×1 px, 244 KB)

Done.

03) Mentioned in the previous comment:

Despite a few color updates to the sidepanel (comparison below, details on Figma), the screenshot you posted looks good though!

DesignvsImplementation
Talk pages side panel.png (1×720 px, 211 KB)
Screenshot_20220228-171201_Wikipedia_Dev.jpg (2×1 px, 435 KB)

Done!

  • Can we also update the TOC with these designs?

Not sure what kind of design you would like to apply to the current ToC? It would be very helpful if you can provide a mock of it 😉

  • The separator lines might need adaptation as well (they’re lighter in the designs)

Done.

04) The edit history info at the bottom should take users to the edit history of the talk page — it currently doesn’t do anything

Screenshot_20220302-190419.png (2×1 px, 254 KB)

Done.

05) Swipe actions: If the panel is open, the same swipe action as for the TOC (swipe right) should close it.

Done.

everything looks good now — great work @cooltey 👏

ps: the only thing left to check before a release is making sure that the current TOC button doesn’t trigger the talk pages side panel + adding the button next to the article’s title.

Moved to Blocked/Waiting since the mobile-html updates are still under review.