Page MenuHomePhabricator

Design improvements for Search loading state
Open, MediumPublic3 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

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

Event Timeline

@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

@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

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:

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.Tue, May 4, 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.Wed, May 5, 8:15 PM
bwang added a subscriber: bwang.