As web designers our focus is on more than just getting a website up and running. Today, web designers are also faced with a multitude of tasks to balance: marketing and SEO, cross-platform integration etc., as well as the old staples of layout and function. It’s a complex business once you get into it and it never stops – you are always learning.
One important aspect designers have to consider is usability. Of course we all know this, but what does it mean for your design? Usability has become a bit of buzzword – so to make it more meaningful, I am outlining some design strategies that help make sense of usability and hopefully, in turn, help you create a website that enhances user experience.
The problem for most web designers is the desire to make a website as visually appealing as possible. After all, this is a very important design principle, known as aesthetic-usability: the more pleasing a design is to the user, the more positively the design is perceived. This increases user acceptance, making your design more likely to be used, and increasing user tolerance of design problems. Unfortunately, however, the elements of visual appeal can sometimes be at odds with other significant considerations in website design, such as accessibility.
The question is, how do we reconcile the desire to create visual masterpieces with other aspects of user experience – including the very serious business of accessibility?
I know from experience that those who comply most strictly with accessibility guidelines (because it is mandated) are not overly concerned with aesthetic appeal – I am referring to government and bureaucracy. Their goal is to cater to the general public, and the accessibility of their information is more important than considerations of ‘aesthetic-usability’. But then again, they are generally the only providers of their services – they don’t have to compete for attention or market share. . But what about the rest of us? How do we decide which aspects of user experience should direct our design decisions?
ACCESSIBILITY
In terms of web design this is a big one. Basically accessibility guidelines dictate that a website should be designed to provide equal access to all users, including people with disabilities. The problem for web designers is that this can limit your options to create a website that is as visually appealing as possible.
For example, a significant accessibility challenge is including users who rely on screen readers. Screen readers allow web users to listen to the content on the page – obviously important for people with visual impairment. The software uses a voice synthesizer to reproduce page content, including in some cases information such as menu options. But screen readers do have limitations. For example, they cannot interpret images – so anything not in text may as well not exist. And because screen readers can’t scan a page for the most important content like human eyes, they read everything. Something to keep in mind!
For the web designer, accessibility can impose constraints on design. And the accessibility guidelines can be complicated, making compliance quite onerous for small businesses and solo web designers. But, there are a few basic things that you can do to improve accessibility without sacrificing visual appeal.
What can you do?
Make sure you have included alternative text as part of all your images in the media library (in Divi you can do this in the image module as well). Not only does this allow people with visual impairment to understand the information conveyed by the picture, but in situations where the images fail to load your text will be displayed in its place. As a bonus, adding alt text to images helps Google read more of the the content of your website (like screen readers, Google can’t read images) which means better search rankings, which is better for you.
Avoid conveying information purely through the use of colours – for example, relying on blue font with no underline to mark links. Obviously this will be unhelpful to someone who cannot see or distinguish blue from the background or regular text.
Ensure that links on your page are meaningful – a good rule of thumb is to ensure all links contain the actual name of the destination page, rather than just a ‘click here’ message. This gives the user more information about where they are being directed.
Provide alternatives to video content for those with hearing impairment – if not captioning, then you should at least include a transcript of the video content.
One strategy for enhancing accessibility as a design consideration is to think of your website as text only and consider the result – is the content still clear and the functions still usable when you cannot rely on visual devices? If imagination fails you, you can actually review your site as using the Text-Only mode extension for Chrome.
AFFORDANCE
In design, ‘affordance’ describes the relationship between a design characteristic and how that design is intended to be used. In other words, something about the design itself tells the user what the purpose of that design is. A common example is a handle, which by its very nature clearly suggests the option of holding something. Affordance refers to design that is intuitive, meaning that the design itself provides clues as to its use.
In the digital world, of course, affordance is not conveyed in three dimensions. Web design relies on pictures and images to provide the clues – and therefore relies on the user’s perception of the object in the image. For example the ‘trash can’ or ‘rubbish bin’ suggests that we can delete items by selecting that symbol. Our contextual knowledge of ‘trash cans’ or ‘rubbish bins’ tells us what that symbol means.
Affordance is an excellent tool for improving user experience. You are in effect leveraging your users’ knowledge of the world to incorporate great design with effortless experience. Turning links into buttons invites people to select the option – a simple but ingenious solution. It has been done for many years with symbols such as the trash can, the printer icon or the battery symbol indicating available power.
There are many similar examples of ‘perceived affordance’ in the digital world. While websites unlike power sockets and belt buckles, lack actual physical characteristics that afford a particular function, web designers can still use affordance to convey intended functions in a symbolic way.
HIERARCHY
Hierarchical organisaton is a very useful strategy for web design because mirrors the way people naturally organise information. Web design – especially with the use of tools such as Divi – forces designers to integrate informational hierarchy from the beginning. The module system makes hierarchical organisation easier because designers, without even intending it, are adopting design strategies by blocking their content separately into sections and using different backgrounds and colours to rank information.
The most obvious use of hierarchical organisation – so obvious it is often unconscious – is the incorporation of textual and visual elements (titles, headers, dividers, arrows etc.) to rank information. Narrative hierarchy makes content more palatable to the user – easier to navigate, understand and remember. How content is arranged and aligned can also be a factor in hierarchical organization: for example, placing important or introductory information above less important or more specific information is common and effective.
There are many ways to use hierarchy in web design – but be careful that they do not compromise the accessibility of your website. For example, using colour (as in a ‘traffic light’ infographic), or decreasing font sizes to order information may look good but could be a problem in terms of accessibility. If you (or your client) decide that this is how you would like to proceed, then remember to include alternatives, such as hover text to captions, to preserve accessibility.
The first time I faced this issue (many years ago), I was handed some rather cumbersome content larded with legal jargon and asked to organise it into a usable structure. Lacking of the design tools of today, I opted for a basic tree structure to organise the information, working within the layout conventions and rigid style guidelines of the agency. It sounds dreadful, and it was – but it taught me how to orgnise content without any decorative devices. For example, without images and colours to help separate and organise slabs of content I had to really consider the information – make it easy to scan so the reader could find what was most relevant.
CONCLUSION
We use design to communicate ideas – whether to teach, sell or just entertain. We use many strategies to influence users, but the most effective are those that enhance user experience. While visual appeal is an important element of web design, it has to be balanced against the functional elements of usability – including our responsibility to consider all users wherever possible.
