Page MenuHomePhabricator

Create designs for iOS watchlist list home and contextual actions for list items
Closed, ResolvedPublic

Assigned To
Authored By
RWambua-WMF
Apr 28 2023, 9:17 PM
Referenced Files
F37750236: CleanShot 2023-09-22 at 13.29.56@2x.png
Sep 22 2023, 11:37 AM
F37750234: IMG_02B6AF2F23AB-1.jpeg
Sep 22 2023, 11:37 AM
F37747257: IMG_500EFCFE0AEE-1.jpeg
Sep 21 2023, 3:58 PM
F37746689: IMG_615719D711E8-1.jpeg
Sep 21 2023, 3:58 PM
F37746686: Screenshot 2023-09-21 at 15.48.46.jpeg
Sep 21 2023, 3:58 PM
F37747241: IMG_050C9C40FC96-1.jpeg
Sep 21 2023, 3:58 PM
F37675140: border-color.png
Sep 8 2023, 5:21 PM
Restricted File
Aug 2 2023, 5:10 PM

Description

Background

The Wikipedia Watchlist feature is a personalised tool that allows users to track changes and updates to their selected articles, making it easier to stay informed about specific topics of interest. By bringing this feature to iOS, it enhances the user experience, allowing for seamless access to real-time information and fostering greater engagement with Wikipedia's vast knowledge base. The integration into iOS devices ensures that users can conveniently monitor and contribute to the ever-evolving content on Wikipedia, bolstering the platform's collaborative nature and accuracy.

Design Requirements
  • Create 2 high fidelity variant mockups of a proposed home for the Watchlist feature in iOS based on discussions heard in the design review. Let us remain flexible on the potential home of the iOS watchlist.
  • Create 2 variants of contextual actions: Design easily accessible contextual actions for each list item, such as "View Recent Changes," "Compare Revisions," and "View History." Ensure these actions are both visually appealing and functional. This basically means, show what happens when (for example) the user selects the user profile. What screen do they see? Or (for example) if the user does the "thank" functionality, how does that look like? This is what is referred to as contextual actions.
  • Show how the User Context look like in German with icons so that we can see what a longer language like German looks like. Some of the screens that can be displayed to demonstrate this include:

The importance of this feature will be for product to make a decision and then collaborate to iterate the selected designs.

Technical Requirements
  • Hook into account settings
  • Cell UI
  • Sectioning
Design

⚠️ Please make sure to check Figma for the latest mocks, as the ones below might be outdated.

1) Watchlist home {F37160495}2) User context menu {F37160499}3) Empty + logged in {F37160502}4) Logged out {F37160504}5) Account creation
IMG_32F3D5D324EC-1.jpeg (2×1 px, 577 KB)
6) Filtering {F37160506}Filtering empty {F37160510}7) User page
iOS Watchlist 06.jpg (1×786 px, 475 KB)
8) User talk
iOS Watchlist 07.jpg (1×786 px, 355 KB)
9) User contributions
iOS Watchlist 08.jpg (1×786 px, 491 KB)
10) Thanks
iOS Watchlist 09.jpg (1×786 px, 280 KB)

Notes:

  • ⚠️ Disclaimer: The above design features a search bar, which won’t be implemented in V1. It’s showcased to inform engineering about its positioning.
  • The Watchlist features all items from a user’s app language plus items from Wikimedia Commons and Wikidata
  • Tapping an entire Watchlist item takes users to a diff view of the edit (T335579)
  • Empty states
    • If the user is logged in but has no items on their Watchlist yet, an empty state is shown (3) with a CTA that leads users to the 'Explore' tab
    • If the user is logged out, a teaser for account creation is shown (4, 5)
  • Tapping the username reveals a contextual menu that leads to the in-app web view of the user page (7), native user talk page (8), in-app web view of a user’s contributions (9) or triggers a 'Thanks' dialog, that works the same way as implemented in the edit detail view of revision history (10)
  • The new design (1) is based on the existing revision history list design and adds:
    • Search (for V2, the above designs should just give an idea of where search will be positioned)
    • The title of the item (e.g. Polar bear)
    • The project of the item as an icon (Language, Project [Wikidata, Commons]
    • User menu as buttons for contextual actions (2)
Color annotations
iOS Watchlist 01.png (1×786 px, 227 KB)
iOS Watchlist 05.png (1×786 px, 302 KB)
iOS Watchlist 03.png (1×786 px, 120 KB)
iOS Watchlist 01 Empty.png (1×786 px, 102 KB)

Event Timeline

scblr updated the task description. (Show Details)

@scblr What theme element should this border color be? In Figma, for the light theme, it appears to be gray200 aka #EAECF0 which maps to our baseBackground theme element for the light theme. But our existing theme element border's color is different – for light it's gray400 aka #A2A9B1. So should we use the border theme element or baseBackground theme element for all our theme to color this cell border?

border-color.png (579×668 px, 148 KB)

@scblr What theme element should this border color be? In Figma, for the light theme, it appears to be gray200 aka #EAECF0 which maps to our baseBackground theme element for the light theme. But our existing theme element border's color is different – for light it's gray400 aka #A2A9B1. So should we use the border theme element or baseBackground theme element for all our theme to color this cell border?

border-color.png (579×668 px, 148 KB)

Hey @Dmantena, you’ll hear from @OTichonova today or tomorrow about this 👋

Hi @Dmantena !
Sorry for the delay, lets stick with gray400 #A2A9B1, thickness .05 pixels. Thanks!

Hi @Dmantena !
Sorry for the delay, lets stick with gray400 #A2A9B1, thickness .05 pixels. Thanks!

@OTichonova No worries, thanks for the note. Ok, we'll stick with using the border theme element, which for the light theme uses gray400/#A2A9B1.

@scblr Please design review Watchlist home view against latest Staging Testflight build (should be 7.4.2 build 33).

@scblr My mistake, it'll be main Testflight (white icon) app, 7.4.2. (2622).

@scblr My mistake, it'll be main Testflight (white icon) app, 7.4.2. (2622).

As of a couple hours ago, should also be available in TestFlight main app target 7.4.2 (Build 2654).

This looks pretty great already @Deepak & @Tsevener – amazing work! 👏 And here’s some first feedback:

1) Theming isn’t applied correctly; let me know if you need further guidance.

IMG_050C9C40FC96-1.jpeg (2×1 px, 828 KB)

2) Seems like characters are escaped in the edit summary of a list item.

Screenshot 2023-09-21 at 15.48.46.jpeg (2×1 px, 399 KB)
vs
IMG_615719D711E8-1.jpeg (2×1 px, 342 KB)

3) Thanks isn’t doing anything yet, see this video. It should trigger this alert and toast.

4) Q just to verify: Are the lines 0.5dp in border color (grey400)?

IMG_500EFCFE0AEE-1.jpeg (2×1 px, 315 KB)

@scblr Thanks for looking at it – notes below:

1) Theming isn’t applied correctly; let me know if you need further guidance.

Can you confirm which build you are using (2654 or 2622) and how to reproduce the issue? Build 2654 is theming correctly for each of our themes on device on my end.

2) Seems like characters are escaped in the edit summary of a list item.

This is an unfortunate byproduct of our Components framework not having immediate access to the same parsing tools as our main client app. I have an idea on how to resolve it I'll explore in a moment, but I don't have any other concrete news on this yet.

3) Thanks isn’t doing anything yet, see this video. It should trigger this alert and toast.

Again, can you confirm the build number? Thanks should be functional on 2654.

4) Q just to verify: Are the lines 0.5dp in border color (grey400)?

Correct - the line stroke is 0.5pts using the theme element border, which on the light theme maps to gray400 aka #A2A9B1.

This looks pretty great already @Deepak & @Tsevener – amazing work!

@Dmantena should take credit for this one :)

Theming isn’t applied correctly; let me know if you need further guidance.

@scblr @Dmantena

Heads up this may be T346449 manifesting - I think we should pull it into the release.

Heads up this may be T346449 manifesting - I think we should pull it into the release.

@Tsevener Ahhh great call – working on a fix now.

  1. Seems like characters are escaped in the edit summary of a list item.

@scblr Fixes for this HTML issue and the theming issue (assuming it's the same "dimmed" theme issue Toni mentioned above) will be available in the next Watchlist beta.

@scblr TestFlight build with aforementioned fixes is 7.4.2 (Build 2658)

@Dmantena, all good now except for one thing:

IMG_02B6AF2F23AB-1.jpeg (2×1 px, 704 KB)

I noticed that the borders in the dark theme are almost invisible. Can you confirm the following border values for all themes? 👇

Light color-gray400 (#A2A9B1)Sepia color-taupe200 (#CBC8C1)Dark color-grey650 (#2E3136)Black color-gray675(#27292D)

If yes, no actions are needed from your end, and the task is ready for the next column. However, we (designers) must review the background/foreground combination of color-gray675 and color-grey650 as it’s too subtle currently (see screenshot below). We’ll do that in a separate task.

CleanShot 2023-09-22 at 13.29.56@2x.png (1×1 px, 95 KB)

Thanks!

CC @cmadeo, who worked on the colors a while ago (Figma).

@Dmantena, all good now except for one thing:
I noticed that the borders in the dark theme are almost invisible. Can you confirm the following border values for all themes? 👇

Light color-gray400 (#A2A9B1)Sepia color-taupe200 (#CBC8C1)Dark`color-grey650` (#2E3136)Black color-gray675(#27292D).

@scblr Correct – these are the per theme values we're using currently, mapped to the border theme element.