Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search box #132

Open
ignaciaorellana opened this issue Apr 3, 2018 · 25 comments
Open

Search box #132

ignaciaorellana opened this issue Apr 3, 2018 · 25 comments

Comments

@ignaciaorellana
Copy link
Contributor

@ignaciaorellana ignaciaorellana commented Apr 3, 2018

What

Help users search through large collections of information or documents using a search box component. This is potentially part of a pattern for 'search for something'

screen shot 2018-04-03 at 16 36 52

Why

Search boxes are used in many government services - including:

  • What evidence do you have that it meets the needs of the users of those services?

Anything else

Search boxes: Dropbox paper
Search: GOV.UK Publishing
Search: DWP design patterns

@nickcolley
Copy link
Contributor

@nickcolley nickcolley commented Apr 3, 2018

GOV.UK Publishing has this documented here: http://govuk-static.herokuapp.com/component-guide/search

@stevenaproctor
Copy link

@stevenaproctor stevenaproctor commented Apr 4, 2018

@ignaciaorellana Should the search box on www.gov.uk use placeholder text? It is not great for accessibility and elements says "don’t use placeholder text in form fields, as this will disappear once content is entered into the form field".

@ignaciaorellana
Copy link
Contributor Author

@ignaciaorellana ignaciaorellana commented Apr 4, 2018

Hi @stevenaproctor I found this that might help to understand why the search box on GOV.UK uses placeholder text. This is from a "Site search analytics report" from 2013:

screen shot 2018-04-04 at 10 12 40

"Empty searches where people click on the search button without entering a search term - jumped up on 19 November when Universal Jobmatch went live; went down from 8 April when redesigned navigation went live."

@stevenaproctor
Copy link

@stevenaproctor stevenaproctor commented Apr 4, 2018

@ignaciaorellana Thanks for the information. I wonder if having a form label was ever tested rather than placeholder text.

@timpaul
Copy link
Contributor

@timpaul timpaul commented Apr 4, 2018

Thanks @stevenaproctor - we'll try and find out.

The advice against using placeholder text is sound, but very occasionally other factors come in to play - for example the need to conserve space in the header. Search boxes get additional affordance from their top-right position and this seems to offset the negative effect of the placeholder text.

@frankieroberto
Copy link

@frankieroberto frankieroberto commented Jun 5, 2018

Here are some screenshots of different approaches:

screen shot 2018-06-05 at 11 59 52

screen shot 2018-06-05 at 11 59 45

screen shot 2018-06-05 at 11 59 40

Questions:

  • Is it better to use a magnifying glass icon or "Search" label on the button?
  • Should the button be to the right of the search box, or below?
  • Green or blue button?
  • Should <input type="search"> be used, or <input type="text">?
@adamsilver
Copy link

@adamsilver adamsilver commented Jun 5, 2018

@frankieroberto would there be an advantage in using type="text" instead of type="search"?

@frankieroberto
Copy link

@frankieroberto frankieroberto commented Jun 5, 2018

@adamsilver I can't see any advantage to not using the HTML5 type. The UI is slightly different, in some browsers. eg in Safari as you start typing into a type="search" input, you get a (x) button to clear the search - but I think that's helpful.

I don't know if it’s announced differently by screen readers or not.

@chrisadesign
Copy link

@chrisadesign chrisadesign commented Jul 31, 2018

Hey, just joining this conversation as I pointed to it via Slack.

I was wondering what research there's been done on this as a fair few services seem to be using a search button joined/to the right of the input. Is there a need, does it work better for some users, or worse with things like magnifiers?

image

@gazjoy
Copy link

@gazjoy gazjoy commented Sep 21, 2018

Hi there, I am taking a similar approach to @chdesign here. This is for a DWP agent admin.

image

@ashleyanderton
Copy link

@ashleyanderton ashleyanderton commented Nov 27, 2018

We're using this pattern on Explore careers.
image
https://beta.nationalcareersservice.direct.gov.uk/

We've also used a slight adaptation of the pattern as part of the right hand column.
image
https://beta.nationalcareersservice.direct.gov.uk/job-profiles/police-officer
Has anybody else used this as a non key element on a page, or in a one-third section?

@nickcolley
Copy link
Contributor

@nickcolley nickcolley commented Dec 6, 2018

Interesting blog post comparing different kinds of search boxes: https://www.gyford.com/phil/writing/2018/12/05/search-forms/

@adamsilver
Copy link

@adamsilver adamsilver commented Jan 28, 2019

We have done some work on search patterns where it's part of the header on every page.

This one searches everything in a system and uses the search button text as a quasi label for sighted users.

image

This one searches on specific properties like a reference number or whatever you need. The toggle button has configurable text (“Find case” in this example) and custom hint text to help users understand the more limited scope of the search:

image

Here's how this component works as part of the overall layout:

image

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Jan 31, 2019

My service (internal casework tool) uses a search box as part of a filtering pattern. It's similar to what's used in the design system app, though the search button itself is focusable - on the design system when the search is focused the 'button' disappears.

screenshot 2019-01-31 at 12 40 29

@timpaul timpaul moved this from Proposed to To do in GOV.UK Design System Community Backlog Feb 4, 2019
@timpaul
Copy link
Contributor

@timpaul timpaul commented Feb 4, 2019

We've moved this card to the 'To do' column of the community backlog because it's a dependency on the Search for something pattern, which is already in the 'To do' column.

@soniaturcotte
Copy link

@soniaturcotte soniaturcotte commented Jun 19, 2019

We have quite a unique case where users need to search from the GOV.UK taxonomy, which is tree-based. Sometimes the lower levels don't make sense out of context, and so showing the entire tree is important.

The search uses autocomplete and we highlight the key words so when it's a longer list, it is very clear why results are being shown.

Screen Shot 2019-06-19 at 10 05 02

Note: the brighter yellow is from the new design system release, and our focus state will be the same yellow once it’s out.

@timpaul
Copy link
Contributor

@timpaul timpaul commented Jul 10, 2019

We've had this issue raised about the search box in the Design System:

#937: Search button disappearing can be confusing for some users

@timpaul
Copy link
Contributor

@timpaul timpaul commented Dec 21, 2019

Some search box designs from Dave House:

image

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Dec 27, 2019

@timpaul do you have examples of those elements when focused? We're using a variation of #2 and I'm just working on the focus state for the search button itself.

allait added a commit to uktrade/data-workspace that referenced this issue Jan 8, 2020
Adds a new /datasets/ page with search and filters across datasets,
data cuts and reference datasets.

Search and filters are validated by a Django form and applied to
a dataset and (if required) reference dataset queries. The queries
are converted to dictionaries of common fields, which makes it
possible to combine and sort them with a `.union`, allowing us to
search across two separate models.

The `use` filter controls which types of datasets should be included,
with a special "0" value for reference datasets (to keep the same type
as the DataSet.type while avoiding clashing with potential future types).

This change also includes CSS rules for the search field, which
currently doesn't have a component in the GOV.UK Design System
(alphagov/govuk-design-system-backlog#132).

The rules are based on the GOV.UK search box.

Things that are currently missing:

* Individual pagination links, currently there's only `Next` and
  `Previous`
* Refreshing the results when a filter is selected/deselected without
  clicking the search button
* Search box default text label, which requires JavaScript to hide the
  text if there's user input in the field
allait added a commit to uktrade/data-workspace that referenced this issue Jan 8, 2020
Adds a new /datasets/ page with search and filters across datasets,
data cuts and reference datasets.

Search and filters are validated by a Django form and applied to
a dataset and (if required) reference dataset queries. The queries
are converted to dictionaries of common fields, which makes it
possible to combine and sort them with a `.union`, allowing us to
search across two separate models.

The `use` filter controls which types of datasets should be included,
with a special "0" value for reference datasets (to keep the same type
as the DataSet.type while avoiding clashing with potential future types).

This change also includes CSS rules for the search field, which
currently doesn't have a component in the GOV.UK Design System
(alphagov/govuk-design-system-backlog#132).

The rules are based on the GOV.UK search box.

Things that are currently missing:

* Individual pagination links, currently there's only `Next` and
  `Previous`
* Refreshing the results when a filter is selected/deselected without
  clicking the search button
* Search box default text label, which requires JavaScript to hide the
  text if there's user input in the field
allait added a commit to uktrade/data-workspace that referenced this issue Jan 9, 2020
Adds a new /datasets/ page with search and filters across datasets,
data cuts and reference datasets.

Search and filters are validated by a Django form and applied to
a dataset and (if required) reference dataset queries. The queries
are converted to dictionaries of common fields, which makes it
possible to combine and sort them with a `.union`, allowing us to
search across two separate models.

The `use` filter controls which types of datasets should be included,
with a special "0" value for reference datasets (to keep the same type
as the DataSet.type while avoiding clashing with potential future types).

This change also includes CSS rules for the search field, which
currently doesn't have a component in the GOV.UK Design System
(alphagov/govuk-design-system-backlog#132).

The rules are based on the GOV.UK search box.

Things that are currently missing:

* Individual pagination links, currently there's only `Next` and
  `Previous`
* Refreshing the results when a filter is selected/deselected without
  clicking the search button
* Search box default text label, which requires JavaScript to hide the
  text if there's user input in the field
@kim-trow
Copy link

@kim-trow kim-trow commented Jan 15, 2020

@timpaul are there any coded examples of the above search boxes that we can take out to include in some user testing we have planned?

@timpaul
Copy link
Contributor

@timpaul timpaul commented Jan 20, 2020

Hi @kim-trow . There are no coded search box examples in the Design System right now. We're not prioritising the development of new components this quarter, but will be from April.

@RobinKnipe
Copy link

@RobinKnipe RobinKnipe commented Dec 1, 2020

Hi @kim-trow . There are no coded search box examples in the Design System right now. We're not prioritising the development of new components this quarter, but will be from April.

Here's one!: https://design-system.service.gov.uk/components/#app-site-search__input

@joelanman
Copy link
Member

@joelanman joelanman commented Dec 1, 2020

@RobinKnipe just to clarify, the code of the Design System website itself is not intended for use across government, in the way components in the Design System/GOV.UK Frontend are.

@RobinKnipe
Copy link

@RobinKnipe RobinKnipe commented Dec 2, 2020

@joelanman that's a shame, because in this case to include such a useful component in the features of the site, but not in the content, seems like a missed opportunity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet