Page MenuHomePhabricator

[S] Update styling of messages that show up above search results
Closed, ResolvedPublic

Description

Formerly titled: Update of "Did you mean" css on Special:Search

Problem

  • The current message above the search results are visually alarming. Some of the messages are meant to aid the user in finding better content but are treated as error messages with use of red.
  • There are currently a few different messages that show up at the top and their visual treatment is inconsistent. See this flowchart created by search team to understand when the messages appear.

Current implementation of messages

This ticket includes the following three message redesign.

Message 1

Group 107.png (890×1 px, 235 KB)

Message 2

Group 106.png (884×1 px, 178 KB)

Message 3

Group 105.png (868×1 px, 226 KB)

Proposed Solution

Message 1
Desktop | Mobile

did you mean.png (1×3 px, 502 KB)

Message 2
Desktop | Mobile

Message 2.png (1×3 px, 537 KB)

Message 3
Desktop | Mobile

There is a page.png (1×3 px, 512 KB)

Acceptance Criteria

  • Red text to standard text for all sentences
  • Spacing and padding update
  • Font size adjustments
  • Font style adjustments (bolds have been removed as we want to keep it strictly for highlights)
  • Message 2 only: the search query for which results were not found should be in red
  • All the linking remains unchanged

Event Timeline

CBogen renamed this task from Update of "Did you mean" css on Special:Search to [S] Update of "Did you mean" css on Special:Search.May 4 2022, 4:35 PM

Noting that development can begin, but nothing should be merged until we've had the chance to get feedback from the communities (in progress).

Sneha renamed this task from [S] Update of "Did you mean" css on Special:Search to [S] Update styling of messages that show up above search results.May 27 2022, 8:20 PM
Sneha updated the task description. (Show Details)
Sneha updated the task description. (Show Details)

Moving back to Ready for Estimation per @Sneha :

this ticket was initially only for did you know message but now its all the messages that show up in that location, so not sure if estimation changes

Change 802784 had a related patch set uploaded (by MarkThisDot; author: MarkThisDot):

[mediawiki/core@master] Update styling of messages that show up above search results

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

@Sneha the messaging changes for 2 do not equate to the same meaning.

The original conveys that you searched for X but there were no results for that query and so we are giving you an alternative.

The second is leaves ambiguity and implies you might get results with your original search string

@Seddon you're right just looking back at this flowchart and there are indeed absolutely no results found. The current error still allows users to click on the link and search for that query which also makes it a little confusing as to why would an option to search for it be provided if there are no results. But it goes to empty state and a message to create article so perhaps it is okay for users to still be able to search for it. I will update the new message, thanks for pointing that out.

@Seddon @MarkThisDot I have updated Message #2 based on above discussion. Also note that the search query for which results were not found is now in red keeping the theme of showing red for articles that do not exist.

Test wiki on Patch demo by Seddon using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/c0fe80e35b/w/

Change 802784 merged by jenkins-bot:

[mediawiki/core@master] Update styling of messages that show up above search results

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

Etonkovidova subscribed.

For @Sneha review

  • Message3: "There is a page named ..." - should the message be not bolded as in the mockup?
  • Message3: "There is a page named ..." - partial match - there is no mockup, but it the UI looks according to the logic in place: "There were no results matching ..." message displays first.

Message 1: "Did you mean"

current production wmf.23betalabsmockup
Screen Shot 2022-08-11 at 4.48.00 PM.png (767×1 px, 215 KB)
Screen Shot 2022-08-11 at 4.53.31 PM.png (672×1 px, 124 KB)
Screen Shot 2022-08-11 at 4.49.35 PM.png (767×1 px, 188 KB)

Message2: "Showing results ..."

current production wmf.23betalabsmockup
Screen Shot 2022-08-11 at 4.57.35 PM.png (682×1 px, 160 KB)
Screen Shot 2022-08-11 at 4.57.19 PM.png (674×1 px, 128 KB)
Screen Shot 2022-08-11 at 4.57.59 PM.png (610×1 px, 214 KB)

Message3: "There is a page named ..." - full match

  • on the mockup the message is not bolded
current production wmf.23betalabsmockup
Screen Shot 2022-08-11 at 5.03.11 PM.png (794×1 px, 227 KB)
Screen Shot 2022-08-11 at 5.03.03 PM.png (788×1 px, 132 KB)
Screen Shot 2022-08-11 at 5.03.35 PM.png (588×1 px, 195 KB)

Message3: "There is a page named ..." - partial match

current production wmf.23betalabsmockup
Screen Shot 2022-08-11 at 3.40.27 PM.png (555×1 px, 61 KB)
Screen Shot 2022-08-11 at 5.18.59 PM.png (578×1 px, 83 KB)
N/A

@Etonkovidova thanks for the screenshots

Message 1: I did not know of a case where you would get both did you know and create article message. I have created a mock to show the spacing when it happens here. So basically there is 24px from the advanced search widget, and 32 pix from the search results. If there is both did you know and create article message then there is 12 px between them.

Message 2: Yes this one is very different from the mocks. At the least we should have the search term not found in red.

Message 3: Yes it does no need to be bolded. And also spacing is off. General rule as I mentioned above 24px from advanced search widget and 32px from search results.

Message3: "There is a page named ..." - partial match: This does not make sense. I don't know of this case. How can there be a match and yet no results are shown?

  • Padding should tweaked to the following:
.mw-search-form-wrapper { 
   margin-bottom: 1.4em;
}

.mw-search-results {
    margin: 2.4em 0 0 0;
}

.searchdidyoumean {
   margin-bottom: 0.8em;
}
  • '''Message 2''' The search team not found is not a red link but a link to the search result set. Based on this, it being linked in blue is correct. Should we be linking in that instance? I don't know the motivation to link to a search term with no results. would be useful to get input from search platform on this. My gut suggests we might want to consider simply unlinking?
  • '''Message 3''' Will unbold.
  • '''Message 3''' In terms of the weird partial matching I presume this occurs when searching for special characters which get stripped out by text search. Looking into this is probably out of scope.

Note for QA: some AC were not complete and those have been moved to T315323. As long as the rest passes QA, this can be closed.

@Etonkovidova thanks for the screenshots

Message 1: I did not know of a case where you would get both did you know and create article message. I have created a mock to show the spacing when it happens here. So basically there is 24px from the advanced search widget, and 32 pix from the search results. If there is both did you know and create article message then there is 12 px between them.
Message 2: Yes this one is very different from the mocks. At the least we should have the search term not found in red.
Message 3: Yes it does no need to be bolded. And also spacing is off. General rule as I mentioned above 24px from advanced search widget and 32px from search results.
Message3: "There is a page named ..." - partial match: This does not make sense. I don't know of this case. How can there be a match and yet no results are shown?

I added testing notes to T315323, so the above comments will be re-checked.

Test wiki on Patch demo by Seddon using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/83637d15ee/w/

Test wiki on Patch demo by Seddon using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/c82d61d18f/w/