Page MenuHomePhabricator

Improve the visibility of search results highlighter.
Closed, ResolvedPublic

Description

Problem

Current search results highlighter is too light to be noticed, similar feedback was shared during usability sessions. This ticket aims to explore options to change it.

Note: This change would be applicable for Jio and KaiOS users.

Proposed Design
  • Changed highlighter color from #EAF3FF to #3366CC
  • Places where highlighter color would change - search results, settings menu, app language menu, article menu, article language.
zeplin:

https://app.zeplin.io/project/58dc46f4a83d1e477dd83859/dashboard?seid=5fb216ebca7a287314f988c0

Event Timeline

Restricted Application added a project: Inuka-Team. · View Herald TranscriptNov 5 2020, 4:24 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
SGautam_WMF updated the task description. (Show Details)Nov 5 2020, 4:47 AM
SGautam_WMF updated the task description. (Show Details)Nov 5 2020, 5:45 AM
AMuigai moved this task from Backlog to Kanban on the Inuka-Team board.Nov 5 2020, 12:31 PM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
AMuigai triaged this task as Medium priority.Nov 5 2020, 12:42 PM
SGautam_WMF moved this task from Backlog to Design doing on the Inuka-Team (Kanban) board.
SGautam_WMF updated the task description. (Show Details)Nov 16 2020, 6:07 AM

@SBisson shall we remove the word default from here? Anyway now we match the default experience of the app as per the set language on device.

As discussed during daily, we are removing "Default".

SGautam_WMF removed SGautam_WMF as the assignee of this task.Nov 16 2020, 2:24 PM
eamedina claimed this task.Nov 16 2020, 2:37 PM
eamedina moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
hueitan moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Nov 17 2020, 9:30 AM
Jpita added a subscriber: Jpita.

2 possible issues:

  • if the image of an article doesn't have background color, it gets the blue color, this doesn't look so good
  • when we scroll down the list, sometimes there's a flash of white to blue color, it would look better if we set the background color of the hidden row to blue instead of white

@SGautam_WMF any requirements for this 2 cases?

Good catch, @Jpita. I missed checking the changes against transparent images. I am unsure if the new design can take care of such instances, open to hearing suggestions. I think we can even live with this, given the number of such images one will encounter.

On the second point, for me, it appears when I move the control quickly on the search results list. I think we can try to make the changes suggested by you and see how it looks. @eamedina, what your thoughts here?

On the second point, for me, it appears when I move the control quickly on the search results list. I think we can try to make the changes suggested by you and see how it looks. @eamedina, what your thoughts here?

Let me explore this, moving to dev for now

hueitan added subscribers: AMuigai, hueitan.EditedNov 19 2020, 8:14 PM

@SBisson shall we remove the word default from here? Anyway now we match the default experience of the app as per the set language on device.

When I am working on the ticket T267290: For Jio users show Indian languages on top inside the article menu. , we are always showing English (Default) as the top for the default language for both jio and kaios device. Within our language code settings here (read code), therefore the default text is given here.

I suggest we move this update to the ticket T267290: For Jio users show Indian languages on top inside the article menu. or another ticket to handle

  1. Kai App : Always show English as the first one from the list
  2. Jio App : Show the indian language only; Show the English iff the given indian language is not supported for reading in our app during the initialization of the app.
  3. Jio App : If user select Deutsch after launching the app, Deutsch will be shown plus the indian language in the app language setting, and no English is given within the list as it is not the default anymore.

OR

is that alright we always show English as the default at the top for both Kai and Jio App?


@AMuigai @SBisson does it make sense to you? to remove the "default" behaviour and text

when we scroll down the list, sometimes there's a flash of white to blue color, it would look better if we set the background color of the hidden row to blue instead of white

@Jpita @SGautam_WMF I was able to spot the brief flash, it's kind of hard to notice actually (keen eye Pita 👀). I would like to do a sanity check with you: if I run the same test with what's on master I think I also see the flash but it's even harder to notice because of the lighter color. Do you see it too or is it just me? If we can agree it's there in master too that helps us understand this is not related with the color change, and likely out-of-scope here. Rather, it could related to re-rendering the app executes as we scroll through the items list. I think I note the flash when scrolling upwards too, for example, not only downwards. If this is the case I'd suggest we treat this in a separate ticket, what do you think?

when we scroll down the list, sometimes there's a flash of white to blue color, it would look better if we set the background color of the hidden row to blue instead of white

@Jpita @SGautam_WMF I was able to spot the brief flash, it's kind of hard to notice actually (keen eye Pita 👀). I would like to do a sanity check with you: if I run the same test with what's on master I think I also see the flash but it's even harder to notice because of the lighter color. Do you see it too or is it just me? If we can agree it's there in master too that helps us understand this is not related with the color change, and likely out-of-scope here. Rather, it could related to re-rendering the app executes as we scroll through the items list. I think I note the flash when scrolling upwards too, for example, not only downwards. If this is the case I'd suggest we treat this in a separate ticket, what do you think?

I would like to see that as a separate task. Please add the Technical-Debt tag to it as well as this note: "useNavigation() is slow because it cycles through all the selectable elements every time to number them and add/remove attributes. It could be re-written to be optimized like useLinkNavigation()"

The PR is merged.

Feel free to move to QA once the other task mentioned above has been created.

Feel free to move to QA once the other task mentioned above has been created.

I have created T269041 now, moving back to QA.

...It could be re-written to be optimized like useLinkNavigation()

By the way did you mean useArticleLinksNavigation instead? That's how I added it in the new ticket, we can update that ticket description as needed.

eamedina moved this task from Dev to QA on the Inuka-Team (Kanban) board.Nov 30 2020, 9:00 PM
Jpita moved this task from QA to Design sign off on the Inuka-Team (Kanban) board.Dec 2 2020, 9:31 PM
AMuigai closed this task as Resolved.Dec 3 2020, 1:57 PM