The entire revamp of the European Parliament websites is very much defined by the notion of the evidence-driven design. This means that no design decisions should be made randomly, nor should they be shaped by personal biases and subjective preferences. To achieve it, we need to be able to measure the quality of design. Since design is supposed to solve problems, we should be able to measure how well a particular design solves a particular problem. And we do so by defining, measuring and tracking the performance of our design across major design KPI targets.
In this overview, we explore some of the critical measurable design considerations that not only guide and inform our design process, but also shape the technical implementation, revamp editorial work and redefine responsibilities of teams producing content for the EU Parliament galaxy of websites.
Let’s explore the design KPIs targets across various attributes that usually contribute to a good user experience in digital. Obviously they will be influenced by the existing implementation, but ultimately that’s the direction we are heading towards. The new websites and campaigns will need to meet these minimal requirements:
Accessibility
Both design and implementation decisions should be informed by WCAG 2.1 AA compliance requirements. However, we also need to ensure that our media content and PDFs are accessible — by default, when they are produced, they aren’t accessible and often need to be adjusted manually. This has to be the task of content editors.
All individual pages, websites and applications should be fully WCAG2.1AA compliant.
For web pages, no accessibility issues detected by automated tools(Siteimprove and axe) on all pages and for all components(can be tested in a live environment or with the SiteImprove browser extension).
For images, we provide alternative text and image caption.
For videos, captions should be available in the original language of the video.
All functionality of the page should be following progressive enhancement and be functional and accessible without JavaScript or CSS.
We should provide a sensible print stylesheet to allow users to print a page or export it as PDF.
Note
To measure the accessibility of the site, we permanently run checks with the tools mentioned above, most notably with the SiteImprove scanning the site regularly in the background. Additionally, we run in-person/remote accessibility testing with users of assistive devices, screen readers, keyboard-only users, non-sighted users — ideally 1h-long sessions with 3–4 users every 6 months.
Ultimately, we aim to make the European Parliament’s websites as accessible as possible by people on lower incomes, with older machines and perhaps more expensive broadband plans.
Value
According to the Strategy for the Rights of Persons with Disabilities 2021-2030 by the European Commission, 87 million people in the EU have some form of disability. This number doesn’t account for any kind of temporary or situational disability. It’s worth noting that 28.4% of persons with disabilities are at risk of poverty or social exclusion compared to 17.8% of persons without disabilities. By making our assets and resources fully accessible, we make the content accessible universally.
Web Performance
Even if every individual page is WCAG-compliant, it doesn’t mean that the page is accessible. If the performance of the site is suboptimal — be it in dense cities or rural areas of EU — visitors won’t have a chance to explore the content of the page in the first place.
Web performance is of utter importance for accessibility, and performance targets have an impact on decisions around imagery, videos, web fonts, external libraries, third-party embeds and design. when publishing content, we always prefer the most effective and lightest way in communication. We always starts with text, then image, then audio, then video — in that order.
For all pages, the Core Web Vitals should be 100% green(both on mobile and on desktop),
All pages should have the Lighthouse Score > 90(both on mobile and on desktop),
On every page, both the CSS coverage and JS coverage should beabove60%(that’s the amount of CSS and JavaScript used on a given page for all breakpoints combined),
The initial file size of the page must be less than 1MB and preferably 500KB.
It includes page’s HTML, CSS, JavaScript, fonts, headers, cookies.
It doesn’t include images, videos, PDFs, third-party scripts/embeds.
The total file size of the page must be less than 5MB and preferably at most 3MB.
We use JavaScript to enhance the experience of visitors(progressive enhancement), but the site should be functional without JavaScript.
Accessibility
Web Performance