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 · 13 comments

Comments

9 participants
@ignaciaorellana
Contributor

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

This comment has been minimized.

Contributor

nickcolley commented Apr 3, 2018

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

@stevenaproctor

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Contributor

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.

@timpaul timpaul added component and removed candidate labels May 21, 2018

@frankieroberto

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

adamsilver commented Jun 5, 2018

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

@frankieroberto

This comment has been minimized.

Collaborator

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.

@chdesign

This comment has been minimized.

chdesign 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

This comment has been minimized.

gazjoy commented Sep 21, 2018

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

image

@jennifer-hodgson jennifer-hodgson referenced this issue Oct 4, 2018

Closed

Search #53

@ashleyanderton

This comment has been minimized.

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

This comment has been minimized.

Contributor

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/

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