Conventions and Patterns in UI design

What are conventions and design patterns? They are basically a description of best practices when it comes to user interface design. They are a selection of “good solutions” developed over the years by experienced designers, based on what users have found convenient or likeable.

An example that’s easy to understand would be the one of door handles: imagine if every single one of them worked in a different way, pretty confusing and frustrating, right?

That’s why we need conventions and best practices. Those door handles have to behave in the way people expect them to. You want to be able to open a door without having to think about it too much.

Well, it’s the same when it comes to designing a website, or anything else, really. In order to improve the user experience, you don’t want to force your user to learn how to perform every single task. You should aim to facilitate their understanding, and therefore eliminate their confusion.

You need to make everything easy to find otherwise, it might as well not exist. The possible actions have to be very clear in order not to interrupt the flow. If you’re using icons, then use some text alongside.

If there is some hidden interaction, use signifiers to signal and draw attention to it.

Constant feedback is also crucial: keep your user informed of what’s going on. If something is loading, let them know otherwise, they may think the website has crashed. If possible, let them know how long they’ll have to wait. Keep in mind that users aren’t patient.

When designing a product, it has to feel intuitive: users will expect it to work a certain way and will not read the manual beforehand to find out how it is supposed to work. Therefore, the interface needs to be easy to understand and use, and speak for itself.

Let’s take the example of radio buttons: they are to be used when only one option can be selected. If you need the user to be able to select several options, then checkboxes are what you’ll need to use.

Another example would be the one of the logo: it is usually found on the top left and the search bar on the top right. It is considered good practice to keep it that way instead of trying to reinvent the wheel.

The visual elements such as the colours, typography and content should also be consistent. Having a branding and style guide everyone can refer too is a good idea, it can save a lot of time (and money!) and make things clearer.

A downside to those conventions is that all websites have started looking the same. Designers might feel like they’re “copying” other people’s design, or that they can’t be as creative as they’d like to, with all those rules they have to follow. It might also make their work quite boring.

All those conventions shouldn’t stop you from experimenting, but always always keep your user in mind: in the end, they’ll be the ones using your product, and you don’t want to confuse them. You might be an expert when it comes to it, but chances are they’ve never navigated it before. You don’t want them to feel lost and give up, so keep everything clear, simple, consistent and easy to find.

Basically, unless you’re absolutely sure your new solution is better, you might want to stick to the already established conventions.

 

For further reading:

Boost Your UX with These Successful Interaction Design Principles

Principle of Consistency and Standards in User Interface Design

Conventions vs Uniqueness in UI trends

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s