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

Icons #24

Open
govuk-design-system opened this issue Jan 12, 2018 · 15 comments
Open

Icons #24

govuk-design-system opened this issue Jan 12, 2018 · 15 comments

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Jan 12, 2018

What

A set of icons with guidance on how and when to use them.

Why

Services that use icons:

Anything else

Discuss

If you've used icons on your service and seen them tested with users, please add your experiences in the comments below

@frankieroberto
Copy link

@frankieroberto frankieroberto commented Apr 5, 2018

We use icons (or symbols) in data tables on our service to indicate the reason for missing or suppressed data. A key is provided beneath the table. Here's an example:

screen shot 2018-04-05 at 10 30 29

The rationale for these is that there isn't space to write in words within the table why the data is missing, and that even if there was, the repeated text would be distracting.

We tested these, and they worked well, with most users spotting the explanation quickly.

We use three different symbols, although it's rare that more than one is used in the same table (and I don't think we have any tables that use all three yet):

screen shot 2018-04-05 at 10 37 09

A short visually-hidden textual explanation is added next to each of the symbols for screen readers. We've not (yet) tested this.

@frankieroberto
Copy link

@frankieroberto frankieroberto commented Apr 5, 2018

Some templates on GOV.UK (new stories, press releases, consultations...) include social media icons for use as share links:

screen shot 2018-04-05 at 10 42 48

These are placed before the name of the social media platform (eg "Twitter"), with visually-hidden "Share on" text in-between.

See https://insidegovuk.blog.gov.uk/2013/12/02/a-time-for-sharing-government-content-on-facebook-and-twitter/ and https://insidegovuk.blog.gov.uk/2013/12/02/a-time-for-sharing-government-content-on-facebook-and-twitter/

@joelanman
Copy link
Member

@joelanman joelanman commented Apr 5, 2018

Home Office blog post - Good icons should be invisible

@stevenaproctor
Copy link

@stevenaproctor stevenaproctor commented Apr 6, 2018

@joelanman There are the icons in govuk_frontend_toolkit that some services use.

@joelanman
Copy link
Member

@joelanman joelanman commented Apr 6, 2018

@stevenaproctor do you know of any specific examples of services that use them?

@stevenaproctor
Copy link

@stevenaproctor stevenaproctor commented Apr 6, 2018

@joelanman A lot of services use the important icon and I have seen the information icon too but less often. There are all the icons on GOV.UK that are used in various places.

@timpaul timpaul added the style label May 21, 2018
@ignaciaorellana
Copy link
Contributor

@ignaciaorellana ignaciaorellana commented Jun 20, 2018

I am adding here a blog post about retiring icons

@eliothill
Copy link

@eliothill eliothill commented Aug 6, 2018

Just seen this icon being used on GOVUK

Might argue that this use of icon isn't appropriate – given that the only method of receiving updates is email whether that icon is more appropriate, or in fact no icon.

sign-up

@SarahFluentInteraction
Copy link

@SarahFluentInteraction SarahFluentInteraction commented Sep 7, 2018

Hi there,

I am wondering if anyone has a 'View charts' icon that they have used before that has been approved by GDS? Am thinking of using one like this
download

Thanks!
Sarah

@joelanman
Copy link
Member

@joelanman joelanman commented Oct 3, 2018

@SarahFluentInteraction sorry for the delay, no we don't have an official icon for that at the moment. Did you try one? It'd be good to hear any research.

@nickcolley
Copy link
Contributor

@nickcolley nickcolley commented Oct 18, 2018

There's some new WCAG 2.1 (Level AA) guidelines around contrast for graphical elements:

"Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed."

https://www.w3.org/TR/WCAG21/#non-text-contrast

@kr8n3r
Copy link

@kr8n3r kr8n3r commented Feb 11, 2019

@LucaDelBuonoHMCTS
Copy link

@LucaDelBuonoHMCTS LucaDelBuonoHMCTS commented May 14, 2019

We're currently on GovUK Frontend Toolkit and I'm in the process of updating the app with GDS instead.
As far as I can remember, we only use one icon for file downloads.

@matthewford
Copy link

@matthewford matthewford commented Jun 4, 2020

I think a file or pdf icon would be useful for inline links #20 (comment)

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