Page MenuHomePhabricator

[UX-debt] Improve visual design of "Recent searches" in Search
Closed, ResolvedPublic

Description

Visual update only, no additional design assets required

Steps to reproduce

  1. Open Wikipedia and enter a search and open and article from the search input
  2. Open Search again and note the "Recent searches" shown below the search input bar.

Actual

image.png (1×1 px, 132 KB)

  • "Recent searches" heading is shown in Roboto Bold at 20sp size, which is not used anywhere else in the app
  • Recent searches is on the Base background color
  • Search results text is shown in font-size ~18sp, which is not used anywhere else in the app
  • Search results are not separated by a divider line

Expected

  • "Recent searches" heading is in the "Body 2" style used for Material list subheaders, in the Material theme Secondary color (Light = Black@54%)
  • Recent searches subheader is on a Paper background color
  • Search results text is in the standard font-style for single line items (Roboto Regular 16sp), in the Material theme Primary color (Light = Black@87%)
  • there is a 0.5dp divider line in the Material theme borders and rules color (Light = Black@12%)

05c-ii Search invoked with Recent searches.png (640×360 px, 32 KB)

Event Timeline

RHo triaged this task as Medium priority.May 11 2018, 5:52 PM

This is ready to go and came up as an item from T190839 if there is any bandwidth on Ice-lolly.

Change 433917 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Recent Searches visual tweaks:

https://gerrit.wikimedia.org/r/433917

@RHo Let me know [Monday] if the sub-heading "Recent Searches"looks ok... text size and font:

recent_searches.png (1×720 px, 42 KB)

hi @Sharvaniharan - still a few things in not completed:

  • "Recent searches" should be using the Body 2 style which has Roboto Medium font-weight (Actual is showing as Bold)
  • The height of list subheaders like Recent searches is a standard 48dp + 8dp top padding
  • the list items for recent searches should be 48dp in height only

It may help to also refer to the Zeplin mock: http://zpl.io/2Gmokem

@RHo made changes. Lmk if they look good now.

Change 433917 merged by jenkins-bot:
[apps/android/wikipedia@master] Recent Searches visual tweaks:

https://gerrit.wikimedia.org/r/433917

Dbrant claimed this task.