Design for Your Users: Balancing Functionality, Accessibility, and Aesthetics

There are three keys to creating a successful user interface and experience for your website users: functionality, accessibility, and of course aesthetics. Ultimately the goal is to have a balance between the three, but sometimes tipping the scale a little is necessary.

However, having a heavy focus on one may tip the scale too far. Leading to a poor user experience, or a website that is not accessible to all of your users. So, how do we go about keeping the balance? And when it is okay to tip the scales?

 

Functionality

The functionality of your website refers to the actions or ways in which users interact with the website. Having proper functionality means the website works as it should. Search and filters work, and mobile touch-points are large enough to click. It should load quickly, and be easy to navigate. All of which helps to have a seamless user journey.

Having areas of your website that do not function properly from a filter search to a hover interaction, can lead to a poor user experience and may prevent some users from coming back. Having inclusive functionality for all your users is equally important.

Accessibility

Accessibility is a term you may have heard thrown around a lot, but there is a reason for that. It is used to describe the website’s inclusiveness and usability, including for those with disabilities. It influences both functionality and aesthetics.

Depending upon where you live, by law websites have to pass a certain level of accessibility standards. This can involve everything from screen readers and keyboard navigation to highly contrasting colours for colour blindness. Accessibility can also involve written content on your website. Advanced or all capitalized words can be considered inaccessible as your information should be written with a grade 6 reading level in mind and screen readers will read out individual letters like an acronym when reading all-caps.

Colour contrast plays more of an important role than you would think, not only for those who have colour blindness but also taking in account for poorly calibrated monitors. Here is where accessibility and aesthetics meet and can often not play well together. This is where you may need to make some sacrifices to aesthetics in order to make a website fully accessibility compliant.

 

Aesthetics

Aesthetics often play an important role in brand awareness and user engagement. A pleasing aesthetic will have a balanced flow of information and graphics. It may not sound like a big deal, but the layout can easily make or break the information flow and user engagement of the site. Some common bad examples of an imbalanced flow can be careless block or information order, tight spacing, missing hierarchy, and fonts that are too small, too large, or difficult to read.

As a designer myself, I know we love to play with colour and shape to push the boundaries rather than playing it safe. However, this can also tip the scales and spell disaster for accessibility and functionality. Low contrast colours often look more appealing, all capitalized words can be an ideal look and shapes with motion or overlap can be fun. Unfortunately, a lot of what I just mentioned does not play nice with accessibility.

For most, aesthetics are the most important aspect, but without a proper balance of the other two key ingredients your website can be hard to use or non-inclusive.

Taking Everything Into Account

Ultimately having a successful UI/UX lies in finding the correct balance for the majority of your target audience that will engage with your website. When it comes to designing and building a website, try putting personal preferences away and focusing on your users. Knowing your audience at the start of a website build will help you to achieve the correct balance for them.