Background
The Top Read module highlights the most viewed articles on Wikipedia for the current day. It gives readers a sense of what the broader Wikipedia community is reading and serves as a discovery tool for trending topics. Showing what others are reading creates a sense of shared experience around Wikipedia's content.
User Story
As a reader browsing the Community feed, I want to see the most read Wikipedia articles today, so that I can discover what topics are trending and explore them.
Requirements
- The module should display the title "Top read" with the subtitle "What is trending today on Wikipedia"
- Articles should be displayed as a ranked list showing rank number, article title, view count, and thumbnail image
- Each list item should be clickable and lead people to the article listed
- Maintain existing controls to limit vandalism or a negative user experience of the top read list
- A "More top read" link at the bottom should navigate to a full list view (it is acceptable to reuse existing screen)
- The three dot more menu should be present per the shared menu behavior to allow users to hide the module
- Content should be sourced from the user's selected language wiki. If the module does not exist in the selected language wiki it should be hidden
- Each list item should have its own three dot menu for individual article actions (utilize existing longpress menu)
- A trending indicator (up/down arrow) should be shown per article reflecting momentum relative to the previous day (red/green arrows)
- The top read widget may remain unchanged, and continue to function in the same way it currently does: tapping on individual articles opens up those articles. Tapping on the heading opens up Explore.
Nice to have
- Update the top read widget to match the design of the Explore Feed.
Design Link
Android task for reference
https://phabricator.wikimedia.org/T418896
Toni Handoff Notes
Based on progress at PR https://github.com/wikimedia/wikipedia-ios/pull/5995
Things remaining todo:
UI needs to be fine-tuned. Ensure UI fits our patterns (WMFFont, WMFLocalizedString, etc), lays out properly on multiple devices sizes + iPad, lays out well on rotation. Theming works. Voice Over works.
The module should display the title "Top read" with the subtitle "What is trending today on Wikipedia"
Need to do subtitle.
Articles should be displayed as a ranked list showing rank number, article title, view count, and thumbnail image
A trending indicator (up/down arrow) should be shown per article reflecting momentum relative to the previous day (red/green arrows)
Need some of this UI (rank number, view count, etc). The data should be already available to display in the UI though, from the model returned from the data controller. Currently I'm leaning on an old WMFAsyncPageRow component for ease (this is re-used in activity tab), but we might consider creating a new component instead for these top read cells since they display additional data.
Each list item should be clickable and lead people to the article listed
Need article navigation
Maintain existing controls to limit vandalism or a negative user experience of the top read list
I didn't do anything special for this. Might want to double-check with Android.
A "More top read" link at the bottom should navigate to a full list view (it is acceptable to reuse existing screen)
Need the link button. Also need to navigate to this full list view. NOTE: the full list view is an old crusty legacy list view. We can probably map these models to what the old view accepts, and push on the old view. But ideally, we can rewrite the old legacy view as well into SwiftUI / WMFComponents (T413388). If rewriting into SwiftUI, try to re-use WMFAsyncPageRow for the article cells (it is automatically tuned to fetch and display summary data).
> The three dot more menu should be present per the shared menu behavior to allow users to hide the module
This icon / menu + functionality already exists, might just need to fine-tune the UI.
Each list item should have its own three dot menu for individual article actions (utilize existing longpress menu)
Need to add this icon for each list item + functionality