Horizontal Bar Chart
Opened this issue · 7 comments
Name of component or pattern
Horizontal bar chart
Name of your service
Annual Tax Summary (ATS) -- within Personal Tax Account
Overview
The pattern helps sighted users understand quantitative data by adding a complementary visualisation layer of information.
View screenshot to proposed pattern
Code snippet
HTML
<div class="govuk-summary-list__row content">
<dt id="Health" class="govuk-summary-list__key">Health
<span> (21.9%)</span>
</dt>
<dd class="govuk-summary-list__value">£1,241</dd>
</div>
<div aria-hidden="true">
<dt class="graph-green-bar" style="width:21.9%;"></dt>
<dd class="graph-grey-bar"></dd>
</div>
CSS
.graph-green-bar {
border-bottom: 10px solid #28a197;
}
.graph-grey-bar {
border-top: 2px solid #b1b4b6;
}
Is it useful and unique?
Usefulness
This pattern aims to integrate a bar chart into existing GOV.UK Table/DL-type layout.
Numerical data in tabular format provides detail and accuracy to information, but it can be cognitively demanding specially to non-expert users. Numerical information alone involves a degree of mental mathematical calculation to be able to interpret and evaluate.
The bar chart helps users evaluate and compare quantities intuitively. It adds an additional dimension to numerical data that helps grasp the whole and get to the gist of the information.
The proposed pattern offers two complementary modes of reading in a single layout -- table and graph. One mode supplements the other without interfering with each other. The user is able to access both separately or in combination, depending on their needs and cognitive preference.
Examples of possible useful applications:
- percentages, amount vs 100
- progress status vs completion
- Due tax vs income
- Part payments made vs remaining debit
- Comparing multiple related amounts, eg. difference of recurring amounts across tax years
Uniqueness
It is unique in GDS as there is no exiting component that graphically communicates quantitative data.
Assistive technology
The bars assist sighted users only. The bars are 'visually-hidden' and not described by screen-readers. The data is universally accessible via the content.
Other components or patterns you've tried
There are no existing pattern/components. The previous existing live implementation of these bar charts were too cumbersome and distracting for reading the data -- especially in small screen devices.
View screenshot of mobile views of previous implementation versus proposed pattern.
Reuse of existing GDS component
- This current implementation in ATS uses a Description List HTML element to structure the table but it can also be achieved using a Table element.
- The addition of the bars increases the line-height to accommodate the bars. It does not change the table's screen responsiveness in any way.
- The proposed pattern makes use of the existing (table and DL) horizontal dividing line but gives it a new additional role. It indicates the full measure (100%) against which the bar length is compared. Bar and grey line relate to each other. The line is
2pxthick for a stronger presence next to the bar. - Bar colour used in the ATS implementation is
govuk-colour("turquoise")but any other GOVUK colour could be used keeping within WCAG colour contrast guidelines.
Research on this pattern
UR sessions on ATS service with 6 participants. October 2022
- 1 of 6 commented positively on the bar chart, unprompted. The other 5 said nothing about the bars, instead commenting on the information itself. This suggests the bars were not perceived as strange or intrusive, instead taken for granted as being part of the information.
- When prompted to comment on them, these five users explained the bars as a matter of fact. All commented positively on the table with bar charts.
- When prompted, all six correctly interpreted the meaning of the bars to be directly representing the percentages above them.
External literature research on bar charts comprehension
Review of Graph Comprehension Research: Implications for Instruction. Shah and Hoeffner, 2002. Educational Psychology Review, Vol. 14, No. 1, March 2002. PDF
Thanks Asier. This is now on our backlog, and we'll prioritise it against our other backlog items. Best, Jon.
Hi Jon, is there any progress with this pattern? It has been over 7 months since I submitted it and it is not in the backlog yet! Anything holding it back?
Hi Asier,
It's been on our private team backlog. It can only be on our public pattern backlog if our working group votes for it be added. But this isn't the holdup.
There's 3 things delaying it:
- We're a tiny team that also have lots of tasks outside of design resources - this is our main limiting factor
- We've developed and published a number of patterns during this period that were felt higher priority at the time and had already been voted in by the working group (the key here is whether several teams are asking for this pattern as a high priority - this is the same way GDS prioritise which patterns they work on)
- Bar charts aren't a HMRC specific issue, and we've had negative experiences recently in developing and publishing cross-gov patterns in our department specific space
You could try to publish it via GDS, who have a much larger team and if published cross-gov that would be a better outcome.
J
Well, I am so glad I've asked about it now and not years later.
I suggest those three bullet points are communicated on submission, or even better if they are published up front in the HMRC patterns webpage.
I will now look into submitting to GDS.
Maybe this GDS thread would be the best to add to alphagov/govuk-design-system-backlog#16
It's been on their backlog for 5 years, so more posts there would probably help prioritise the pattern. There has been some recent activity.
There are two new live implementations of the proposed bar charts pattern. Both within PTA's Check your State Pension microservice.
"State Pension Summary" page
"Selected gaps" page
Related UR findings will follow shortly this week.