This post was inspired by a presentation I gave at 72dpi, an event run by the Australian Graphic Design Association (WA) on the 14th July, 2022.
There are a lot of third party resources linked to in this article. They will open in a new tab so you can view them later, but I acknowledge that this can cause issues for some readers using assistive technology. If this is you, you can also find all the resources I've linked to at the end of the article as well.
Hi Designers!
I have a confession to make: I’m an engineer. Which begs the question, why am I qualified to do design work, let alone present at an event run by the Australian Graphic Design Association?
The short answer is that I’m not, which is why I prefer to partner with truly talented, artistic and creative graphic designers, so I can focus on the bit I’m best at.
When I switched from working on minesites to websites it wasn’t immediate – it happened gradually over a space of several years. During that time my job titles included data analyst, information analyst, and product owner. The common denominator with all those roles was a passion for data-driven decision-making, and a talent for communication.
That’s still my job today! My area of specialty is user experience, and I’ve been heavily influenced by the evidence and research driven Nielsen Norman Group (whose certification I’m part way through completing). I do have a few other UX qualifications and design training courses under my belt now to go along with my science and engineering degrees, but my real superpower is still research and communication. With that in mind this is my open letter to graphic designers everywhere. ♥
The Presentation
When I was asked to present to a bunch of designers I was somewhat daunted, for obvious reasons. Fortunately, sanity kicked in pretty quickly and I realised that I have been dying for an opportunity to share what I’ve spent the last four years of my life studying, researching, testing and now teaching. I offered to present on the topic:
What your web developer wants you to know.
In true researcher fashion, I went straight out to my own mentors, both in UX and web development, to see what I could gain from their experiences. Here’s a little snippet of some of the replies I received…
“Accessibility isn’t just technology (screen readers, captions, voice to text). If your page is hard to navigate, has no clear visual/info hierarchy, has inconsistent font/spacing/visual cues then all your visitors will all be tripping over the doorstep on the way in. This initial ramp also reduces effort for the access and implementation better for the specialised assistive technology as well.”
Caitlin Bathgate, Product Designer at Seven West Media (BA Digital Design)
Other replies were a little more ‘to the point…’
“What is the plan for your full width image / slider? Because your perfectly art directed image is going to look like that for precisely one person. Also, don’t use too many fonts / weights / styles because those files have to be loaded.”
Ricki Barnes, Web Developer at Tattarang/Minderoo Foundation and Lecturer at Codemaster Institute
“Pay attention to simple accessibility things, like knowing about colour contrast. There’s nothing more frustrating than being given dark grey text on a grey background, and knowing half the users won’t be able to see it.”
Hayley Stewart, Senior Engineer & Developer Mentor at Envato
Ricki also brought up the topic of accessibility, as did several other developers I spoke to. As the most common (and in my opinion, important!) topic, I’m going to start there.
1. Design for everybody, but especially users
Accessibility is finally starting to become more of a focus in the web development industry, and for good reason. Here are a few handy stats on why you should care about it, other than the obvious reason (it’s the right thing to do).
- 3.8 million U.S. adults aged 21-64 are blind or have trouble seeing, even with glasses. (Statista.com)
- More than 466 million people worldwide have a hearing disability. (World Health Organisation)
- 71% of website visitors with disabilities will leave a website that is not accessible. (Forbes.com)
If you (and your customers) are happy with turning down a share of a $1.2 trillion dollar market (the global estimated spending power of the disabled population) and more recently, being the target of numerous lawsuits, then go nuts. Otherwise, learn the basics, and learn them fast. Here’s a checklist of things you should keep in mind when designing, especially for web:
- Colour contrast
- Font size
- Labels
- Readability
- Usability
Let’s dive into a few of these, but if you just want the resources for each one I’ve linked to a bunch of those at the end of this article.
Colour Contrast
The recommended minimum contrast ratio for text on a background is 4.5:1. You can test the contrast between two colours using the WebAIM Contrast Checker. Another really useful tool is this text on background image checker. You need to be especially careful when overlaying text on images, because as Ricki pointed out – your perfectly art directed image will look that way for exactly one person. Background images typically adapt based on screen size, so what may be in a ‘clear’ area for you might look different for someone else. A good way to overcome this is to use overlays, or in a pinch, drop shadows. If you do this, make sure you communicate it to your web developer!
Font Size and Selection
This one is pretty obvious on the surface – those with poor eyesight need to squint to read little writing. However, there are other things that you should take into consideration here, such as whether your font is dyslexia-friendly. I won’t go into too much detail here, because I’ve already covered this pretty extensively in this post (opens in new tab).
Another important consideration when choosing fonts that I’ll mention again below, is that fonts can strongly impact the load time on a page. Make sure you are aware of the implications your font choices will have on site speed!
Another thing to be aware of is that most content on websites is dynamic. That means the heading you spent hours getting the kerning perfect on, might change entirely in two months time. It’s a good idea to familiarise yourself with what is and isn’t possible here. This Mozilla reference is very comprehensive, if a little technical for those who don’t understand HTML/CSS. If that is you, I’d recommend getting a developer who likes you to literally show you the what the different options look like! Better yet, go check out this free tutorial by She Codes, it will be invaluable.
Labels
Minimalism in design has resulted in some real challenges for accessibility, specifically in the context of forms and the use of visual indicators at the expense of text labels. There is an absolutely fantastic article by the Nielsen Norman Group on this that I refer to often, which explains it much better than I can. This one (also by NN/g) is also great at explaining why we shouldn’t rely on icons to convey meaning.
Readability
This is getting a bit more technical, but there are some SUPER quick wins here that you can use to level up your design to make content more effective. Don’t justify text – users rely on the jagged right edge to orient themselves. I know it looks prettier, but it noticeably increases reading time for users. Use a readable text, and avoid large chunks of capitalised text. Avoid right aligned menus where possible, because it hinders scannability. Again – Nielsen Norman Group have a tonne of resources and articles on this specific topic, but this is a good one to start with.
Also a helpful tool: This Golden Ratio Calculator shows you the ideal text block width for your chosen font and size. The general rule of thumb (although research on this isn’t conclusive, and this is more generous than some sources claim) is that you should aim to have a maximum of 100 characters (including spaces) per line. If you have more than that, either decrease your block width or increase your font size. This is why it is important to consider how designs will react on a laptop screen compared to your 2500px monitor!
Usability
You are probably familiar with the terms ‘User Experience’ (UX) and ‘User Interface’ (UI). Usability is a quality attribute that assesses how easy user interfaces are to use – essentially, what impact your UI has on your UX. The best (and really, only) way to test usability is to test usability. More specifically though, learn about testing visual design, and encourage both clients and developers you work with to test for usability as well.
2. The Aesthetic Usability Effect
I didn’t make this up, it’s a real thing. Users will overlook minor usability issues, when they find an interface visually appealing. That might seem great – until your client realises their beautiful design is costing them money. Here’s what I mean.
You create a design. You show it to some prospective users for feedback, many of who fit into the ‘ideal client’ category. Everyone loves it! The client loves it! You give yourself a pat on the back, and move on to the next job.
Two months later, you check your client’s website, and realise your beautiful design has been BUTCHERED! You’re angry, you’re sad, you’re frustrated. You contact the client, and they tell you:
“We loved it, and we were sad too. But after the first month, we checked the analytics and realised that the [fancy design] was causing clients to miss [important action] and we had to switch to this. We didn’t tell you because we knew you’d be annoyed.”
This, friends, is why you should always do goal-oriented user testing rather than asking for feedback! There is a great resource on this here.
3. Know the implications
I mentioned it above, but it is worth mentioning again – you will never regret learning the basics of HTML & CSS, the two languages that make up most of what you see on the internet. Even if you never actively use this knowledge, you’ll make better design decisions. Don’t work in UX design? I bet you still create logos. Style guides. Help clients choose typography, or commission a photographer. Understanding the basics will help you do those things with an eye for what implications they have in a largely digital world.
Here are some of the easily avoidable nightmares we deal with on a regular basis.
Excessive Page Load Speed
Fonts. Videos. Giant raster images. The three most common causes we see for gigantic page load speeds (Google’s number one pet hate). Don’t make me destroy your beautiful design by switching your carefully selected font to a web-safe one, and where possible, provide graphics in SVG format with no strokes (outlines only). These two icons might look the same, but one of them is five times the size of the other!
When choosing fonts, I always try to stick with Google Fonts where possible. A 2018 study by KeyCDN showed that Google CDN outperformed most other fonts, beating Adobe’s typekit by a landslide. You can get good results by self-hosting web fonts (ideally in WOFF format) but you will need both a license, and the required files, to make this happen. It also requires a web developer who knows what they are doing.
Layout Shift
Have you ever heard the terms ‘FOIT’ or ‘FOUT’? They stand for ‘Flash of Invisible Text’ and ‘Flash of Unstyled Text’ respectively. Essentially, if you are not using a standard web font such as Arial, there will be some kind of delay where you either see no text (FOIT) or see text rendered in a fallback font (FOUT). This can be especially bad if a user clicks on something just as the page ‘shifts’ to display the pretty version, because they end up clicking the wrong thing. Before settling on a font, check the web implications!
Screen Sizes
Most designers are using large, fancy screens. The average website user has either a standard 1920px wide desktop screen, or more likely – a 1440px wide laptop screen. More than 50% of users are also likely on mobile, and some users will have gigantic toolbars at the top of their screen with 500 shortcuts, while others will be using split screen. That means your full-screen image or slider will take a lot of work to look great for everyone!
On top of that, full screen hero sections discourage users from scrolling, because the page looks ‘finished’ and they often won’t realise that there is more to see below. I know it hurts, friends, but consider having something cut off by the fold of the page! It will result in better engagement.
Resources
This has been a hell of a rant. Here’s the resources I shared, plus some extras I have thought of since writing this. I will endeavour to keep this list updated, and add any interesting feedback I receive from other developers. I hope you found this useful!
Failing to take accessibility seriously can lead to lawsuits
This text on photo background checker
This post I wrote about typography for web
Mozilla Reference on web kerning
This free HTML/CSS tutorial by She Codes
This NN/g article about usability on form fields
This article also by NN/g on using icons
Yet another NN/g article, this time on readability & legibility
The Golden Ratio Typography Calculator
NN/g on Avoiding Aesthetic Usability Bias
