Page MenuHomePhabricator

Design watch action and flow in article view
Closed, ResolvedPublic

Assigned To
None
Authored By
RWambua-WMF
May 2 2023, 7:35 PM
Referenced Files
F37615325: IMG_CB461DD8541F-1.jpeg
Aug 22 2023, 11:58 AM
Restricted File
Aug 17 2023, 1:56 PM
F37545628: IMG_E811ECDE9BD6-1.jpeg
Aug 17 2023, 1:55 PM
F37545590: IMG_326B513DC0B4-1.jpeg
Aug 17 2023, 1:55 PM
F37545546: IMG_7B0FD6C609DC-1.jpeg
Aug 17 2023, 1:55 PM
F37545505: iOS Watchlist 10 A.png
Aug 17 2023, 1:55 PM
F37545479: IMG_3F451718B451-1.jpeg
Aug 17 2023, 1:55 PM
F37545438: CleanShot 2023-08-17 at 15.45.22@2x.png
Aug 17 2023, 1:55 PM

Description

Background

The Wikipedia app serves as a convenient tool for users to access a vast repository of knowledge. The Watchlist feature is an essential component that enables users to monitor articles of interest and receive notifications for any updates. In order to improve user experience, it is vital to create a seamless watch action and flow within the article view, making it simple for users to add or remove articles from their Watchlist.

The Task

Design the watch action and flow in the article view for the Wikipedia app, ensuring an effortless process for users to add or remove articles from their Watchlist. The task involves:

  • Designing an intuitive watch action button or control within the article view.
  • Establishing a smooth flow for adding or removing articles from the Watchlist, complete with suitable visual feedback and confirmation.
  • Testing the watch action and flow with real users to assess their effectiveness and collect feedback for improvements.

It will cover the following:

  • where someone clicks watch
  • Expiry page
  • Opportunity for users to change their expiry option
  • Watch vs unwatch state (adding vs removing a watchlist article)
Requirements
  • The watch action button or control should be discoverable (but not disruptive to reading) and accessible within the article view.
  • The watch action button or control must utilize clear and intuitive visual cues (e.g., icons, labels) to convey its purpose and function.
  • The watch action and flow should provide appropriate visual feedback and confirmation when adding or removing articles from the Watchlist.
  • The watchlist feedback components should be native to iOS
    • The design of the watch action and flow should align with the overall app design and comply with the iOS Human Interface Guidelines.
    • The watch action and flow should adhere to Apple's Accessibility Guidelines, ensuring accessibility for users with disabilities.
    • User testing should be conducted to evaluate the effectiveness of the watch action and flow and to gather feedback for improvements.
References
Designs (Figma)

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

1) Toolbar with More
iOS Watchlist 20.png (1×786 px, 756 KB)
2) Toolbar menu
iOS Watchlist 21.png (1×786 px, 798 KB)
3) Watchlist expiry
iOS Watchlist 23.png (1×786 px, 543 KB)
4) Toast
iOS Watchlist 24.png (1×786 px, 739 KB)
5) Unwatch
iOS Watchlist 36.png (1×786 px, 743 KB)

Notes:

  • The toolbar in the article now features a 'More' option at the bottom right, which will accommodate more contextual features to the article
    • 'Find in page' replaces the 'Share' option in the bottom toolbar
    • 'Share' will be moved to the 'More' menu (2)
  • The toolbar menu (2) consists of Share, Watch, Talk page (article) and revision history
  • Watch/Unwatch
    • When logged in, tapping Watch toast triggers an action sheet that uses the capabilities of Watchlist expiry with the following options: Permanent, 1 week, 1 month, 3 months, 6 months, 1 year (see #3)
    • Tapping one of the 'impermanent' options shows a toast with the following copy: Added to your Watchlist for %timeVariable. (see #4)
      • Tapping the toast leads users to Watchlist Home (T335606)
      • Per discussion with @Tsevener – the exact design of the toast might differ since we’re using an existing component. There might be possibilities to change its design via CSS, TS will look into it.
    • Please sync with Android engineers in case Watchlist expiry is unclear
    • Once an item has been watched, the label and iconography in the 'More' menu change to 'Unwatch' and a half star
  • The new 'Talk page' and 'Revision history' quick links lead users to the existing, native implementation of these features.
Color annotations
iOS Watchlist 21.png (1×786 px, 942 KB)
iOS Watchlist 22.png (1×786 px, 859 KB)
iOS Watchlist 23.png (1×786 px, 680 KB)
Additional Testing Notes for QA

In addition to the description above, please also test the "Watch / Unwatch" flow from the Diff toolbar overflow menu. Those options weren't originally added as a part of T335579 because watchlist wasn't ready at the time.

Event Timeline

@Tsevener I'd recommend reaching toast design parity as the lowest priority element of this task. I'd recommend to start just getting as close as we can with our existing toast libraries without hacking anything together that feels unsustainable.

We support toast "tap" callbacks, so maybe a reasonable flow for an unwatched article could be:

  1. User taps more toolbar button, taps Watch
  2. API call is made for watchlist article subscription for permanent period of time
  3. Toast is presented showing "Added to watchlist permanently". The toast is not "sticky" and will eventually dismiss on its own.
  4. If the user taps the toast though, present modal action sheet for expiration time (it's ok if we force the toast to dismiss during this transition)
  5. If the user taps anything that isn't cancel, API call to update expiry time, dismiss action sheet, and present same toast from step 3 with new expiration time and icon if needed.
  6. If user taps cancel, just show article, no need to present the toast again.

The other element I'd recommend prioritizing lower than the other elements to start is tapping the watch button when logged out. My expectation would be if the user is not logged in, that tapping the watch button on an article would trigger the log in flow for them to then login, and on log in success start step 2 from above. I think this would be not too gross either hooking into our didLogInNotification notification or related delegate method somehow.

Tsevener added a subscriber: scblr.

PR here - https://github.com/wikimedia/wikipedia-ios/pull/4573

One area of scope I cut (in addition to the pieces mentioned in the previous comment) is the watchlist half-filled star. For now I just show it either filled if the article is watched or unfilled if not watched. The reason for this is that I don't see a way to fetch the expiry status from the API, so I'm not able to tell when a user is only temporarily watching something for that icon status. I could keep some of the "half watched" state around in memory if they recently changed the expiry, but I would lose that state whenever they revisited the article, which could make it feel buggy.

Let me know if that's okay @scblr @Dmantena. I can kick off an Experimental build with this progress as well if you'd rather see it first before deciding.

Kicking this back so @Tsevener can incorporate changes from Robin

@scblr sorry for the delay on this - here are screenshots of what I showed off on Tuesday, in case you want to do some early design review. I will be using these toasts to incorporate the new flow.

Screenshot 2023-08-04 at 12.26.08 PM (1×596 px, 478 KB)

Screenshot 2023-08-04 at 12.26.12 PM (1×596 px, 511 KB)

Screenshot 2023-08-04 at 12.26.16 PM (1×596 px, 484 KB)

Screenshot 2023-08-04 at 12.26.21 PM (1×596 px, 488 KB)

Screenshot 2023-08-04 at 12.26.26 PM (1×596 px, 481 KB)

Screenshot 2023-08-04 at 12.26.34 PM (1×596 px, 512 KB)

Screenshot 2023-08-04 at 12.26.41 PM (1×596 px, 481 KB)

@scblr After digging a bit, it's not really easily set up for you to play around with in Xcode. The css file I had mistakenly remembered for these old toasts is actually this JSON file, but it looks like all these values are overwritten in our wrapper class to work with themes in this area. So it's not as simple as adjusting those JSON values. You can just leave any toast design feedback here and I can see what I can do to incorporate it.

FYI @Tsevener, I updated the task’s description with the "1-year" option for the action sheet.

Tsevener removed Tsevener as the assignee of this task.EditedAug 15 2023, 6:11 PM

@scblr Please do design review on TestFlight Experimental build 7.4.2 (28).

Thanks, @Tsevener – looks good in general. Also, from how it spatially behaves and feels. Great job! 👏 🌟

Some minor feedback on the toast’s presentation:

1) Apply the size and weight from the black text to the link (blue) text for more consistency:

Screenshot 2023-08-16 at 10.39.01.jpeg (2×1 px, 416 KB)

2) Can the entire toast be one tap target? (navigating to the Watchlist). Tapping the toast sometimes dismisses it (likely triggers the close action).

Screenshot 2023-08-16 at 10.39.01 copy 2.jpeg (2×1 px, 433 KB)

3) Maybe this is what you mentioned earlier re: getting the state of Watchlist expiry might be difficult. Not sure, so I’ll mention it anyway: When selecting an impermanent Watch period (like 3 months in the example below), the toast and the item in the overflow menu should use the half-star (star.leadinghalf.filled) instead of the full star:

IMG_D8517FA7A97D-1.jpeg (2×1 px, 425 KB)
IMG_634F510D3324-1.jpeg (2×1 px, 401 KB)

@scblr

1) Apply the size and weight from the black text to the link (blue) text for more consistency:

I checked earlier and they are the same size, I'll make them the same weight though.

2) Can the entire toast be one tap target?

I was having trouble with this earlier - our current toast system only only allows it to dismiss upon tap. It allows me to remove dismissing entirely, which removes the X, and automatically dismisses after a few seconds. But that felt frustrating to me since it covers the article toolbar, I had to wait for it to dismiss before using the toolbar again. I'll look deeper to see if there's anything I can do here.

3)

This is an API limitation unfortunately - when a user visits an article, I can only get a flag from the API on whether it's watched or not, I have no indication of temporarily watched to use the half star state. I could make it half star only immediately after they temporarily watched the article, but when they revisit the article it would have to switch back to fully filled. Since that would feel buggy I left it full star at all times. Let me know what you think or if Android was able to do this. Thanks!

@scblr New build with fixes for 1) and 2) coming - Experimental TestFlight 7.4.2 (31).

@scblr for 3) - I think I found the API information I need for this. I'll make another build with this fix.

@scblr - fixes for all will be in Experimental TestFlight 7.4.2 (32).

@scblr I added this same flow to the Diff screen as a part of this ticket, so feel free to look at that as well. We didn't originally do it in T335579 since Watchlist wasn't ready when Diff changes were released. I'll update the description here with that information.

Tsevener updated the task description. (Show Details)

Wow, great updates @Tsevener 🎯

I’ll look at the diff’s next. Here’s some additional feedback for the article watch/unwatch experience:

1) I noticed a small copy issue: Watchlist should use capitalization in the removal toast:

IMG_C26EE308EB6B-1.jpeg (2×1 px, 415 KB)

2) Maybe I’m completely wrong, but are these two pieces of text using the same font weight? It feels like the blue link text uses bolder text (maybe some kind of faux-bold)? Thanks for double-checking <3

IMG_8F4F046C3E0B-1.jpeg (2×1 px, 424 KB)

3) Use sentence case here:

IMG_01969114AD93-1.jpeg (2×1 px, 409 KB)

4) The space between toolbar items seems unevenly distributed. Can it be optimized?

Screenshot 2023-08-17 at 15.13.25.jpeg (2×1 px, 483 KB)

5) Update this label to Article revision history:

{F37545664}

And here’s the promised feedback for the diff experience @Tsevener:

1) I’m using an iPhone 14 Pro with a width of 393dp. The diff comparison view should adapt to be side-by-side:

ImplementationvsDesign (Figma)
IMG_6D132BCCE9B9-1.jpeg (2×1 px, 318 KB)
iOS Watchlist 10 B.png (1×786 px, 258 KB)

The "breakpoint" should probably be around iPhone 12/13 mini size: equal or smaller than 375dp. Not sure how it’ll behave with dynamic text, though, I’ll need your expertise on that one (maybe discuss async?).

2) Can we streamline these two headers regarding spacing, font-size, font-weight, and font-colors? It’ll make the transition from one the revision history to diff smoother. The reference should be the diff screen header:

article-header.png (1×1 px, 352 KB)

3) Streamline all these labels to use one font-style and font-color, according to designs on Figma

ImplementationvsDesign (Figma)
IMG_2CE1FE1F514A-1.jpeg (2×1 px, 330 KB)
iOS Watchlist 10 A.png (1×786 px, 201 KB)

4) Use a lighter color for these lines/borders:

IMG_154F4D77823B-1.jpeg (2×1 px, 330 KB)

It’s likely the base color group👇

CleanShot 2023-08-17 at 15.45.22@2x.png (346×1 px, 45 KB)

5) Similar to what’s mentioned in T335816#9099165 – can we evenly distribute the space between items?

ImplementationvsDesign (Figma)
IMG_3F451718B451-1.jpeg (2×1 px, 311 KB)
iOS Watchlist 10 A.png (1×786 px, 201 KB)

6) Lines/borders (same lines as mentioned in #4) between collapsible elements are missing (see Figma):

IMG_7B0FD6C609DC-1.jpeg (2×1 px, 299 KB)

7) Update label to Article revision history (sentence case) here:

IMG_326B513DC0B4-1.jpeg (2×1 px, 289 KB)

8) Make sure that the entire line is a tap target (not just the chevron)

IMG_E811ECDE9BD6-1.jpeg (2×1 px, 377 KB)

Fixes for https://phabricator.wikimedia.org/T335816#9099165 will be in TestFlight Experimental build 35. @scblr Great catches!

@Tsevener just checked the changes in T335816#9099396. Looks good!

Here’s the last thing I noticed; not sure if it tangents your work in *this* task or if it’s something for T344453 👇

1) I noticed a label inconsistency in the diff view item. Can we change this label to Article revision history too? Also, make sure to use sentence case.

IMG_CB461DD8541F-1.jpeg (2×1 px, 241 KB)

Thanks!

@scblr good catch - I'm going to put it in the description for T344453 since it's the diff screen. Thanks!

Dmantena added a subscriber: ABorbaWMF.

@ABorbaWMF Should be testable on TestFlight in main app target: Wikipedia 7.4.2 (Build 2654)