Top 9 mind-blowing UX techniques that worked

With 2020 nearly at an end, we thought it’d be nice to look back at some of the most successful of user experience (UX) we designed into our websites.

 

UX is the process of creating designs and functionality for a website that are centred around making the user’s experience easier and more intuitive.

 

Key to this is understanding what the user wants to achieve. In other words, understanding the audience to a point that it influences design.

 

UX is a funny old beast too. It can be the smallest or simplest part of a design. Or it can impact the entire interactive experience.

 

But! The most important thing is ensuring those designs and interactive elements enhance the experience for the user.

 

So, without any further delay, let’s have a peek at some of the best UX features we’ve used in 2020.

 

Content Boxes – Cathodic Protection

 

When you have too much content on a page, it must be broken down. Otherwise, your users are unable to quickly determine whether that content has what they’re looking for, and they’ll skip straight past it.

 

So what’s the best way to display that information?

 

This was one of the puzzles we stumbled across when planning the new website for Cathodic Protection’s earlier this year.

 

They have a lot of services-based information to communicate and many of these services also have sub-services too.

 

It’s very tempting to take one of two paths here. Either:

 

1) Have a long webpage where each part has its own section, or,

2) Allow each sub-service to have its own page.

 

The problem with both options though is that neither enhances the user journey. Having a long webpage is just as daunting for the user as large blocks of text. How do they find the information they want?

 

Meanwhile, separate pages for each sub-service just adds extra clicks to the user journey and risks the user never getting there. Additionally, each services varies in content – meaning some sub-services have higher word counts than others. This would just lead to a disjointed and inconsistent appearance and experience.

 

We needed a third option.

 

The solution; introducing a split-screen accordion.

 

 

This option allows for all the sub-services to sit together under one core services page. The user can navigate the accordion by clicking on the relevant title. This then updates the information in the box on the right.

 

Additionally, this option also has the added benefit of continuously showcasing the full list of sub-services to the user as they read the content relevant to them.

 

Navigation Tiles – Ringrose Law

 

The hard sell doesn’t work on every website and in every industry. The legal sector is one of those industries.

 

Once you understand the user and audience, you understand that their first objective is to gather information.

 

“Is this problem a legal one?” “What could be the impact of any wrongdoings?” “Can I make a compensation claim about this?”

 

Fortunately, we know from our research that people tend to trust the first source of information they read greater than any other.

 

This means Ringrose Law must be one of the first sources of information people seek when they’ve got a problem. As a result, this changes their website from a direct sales tool to an information-gathering tool for the user.

 

The problem with this though is that solicitors do an awful lot! And people tend to only have one extremely specific issue they need help with.

 

Therefore, navigation through the services and content is vital.

 

We could utilise an accordion as mentioned above with the Cathodic Protection website. But, the content and audience can change from service to service. There’s no upsell opportunity here. And the content for some sub-services can become incredibly in-depth.

 

So, it’s a given that sub-services will have their own pages. But how do we navigate to these?

 

Sure, navigation menus are one thing. However, to list every service there will be overwhelming.

 

We decided to introduce a concept of Navigation Tiles on every service page.

 

 

These navigation tiles link through each sub-service page to allow the user more information.

 

I’ll be honest. This doesn’t sound or look ground-breaking, right?

 

But hear me out. The secret here isn’t necessarily how we’re linking these sub-service pages. It’s where we’re linking them.

 

You see, these navigation tiles feature right at the top of a service page. And that’s quite novel as many websites will feature these to the bottom of the page. Below the “main content” (typically text) for the page.

 

However, the text on this page isn’t the “main content” for the user. They don’t engage with it. We know the user is on the hunt for the information they require. As a result, they don’t read content that is too generic or isn’t relevant to them.

 

So, with that in mind, let’s make life easier for our users. Let’s bring those navigation tiles to the top of the page. Front and centre where the user can find and use them easily.

 

Repurposed Blog Section – Vippies

 

I’ve mentioned recently how vital, yet undervalued, blog sections can be on a website.

 

One project earlier this year highlights how, by taking the time to understand the audience, you can utilise a blog as a brand positioning tool whilst addressing audience concerns.

 

Vippies are a local firm that specialises in pet and animal care. And they know their stuff when it comes to pet care.

 

With their old website, they had attempted to use blogs to help showcase their knowledge and expertise. The problem was that all this wealth of knowledge was hidden and hard to find.

 

They wanted to be known for their knowledge. How could we turn their blog around to achieve this?

 

First step. Scrap the blog.

 

 

Well, not exactly. Instead of a blog, we created a ‘Pet Advice’ section.

 

But that’s not necessarily all you can do. I’ve mentioned a few times how we don’t tend to read websites, but instead we scan-read them.

 

We need their newly named ‘Pet Advice’ section to be scannable, helping position the brand as knowledgeable and trustworthy.

 

This is where the idea of the drop-down filters was born. The drop-down adds an element of interactivity to the page. It’s likely users will click on it. When they do, they will be presented with a list of relevant categories.

 

And some of those categories may even be relevant to the user. Because of the category topics being relevant, it may even cause some users to read a blog article or two.

 

But even if they don’t read any, it doesn’t matter. Simply through the act of renaming the blog section ‘Pet Advice’ and adding the categories, this all helps portray a certain image of expertise.

 

Personalised Interactivity – Make An Entrance

 

Sometimes, the amount of information on a website can get overwhelming. The amount of choice can be debilitating.

 

If this happens, it causes a user to leave a website.

 

Why? Because too much choice can be a bad thing. We’ve discussed previously how there’s an illusion around choice.

 

We think we like it. The more choice, the more chance of finding something you like.

 

However, studies show the opposite. The more choice we are presented with, the less likely we are to make a purchase. Why? Because we feel like we may miss out on a better option.

 

Think about Netflix, or any online TV subscription. How many times have you opened Netflix and just continuously scrolled forever to find something to watch? And then eventually settled on just watching something on TV instead? Probably countless amounts of times, right?

 

This is what happens when we get overwhelmed with too much choice. We become indecisive. And then decide to opt for nothing.

 

And when you’re in business, the last thing you want is for your customers to opt for nothing.

 

Personalisation through interactivity can help to solve this.

 

If we can create a method where people are able to input their preferences, with the result being their most likely outcome, we reduce the amount of choice and increase the chance of a conversion.

 

 

In 2020 we’ve started implementing this personalisation through interactivity in a few websites.

 

Make An Entrance was one such website. With a wide range of products and specifications, it can become quite easy for users to get lost. Or even end up purchasing products that don’t meet their needs.

 

To address this issue, we designed an interactive tool which presents users with set options based on their previous selection.

 

By following through a set of simple questions, they are finally presented with the most relevant products to suit their needs.

 

Therefore, reducing the amount of choice given and ensuring the user is shown only products that are appropriate for them.

 

Bottom Mobile Menu – Active Arena

 

Have you seen the size of mobile phones these days?

 

They’re huge!

 

I recall the days when the aim was to have the smallest phone possible. Geez, how times change. But I digress.

 

Bigger mobile phones mean bigger mobile phone screens.

 

And there’s a bit of a problem here.

 

Our fingers and hands aren’t big enough. And when we start to consider this alongside the use of websites on mobile devices, it starts to become a problem.

 

This graphic helps to show how accessible different areas of a mobile screen when using a device one-handed.

 

 

Now, its unlikely evolution is going to go into hyperdrive and give use all ridiculously long fingers and thumbs overnight, so we’re going to have to adapt in other ways.

 

 

Active Arena was a website we put live in early 2020. It was also one of the first websites we created with a mobile menu featured at the bottom.

 

Why is it at the bottom? Well, we knew the vast majority of the audience would be visiting on a mobile device. We also knew that huge screen sizes cause mild frustration in accessing the menu when it’s featured at the top of the screen.

 

Therefore, to make it more accessible, the menu was placed at the bottom.

 

It might be a novel feature here in 2020, however, web design trends are quickly picking and a bottom mobile menu is becoming more popular exactly for this reason. So, expect to see many more of these in the coming years.

 

Mega Menu – Ringrose Law

 

How your users navigate across your website is one of the most important parts of website design.

 

In fact, it’s so important it even has its own terminology – Information Architecture – but let us leave that complicated world for another day.

 

Having an awful lot of products or services you need to communicate creates a big website navigation hurdle to overcome.

 

This was a problem that we had when we began the Ringrose Law website. How do we possibly create navigation that allows services to be easily found, whilst also reducing the number of clicks?

 

The solution? Give one of our developers fear-inducing nightmares by introducing a unique two-level mega-menu.

 

 

The specific challenge that Ringrose Law had was that there are three-tiers of department levels. First, you have the difference between Personal Law and Commercial Law. Then you have the specific departments within each of them. For example, Family Law, Conveyancing, Criminal Law etc.

 

And finally, below that you have specific services within each department.

 

As you can imagine, things can quickly become confusing for the user.

 

The two-level mega-menu helps alleviate this. First, the user selects either Personal Law or Commercial Law from the main navigation bar. This activates a dropdown. As per the screenshot above, the red section highlights the department. Hovering over one of these changes the content on the right-hand white section which lists the departmental services.

 

As a result of this menu type, the user can quickly navigate through, not only to the departments but to the exact service they need.

 

The Rule of 7 – The Tipi Tribe

 

Content is a funny one when it comes to websites.

 

Sometimes you find yourself wanting to put every word down. This can quickly spiral out of control and before we know it, we’re 2,000 words into a product page.

 

The problem is (and to say it once again), people don’t read websites. We scan-read.

 

And if UX is all about designing for the user, then we need to be conscious of making content easy for users to scan-read.

 

For web-copy, ruthlessness is needed. Content needs to be cut to the bare minimum that people will engage with.

 

It can seem daunting, but almost surprisingly, it can also be easy.

 

At the very start of the year (and I’m probably toe-dipping into the end of 2019 here too… but shhh) we worked with The Tipi Tribe to recreate their new website.

 

One of their challenges was every package they offered was jam-packed with extras. So much so that the original content totalled over 1,000 words for each page. Yet, by understanding their audience, we knew they wouldn’t sit there and read it all. They wanted the key information, they needed to be able to compare suppliers as they browsed.

 

How did we cut it down?

 

 

Quite simply, we pulled out the key offerings and delivered them as bullet points to the audience.

 

It really was that simple.

 

There was hindrance though. We know, through research, that people tend to digest around 7 points of information at best. However, their packages typically tipped over that.

 

The solution? Break the points down into categories. So, for example, ‘The essentials’, ‘For comfort’, ‘For partying’ and ‘The ‘also has’’. This, therefore, turns one list of 12 items, into 4 lists of 3 items. A much more manageable way to present information for someone who is scan reading.

 

Resource Library – Cathodic Protection

 

What do you do when you have a stack load of different downloads relevant to specific products and services?

 

What if the user is only interested in their product or service and nothing else? How do you create something that allows them to quickly find the information they’re interested in?

 

Sure! A search bar is one possibility.

 

But search bars have a bit of an unspoken problem. They require the user to search for the right phrase. Search tags can be used to increase the chances of the user finding the right information. However, that requires you to anticipate the many unusual phrases a user could search.

 

Another alternative is a filter option. This is something we implemented for Cathodic Protection in their resource library.

 

 

Of course, we still kept the search bar feature. But we relegated its importance.

 

Instead, we want to lead the user on a short, simple journey.

 

This is a multi-level filter feature. First, the user selects the overarching resource type they need. Be that information on pipelines, test surveys or accreditations.

 

Once the high-level area is selected, a second level reveals itself. This allows the user the narrow the focus of the information they require.

 

At both stages, the relevant downloads present themselves, so the user doesn’t have to keep filtering.

 

Jacob’s Law – Make An Entrance

 

Sometimes, the best UX isn’t about being different or breaking new ground. But is about understanding your audience.

 

Here’s a question for you. Have you ever noticed how most ecommerce websites all look and work the same?

 

It’s a bit weird really when you start thinking about it.

 

Why do they all follow the same structure? Why do they all have similar layouts?

 

Let me introduce you to Jacob’s Law. It, quite rightly, states:

And therein lies the reason why every ecommerce website looks the same. Because you’re used to them.

 

Ecommerce websites exist for you to buy products from them. They haven’t the time or intention to train you on how to use and navigate the website.

 

As a result, naturally, ecommerce websites have almost evolved to the point where they look remarkably similar. However, this produces a net benefit to the seller. Because the user instinctively knows how to use your website, then there will be a reduction in frustration. Not only does this mean the user is less likely to leave the website, but the user will also put more trust in the website too.

 

 

The design of the Make An Entrance website took heavily from Jacob’s Law.

 

All the components of the layout, the functionality, and the structure are all typical in ecommerce design.

 

For example, a four-part header is used. This features a top bar with additional links, a search & login feature, strong main navigation, followed by a USP strip which runs throughout the website.

 

We also prominently feature images. The pricing is easy to find. Additional information is shown in a table. Feature & recommended products are highlighted.

 

All these elements go together to create a sense of trust through familiarity for the user. Sure, the brand is distinctive and the products are different from other websites, but through having a consistent presentation, familiarity is sown throughout.

 

——

These are just 9 of the top UX techniques we’ve implemented this year. As mentioned previously, UX heavily depends on knowing the audience and their journey. Once that is achieved, all design can be based around and focused on the audience. The result of that is a better website and experience for the user!