Key UX principles to think about during web design

Mobile surfing overtook desktop surfing a few years ago now, and design patterns you thought were useful a decade ago stand a good chance of being unproductive (or worse, completely ineffectual) when your target audience is peering at a screen a few inches wide and poking at buttons with stubby fingers, so it’s important to be sure that your user experience (UX) design reflects this new world.

Here are the key UX principles that we keep in mind when designing our applications.

Support users

Is your user able to perform the task they're there to, and are they being pointed in the right direction? Users need clear instructions - not walls of text with the key bits they need hidden somewhere within. Make sure you're using the correct terminology (check with your stakeholders), and keep it consistent throughout the system - having an abbreviation on one page and its full form elsewhere is an easy mistake to make but can be confusing.

Encourage the user to explore the system and build their mental model, but always provide a way to get back home. This can be done with breadcrumbs, a consistent navigation layout, and clear options to 'abort' their current process and return to the start. If a complicated process comes up where a boilerplate solution can be offered by default (for example, a 'recommended' option which pre-completes certain areas for you), offer it. Similarly, offer an advanced mode with more options for those who are more confident.

Accessibility is vital. How WCAG compliant is your system? There are plenty of automated checkers out there for you to run it through. Thinking in an 'accessibility' frame of mind during design has knock-on effects for other UX aspects - consider Fitts's Law: if your buttons are too small and too spaced out, they are difficult to hit for everybody, not just users with physical impairments!

Make sure key information stands out

Especially on content-heavy systems. If you have contextual links within your content, make sure it's obvious that they're links and make sure they're consistently styled. Build the mental model of the system early, so users will always know how to proceed, cancel, and where to find the navigation options. At the same time, consider the device and don't throw loads of options at the user when they only have a small screen to work with - show users what they need, and consider hiding that which might be irrelevant.

There are plenty of graphical design options which satisfy this principle too - use contrasting colours to highlight important information or interactions. Using the correct icons in the correct places give the user an instant indication of what to expect.

Use your users' own domain knowledge to inform your design

Why re-learn something you already know? This means returning to the point about terminology - if users see a system with layout and terms they recognise, they’re likely to have a better user experience. Don't recreate the wheel, use conventional design patterns - take a white rectangle and put a mini magnifying glass icon toward one end and suddenly everyone knows it's a search box - and search boxes are often found in the top right corner (but this particular convention is changing!).

Check if the task you're designing the system to perform has a parallel in current use - is there an existing system? It doesn't have to be digital, if needs be you can emulate a real-life process in a web app, though you're probably looking to improve on this at the same time.

Keep things simple

Why make anything unnecessarily difficult? If your system involves completing forms, is there a way to pre-populate fields with expected answers? This is crucial on mobile - until somebody comes across a novel way of doing it, keying in text with a touchscreen keyboard is convoluted and grates on users. Consider if you need a form at all, and maybe ask the user to select from pre-configured options.

The Pareto Principle applies to UX too. If you've got 80% of your system usage coming from 20% of the functionality, make sure that functionality is clearly signposted and can be arrived at from many angles - consider its own dedicated link on your homepage. If there is a defined sequencing between different areas of much-used functionality, put these options close to each other in the layout.

Respond to users and provide help

Ideally, every interaction the user has with your system should result in some form of instant response. This can be simple - CSS hover styles or an audible sound when you press a button - or more complex, such as a progress bar or loading icon during a lengthy AJAX call. If a process spans multiple pages, include an indication of how far they are through the process. This principle is key for mobile design, where a user will be more likely to be disturbed or have limited time available. In such an environment with lots of competition for attention immediate feedback needs to be amplified - audio, visual and haptic. On mobile, users often come back to what they were doing after being disturbed and can forget where they were so provide an easy route back.

If something goes wrong and a user has tumbled out of their intended user journey, show them a way out, and don't make it worse! If they've hit an error page, don't just throw generic errors at them, instead explain what the error means, and if possible how they can correct it. Let them go back to where they were before, and if they've just submitted a form re-populate it. On top of this, don't let them accidentally interact with something they weren't expecting to, logging out by mistake, for example.

All this comes with a proviso - should your users be getting in trouble in the first place?

In summary

This is not an exhaustive list or a UX bible, but some useful indicators where if satisfied across the board during your design, you can be confident of a pretty good chance of a good user experience. The web design landscape is changing at a very fast pace these days, so it's also key to keep up to date on which practices have fallen out of favour and thus might be less recognisable to users (see point 3), and which new practices have become convention.

Keep those fingers on the (correctly sized, spaced and contrasted) button.