Today I found an incredible (beta) free chrome Plugin, which I believe has the potential to be the perfect tool for UX / Visual Designers to create accessible digital content. How nifty is that!?
Funkify’s sole purpose is to help you experience the web and interfaces through the eyes of users with different abilities and disabilities. Funkify is created by a team of usability and accessibility experts in Sweden.
They have cleverly put together 6 personas representing and simulating different disabilities. This includes;
- ‘Blurry Bianca’ – allows you to view a page through a foggy filter, similar to several visual impairments.
- ‘Dyslexia Dani’ – allows you to view a page where words and letters are scrambled, as if you had Dyslexia.
- ‘Trembling Trevor’ – allows you to navigate a page as if you had a tremor in your hand (think Parkinsons etc). You loose some control over the mouse pointer on screen. This one I am particularly a fan of; I haven’t seen a simulator like it before.
- ‘Colour Carl’ – allows you to view a page with different colour filters, conveying several types of colour blindness.
- ‘Elderly Ellen’ – this combines blurred vision and trembling navigation.
- ‘Sunshine Sue’ – allows you to view your screen as if you were outside in bright light – something all users will experience at some point.
For each, it is possible to increase / decrease the intensity of the impairment.
I am also fond of how they have added short stats under each persona. For example; when selecting Trembling Trevor, you are presented with the stat “12% have a hand motor impairment”. This definitely helps to bring real life context to each persona – my accessibility fan girl brain is tingling, this is epic.
How can Designers use this plugin?
Using all the persona’s during a visual / UX design process will help to avoid so many accessibility issues that are so often seen,and that comply excellently with WCAG 2.0 and general usability principles. I’ll break it down 1 at a time, highlighting the great outcomes…
Viewing a design with Blurry Bianca
- Shows designers the importance of responsive layout. Users with visual impairments will often magnify a page using a screen magnification software or built in internet browser zoom. When a webpage contains many columns and text that it is not responsive, this will be very difficult for screen magnification users to navigate. WCAG states that text must be resizable.
- Blurry Bianca shows designers the importance of text; in particular, the default size, colour and actual font type. If background and text colour are not in keeping with WCAG’s colour contrast ratio (4.5:1), text will be completely illegible when viewing a page with Blurry Bianca enabled.
Viewing a design with Dyslexia Dani
- Again, this shows designers the significance of the placement and layout of content areas. Those with dyslexia may find large bodies of text very difficult to read. Mindfully placed content areas can create a far better experience for these users. Basically, less words = less dyslexia interference. Paypal show a great example of this.
Viewing a design with Trembling Trevor
- Will show designers the importance of implementing larger target sizes for interactive elements. This will allow users with motor impairment a far easier experience when interacting with digital content. Some individuals’ tremors may be so severe that they may abandon a page if they are unable to interact with it.
- Trevor also shows the importance of spacing buttons / icons / links (increasing text size even) and interactive elements further apart from one another (increasing the ‘padding’). This allows far greater ease for users with motor impairment.
Viewing a design with Colour Carl
- Carl outlines the importance of Use of Colour, another WCAG success criteria. This is particularly important for link text. Text that is interactive must be visually distinguisable without using colour alone. A great example of this implemented very accessibly can be seen on the Gov Website. They have used CSS to underline link text; basically – the page can be interacted with in black and white, which is awesome.
- Carl will also help designers in ensuring forms and error handling are implemented accessibly to all. Errors are sometimes highlighted using colour alone (red box around form field for example). An individual with a colour blindness may be unaware of these errors, which could lead to frustration to why the form cannot be completed. Therfore could result in abandonment of page.
- This will ensure charts and diagrams are designed accessibility; again going back to WCAG’s Use of colour. BBC Bitesize have implemented excellent accessible charts in their GCSE maths section. Again, they can be understood in black and white, without a user having to guess or assume.
Viewing a design with Elderly Ellen
- As this persona combines both Blurry Bianca and Trembling Trevor; the same principles and benefits apply here. Ellen is an important persona, specifically as generally speaking, life expectancy is increasing and loneliness is common issue with the older generation. Ensuring your content is designed accessibility to this persona can help towards combating loneliness; this is because it’ll help people use the web to find out about events, news, social media etc.
Viewing a design with Sunshine Sue
- As this persona behaves similarly to Blurry Bianca; the same benefits apply here. More importantly as previously mentioned, this one is particularly great, as it will effect all users at some point.
So finally I want to personally say thank you to the Funkify team! You have produced an incredibly useful tool that’ll definitely help in creating an inclusive digital world, which is amazing.
Let the team know your thoughts too (as it is still in beta!), follow Funkify on Twitter
Any questions about this blog post, feel free to get in touch. Lets have a chin wag.
- For more infromation on how Age UK are combatting loneliness for the elderly, please go to the Age UK website