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

Comments

9 participants
@govuk-design-system
Collaborator

govuk-design-system commented Jan 12, 2018

What

A small 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

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 12, 2018

@joelanman joelanman added candidate and removed candidate labels Apr 4, 2018

@frankieroberto

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Member

joelanman commented Apr 5, 2018

Home Office blog post - Good icons should be invisible

@stevenaproctor

This comment has been minimized.

Collaborator

stevenaproctor commented Apr 6, 2018

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

@joelanman

This comment has been minimized.

Member

joelanman commented Apr 6, 2018

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

@stevenaproctor

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Contributor

ignaciaorellana commented Jun 20, 2018

I am adding here a blog post about retiring icons

@eliothill

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Member

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

This comment has been minimized.

Contributor

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

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