Tags

[chrisadesign]

Example removed Moved to filtering issue.

[htmlandbacon]

Screenshot

What problem does this design solve? A quick way to show agents the status of the claim they are working on.

Which service are you researching this design on?

• Bereavement Support Payment - The badges are in the production build of the payment scheduler, and we are continuing with the same format in the prototypes for the claim management.

How have you approached the design? The design is a combination of the GOVUK .x-large heading, GOVUK subheading and the badge which was taken from companies house.

What have you learned from research? The original design was plain text but it went unnoticed by most agents we tested with. Since adding the colours the agents were able to quickly recognise the status of the claim.

Have you tested this for accessibility?

• It has been tested with users of JAWS, Dragon, Zoomtext, and Read and Write Gold. This is both agents on their work devices and the DWP accessibility compliance team.

Notes: I've moved this from another issue, after speaking to @abbott567 we agreed it felt more like a label than a status badge.

[pistolpete86]

What problem does this design solve? Labels are used to flag up to agents and their managers when an activity on a case is either nearing its due date or has overrun it.

Which service are you researching this design on? Criminal Fraud and Error Management Services (CFEMS), formally known as FES Work Management.

How have you approached the design? The original design was decided upon before my arrival on the project but I have since made changes such as having the label sit next to the due date (as it's directly related) and also linking the labels to the activity data in the top right corner (which summarises the amount of activities that are 'due soon' and/or 'overdue').

What have you learned from research? Labels were intuitive to the users and allowed them to immediately spot which activities they needed to focus on when managing their work for the day. This also helped Team Leaders to understand their team's need for support and helped inform their allocation of work to individuals.

Have you tested this for accessibility? This iteration of the design is yet to be built and will require testing once implemented.

[abbott567]

Added the b=Bereavment labels as a code example should anybody want to use them: https://github.com/dwp/design-examples/tree/master/status-label

[abbott567]

Hi @chdesign - Looking at these two examples they're pretty similar. Was there a reason you rounded the corners on your labels?

[chrisadesign]

I didn't design them I inherited them on Prepare for UC (PUC). Looking at the other examples, the ones on PUC were used to tag content and could be clicked on to filter, whereas the others look like a status indicator which the GDS design system already has. Maybe these were meant to be visually distinct as they behave slightly differently.

[abbott567]

Yeah the ones in my service were modelled off the govuk alpha banner. We do change the colours, which isn't available in the GOVUK tag component. We should probably just create modifier classes for the existing component for tags. Might be worth moving labels into it's own issue or grouping it with filtering.

[chrisadesign]

Done. I've moved off to filtering and made clear that the tags there are used to aid filtering, that issue can contain other examples of filtering now, which I'm sure we have too.

[abbott567]

Moved to experimental now we have code examples for tags: https://dwp-design-examples.herokuapp.com/example/tags

[chrisadesign]

Outcome from the design examples meet 6 September 2018:

• use a modifier on current tag component – these need a coded example
• recommendation for now is to only use for statuses not for categories, eg as in the Prepare for UC service
• don’t use colour for aesthetics – more work needed on colours that might be useful, green/red for accepted/declined for example

[HelenOsg]

GDS ticket https://github.com/alphagov/govuk-design-system-backlog/issues/62