User experience best practices

  • The user comes first

When optimizing your website for search engines, people often forget that even for Google, the user comes first. If a user or visitor can’t find what he or she is looking for, they will hit the ‘Back’ button (bounce) to go back to Google and pick one of the other results. If this happens more than once, Google will value your website less for the keyword used to find your website. For that very reason, you want your website to be the best usable website possible. To achieve this, you can use a number of best practices, which we will clarify in this chapter. Our team of experts reviews hundreds of websites a year. If you would like an expert review on the User eXperience (UX) of your website, you are welcome to order a Website review.

  • Clarity

When a visitor finds your homepage for the first time, it should be immediately clear what your website is about, and what your products and / or services can do for the visitor. If possible, you even want to communicate your values and standards so the visitor can immediately bond with your company. If you want your visitor to immediately bond with your company, you should have a killer homepage or a killer landing page. The main difference between the two is that a landing page is designed to convert the visitor into a customer on that page, where a homepage is much more like a warm welcome and a guide to different parts of your website.

Both a landing page as well as a homepage should include a clear introduction. In that introductory content, you will explain what your business is about, and what you can do for the visitors. Use layman’s language. This is really important. Let me use our business as an example. Our pitfall is, since we are selling software products (plugins), we tend to go into technical details too quickly. Instead of focusing on all the brilliant technical stuff that’s in our plugins, we need to explain how the plugins will make the business of our customer better, easier or more profitable. ‘User first’ is a popular saying, and in case of the introduction, this is very true. Some website have an immediate focus on product images instead. While we strongly advise against using a slider, a lot of websites still use these. That doesn’t mean that you can’t add that introduction! If you would write an awesome tagline or slogan, and add that in the header of your website right above that slider, you could already trigger people to dig a bit deeper in your website.

  • Content focused design

Content is king, right? That also goes for the content placement in your design. If your sidebar screams ‘Sale!’ or ‘Subscribe!’ or is crammed with banners, chances are the user is distracted by these elements instead of being able to focus on the main part of that page: the content.

Unfortunately, you can’t control content placement within your business model all of the time. Some websites simply ‘need’ that focus on these banners, as these banners are their main source of income. The dilemma in this is that more focus on the content will probably give you more visitors, which equals more banner revenue. But one can only assume that. You would have to test that somehow. As the effects of content focused design will only become visible after a certain period of time, this will be very hard to A / B test (more on tests later); you’ll probably need to run the content focused variation for a couple of months, and your current revenue will need to allow for such a test. Bottom line is that content focused design will at least reduce bounce rate. There will be no surplus of banners or other sales items scaring your visitor away, and it will be immediately clear by focusing on the actual content if your website is going to provide the answers your visitor is looking for. The right title and paragraph headers, and an image about the subject at hand will of course strengthen that belief.

  • Call-to-action

We can’t ignore calls-to-action, when talking about user experience and conversion. A call-to-action is an element on a page, that triggers the user into an action. Oftentimes people think this has to be a button, but a text link or banner might be used as well.

The call-to-action of a page triggers the user to click to the next page, order your product or subscribe to your newsletter, just to name a few. There are a number of best practices for setting up a good call-to-action.

  • No clutter. If you add a call-to-action, there shouldn’t be other elements demanding the visitors attention. No social share buttons right below your call-to-action button.
  • Add urgency. Why act now? Because there are ‘only three slots available’ or ‘just one left’. Webshops use this a lot these days.
  • Size does matter. Make sure people are able to view the button without any trouble. Don’t go overboard; there has to be a balance so you won’t become too aggressive.
  • Add trust. A money-back guarantee will make it ‘easier’ for the visitor to click your order button. A great testimonial below your contact form will lower barriers to contact you.
  • Be clear about the benefits. Mention them near your call-to-action. For instance, a short bulleted list naming the main advantages of your product or service can convince visitors to click the buy button..
  • Right below your price. Adding the call-to-action right below your price will entice visitors to click the call-to-action (if they like your price). No time to hesitate.
  • Color is important. If your entire design is using blue and orange, your call-to-action will stand out a lot more if it’s green, for example. Using blue or orange will make the call-to-action blend in too much.
  • Be brief. If your call-to-action is a button, don’t use ‘Buy this product now and get a 20% discount’ as the main button text. Use ‘20% OFF’. You get the drift.
  • Mobile design

Responsive design is a website design that adjusts to the viewport of the device you are using to visit that website. Most site templates can be made responsive by adding extra settings in the CSS or style-sheet of a website. We explained a bit more about this in a post on our website.

Designing your website for both desktop and mobile visitors is even more important since Google rolled out ‘Mobilegeddon’, as we tend to call it. It’s an update in the way Google ranks websites in their mobile search results that takes into account if the website is ‘fit’ for a mobile device. Google even created a Mobile-Friendly test to help you find out if your website is mobile friendly. As your mobile screen is much smaller, most responsive websites  consist of just one column and a lot of scroll distance. This means that the setup of your mobile website probably needs to be just a tad bit different from your desktop site setup. You need to decide what details your mobile visitor is most likely to be looking for. If you have an actual shop location, people probably need address details or a phone number. List these in the first mobile view, so visitors don’t have to look for them. In order to decide on the information your visitors need, you might require some testing and / or a survey. Ask your (mobile) visitors what their primary tasks on your mobile website are and design your pages accordingly.

Now besides this so-called task based design, you need an escape.

Just in case someone is really looking for something else. That escape should be provided by the addition of a search option in for instance a sticky menu (a menu that is always visible, even

when scrolling down). One more thing about mobile websites. Make sure these are blazing fast. As not all your mobile visitors will have Wi-Fi access, chances are they need to download all the MBs of your website while trying not to exceed their carrier data limit. Although mobile internet is getting faster and faster, if your site loads in less than a second, that will for sure improve user experience.

Leave a Reply

Your email address will not be published. Required fields are marked *