4 Steps to Put Ethical Design Principles Into Practice
Digital Designers are increasingly becoming aware that many of their decisions can have many ethical dimensions. However, many are still unclear on what exactly they can be doing on a daily basis to make sure they are part of the solution.
Ethical Design Principles
Before we get into what actionable steps designers can take, let’s briefly cover the some core ethical design principles we’ll be looking to address.
- Sustainability
We must consider the impact of our work on the environment and our carbon footprint. Whether it’s the materials we use or the amount of electricity we consume, physical and digital products alike have to consider questions of sustainability. - Accessibility
Products that are not accessible and usable by all are discriminatory by definition. We need to think about accessibility in terms of different physical experiences of our products, as well as the different experiences rendered by the speed of the internet connection or type of device and browser used. - Privacy
Privacy is a basic human right. Privacy shouldn’t be an afterthought, but should be a concern at every level and stage of developing a product. Privacy should not be opt-in, but the default. We must not expose, put at risk or exploit any personal information of the people who use our products. - Respect and Empathy
Respect people’s rights and have empathy for their human experience. Products that are distracting, addictive and create noise are unethical. We must also be cognisant of our work’s impact on everyone it may affect, not just our customers, and also considering society at large.
Step 1. Digital asset optimisation
By digital assets I’m referring here to images, fonts and data. Three things that all digital designers are constantly working with. Storing and serving these assets requires electricity. If the internet was a country, it would rank sixth for electricity usage. The lighter your websites and apps are in these areas the more performant and sustainable it will be. As stated on the Sustainable Web Design site:
Sustainability and page speed go hand-in-hand. When your website runs more efficiently, you use less processing power, which means that your site uses less energy and will have a lower carbon footprint.
If in every project we consider how to optimise these three things we can collectively make a significant difference. Let’s dig into each of them separately.
Images
Images are often the heaviest assets in a project, so optimising these assets is your quickest way to building more sustainable digital products and services. Before we get into optimising images, it should be noted that part of an ethical mindset would be to ask yourself if you really need an image in the first place. Could you use a vector image instead of a raster image? Or if you’re using a video, could an image or even text be just as effective?
When it comes to image optimisation, most designers only go as far as using the ‘Save for web’ export option from Photoshop. But in reality this only goes a small way to fully optimising an image.
There are now ‘next-gen formats’ like JPEG 2000, JPEG XR, MOZjpg and WebP, which often provide far better compression than PNG or JPEG. This means faster downloads and less data consumption.
I use the free online Squoosh or iloveimg optmisers to drastically reduce image size after exporting from Photoshop. They will reduce images by an average of 75%, but sometimes up to 90%. For images without transparency, I like the MOZjpg format as it’s read by browsers as a normal JPEG, so you don’t need to provide any fallback support in your code for browsers that don’t support these next-gen formats. I also use SVGOMG to optimise SVG files.
Fonts
The ability to host our own fonts has meant an explosion of amazing digital typefaces and typography online. While I love to see this great work online, I think we should be aware of the cost of hosting and serving these fonts. Sometimes fonts that are not even used on a site or product are served just because a whole family of weights was purchased, and every weight was added to the code at the beginning of a project.
The weight of fonts is often not really appreciated. From a recent project I saw self-hosting three fonts from the Larsseit typeface (regular, bold and italic) in all their various formats — .eot, .ttf, .woff, .woff2 — amounted to nearly 1MB.
Increasingly, I have decided to serve system fonts instead of choosing to self-host something more unique. I know most people, even designers, cannot tell the difference between Arial or Apercu, Helvetica Neue or Neue Haas.
Also consider, if you serve a system UI font stack then whoever is seeing your content will be served the OS font they’re used to. Something comfortable and familiar, and if they’re using a modern device these fonts, like Apple’s San Francisco and Microsoft’s Segoe UI, are great typefaces in their own right. The article, System Font Stack, from CSS Tricks breaks down the options for you.
However, I recognise that type is a powerful way to help create a visual identity and enable a brand stand out. If you do self-host fonts, there are still ways to optimise. First, you can drop the .eot and .ttf formats on your self-hosted fonts, as these are used as a fallback for older browsers. You can then add a system UI font stack after your main font declaration in a Sass variable.
With this setup, users on modern browsers that support the .woff and .woff2 formats would get your self-hosted font and everyone else would get the system UI fonts. If you’re using an older browser you’re probably using an older machine, you may not have the best internet connection, and you’re probably are already dealing with a slower than average load time. It’s better to get our content to these people quickly, considering the high bounce rate for slow sites, then serve them custom fonts.
Finally, set font-display: swap. With this setting we display the system fonts in a ‘flash of unstyled text’, or FOUT as it’s known, if the self-hosted fonts are taking a long time to download.
Some designers don’t like this flicker as the text switches from one font to the other. On a fast connection this is indeed just a flash as the page initially loads, but if you’re on a slow 3G connection this may mean seconds. Loading those system fonts first means people don’t have to wait to start accessing your content.
Here’s a code example:
@font-face {
font-family: ‘Larsseit-Regular’;
font-style: regular;
font-weight: 400;
src: font-url(‘3AA7CA_1_0.woff2’) format(‘woff2’),
font-url(‘3AA7CA_1_0.woff’) format(‘woff’);
font-display: swap
}// font stacks
$font-stack-regular: ‘Larsseit-Regular’, -apple system,BlinkMacSystemFont,”Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,”Helvetica Neue”,sans-serif;$font-stack-bold: ‘Larsseit-Bold’, -apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,”Helvetica Neue”,sans-serif;
Data
Digital is physical. Digital is not green. Digital costs the Earth. Every time I download an email I contribute to global warming. Every time I tweet, do a search, check a webpage, I create pollution.
By 2025 we’ll have created 200 Zettabytes of data. If you were to print out just one Zettabyte of data that would require about 20 trillion trees. There are only 3 trillion trees on the planet.
By 2035 we’ll have created 2,000 Zettabytes of data. And most worrying of all, up to 90% of digital data is not used.
We tend to feel like data, in the form of any number of digital assets, are ‘free’. We constantly create copies of files and store data without any concern for what that may mean in terms of the resources needed to support that behaviour.
The most dangerous cost is the cost close to zero. Our digital waste is an accumulation of many small decisions multiplied billions of times and repeated on a daily basis.
In our digital work consider how we collect data. Do you really need that data? 1.6 billion trees would have to be planted to offset the pollution caused by email spam. How often is your website or product emailing people? Is your unsubscribe link in 13px and a light grey that would not pass accessibility checks for sufficient contrast?
Step 2. Consider disability
I was recently introduced to the social model of disability, which says that disability is not derived from a person’s characteristics (the medical model), but through their interaction with an unsuitable, broken environment. In other words, we have built our society and environments in a way that disables people. It’s painfully clear much of the web and its associated technology is built with little regard to how it disables many people from effectively interacting with it.
Getting down with the a11y gang
If you’re an accessibility pro then you already know that a11y stands for accessibility — the first and last letter of accessibility and the 11 represents the number of letters in the middle. The world of a11y can feel daunting for most designers who have never received any kind of training in this area, but there are a number of simple tools and practices that can help you make your work more accessible.
Extensions
You can pick up a lot by using extensions like Google Lighthouse and Axe. These tools will more than likely catch a number of instances where you’ve missed some basic accessibility best practices: ensuring all titles, alt tags and elements critical to accessibility are included, checking valid and necessary attributes and values are used, and highlighting all manner of relatively small fixes that can make your markup more coherent and semantic. The sum of these many small fixes will result in a big UX improvement for assistive technology users.
Silktide, another useful extension, simulates the experience of your site or app from the perspective of someone with dyslexia, colour blindness, cataracts or who is blind. I’ve found the basic simulator for a screen reader in Silktide was a great entry tool, much simpler to use than VoiceOver, the native screen reader on Mac.
The accessibility tree
Most digital designers and developers know about the document object model (DOM) — HTML is parsed by the browser and turned into the DOM, and together with CSS and javascript we get the graphical user interface (GUI). But what is not such common knowledge is that browsers also produce an Accessibility Tree, which is pretty much like the DOM but edited down to include only that which is semantically relevant to devices like a screen reader. It’s why having semantic markup and using the right elements for the job is so crucial when you’re writing HTML.
In Chrome you can access the Accessibility Tree through the developer tools.
Step 3. Abandon Google Analytics and Trackers
Tools and plugins like Google Analytics do not respect people’s privacy by tracking as many of their actions online as possible, and then using that data to make profit. Google Analytics is often installed by default as standard operating procedure when building new digital services and products. It is an incredibly powerful and complicated tool that collects a massive amount of data, only a fraction of which is used by the vast majority of people who have installed it.
Fortunately there are better options, and I highly recommend using Fathom Analytics — a simple, privacy-focused alternative. Most people would greatly benefit from the simpler UI, and all data collected is aggregated with personal details such as IP addresses hidden.
After this simple switch, consider everything else that tracks people. Is the revenue you make from ads really needed? Would your brand benefit more from marketing a privacy-first standpoint, or by distracting its customers with ads?
Check to see if you’re using pixel tracking. Pixel tracking is a common marketing practice used by many saas companies where emails are embedded with a code snippet that can track whether you go to a company’s website, the OS you use, mailbox type, screen resolution, the time spent on email, IP address, and actions you take on the actual site (eg, the additional pages you visit).
Here’s another simple step to limit tracking — when using an external link in a webpage that’s to open in a new window, if you do not add the rel attribute with noopener noreferrer values it means that people accessing that external link can be tracked from where they’ve come from and a security vulnerability is also introduced.
The noopener tag works as a security fix, preventing hackers from reaching the user’s currently opened website with a fake website and potentially stealing personal data, such as login details and credit card details. The noreferrer attribute stops that user being tracked across your site and the external site they’re taken to. Here’s the code:
<a href="www.external-site.com" title="The title of a link" target="_blank" rel= “noopener noreferrer”>www.external-site.com</a>
Step 4. Commit to human-centred, delightful design
Products that are distracting, addictive and create noise are unethical. We must be cognisant of our work’s impact on everyone it may affect, not just our customers, and also considering society at large. Human-centred design starts with empathy for the people using our products and puts the human perspective in all steps of the design process.
The web abounds with dark UX patterns that seek to manipulate behaviour solely for the purpose of tricking users into taking actions that are for the benefit of the company, and not necessarily for the user. Some of these patterns are truly egregious and consciously manipulative, but other patterns may not appear to some designers as outright unethical. Partly because they have become so habituated to seeing them online themselves, and absorb those patterns as part and parcel of how things are done in certain contexts. And so they’re carelessly repeated or, worse still, evolved and made more effective.
We must question our motives whenever we seek to persuade someone into an action. For whose benefit is this? Who will always benefit — the user or the company? It’s tempting to not dwell on something you tell yourself is no big deal, to give yourself a free pass, justifying a decision by saying that everyone else does it. Don’t.
We should always try to respect people’s time and value a delightful experience as much as a functionally robust one. In Aral Balkan’s Ethical Design Manifesto, ‘Delightful’ is at the apex of his ethical hierarchy of needs. Our time is scarce, so don’t expect people to spend it on a drab product. This part of the product development doesn’t come at the end of our work, the ‘skin’ we slap on to the code, but throughout the process we should seek every opportunity to create a delightful experience.
