Understanding good interface design

GET TO KNOW YOUR USER

The Internet is inclusive: people from all backgrounds and walks of life are encouraged to use it. This naturally gives rise to a very diverse set of demographics: age groups, genders, locations and levels of technical competence. Recognising the average user's behaviour allows us to understand generic rules that apply to most - if not all users. Doing this is necessary to building an interface design that is 'intuitive' to use and satisfies the needs of your users. So how do we do this?

There are a number of ways to gather meaningful detail on the ‘average’ web user:interviewing users, using focus groups or giving out surveys can help build a meaningful, generic profile, or group of profiles. These profiles can then be used to predict behaviour with the intention of making it easier for them to achieve their goal.

RECOGNISE PATTERNS AND UNDERSTAND CONVENTION

Typically web users will spend a lot of their time across a wide range of different websites. In so doing, they will pick up behaviour patterns that should be identified as conventions that a lot of sites share. These ideas should be brought to bear in the design of a website. While ‘Innovation’ is usually an important word in relation to design, as it’s through innovation that boundaries are challenged and new technologies developed. However, we must also bear in mind that the average user relies heavily on ‘convention’ when navigating their way through the web - particularly to understand websites that are not yet familiar.

MAINTAIN A STRONG VISUAL HIERARCHY

The first thing to recognise is not all elements of your website deserve equal weight in terms of importance. Making all elements of equal importance creates competition. In the mind of the visitor, each element will then fight with the others for dominance and this can lead to confusion.

Here you will find business as well as design arguments to decide which elements deserve the highest level of importance. For example, suppose your most popular service accounts for at least 75% of your traffic, it makes sense to prioritise that service to ensure it’s prominent and easy to find.

A well structured website hierarchy guides the user on their journey towards a meaningful outcome for both them and us.

BE CONSISTENT

Consistency helps establish conventions within your own website: by managing users expectations, you allow for a more fluid flow and natural experience. For example, once a user has learnt to carry out a particular task, any other similar task should ideally follow a similar process flow, allowing the user to more easily understand what they must do without needing to be instructed or having to learn yet another separate process. This helps them feel more comfortable using the system as a whole, and as a result of good user experience (UX) they will likely spend longer on-site.

COMMUNICATE WITH THE USER

Did I complete that form correctly? Is this how I use the search bar? Is the website doing something, or is it waiting on me to do something? As designers, we need to acknowledge that users will be asking themselves these questions internally as they interact with your website’s interfaces of features. If it’s possible to answer these at each step using visual queues, you will get a much better level of engagement. For example, good form validation now includes highlighting of any fields that are not valid or appropriate responses. Spinners or loading bars can indicate the site is currently doing something, but will be back shortly and tooltips can be used to offer additional information for an uncertain user with a lot of questions.

If we can leave no question unanswered - we can ensure we deliver the best user experience possible.

FORGIVE MISTAKES

It happens to the best of us: we are all human and most of us will make mistakes, eventually. Web users are no exception! We must allow for these mistakes in designs and minimise the disruption they might bring while guiding the user to correct the mistake itself.

For example, if a user incorrectly fills out a form field (by not enter a valid entry for a field that’s required) - ideally should draw the user's attention to it with highlighting and give them the opportunity to update it - or have a sensible fall back that doesn’t prevent the user continuing. We don’t want (for example) to let the form submit, then inform the user of an error - now requiring them to re-enter all form fields again!

SPEAK YOUR AUDIENCE'S LANGUAGE

Your audience will likely have a very different language depending on who they are: many factors such as their age, gender and social status play a big role. Speaking the right language also means understanding the tone and culture of the language of your target audience to make what you say easy to relate to and understand.

SIMPLE IS BETTER

Where possible, interface designs should be kept clean and simple - free from any unnecessary clutter. Doing this can ensure a clean user journey, making common tasks easy and swift to carry out. We recommend questioning and challenging every design choice : is it necessary? Does it offer the best experience or could it be simpler and still do what is needed? We suggest reviewing this periodically as you design to ensure you are on track.

AVOID BARRIERS TO THE JOURNEY

You should aim to remove any barriers that might prevent a user finding what they want. The user will be following a path through your website to find what they need, so you should avoid including any unrelated call-to-actions (CTAs) pop-ups or visual queues that are not related to their goals, but may require them to click to close, or continue, thereby acting as barriers.

One good (simple) example of these is spam guard. While you want as many enquiries as possible from ‘real’ people, you ideally want to block spambots from submitting spam enquiries. Google’s captcha service for instance, offers a very minimal-interference way to validate a user without making them click too many times. At the time of writing they have an ‘invisible captcha’ that requires no interaction at all.

MAKE IT ACCESSIBLE

As we noted at the start, not all users are the same. In fact, it’s fair to say they are all unique in some way or other. However, there are still generic principles as outlined above which can help guide your interface design to satisfy, in the best way possible, the needs of the average user. But what about users who might have additional needs such as those who are visually impaired or may have other physical disabilities?

There are useful generic guidelines to follow here too (see the full list of W3C specifications for accessiblility here). Here are the takeaway points: all page elements should be accessible via the tab navigation, skipping links for menus. Image alt tags and titles should be included (as some readers and aids will read these descriptions allowed for those with impaired vision). As a general rule, the text and font should be clear and easy to read.

As with all other design, this will likely come down to a balance between convention and innovation. Following enough of these conventions will still leave room to innovate in a way that is unique, while still offering an intuitive experience overall.