Universal design checklist
The web has been around long enough for us to know its powers and constraints.
We know about the constraints because we’ve bent them as much as we can over the years. For example, before CSS, we used tables and spacer gifs for layout. And before
border-radius, we used background images for rounded corners.
We use pre-existing mediums as a guide for how a new medium should work.
We take our preconceptions and apply them as best we can.
We’re much better now at embracing the web than we used to be but we still make too many assumptions. Many of those are wrong. For example, we used to think that all viewports were 640px wide. And we used to think that all computers had a keyboard and mouse.
More recently, we thought that small screens means swipeable, and big screens means mouse users.
These assumptions are also wrong.
The truth is, we don’t always know what users do. We don’t know their ability or preferences. We don’t know much. And that’s okay.
But we can still design simple experiences that embrace these constraints.
After all there’s no creativity without constraint.
Which is why I’ve created a universal design checklist which takes into account every constrant.
Constraint #1: Outlook, culture and understanding
Everyone is different.
How people think and see the world is unique to the individual. We’re influenced by where we live, our upbringing and the people we spend time with.
Constraint #2: Disabilities
This disabilities affect mobility, hearing and eyesight.
Not all disabilities are permanent. For example, a mother holding a baby only has one available arm.
Constraint #3: Preferences
- Some people prefer touch screens
- Some people prefer keyboard
- Some people prefer screen readers
- Some people print web pages
Designing for preferences is good design.
Constraint #4: Speed and connectivity
Industry pros often have fast connections. But many people don’t.
Make the slow fast and the fast, lightning.
Constraint #5: Screen size
People use multiple different devices from watches to TVs.
Responsive design isn’t about 3 different media queries. It’s about fixing content where it breaks.
Constraint #6: Browsers
Different browsers have different functionality and support.
This impacts what users can do or experience. Deliver a solid baseline experience and use progressive enhancement.
Everything but content is an enhancement.
Constraint #7: Data cost
While you and I may have expensive data contracts, many people don’t.
Even if data is cheap, it can run out. Let’s keep our interfaces and interactions lightweight.
Breaking up content across pages gives users the choice to load it.
Constraint #8: Environment
People’s experiences are affected by their environment.
For example, low lighting, screen glare from the sun or being outside in the cold wearing gloves.
Constraint #9: Standards and conventions
Use the same patterns to solve the same problems.
This is intuitive. You can break convention but you need a good reason to do that.
Constraint #10: Interoperability
Some people use Safari’s reading mode or a feed reader to access the web.
Some people rely on how Google displays search results.
We need to consider the experience outside of UIs and design for where people are.
Constraint #11: Configuration
We can’t assume people use their devices in factory settings.
People add plugins and adjust the font size.
There’s no creativity without constraint
Bad design ignores people.
And there’s a lot be said for design that ignores people. People ignore it.
Let’s embrace these constraints.
And make products that work for everyone.
That’s the challenge.