A complete guide on optimising UX for wordpress

Reading Time: 13 minutes

User Experience is central to every website, be it a business website, eCommerce website, a directory listing or even a blog. If you are aiming to pump up your WordPress UX, then this article will help you to achieve the same.

WordPress Optimisation: Tweaking for the best user experience

In the simplest terms, WordPress is a free, highly flexible software that allows you to create websites. You can hire a WordPress developer to create custom plugins, themes and modules that serve the purpose of the functionality of the website. This also means that you can tweak your website to deliver a superior user experience. Having said that, let’s first understand the factors that influence your website’s user experience.

Factors that influence your website’s user experience

When it comes to a website’s user experience, it is determined by two major factors:

1. Technical Factors: Technical Factors affect your website’s performance. If your website is a show, then technical factors are all the supporting staff behind the curtain.

2. Design Factors: Design factors, as the name suggests are visible on the front, they are the actors that engage the audience. So let’s have a look at each of them, in detail.

Technical factors that influence your wordpress website’s UX

Website speed

When it comes to user experience, a website’s speed is one of the crucial factors. To optimise your website’s speed you need to consider the following aspects:

a. Hosting: Shared vs managed wordpress hosting

Shared hosting means your website’s resources are shared with resources of other websites on a single server. The only benefit that shared hosting offers is reduced costs.

On the other hand, managed WordPress hosting is a set of services, performance optimisations and other value additions. It is obviously costlier than shared hosting but its benefits outweigh the costs. Let’s take a look at those benefits:

Faster websites: It reduces the website’s load time as every configuration is specifically optimised for the WordPress platform.

Keeps the backend of your website up to date: Managed WordPress hosting provides you with features like automatic updates and automatic backups that keep your website up to date.

Enhanced security: It fortifies the security of your WordPress website with security rules and features that are specifically focused on WordPress. It provides firewalls, login hardening and malware scans to keep your website secure from outside threats.

Server level caching: It has sever level caching built-in which translates into better performance.

Staging: It is probably one of the most valuable benefits offered by managed WordPress hosting. Staging features allow you to build an exact copy of your existing website with two exceptions:

(i) It is not publicly available

(ii) Changes made to the staging website do not affect the existing website.

You can try new themes, plugins, code snippets and other development tweaks without breaking your live website.

b. Using a CDN

A Content Delivery Network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading content including HTML pages, javascript files, stylesheets, images, and videos.

A CDN leverages caching mechanism to create a copy of your website and store it on servers across the globe. So if someone is accessing a website from Indonesia that is hosted on a US server, he/she will be able to view the cached version of the website that is stored in the nearest server, which can be situated either in Singapore or Hongkong, depending on the CDN service provider’s network.

There are many CDN service providers in the industry. Cloudflare, Amazon Cloudfront, Google, Akamai, etc. are some of the leading providers that you can choose from.

So, the above two are the external factors that influence the website’s overall performance and user experience. Now let’s take a look at internal factors that you can use to your fullest advantage.

Managing themes and plugins

There are hundreds and thousands of them available. But the wise choice is to use the ones that help in improving our website’s health.

a. Using high-quality themes and plugins

So, when it comes to using themes and plugins, their quality rather than quantity affect the website’s performance. Choosing well-coded themes and high-quality plugins required in-depth research. Many themes claim to be ‘SEO Optimised’ or ‘Responsive’ but fail to fulfil any of them. Similarly, some plugins are heavyweight, meaning that they require more files than usual to function and they eventually drag the website’s performance.

b. Keeping themes and plugins updated

When you log in to your WordPress dashboard, you would come across notices that your theme or some plugins require updates. This is because of the fact that they ensure compatibility with your version of WordPress. These updates are also intended to resolve some of the bugs or security loopholes in the earlier version.

c. Delete unused themes and plugins

Unused themes and plugins eat up your space on the server on which your website is hosted and eventually lead to reduced performance. So, the best idea is to delete all deactivated plugins and themes that you won’t be using any further.

But before deleting them, make sure to backup your website so that if anything goes sideways, you won’t have to waste your valuable time and resources building it from the ground up once again.

Minifying and compressing your website’s files

Minifying is the process of making your website’s code more efficient. It gets rid of all the unnecessary content in the code, enabling your website to load faster.

Minifying can be done by eliminating the spaces or other characters that helped the code look more readable when it was written the first time.

Consider this example:

#red {
font-size: 1em;
color: red;
}

This code is intended to make its purpose clear by using spacing and line breaks. It is legible to humans but computers don’t need it. If we were to minify this, it would look like:

#red{font-size:1em;color:red;}

Now, the computer would be able to process it much faster and display the same results as earlier, in lesser time.

Optimising media files

If you were to check the reasons behind your website’s slow performance, you would find images to be on the top of the list. This is because high-quality images are bigger in size and require higher server space and bandwidth.

So, to improve your website’s performance and user experience, you have to consider image optimisation. It is a process of compressing the size of the image without noticeably affecting its quality. You can ask your graphic designer to leverage photoshop’s inbuilt feature, ‘Save for Web’ that helps in optimising the image quality, especially for websites. Or if you are doing it on your own and don’t know how to use photoshop, you can use online free resources like TinyPNG or use WordPress plugin – ShortPixel Image Optimiser.

Cleaning up your media library

In managing themes and plugins sections, we saw how deleting unused themes and plugins consume a lot of space and decrease performance. Similarly, you need to delete unused or previous versions of images or other media files that are no longer needed. But if you have thousands of files in your library, this is a tedious task. Fortunately, there is a plugin – Media Library Cleaner, which automatically identifies and deletes unused media files.

By this, you can save a lot of space and you will notice an improvement in your website’s performance.

Design factors that influence your wordpress website’s UX

Design factors include all the visual elements i.e. the visual hierarchy, layout, colours, font psychology and typography. It is heavily influenced by human psychology, how we like to perceive and consume information. Gestalt Principles are the most famous psychological principles used in visual design. We have covered Gestalt Principles pretty well in our blog on how visual design influences UX design.

From a design perspective, these are the factors that you should look for when optimising your website’s user experience.

1. Clear and identifiable call to action

Call to action or commonly known as CTAs are strategic pieces of content. Most CTAs do not seem to generate conversions either they are incorrectly placed or designed, are not exciting enough or are too jargony. What’s even worse? Not providing CTA at all. It is not just bad marketing, it is also a bad user experience.

You should proportionally design and align the CTA button with the overall layout of the content. A simple design, proper use of whitespace, and a distinguishing colour make for an effective CTA UX.

Consider the home page for one of the leading CX companies: Survey2Connect. You would see the main CTA – ‘Start a Free Trial’ stand out from other CTAs i.e. Request a Demo and Chat with Us.

2. Visual hierarchy and typography

Typography refers to the choice of the typeface, while visual hierarchy is about organizing and using the appropriate font, its character size and spacing.

Following are the most important elements that constitute a typographic hierarchy:

(a) Font type

When it comes to choosing fonts, there are mainly two categories that are predominantly used. Serif and Sans Serif. You would find most news websites using serif fonts as people are accustomed to reading the articles in that font. Sans Serif fonts are preferred by modern websites as they are easier to read even on smaller screens. Most blogs use sans serif fonts.

You can also experiment with pairing different serif fonts with sans serif fonts. Fontjoy, Font Pair, Typ.io are some of the best websites to get inspiration for your next project.

(b) Font size

Deciding on the font size is equally important as deciding which font to use. The font size should neither be too small to read nor it should be too large that it overflows on a mobile device. You can start with 16px for the body, and go further for your headlines, titles, and header.

(c) Alignment

The alignment should be consistent. For paragraph content, keep the alignment on the left. Use centred alignment for headings & subheadings, quotes, and image captions.

(d) Leading, kerning and tracking

Leading refers to space between the lines. Every document will require different treatment, but here are some useful generalizations:

Long lines of text may require extra leading.
Boldface or sans serif type requires more leading.
Typeset at very small sizes, say 8 pt or below, may require extra leading.

Leading affects the density of your page, so if your page seems a bit dark, try adding more leading.
Kerning is the space between each character in a particular word. While tracking refers to the universal spacing between the characters in a particular block of text.

3. Colour and contrast

Colours form one of the most important aspects of visual design as it gets the users to instantly develop positive or negative feelings about your brand. A well-thought-out colour palette can elevate a design from “good” to “great” while a mediocre or bad colour palette can detract from a user’s overall experience and even interfere with their ability to use a site or app.

The message communicated by colours is perceived subjectively by the users, depending on the context. For example, blue used as a primary colour in a modern, minimalist design will have a very different feel than the same blue used as an accent colour in a more complex, corporate design.

So, when you are creating a brand colour palette, you should take into account the brand’s values and how increasing/decreasing their hue, saturation and brightness can affect them.

Contrast has also the same effect as colour. It is essentially the difference between the foreground and the background and it also immediately grabs a user’s attention. Contrast comes at play in various aspects, such as the background colour or texture of your website, design of your Call to Action Button, using primary and accent colours etc. When done correctly, it is not noticeable.

4. Cherry on the top: White space

Whitespace is the area around and between the elements of your page’s design. Most modern websites have been using white space extensively to keep their user’s attention on their primary message/content while simultaneously reducing the cognitive load. If the website has too many elements or uses some weird colours in the background, the user feels distracted and hence, the purpose of the message or content is lost.

Plugins that will help you in improving your UX

Great user experience comes from great website performance, and to optimize your WordPress website for best performance, you can certainly consider using the following plugins:

Hotjar

Hotjar is an analytics tool that combines both quantitative and qualitative data to give a “big picture” view of a site’s user experience. It uses a variety of methods, including heatmaps, user recording sessions, polls, and surveys to provide UX experts with actionable information.

Hotjar’s recording feature records a variety of user interactions, including HTML changes while the user is on a page, mouse movements, mouse clicks, scrolls movements, and keystrokes on whitelisted form inputs. Interactions are saved in a database with a timestamp, which is later used to replay each session.

There are other popular alternatives to Hotjar, such as Inspectlet, CrazyEgg, LuckyOrange.

Usability Hub

Usability Hub is a powerful usability testing software that allows testing your website’s logo, the home page, product page, landing page or any other marketing material to the testers.

It has a unique concept of 5 seconds test. The testers allowed to view the screen for five seconds, then they must answer questions about what they saw. You get to see all the responses – plus a word cloud that draws out common terms describing those first impressions.

It also has features of audience split testing, funnel analysis, device targeting, and more. UsabilityHub provides a free, limited option and several price tiers.

WP Super Cache

Caching may sound pretty technical, but it’s actually easy to implement on a WordPress site. There are several plugins you can use to do this. WP Super Cache is by far the most popular caching plugin; it’s both entirely free and very simple to configure.

WP Super Cache can significantly improve the user experience of your WordPress website by loading your pages faster through caching. In addition to this, this plugin provides easy Content Delivery Network (CDN) Integration.

WP Super Cache is compatible with Virtual Private Servers, Dedicated Servers and Shared hosting. And, because it uses HTTP compression to shrink your pages, it will also minify your Javascript and CSS code, taking out comments, spaces and other things that don’t necessarily affect how the code works.

WP Optimize

WP Optimize helps you to clean up your website’s databases. Optimizing database means reorganizing them to reduce space and increase their efficiency. This is pretty technical, we recommend you to use a plugin like WP optimize to delete unused databases and repair/optimize the existing ones.

WP Optimize also helps in optimizing the images, minifying Javascript and CSS. This makes WP Optimize by far one of the best WordPress Optimization plugins till date.

Elementor

Elementor is a drag and drop website builder plugin that provides exceptional flexibility and a plethora of widgets to make your website highly engaging. It is a great plugin for those who do not know coding or CSS to make beautiful websites.

Elementor offers control at a granular level so that you can fine-tune your website. You can create a responsive website with dynamic tags, and completely take control of your website’s design. The best part about elementor is that is highly user friendly and literally, anyone can create a better-looking website within hours.

It offers tons of functionality in terms of widgets, templates and custom CSS code.

Yoast SEO

Yoast SEO helps to optimize your website’s content by enabling you to gauge the level of SEO-friendliness and readability of your content.

Your WordPress website’s content is as important as other technical factors. Yoast SEO helps you write content with a specific focus keyword in mind. This means that you are likely to write specific content that is more focused and unique. You can also assess the readability of your content by Flesch’s reading score and use of passive voice and wordy sentences.

If your content looks like a research paper article, chances are most users will shy away from your website and it is a sign of a bad user experience too.

Chat by Drift

Your WordPress website is not just a website, it is your primary marketing tool. And now, marketing is not just a one-way road, it is a two-way highway. That means you are not just reaching out to your customers, your customers also like to reach out to you.

So, with that in mind, you ought to implement a tool that enables you to listen and interact with your users as well. Live chatbots solve this problem. You can listen to what the user has to say and then interact with them.

Chat by Drift is one such plugin that helps you monetize by using a chatbot on your WordPress website. Drift boasts smooth mechanics, plenty of handy settings, and a range of packages, starting with a free version on WordPress. Apart from the typical functions, Drift’s strength is its friendly intelligence. It can trigger the live chat feature for visitors performing certain actions and direct them to the right representative if there are many.

Broken Link Checker

Imagine you are enjoying a smooth ride on a highway and suddenly you see a roadblock saying you have hit a dead-end. It will completely ruin the pleasure. A similar thing happens when a user is enjoying the ride of navigating on your website and hits a page that shows ‘404 error’ It will result in the user immediately shifting to a different website or will try to go to a homepage. To avoid this, you should check for broken links on your website and rectify them. You can accomplish this by installing Broken Link Checker Plugin. It offers important features such as:

• Monitoring links in your posts, pages, comments, blogroll and custom fields
• Detecting links that don’t work, missing images and redirects
• Preventing search engines from following broken links
• Editing links directly from the plugins’ page without having to manually update each post

Also, in terms of SEO, broken links are a negative ranking factor and should be resolved.

Conclusion

A website’s user experience is not just its visual appeal but a culmination of various technical factors. And if you have a WordPress website, you must account for all of these factors to provide a pleasant experience to your website users.

Negligence or ignorance in any of the above-mentioned factors will lead to a dismal user experience and if the users don’t enjoy your website, your website will not be able to rank higher in search results and ultimately it will mean losing your business. So, it is wise to coordinate with your developer to optimize your WordPress website for a superior user experience.