Page MenuHomePhabricator

Create an interesting design for an empty Search screen.
Closed, ResolvedPublic

Description

Problem
On a fresh install, or after having deleted search history, the search screen is barren. This task is track an effort to make the first time search / cleared search history case more visually appealing and provide some prompt for user to search.

Current Search screens when empty:

screenshot-2016-06-06-09-37-32-120896159.png (2×1 px, 132 KB)
205d91f2.png (2×1 px, 49 KB)

Proposed design

  • Note: there are 3 illustrations proposed for the empty Search screen, with the final version TBD.
    Refer to the parent task T146651 - Reading lists, History and Search empty states follow the same format showing a title, illustration (168x168dp) and message centered on the screen.

    Event Timeline

    One idea would be to show a list of most common searches or most read articles.

    Dbrant renamed this task from Improve the first time search experience to Create an interesting design for an empty Search screen..Sep 26 2016, 1:57 PM
    Niedzielski raised the priority of this task from Low to Medium.Sep 28 2016, 9:15 PM
    Niedzielski updated the task description. (Show Details)
    Jcasariego added subscribers: RHo, Jcasariego.

    @RHo I could take this task. Does the final result have to be like the image Search Wikipedia - empty state v2.png?

    How can I get the illustration?

    hi @Jcasariego - thanks for tackling this one, here's the asset attached as svg and xml.


    Change 354056 had a related patch set uploaded (by Jcasariego; owner: Jcasariego):
    [apps/android/wikipedia@master] Update design of empty Search screen

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

    Change 354056 merged by jenkins-bot:
    [apps/android/wikipedia@master] Update design of empty Search screen

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

    hi there, noticed a couple of minor visual design issues, and also some inconsistency when search is invoked from an article vs the Explore feed.

    Visual design:
    • Background is using #FFF instead of the expected base80 color (#EAECF0)
    • "Search and explore...." text has a shorter line-height (looks like ~20dp) than the expected 24dp for the Material Subhead secondary text-style
    • Not so much a bug, but wanted to confirm that "Search and read the free encyclopedia in your language" string should be included in translation
    Bugs in behavior
    1. When search is invoked from the Article tab stack, the empty search graphic and text is not being centered on the screen:
    Feed - search with keyboard
    Screenshot_20170524-143156.png (1×1 px, 114 KB)
    Feed - search with keyboard hidden
    Screenshot_20170524-143245.png (1×1 px, 72 KB)
    UNEXPECTED Search invoked in Articles stack (with keyboard)
    Screenshot_20170524-143556.png (1×1 px, 100 KB)
    1. The 'no search results' message and graphic no longer appears to work in this version:
    Expected prod version
    Screenshot_20170524-145108.png (1×1 px, 87 KB)
    UNEXPECTED version 2.5.195-alpha-2017-05-23
    Screenshot_20170524-143711.png (1×1 px, 134 KB)

    Change 355561 had a related patch set uploaded (by Mholloway; owner: Mholloway):
    [apps/android/wikipedia@master] Search empty view design tweaks

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

    I've got WIP to fix some of these but wanted to follow up on a couple of things...

    • Not so much a bug, but wanted to confirm that "Search and read the free encyclopedia in your language" string should be included in translation

    It's being included as usual. I'm not sure I'm following the train of thought here—shouldn't it be?

    Bugs in behavior

    UNEXPECTED Search invoked in Articles stack (with keyboard)

    Screenshot_20170524-143556.png (1×1 px, 100 KB)

    Based on testing earlier @ commits, this isn't a new regression; the "no results found" has always been centered likewise in the context of the Page activity. Fixing this will take some investigation into how the Page activity view hierarchy isn't like the others. Can we punt this to a new task rather than blocking here?

    1. The 'no search results' message and graphic no longer appears to work in this version:

    It looks like a separate patch of mine caused this one. Fixing now.

    Change 355566 had a related patch set uploaded (by Mholloway; owner: Mholloway):
    [apps/android/wikipedia@master] Fix: Unbreak empty search results set handling

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

    I've got WIP to fix some of these but wanted to follow up on a couple of things...

    • Not so much a bug, but wanted to confirm that "Search and read the free encyclopedia in your language" string should be included in translation

    It's being included as usual. I'm not sure I'm following the train of thought here—shouldn't it be?

    Ah I was double-checking, since the nature of the text is about being able to search different language wikis, it might come across extra silly if not translated :p

    Based on testing earlier @ commits, this isn't a new regression; the "no results found" has always been centered likewise in the context of the Page activity. Fixing this will take some investigation into how the Page activity view hierarchy isn't like the others. Can we punt this to a new task rather than blocking here?

    Sure, is it fine that I've appended this to the bug T166151: "No results found" message not visible when keyboard active when triggered from the **Article** view ?

    Ah I was double-checking, since the nature of the text is about being able to search different language wikis, it might come across extra silly if not translated :p

    Ah, quite true. :)

    Sure, is it fine that I've appended this to the bug T166151: "No results found" message not visible when keyboard active when triggered from the **Article** view ?

    Perfect!

    Hi @RHo

    Visual design:
    • Background is using #FFF instead of the expected base80 color (#EAECF0)

    I updated with base80 color and this is the result

    Screenshot_1495720037.png (2×1 px, 85 KB)

    • "Search and explore...." text has a shorter line-height (looks like ~20dp) than the expected 24dp for the Material Subhead secondary text-style

    Sorry, but I don't understanding to which text are you referring? Is it the text "Search..." in the Toolbar or the text below the image?

    Hi @RHo

    Visual design:
    • Background is using #FFF instead of the expected base80 color (#EAECF0)

    I updated with base80 color and this is the result

    Screenshot_1495720037.png (2×1 px, 85 KB)

    Great!

    • "Search and explore...." text has a shorter line-height (looks like ~20dp) than the expected 24dp for the Material Subhead secondary text-style

    Sorry, but I don't understanding to which text are you referring? Is it the text "Search..." in the Toolbar or the text below the image?

    I'm referring to the text below the image:

    image.png (356×1 px, 86 KB)

    Change 355561 abandoned by Mholloway:
    Search empty view design tweaks

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

    • "Search and explore...." text has a shorter line-height (looks like ~20dp) than the expected 24dp for the Material Subhead secondary text-style

    Sorry, but I don't understanding to which text are you referring? Is it the text "Search..." in the Toolbar or the text below the image?

    I'm referring to the text below the image:

    image.png (356×1 px, 86 KB)

    Ah, Ok ok :)

    Investigating a little the project layouts I could see that an attribute called "lineSpacingMultiplier" is used to modify this height. And the ones that are usually used are the values: 1.2 and 1.4. This is the result of how it would look:

    line-spacing.png (586×1 px, 45 KB)

    Sorry @Mholloway, but I didn't see that you already did the update of this yesterday :/

    Sorry @Mholloway, but I didn't see that you already did the update of this yesterday :/

    No worries, I did a quick patch while I was looking over Rita's feedback but it hadn't gotten any review feedback yet. I can revive that one, or if you've got a patch ready to go, please feel free to push it up and I'll review and merge!

    Change 355566 merged by jenkins-bot:
    [apps/android/wikipedia@master] Fix: Unbreak empty search results set handling

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

    Investigating a little the project layouts I could see that an attribute called "lineSpacingMultiplier" is used to modify this height. And the ones that are usually used are the values: 1.2 and 1.4. This is the result of how it would look:

    line-spacing.png (586×1 px, 45 KB)

    Hi @Jcasariego – since the text is 16sp, my presumption would be 'linesSpacingMultiplier" can be set to 1.5 (to get the 24dp leading per the Material spec).
    However, I am not sure if changing this attribute may affect other sections of text... @Niedzielski was playing with line-heights on something else a while back so he may comment if this is fine or not?

    since the text is 16sp, my presumption would be 'linesSpacingMultiplier" can be set to 1.5 (to get the 24dp leading per the Material spec).

    One could reasonably assume that the lineSpacingMultiplier attribute works straightforwardly that way, but it doesn't. Unfortunately, I have not found any way of translating values accurately between a line-height and the lineSpacingMultipler/lineSpacingExtra. We usually use our best approximation, which in practice in most instances usually falls somewhere between 1.2-1.25.

    @RHo, T157147 tracks investigating adding exact line height support across Android versions and devices. If I understand correctly, @Jcasariego is only changing the line height attribute of one TextView so that's the only place this would have effect.

    IOW, what I'm saying is that there is no sane way to specify a line-height in a native (non-WebView) Android View.

    (A lineSpacingMultipler value of 1.5 will almost certainly be too big.)

    hi @Jcasariego – based on the ^ comments regarding funky line height behavior, seems like 1.25 is a safer bet :)

    Great @RHo . I'll update the attribute and then push it up

    Change 355732 had a related patch set uploaded (by Jcasariego; owner: Jcasariego):
    [apps/android/wikipedia@master] Search empty view design tweaks

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

    Sorry @Mholloway, but I didn't see that you already did the update of this yesterday :/

    No worries, I did a quick patch while I was looking over Rita's feedback but it hadn't gotten any review feedback yet. I can revive that one, or if you've got a patch ready to go, please feel free to push it up and I'll review and merge!

    @Mholloway I created a new patch and I pushed it up. It's the same as your patch

    Change 355732 merged by jenkins-bot:
    [apps/android/wikipedia@master] Search empty view design tweaks

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

    LGTM:

    Screenshot_20170606-204130.png (1×1 px, 110 KB)
    Screenshot_20170606-204134.png (1×1 px, 68 KB)
    Screenshot_20170606-204143.png (1×1 px, 86 KB)

    Tested on Pixel (Android 7.1.2, Wikipedia version 2.5.195-alpha-2017-06-05)