Embed Size (px)
Citation preview
Universal design:
Make one design that fits everyone
Joakim Bording UX Camp CPH 2016
Joakim
Bording Interaction designer, frontend developer and universal design enthusiast
@spispeas
A content-driven digital design agency
25 million
passengers per year
Won prices both for
accessibility AND
good design
Webdagene
20–21. October in Oslo
«Universal design»
Simple
Frustrating
Impossible
Impossible
Frustrating
Simple
Drink espresso
Drink water
Drink coffee
Impairment vs. Disability
«Impairment»
is what makes your body different or damaged
«Disability»
is what happens when your body encounters an obstacle it can not solve
How disabled you are varies from situation to situation.
impairment + context = disability
Disabled
Bad designer
We make our users disabled if we do not design for their needs.
– new ICT solutions should be universally designed from 1 July 2014. Existing ICT solutions should be universally designed from 2021. The Norwegian Agency for Public Management and eGovernment (Difi)
Requirement: The Web Content Accessibility Guidelines (WCAG) 2.0 level AA An international standard from W3C
– The requirements are relevant for private businesses, organisations, and government agencies. The Norwegian Agency for Public Management and eGovernment (Difi)
It’s illegal to discriminate the visitors of your website on the grounds of accessibility
– Never has so many debated so much about such a narrow field that so many people think deals with so few @ahenrichsen (my translation)
What happens if you don’t
comply?
You might get daily fines from
the state
We want to use it in branding
Ok, shure!
Foto: @MarcoPexxaniEU
✍ Twitter:
#eudisability
The current proposal from EU is to set WCAG 2.0 AA as requirement for public sector websites, and important privat sectors like transportation and banking… Disclaimer: My own interpretation of lawyer-speech
WCAG 2.0 is not the topic of
this talk
– One out of seven has some form of disability World Health Organization
Seniors
Perception
Movement
Cognition
Permanent Temporary Contextual
Visually impaired Broken screenCan’t find my glasses
Parkinson Broken arm The buss is shaking
Dyslexia Foreign languageDrunk
Perception
Movement
Cognition
Temporary Contextual
– Accessibility is not binary, all-or-nothing, black and white. We have every shade of grey in between. Derek Featherstone - simplyaccessible.com
I we want to design for humans we have to accept variation
– Design for extremes. The middle will take care of itself. Dan Formosa
Accessibility has branding problem
«Universal design»the design of products and environments to be
usable by all people, to the greatest extent possible, without the need for adaptation or specialized
design
So how may we solve this problem with universal design?
Make one design that fits everyone
Suddenly accessibility becomes a design problem!
I’ll give you 4 tips to start with
Spoil your users with high contrast
1
Which happens to be at the WCAG 2.0 recommendations for contrast (4.5:1)
This is as far as I can read
Shorthand for the lightest color to use
#777
✍ Google: «contrast
ratio»
✍ Google:
«colorable matrix»
Play it safe with text alternatives
2
iPhone anyone?
Test the screenreader VoiceOver by enabling
it in the settings
BUT DO NOT DO IT NOW!! 100 Siri’s talking at once will be a nightmare…
Hello world
Hello link world
image A grumpy cat
button 9
We asked 3602 people «Do you know what this icon means?» In a survey conducted in 2014 for Posten Norge, a Nordic mail and logistic group
Knew what the icon means
27%
– The three lines up in the corner? That’s the logo. Quote from usertest
There are many abilities we take for granted in a user
MENU
Always use a label on your hamburger
Write short and informative textalternatives for relevant pictures
✍ Google: «tota11y»
Test all the bells and whistles with the keyboard
3
Some times keyboard navigation is the simplest way to navigate
1. Lazy users
2. Expert-users
3. Users with a broken mouse
4. Users with limited movement
5. Blind and visually impaired users
A large number of your users use the keyboard for navigation
Foto: Flickr - yum9me
This Monday you are not allowed to use a mouse or a trackpad Chrome is recommended
TEST IT!
Define some tasks you want to test on your site and complete them using the keyboard
1. Du you see where you are and what you do?
2. Can you do everything you want?
3. After interaction: Is the focus where you expect it to?
4. Is there a lot of repeating content on the site?
Four things to test
Login
Order ticket
Contact us
Login
Login
Order ticket
Contact us
Never do this
Login
Order ticket
Contact us
HTML is accessible by default. Keep it that way.
Respect your links or go home
4
Now, one of the peculiar characteristics of the savage in his domestic hours, is his wonderful patience of industry.
Now, one of the peculiar characteristics of the savage in his domestic hours, is his wonderful patience of industry.
Now, one of the peculiar characteristics of the savage in his domestic hours, is his wonderful patience of industry.
Now, one of the peculiar characteristics of the savage in his domestic hours, is his wonderful patience of industry.
Follow the link to download
Click here to enter
Read more
Turn the wheelMore road
Use the linktext to inform the user where the link is pointing
On the next slide:
Find a link that leads to experiments
Now you know 4 things about accessibility 1.High contrast 2.Text alternatives 3.Keyboard navigation 4.Linktext
✍ Google:
«webaim» for more
Do I need to learn all this as well???
User testing, analytics, prototyping, content, SEO, graphical design, marketing, information architecture, technical specifications, branding, project management, emotional design, HTML, CSS, JavaScript, coffee brewing, social media, SASS, BEM, content marketing, inbound marketing, ReactJS, animations, workshop management, app development, illustrations…
UX Frontend Design Content
We need an accessibility guy!
So my role is to fix your mistakes?
UX Frontend Design Content Accessibility
Universal design is a perspective that all contributors should apply in their work That is the only road to really good solutions
– When you say accessibility is slowing your development down. It’s not because of accessibility. It’s because you are learning a new skill. Derek Featherstone
MAKE STUFF THAT WORKS
Make one design that fits everyone✍
Impossible
Frustrating
Simple
