Page MenuHomePhabricator

Design improvements for Search loading state
Closed, ResolvedPublic3 Estimated Story Points

Description

Description

Currently there is a minimal loading state UI for the search results list for people on slower connections. This task is about improving that UI via some minor tweaks.

currentcorrect
image.png (333×1 px, 109 KB)
image.png (80×525 px, 6 KB)

Prototype

Acceptance criteria

Fixes:

  • adjust the size & position of the loading panel so it is left-aligned with the search box and ends where the left edge of the search button begins (should be same size & position as the results list)
  • increase the font size of the text to 14px equivalent
  • add loading indicator/animation — 4px blue bar that bounces back and forth at the top of the search results panel (demo: https://di-searchland-2.web.app/)
  • limit to first load of search results

Signoff criteria

  • Ensure a spike is created to look into adding an indicator for loading the search results

QA Results - Patchdemo

QA Results - Beta

QA Results - Prod

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@Volker_E @RHo looking at this again I'm wondering if option B feels better (the loading indicator fills the space where the thumbnails eventually sit, and the text is aligned with the search text). Original discussion is here if you want to refresh: T254695

image.png (472×620 px, 52 KB)

In T273093#6781393, @alexhollender wrote:

@Volker_E @RHo looking at this again I'm wondering if option B feels better (the loading indicator fills the space where the thumbnails eventually sit, and the text is aligned with the search text). Original discussion is here if you want to refresh: T254695

image.png (472×620 px, 52 KB)

Hey @alexhollender – agree. I like the simplicity and "tidiness" of the spinning circle loading indicator.

Revisiting the argument and image you put forward in this comment about showing more of the loading state of the results:
>>! In T254695#6227954, @alexhollender wrote:

@Niedzielski thanks for raising this question. I admittedly know very little about search currently (in terms of user behavior, how we measure success, and technical capabilities) however I hope to learn more in the coming weeks. My initial question is: do we believe that people will have a better search experience if they wait for the results list to populate? If the answer is yes I think the next question is: how long is it worth waiting for the results list to populate (versus just submitting a "blind" search)? I believe that the design of the loading state has the ability to influence how long a person waits. Here are three initial sketches:

results list loading stage.jpg (802×1 px, 154 KB)

I definitely prefer your placement of the indeterminate progress loading bar below the "search results are loading" text in this earlier mock, as right now the bar showing under "Orang" is imho making it a bit ambiguous whether the query is still being processed versus there being a wait as results are being loaded.
This early design is based on the image thumb being on the left though, and the spinning circle loader works better with the left thumbnail placement.

add loading indicator/animation

This could probably do with a little expansion in the description

Other than that this looks ready for estimation.

I also prefer the placement of the loading bar underneath the loading statement label (which should have an ellipsis by the way and put verb in front: “Loading search results…”)
Not convinced about option B for two reasons:

  • We have different versions of the component in production in future, also including ones, that don't feature thumbnails. How would those latest designs work with B?
  • The loading circle is a non-standard loading indicator. The bouncing dots would not fit in this context, nonetheless, I'd lean towards the loading bar instead of the, new and somewhat unfitting overall look & feel of the circle.

after further discussion off-task we've decided to stick with the loading bar option. The mocks in the description are correct.

@Jdlrobson @nray do/can we support a subsequent loading state? For example:

  • person types "Orange"
  • results are being fetched (slow connection)
  • initial loading state appears
  • results appear, initial loading state disappears
  • person modifies their query (e.g. they add "juice" after "Orange")
  • new results are being fetched (slow connection)
  • subsequent loading state appears?

see demo for an example: https://di-searchland-2.web.app/

ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)
LGoto set the point value for this task to 3.May 4 2021, 5:34 PM

Change 685552 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] search: Update styling for the search loading state

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

bwang removed bwang as the assignee of this task.May 5 2021, 8:15 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
bwang subscribed.

@alexhollender Do you have a preference for the spacing when thumbnails are disabled, aka when the icon doesn't expand?

When thumbnails are enabled, we set the left padding to 24px to aligned with the search icon: https://jmp.sh/IipqpMN
But here's what the loader looks like with 24px when thumbnails are disabled: https://jmp.sh/xhGg2uq
Alternatively, we could set the left padding to 36px when thumbnails are disabled to align with the input: https://jmp.sh/bcD2UFw

@alexhollender Do you have a preference for the spacing when thumbnails are disabled, aka when the icon doesn't expand?

When thumbnails are enabled, we set the left padding to 24px to aligned with the search icon: https://jmp.sh/IipqpMN
But here's what the loader looks like with 24px when thumbnails are disabled: https://jmp.sh/xhGg2uq
Alternatively, we could set the left padding to 36px when thumbnails are disabled to align with the input: https://jmp.sh/bcD2UFw

thanks so much for the clarity and options here — the 36px padding option looks great

@alexhollender I went ahead and made a spike ticket to get started on the sign off criteria, please feel free to edit it! https://phabricator.wikimedia.org/T282480

Change 685552 merged by jenkins-bot:

[mediawiki/skins/Vector@master] search: Update styling for the search loading state

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

Test Result - Patchdemo

Status: ✅ PASS
Environment: Patchdemo
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps per T273093#6974218

  1. person types "Orange"
  2. results are being fetched (slow connection)
  3. ✅ AC1: initial loading state appears
  4. ✅ AC2: results appear, initial loading state disappears
  5. person modifies their query (e.g. they add "juice" after "Orange")
  6. ✅ AC3: new results are being fetched (slow connection)
  7. ✅ AC4: subsequent loading state appears?

Screen Recording 2021-05-25 at 6.21.04 AM.mov.gif (1×1 px, 829 KB)

I think it would make sense for this to pass through design review. Where can it be tested @bwang?

here are the steps I followed:

  • open the developer tools & enable slow 3G
  • go to a page on Wikipedia.org
  • type in the search box as soon as it appears

in these three attempts (screen recordings linked below) Vue loads ~14 seconds after the first character is typed into the search box, but I am not seeing the loading state at all?

screen recordings: https://imgur.com/a/Bf9h82H

@alexhollender @bwang is this in prod yet? I still don't see it.

@alexhollender @bwang is this in prod yet? I still don't see it.

No train last week - should be out this Thursday

Jdlrobson added a subscriber: Edtadros.

Please test on beta cluster and move to QA.

Please test on beta cluster and move to QA.

I am unable to design review this. I throttled my connection to "Slow 3G" but Vue is still loading fast enough that I don't see the loading state. How else can I review this? cc @bwang

@alexhollender I made this patchdemo that adds an additional 5 second delay. Let me know if this works for review!
https://patchdemo.wmflabs.org/wikis/3a8e8101b1/wiki/Main_Page?useskinversion=2

@alexhollender I made this patchdemo that adds an additional 5 second delay. Let me know if this works for review!
https://patchdemo.wmflabs.org/wikis/3a8e8101b1/wiki/Main_Page?useskinversion=2

Thanks so much for setting this up. It looks great. Two things:

  • (As discussed offline) regarding the delay between when the loading box first appears, and when the blue animated loading bar appears: @Jdrewniak what was your thinking behind the 1second delay there? Is that in case the loading message only shows briefly and you wanted to reduce the amount of flickering elements? Wondering if there should be no delay, or a shorter delay.
  • Is there a way to see the transition between the loading state and the search results appearing? In the patch demo once the loading state disappears nothing seems to happen

Thanks again and sorry that this is so difficult to review. We (as a team) don't have much practice with loading state stuff.

as discussed: reduce the delay between when the loading box first appears, and when the blue animated loading bar appears, to 500ms — then this should be all set to resolve

here is a video of the transition between the loading state and the search results appearing: https://jumpshare.com/v/ZMc9l6To1WVAJskhSLTY

Change 701441 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Update search loading animation delay to 500ms

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

Change 701441 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update search loading animation delay to 500ms

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

looks awesome! all set here

maybe one more round of QA since some changes have been made?

@alexhollender This is what I'm seeing in beta. Doesn't look like what you saw. Do I need to enable anything?

Screen Recording 2021-07-29 at 9.45.03 AM.mov.gif (732×1 px, 571 KB)

@alexhollender This is what I'm seeing in beta. Doesn't look like what you saw. Do I need to enable anything?

Screen Recording 2021-07-29 at 9.45.03 AM.mov.gif (732×1 px, 571 KB)

yea this is tricky to test. unless @bwang has any new ideas for how we might reliably test in beta or production I think we can move this to signoff.

I found it helpful to test with low or mid level throttling, and then waiting for the entire page to load first before typing into the search bar. https://jmp.sh/MOMIRwd
Oddly enough when you type into the search bar immediately the loading state gets skipped, might have to do with the loading state JS not being loaded yet.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps per T273093#6974218

  1. person types "Orange"
  2. results are being fetched (slow connection)
  3. ✅ AC1: initial loading state appears
  4. ✅ AC2: results appear, initial loading state disappears
  5. person modifies their query (e.g. they add "juice" after "Orange")
  6. ✅ AC3: new results are being fetched (slow connection)
  7. ✅ AC4: subsequent loading state appears?

Screen Recording 2021-08-09 at 4.26.03 PM.mov.gif (770×894 px, 541 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps per T273093#6974218

  1. person types "Orange"
  2. results are being fetched (slow connection)
  3. ✅ AC1: initial loading state appears
  4. ✅ AC2: results appear, initial loading state disappears
  5. person modifies their query (e.g. they add "juice" after "Orange")
  6. ✅ AC3: new results are being fetched (slow connection)
  7. ✅ AC4: subsequent loading state appears?

Screen Recording 2021-08-09 at 4.34.44 PM.mov.gif (770×880 px, 869 KB)