Despite having a relatively easy task, B2B and professional service organisations tend to be among the worst offenders when it comes to UX, and there are a couple of core reasons for that. The first is that they very often won’t have a clear brand identity or content strategy, consequently, their messaging is very generic and tends to be primarily about themselves. Now it doesn’t matter how well coded this website is, that’s never going to make for a good user experience.
The other common issue faced by B2B and professional service websites is that they don’t tend to put themselves in the shoes of the user and think about how different people will want to navigate the website in different ways.
So for example, we can have two businesses selling an identical technology solution, maybe even into the same business but at different levels, and the user experience that each needs is going to be radically different. So if business ‘A’ is selling primarily to engineers and people with a real hands-on understanding of that technology, they’re going to be really interested in the product information and the technology surrounding it.
Whereas if company ‘B’ is selling into the same company, same solution, same product, but they’re selling it to mid-level managers, they’re likely to be a bit less interested in those product pages and those technology-based pages, but more interested in the use cases or the function and department pages that tell them what that technology means for them individually and for their department.
And then finally, perhaps we’ve got company ‘C’ selling into the same product, the same technology, the same business, but now to the C-suite, really senior decision-makers, again, they are going to be communicating a very different message. So yes, the senior decision-makers will probably be interested in the use cases, but above all, they’re going to be interested in where the market is heading and what their competition is up to, and therefore sector-specific pages can be really valuable to those individuals.
Not only does this have really profound implications from a UX and conversion point of view, but actually it’s quite significant for SEO as well. By having these additional pages – whether they are use case pages, function and department pages, or sector-specific pages – that are most relevant to our priority audience, we’re going to bring in more of that audience in the first place, because it’s going to bring in those people, making those related search queries. So this really could not be more important.
Of course, many businesses are trying to communicate to all three levels, and this is where having secondary navigations can become really important for that UX. Now, this might be starting to sound a little bit more complicated than your typical B2B website structure, but I promise you the impact at both a conversion level, engagement level and also at a traffic level for SEO, is so significant. It really is worth the time to get right.
UX (as with any form of marketing) is highly context-dependent, however certain universal principles are worth bearing in mind with any website. The first is the importance of keeping things predictable. So by all means, from a brand perspective, feel free to let your creative juices flow when you’re designing the website and when you’re working on the aesthetic, but when it comes to the fundamental structure – the navigation and the layout – you need to keep things nice and predictable.
It’s a bit like when you step into a car, you wouldn’t want to think “oh, how exciting, I wonder where the steering wheel is”, right? You’d want to know where the steering wheel is and where the accelerator is. Equally, if you’re using a mobile phone, you know that you talk in one end and you listen out the other. Certain things need to be very predictable – and exactly the same applies to your website.
You need to know where the ‘home’ button is, then you’ve got ‘about’, ‘services’ or ‘products’, ‘case studies’, ‘blog’, ‘contact’ and so on. That navigation should be really familiar to the user. Certain things just need to be kept predictable.
Secondly, we have the importance of not giving too many options. You may have heard of something called ‘analysis paralysis’, which is when we see too many options and we become overwhelmed. It’s a bit like going into a restaurant and being presented with 250 different menu options – that’s not a good thing, it’s a bad thing. It’s A, very confusing, and B, it doesn’t really give you any confidence in any of those options, whereas if someone presents three or four very clear priorities, you think, you know what? It’s nice and simple. I know what’s expected, and I believe that they’ve thought through what’s on the other side. That’s what makes a really good user experience.
We need to apply that philosophy to our website layout and have a very clear visual hierarchy. This is what we refer to as the isolation effect; if we have a small number of very similar items, our eyes are naturally drawn to the one that’s the least similar. The one that’s most different stands out.
The next point is around the importance of really understanding your audience. So for example, how well-informed is that audience? Because if they’re really experienced within your product offering, they’re going to be looking for very different things compared to someone completely new to that. So, let’s imagine that we have a nutrition e-commerce website – maybe we’re selling protein shakes – someone who’s a ‘gym bunny’ who knows exactly what they’re looking for is almost certainly going to navigate by products or maybe even by ingredient. Whereas someone who is very new to that is much more likely to navigate via goal, by the sport that they play or something else that makes sense to them. So it’s really important that we put ourselves in their shoes.
The next one is design. Good design does not necessarily mean good UX, but bad design always means bad UX. So you need to ensure that the aesthetic is always up to a certain standard.
Finally, we need to look at the typeface. By all means, choose a nice, stylish display font for your big headers, but when it comes to body copy, we need to prioritise legibility. Even if it means having the same font as other websites, that’s not a big deal. It’s far more important that people can read and digest that information.
Individually, these points probably don’t sound that significant, but put them all together and I promise you, they are going to make or break your website.
Getting your UX right from the outset for an e-commerce website, could not be more important. Not only does it represent a massive investment for most companies that have an e-commerce site – you’re probably talking well into the five figures, maybe in the six figures – but also you’ve got to remember, there are no offline touchpoints to compensate for any errors in the messaging or the overall user experience. So it’s important that we get it as close to perfect as we possibly can.
The first step is to conduct thorough market research. Given how important this is, we need to really do our homework. We need to look at the e-commerce sites of competitors that are communicating a similar message to a similar audience, and we need to glean as much as we possibly can from their existing website structure, because they will have made a lot of the mistakes already that potentially we could make, so we need to investigate that.
We should also look further afield. Maybe even sometimes as far as websites like Amazon, which may not have much in common with your product range or your audience, but I promise you, there are certain principles that are very universal. If you have a company like Amazon that has spent literally hundreds of millions of dollars perfecting that user experience, there are lessons there that you need to make sure you learn.
Secondly, it’s really important with any e-commerce site you remind yourself that people are there to buy products, and therefore investing in really good quality product photography and videos, nice technical descriptions, integration of authentic customer reviews, can be the difference between a 0.3% conversion rate and a 3% conversion rate. So you really need to nail things at a product level.
Thirdly, you need to enable people to save the things that they like. So most people have the ability to store about three to five items within their working memory, any more than that and it becomes really overwhelming and they’ll just forget things. So you need to make it easy for people to save the things that they like so that they can come back to them later.
Number four is to use breadcrumbs. A lot of e-commerce sites are vast and there can be quite a few categories and subcategory levels to get to before you even get to the product, so having breadcrumbs so people can easily go back a step and navigate those different levels of the website, can have a really big impact on the overall UX.
Number five is to auto-populate as much data as you possibly can. Populating data can be a real pain for the user and can have a big impact on conversion rates, particularly on mobile. So by auto-populating as much of that as possible, it can have a really significant impact on the bottom line.
The next point is about making it easy for people to see where they are in the overall journey, and this is really important. So if there are five or six steps, show people that there are five or six steps, and show how far along they are with those steps so that they don’t feel that it’s a never-ending process.
Relating to that is the importance of not asking for too much information on any single page. So, if you have four steps and one of those pages asks for the user to fill in 12 different fields, we’ll then split that up into another couple of pages so that each page on its own feels really manageable.
The last point is to remember to leave the boring stuff to the end. So if you’ve got these different steps and some of them are really quite engaging and some of them are just a bit of a faff, then make sure you keep the engaging stuff right at the beginning. If you front-load that stuff, then by the time they get to the kind of boring details, they’re invested enough that they will have the patience to see it through.
So to reiterate the point I made at the start, UX is always important, but in this instance for e-commerce sites, it’s absolutely business-critical. We cannot afford to get it too far wrong. So really dig into that competition, learn as much as you possibly can, and ensure that you don’t make the same mistakes that they have in the past.
With all websites now generating a significant proportion of their traffic via mobile, we must be thinking mobile-first. Google has been doing it for years, and it’s really important that we’re thinking in the same way.
The first point we’ll start with is an obvious one. We need to ensure that our calls to action and other important buttons are of a sufficient size. We need to remember that a thumb is a lot bigger than the corner of a mouse cursor, so it’s important that we’re making our buttons and our calls to action large enough.
Secondly, and closely related to that, is the copy itself. This again needs to be big enough so that people can read it on smaller screens. Now the trouble is, that as we blow up this copy, we can end up with paragraph after paragraph of text, which again makes for a bad user experience. This is where tabulation comes in.
We need to ensure that we’re taking that excess content and putting it behind tabs so that people can easily access it if they want that extra bit of detail, but it’s not immediately visible so it doesn’t clutter up that first user experience when the person lands on the page. This is becoming increasingly common.
There was a time where Google wouldn’t really give too much value to that content that was tabulated, but now it recognises that it’s fundamental to good mobile UX and is as important as any other content on that page.
The next point is around simplicity, for which I’d suggest conducting the ‘thumb test’. So, can you navigate from the beginning to the end of that journey using nothing but your thumb? Because that is how people want to navigate on their mobile phones. If you dislocate your thumb or you have a very awkward, painful experience, you just need to remind yourself that your customers are also going to have that same experience. So it’s really important that you review the process so it’s streamlined and simple.
Number four is around auto-populating data. This is important on lots of different websites – particularly e-commerce sites – but it becomes fundamental when people are trying to navigate on a mobile. It’s a real pain having to populate lots of different data fields on a mobile phone, so the more information that you can auto-populate for the user, the better.
Finally, you need to make sure your telephone number is clickable. There’s no better way to infuriate a user than by presenting them with a telephone number that’s actually an image, forcing them to then try and memorise it. Just make sure it’s always clickable.
Our team care about two things – doing brilliant work and making an impact. That’s why we’re directing every free moment to helping the
Contact us today for a free consultation to drive change and grow your market share.
"*" indicates required fields