The problem
The service requires multiple infographics and diagrams to support the content. We proposed that through a standard design approach we could optimise the user experience.
The initial diagrams used were inconsistent in their title alignment and general formatting. They used the incorrect font, and the font-sizes were not reflective of the service. Therefore, it was decided that as well as producing a standard approach for future graphics we would also rework those currently in use.
Our approach
We held a discussion between content design and interaction design to look at the requirements for future module graphics. Combining this with a review of the current graphics allowed us to establish as broad a brief as possible to allow some design standards to be formulated.
Analysis of the current graphics identified the following issues:
- The font being used was incorrect and did not match the service. This could potentially cause less trust of the image’s content as it looks as if the graphic originated outside the service.
- The font-sizes were inconsistent and did not correspond to any of the standard sizes being used by the DfE (Department of Education) design system. This could potentially confuse users as to the importance of the text used within the diagram and relevance to the surrounding text.
- The titles of the images were not placed in a standard position. They were not aligned in respect of the overall subject matter or canvas. Alignment allows users to establish a visual connection between the elements on the page e.g. titles
- Graphic elements being used were not using fully saturated colours. This may cause accessibility problems for users who struggle with impairment issues related to contrast ratio.
- The current placement of graphic elements on the image canvas was inconsistent leading to irregular amounts of white space between the image and text content on the page. This differed per image and meant that users may struggle to identify where the image ended, and the text then restarted.
Our solution
To address the issues raised in the review and looking at the requirements for the future graphics we developed the following design standards:
- Used the Helvetica Neue font to ensure that all text used within the graphics matched the service. This would thereby improve the integrity of the content.
- Ensured that all font sizes would correspond to the service when the image was resized. To do this we calculated the ratio of the dimensions of the image at full size to those when it was displayed at the largest screen size on the training (scaled by 64%). This ratio was then applied to the fonts used within the design files. For example, by ensuring we used a font size of 30px with in the design this would produce a font on screen of approximately 19px which corresponds to the baseline font size within the service.
- We standardised the alignment and placement of all image titles to the top left with a consistent spacing. This ensures users can establish patterns for understanding which part of the graphic is the title.
- We improved the saturation of graphical elements to assist users who might have visual impairments relating to contrast.
- We introduced an image border at both the top and bottom of the image. This ensured there was a clear visual reference for the user as to where the image started and ended on the page.
Previous version
Here is an example of a previous graphic used within the service:
Updated version
Here is an example of the same graphic having been reworked with the new standard in place:
Next steps
- To improve accessibility, we will look to remove the image title from all instances and replace it with an appropriate DOM element that is controlled within the content management system.
- Additionally, we will generate the borders for the image as HTML elements rather than including them in the composite. This will require additions to the CMS to identify appropriate instances within the content.