“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.”
What exactly is UX?
User experience, or UX as it’s more commonly known, is the skill of tailoring the design of a digital product so the overall experience for someone using a website, application, interface or product is simple and pleasing to use.
The term User Experience was coined by Don Norman, who many see as the father of UX, a psychologist and usability consultant who has worked with the likes of Apple, HP and is one of the founders of the Nielsen Norman Group, world leaders in research-based user experience.
As I write this article, the closest thing to me at this moment is a torch my daughter is playing with.
Besides looking like something out of a Rambo movie, it is simple to use. So simple, my youngest daughter, a little over 2 years old, worked out how to turn it on and off in mere seconds.
It has a loop, so I can put my hand through it when I’m stalking around a dark campsite on holiday.
The torch fits in the palm of my hand and is small enough for a child to easily hold.
I can fit the torch in my pocket, but I’ve got the option to clip it to my bag, clothes or anything else that might take it — giving easy access depending on where I put it. The important part of that sentence being where *I* put it, because it works for me. I might find it easier to keep it in my pocket, someone else working in the field might find it easier clipping it to their bag or belt. The point is that it’s become accessible for more than one type of person in their usage.
At the top of the cover where the light shines, it’s got some information that tells me I can change the zoom of the torch to have a wider or more focused beam by simply pulling the cover forward or backwards. Simple, clear instructions and a smooth easy to apply action.
Pressing the button to turn the torch on is a simple push click, which for those with limited hand motor functionality (or for my 2 year old daughter's fingers) makes for a better experience because they don’t have to do anything complicated for the torch to function.
For an able bodied person, gripping the torch like a pen naturally places your thumb near the button so it’s a simple movement to turn the torch on. There’s also an audible click for when the light is switched on and off, so those with reduced sight, rather than complete loss of sight, will know undoubtedly that the light is on or off.
The importance of colour
But what if you’re colour blind?
Let’s take the things we have learned from this simple torch and apply them to websites where the key is to provide an experience that’s simple, clean and accessible.
What happens if you have a visual impairment, like colour blindness? How would you know if a button you’re hovering over on the desktop is going to have an action on it, if nothing happens when you interact with it? This means that it’s imperative that buttons have different states, so that the user knows that an action is taking place or to serve as a visual indicator.
To accomplish this, we would include the following:
Hover state: adding a hover state, changing the colour or adding in an underline (or even removing it) provides feedback to the user that their mouse pointer is over that button, or interactive element
Active state: when you’re on a page, the respective link should be highlighted with a persistent state that a user can differentiate from existing elements so that it’s clear to the user where they are
Focus state: when using your keyboard to tab through the elements on a page, any button or link should indicate that they have a focus applied to it, highlighting that it’s an interactive element. This is an essential tool of wayfinding for a user that is relying on a keyboard to navigate a website
What is an interactive element? Well it can be a number of things. Common interactive elements include a form field, button, hyperlink and a video. However there are many other examples such as image carousel, interactive chart and even an image can be made interactive if it is contained within a hyperlink.
What else can we do?
Naturally, making a website accessible isn’t limited to just colours or hover states. There’s a lot more that we can add to cast a wider net over a website to make it accessible to as many people as possible.
Media
Hearing impaired? With videos and podcasts, we should add a transcript to it. This is a WCAG 2.1 AA requirement.
Form fields
Adding alt text descriptions to images
For visually impaired users, they have to rely on screen readers to experience a website. By not adding descriptions to your images, they are unfairly missing out on context and content. If you don’t give your image a description, the screen reader will just read out the filename.
Picture this; you’re being fed a wonderful story on a blog about someone saving kittens from a burning building when suddenly, there’s an image in the content of the cute kittens being held and fed… but no description has been added to the image and I’m being bombarded with ‘IMG00587_v3_final_reallyfinal.jpg.’
Not only is it a bit jarring, but it is also giving no context whatsoever to the visually impaired user. A simple solution is to add a description to the image ‘A rescuer is holding a kitten, while feeding it a milk bottle.’ The easiest way to come up with a description is to close your eyes after looking at the image and describe it as if you’re telling someone else that hasn’t seen the image. Easy win.
Text clarity
Don’t make your body copy too small. As a rule of thumb, I try to have a minimum size of 18px when I design anything for tablet upwards and I go down to 16px for mobile.
Make sure that your sentences do not exceed 75 characters. This should mean your text width is 768px at most. Any wider and it can harm readability and frustrate users if they keep losing their place because a line is too long. The negative impact here is that if your text lines are too long, users will get bored, not read the content and then fail to understand the content because they’ve not read it properly.
Because we spend so much time on digital devices in this modern age, why not make it as pain free as possible to read content?
Links
If I’ve got a link inside a large body of copy, I always distinguish it from the general body copy. For example, the link will have an underline and be a different colour.
Try to give the link context, so if it’s on its own, it’s not ambiguous as to what it is. Try to avoid using ‘Click here’ or ‘More info’. For example, read my colour accessibility article
The link is defined from the content and descriptive of where it will take you once clicked upon.
If your link is going to direct you to an external website, then accessibility implications need to be taken into consideration. According to the World Wide Web Consortium (W3C) opening a link in a new window can be disorienting for people, especially for those who may have difficulty understanding content.
There are however some instances where it’s acceptable to open a new window. These instances should be limited to:
If the content provides help or assistance to the user
If the user has logged into a secure area of a site and then follows a link outside of the secure area, it would cause them to be logged out
It’s recommended that if clicking a link will open a new window, the user should be warned. A pre-emptive action could also be adding a visual indicator to accompany the text similar to the image below.
Mobile
On mobile, for any touchpoints keep them at a minimum size of 44 x 44px.
Think about the placement of interactive content, like buttons. Think how a user with limited hand motor function would have to navigate the site. Consider that they may have to keep sliding the phone down to reach a navigation item or menu. Or they have to struggle holding their phone in two hands so they can use their other hand to navigate. Think about someone that doesn’t have 2 hands to hold a phone and how they would navigate on a mobile.
Don’t limit yourself to just people with impairments though, think of those that are fortunate enough to not have any issues, but they may be a busy person that only gets the chance to view a website on the move. They’ll want to get to the information quickly and not have to think too hard about it.
In conclusion
The great thing about working in this industry as a designer is that I’m given the opportunity to, in some small way, make the web a more welcoming and accessible place to be. The sense of satisfaction in solving a user's pain point is a continuing driving force to keep me going and facing the constantly evolving challenge of accessibility and providing an outstanding user experience.