mi6
Create a search results page on the website
Summary
Create a search results page which users can view to see more information about the results shown in the search bar.
This ticket is part of the solution which came out of the search investigation: https://github.com/mi6/ic-design-system/issues/1025.
💬 Description
Currently, when you type into the search bar on the ICDS website, the information about the results you are shown is very limited. It does not provide any context or anything much which helps the user make decisions on whether specific results are what they are looking for.
This ticket is to create a search results page (like the CMS Design System); doing this will allow us to show more details about the results.
The snippet of text shown in each search result should just be a snippet of the content of the markdown file in which the search term was found, just like it is in the CMS Design System.
💰 Use value
This would make it quicker for users to find what they are looking for by giving them more information about search results and therefore making it easier to decide which page to go to.
📝 Acceptance Criteria
Given that I am using the search bar in the top navigation on the website When I type some characters and the dropdown menu opens Then I see an option at the top of the options list which says "Go to search results page" And I am taken to the search results page for my input in the search bar when I click on this option.
Possible idea for this ^ "Go to search results page" option - add an arrow icon:
Given that I have entered a search term into the search bar When I go to the search results page Then I see a search bar on the page containing what I have input (see example) And when I change this value, the search results instantly update.
Given that I have entered a search term into the search bar
When I go to the search results page
Then I see snippets of text where the search term has been found on the page
And the search term is highlighted within this text by being bold and using the <mark> tag.
Given that I am a screen reader user and I am on the search results page When I read through the results Then I am told the total number of results and which one I am focussed on (e.g. "1 of 10").
Given that I am a screen reader user When I change the value in the search bar on the search results page Then I am told how many search results are now visible (for the updated search term).
✏ Designs
There are no designs for this at the moment. We don't want to take up too much of the designers' time while they are focussing on dark mode. It should be easy enough for a developer to create a basic search results page from scratch; for now, we can make it very similar to the CMS Design System's search page, as long as everything fits the 8px grid layout and uses ICDS components (e.g. the search bar, and page title links).
Additional info
See the write-up which was completed for the search investigation (in the the internal knowledge base) for more context about / the research behind this ticket.
See also closed ticket https://github.com/mi6/ic-ui-kit/issues/231#issue-1525124192
Search results 'designathon' due to take place soon...can't progress with this until we have the results of that activity.
