Change Details

#### 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 - iOS Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/ - Apple's Accessibility Guidelines: https://developer.apple.com/accessibility/ios/ #### Designs ([[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=1498-19892&mode=design&t=YAAstCpvOcSpDNnK-4 | Figma ]]) ⚠️ Please make sure to check [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=1498-19892&mode=design&t=YAAstCpvOcSpDNnK-4 | Figma ]] for the latest mocks, as the ones below might be outdated. | **1)** Toolbar with More {F37161806} | **2)** Toolbar menu {F37161810} | **3)** Watchlist expiry {F37372029} | **4)** Toast {F37161816} | **5)** Unwatch {F37161819} **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 | {F37013538} | {F37013540} | {F37013542}

#### 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 - iOS Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/ - Apple's Accessibility Guidelines: https://developer.apple.com/accessibility/ios/ #### Designs ([[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=1498-19892&mode=design&t=YAAstCpvOcSpDNnK-4 | Figma ]]) ⚠️ Please make sure to check [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=1498-19892&mode=design&t=YAAstCpvOcSpDNnK-4 | Figma ]] for the latest mocks, as the ones below might be outdated. | **1)** Toolbar with More {F37161806} | **2)** Toolbar menu {F37161810} | **3)** Watchlist expiry {F37372029} | **4)** Toast {F37161816} | **5)** Unwatch {F37161819} **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 | {F37013538} | {F37013540} | {F37013542} #### 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 since watchlist wasn't ready at the time.

#### 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 - iOS Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/ - Apple's Accessibility Guidelines: https://developer.apple.com/accessibility/ios/ #### Designs ([[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=1498-19892&mode=design&t=YAAstCpvOcSpDNnK-4 | Figma ]]) ⚠️ Please make sure to check [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=1498-19892&mode=design&t=YAAstCpvOcSpDNnK-4 | Figma ]] for the latest mocks, as the ones below might be outdated. | **1)** Toolbar with More {F37161806} | **2)** Toolbar menu {F37161810} | **3)** Watchlist expiry {F37372029} | **4)** Toast {F37161816} | **5)** Unwatch {F37161819} **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 | {F37013538} | {F37013540} | {F37013542} #### 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 since watchlist wasn't ready at the time.