Page MenuHomePhabricator

Popular article feed on app homepage
Closed, ResolvedPublic

Assigned To
Authored By
AMuigai
Jan 13 2021, 11:16 AM
Referenced Files
F34134156: image.png
Mar 3 2021, 1:19 PM
F34130565: Screen Shot 2021-03-01 at 15.58.42.png
Mar 1 2021, 8:01 PM
F34130562: Screen Shot 2021-03-01 at 15.58.19.png
Mar 1 2021, 8:01 PM
F34006528: Popular Feed Interaction.gif
Jan 18 2021, 12:42 PM
F34006508: Popular Feed Interaction.gif
Jan 18 2021, 12:24 PM
F34006294: 01. Popular feed - Hindi.png
Jan 18 2021, 6:41 AM
F34006295: 01. Popular feed list - Hindi.png
Jan 18 2021, 6:41 AM
F34006293: 01. Popular feed - English.png
Jan 18 2021, 6:41 AM

Description

Background

As part of the engagement experiment, provide users with an option to view a list of popular articles in their country

Requirements

  • Feed with the most popular articles on the home screen
  • Feed will have 5 articles a day
  • Feed will be ranked in descending order from the most read
  • Feed will be available in one wiki, English, for this experiment

Design Details

Home screenFeed selected
Screen Shot 2021-03-01 at 15.58.19.png (640×480 px, 34 KB)
Screen Shot 2021-03-01 at 15.58.42.png (640×480 px, 128 KB)
Interaction
Popular Feed Interaction.gif (608×1 px, 2 MB)
  • By default search bar is highlighted.
  • Article card is not elevated when the search bar is highlighted.
  • Expand the article card and present a list when a user presses the down key on D-PAD.
  • SELECT softkey becomes available when the article card is highlighted.
  • Bring back the control on the home screen when a user aims to select search bar while viewing a popular article list.
  • For up/down movement inside the article list, apply the scrolling behavior currently being used to scroll up/down the search results.
  • Physical back key would bring back the control on the previous screen. E.g., Bring back the control to the trending article list if a user reads an article from it and press the back key.

Note: Visual look and feel of design could look a bit different based on the testing during the development phase.

zeplin:

https://zpl.io/belB0JP

Event Timeline

Note to dev :

For up/down movement inside the article list, apply the scrolling behavior currently being used to scroll up/down the search results.

The scrolling behavior currently being used for the search results allows for the user to wrap around from the bottom of the list back to the search bar. I'm assuming we wouldn't want that as it would create conflict if the user types something into the search bar.

What is the behavior we want when user reaches the end of the trending list? Playing around with some ideas in the code, something that feels good is letting the user wrap around to the first trending article of the list (instead of search bar). Will let you know when it's available to try in a branch

I was a bit surprised by the layout with the search box on top and the trending articles list below. It looked fine in the mock ups but using it was unpleasant for the following reasons:

  1. Statically, having the search box clearly enabled and the list below makes it look like these are search results.
  2. Cycling the results down goes through the list and avoids the search box but going up brings the focus back to the search box and makes the screen jumps back into "home screen mode".

I like the initial state with the trending card partially visible and how to access it with the down key but I think once we are looking at the trending list we should be only in "trending mode" with a softkey to go back in search mode.

eamedina updated the task description. (Show Details)
eamedina moved this task from Code Review to QA on the Inuka-Team (Kanban) board.
Jpita subscribed.

on jio2 phone.
@AMuigai how should we handle this?
I'm not sure this phone is available in nigeria

image.png (1×768 px, 1 MB)

on jio2 phone.
@AMuigai how should we handle this?
I'm not sure this phone is available in nigeria

image.png (1×768 px, 1 MB)

fixed on this branch

@Jpita This phone is not sold outside of India as far as I know.

However, I understand its a simple fix, so @eamedina please fix it.