Audit usability okay-cms.com site based on clicks card

Over the past few years, our team has been engaged not only in the development and improvement of our CMS, but also in its popularization among users.

During this time, the number of visitors to the okay-cms.com website has grown significantly. And we have added more complex functionality that allows you not only to study information about the system, but also to try a full demo version, download a CMS for a test period, buy a license or add-ons from MarketPlace.

So we came to the need to update not only the design of our site, but also to improve usability. Some design changes have already been implemented. And in order to understand whether it is convenient for you to use such an interface, we turned to the Plerdy service for an analysis of the site's usability. The audit allowed us not only to evaluate the current appearance of the site, but also to draw conclusions for future improvements.

We left the audit text unchanged, but added comments and notes where necessary.

Usability audit methodology

This approach was based on the traditional principle of analyzing the most clickable website pages.

We reviewed the list of TOP-10 pages, collected the maximum number of clicks on computers:

The scrolling map shows that many pages have interaction in the first 40% of the screen (in the screenshot, these are red cells):

In addition to the most clickable parts of the pages, you should also check the content where there are "green" areas: that is, those where there are fewer clicks. This is important if we are waiting for clicks in these places, but we do not receive them there. In this case, add (or edit) calls to action.

Audit of the main version of the site

Let's consider several pages of the main version of the site.

Home page

A large number of clicks on the "Personal Account" menu item, which is hidden in the "Partners" section, cannot fail to attract attention:

We recommend putting it out as a separate button on the site.

Comment from marketer OkayCms:

The entrance to the personal account is made in this menu on purpose. Previously, there were a lot of elements in the header that distracted the attention of visitors from the main actions (viewing the demo version, downloading OkayCms). And since only partners use the personal account, it was decided to move it to this section of the menu. As we can see from the audit, partners find it there without difficulty. And new visitors are not distracted by unnecessary elements and can focus on other activities.

A small remark regarding the logo on the main page:

Users mistakenly click on it, because on hover, the cursor changes its appearance and shows that the element is a button or a link. Accordingly, it is better to remove the active link here (especially since it leads to the main page on other pages).

The Demo menu contains 2 pages:

• demo store Lite;
• demo store PRO.

In fact, the company still offers a 3rd package (Pro +), which is not represented in this list. To attract the attention of one of them (popular), you can add a small icon (for example, )

OkayCms marketer's comment:

The Pro + version is not presented in the list of demos, as it is a bundled service. It consists of the OkayCms Pro license and additional options. She just doesn't have a demo. Now a separate page has been created to describe this package and the link to it is in the plate with the description of the service packages.

On the right side of the main page there is an element (button) that opens a window for requesting a video presentation:

This element does not attract the attention it deserves (only 1 click for the study period). It should be removed, and the video presentation proposal should be made into a pop-up pop-up format only on those pages where the user would potentially be ready to order such a service.

Next, let's take a look at how users interact with the page title. In addition to clicks on buttons, a certain part of visitors clicks on the central banner and inscriptions:

It would be possible to play with this fragment and put anchor links to the conditions or benefits of using this CMS.

Below this page there is a button that, according to the plan, was supposed to attract leads on the page. It has no special features that attract the attention of users:

Our recommendation is to do an A / B test to find the best color and possible alternatives with a call to action. Obviously, in this version, it does not work properly, so you should choose the best combination. Including because a little higher there are other buttons that collect significantly more clicks:

The contrast is clear.

OkayCms marketer's comment:

By design, the "Order Site" button is not the main lead form. We focused on the buttons “View demo” and “Check prices”, which, apparently, we succeeded.

Why is that? You can only purchase a license from us, and partner web studios are engaged in the direct development of sites. The button was left for customers who are interested in the creation of an online store. After the application arrives, we send it to our partners, who contact the customer and create an online store for him on OkayCms.

Consider the next block with a list of key features. We see clicks (users are interested in the content), but all block elements are not clickable:

The solution may be the format in which the specification for each given thesis takes place.

The same applies to the neighboring element - pictures:

Here you could assign it to perform a certain action or replace it with a video with a presentation of the key features of the CMS.

Below on the page is a list of packages and services:

The heatmap shows the items that most interested visitors. Accordingly, the solution may be to add explanations (hints) for the most popular of the given arguments.

The next is a block with a list of services with which this CMS platform is integrated:

Our recommendation is to add a very brief description of how the integration is implemented for the logos with which the integration takes place.

Similarly, you can organize links by partners' logos:

Therefore, you can add a link from .js with the opening in a new window or show their feedback about this CMS.

The block with video reviews, located between the information about the integration and partners, collects few clicks (they are disproportionately few relative to other clicks on the page):

As you can see here, only 4% of clicks are on a block that contains both slider navigation and 2 videos. In fact, the video feedback block is very valuable. It should be raised higher on the page and see how the percentage of clicks will change - it should definitely be higher.

Analysis of the footer shows that the most clickable element is the link to the forum:

As a test, you can put links to the forum in the footer of the site (if it attracts visitors even at the bottom of the site, then it is very likely that it will have even more transitions at the top).

But in general, there were no clicks on the form for filling out the mailing list:

This format has been considered ineffective for several years. The best solution is to use sensible pop-up forms.

Functional description page

Here, as well as on the main page, we notice that the call to action in the form of an icon is not effective:

But in this part of the page, everything is fine and you can see active interaction with the elements:

Demo Description Page

One of the elements of the main menu is the section "Demo", which includes 2 versions - Lite and Pro. Both pages tell you about the advantages of the chosen version, as well as what exactly can be appreciated in the open demo version of the CMS platform.

Visually, the difference between each of the pages consists in the location of the image and description (for example, in one version of the image it is on the right, and in the other - on the left).

The general recommendation for both pages is that little information is offered to visitors, so they move on:

One can, of course, assume that they have already looked at all the necessary information on other pages. However, the clicks on the button clearly demonstrate: many clicks are on the element, which "returns" the user to the moment of evaluating all the benefits.

It would be better to describe all the functions of the Lite version on this page:

The same recommendation is valid for the second page - with the description of the Pro version.

Another recommendation applies to both versions: the picture offered for viewing after clicking does not unfold (although, as we see in the screenshot below, there are attempts to click on it):

Category page (list of templates)

The category page is important for usability audit. In this project, this is the page with the list of templates.

On this and similar "Add-on" page, a banner or lead magnet should be placed. In particular, you can add here:

• Direct banner to a category with a promotional offer;
• Links to articles related to additional functionality (for example, "TOP add-ons per month", "Top 5 add-ons", "Most popular templates", etc.).

Such a solution can help with additional sales and general catalog awareness.

OkayCms marketer's comment:

In order to focus the visitor's attention on choosing a suitable template, we do not distract him with unnecessary elements.

As for filtering by price. The design includes free and paid templates. Obviously, the "Free" button collects the most clicks:

Actually, it would be nice to give at least 2 free designs (in reality there is only 1).

One of the page elements is a menu with categories. Its disadvantage is that the list is too long (it suggests choosing categories in several chapters). At the same time, the second half of the list turned out to be more clickable than the first:

Along with the list of categories, we see also sorting. However, it is quite difficult to understand it is about sorting from smallest to largest for each position, or vice versa:

Another nuance concerns the "default" sorting method, which is the first in the list:

For first time visitors, there is no need to suggest what they want to change (sorting by default).

OkayCms marketer's comment:

The "default" sorting allows you to return the sorting that was when the page was loaded. It is not immediately needed, but if a person has chosen a lot of things and wants to return to the original settings, this is a very convenient function.

It would be appropriate to use a cross in the sorting element (to cancel the selected type of sorting - if there is a need to return to the original view):

This page is very rarely searched:

As a solution, you can try replacing the text with "Search by templates" and add an example of how to enter a name to find the desired template.

Comment from marketer OkayCms:

This search is used not only in the templates section, but also in the add-ons section. Therefore, it is called “Search by products”. Since the visual factor is really more important for templates, the search is relevant for modules. There are many add-ons and you can often find what you need only using the search. Having studied the analytics, we can conclude that the names of templates are gradually becoming more popular and there are cases of search for them.

Version comparison page

The version comparison page allows you to visually evaluate the differences between different packages of access to CMS capabilities.

A possible solution for this page is a pop-up with the ability to ask an additional question on functionality:

An alternative could be a call to action (with a link to the category pages), which will be placed on the left side of the site next to the table. After a certain period, you can compare the number of clicks for each possible solution.

For individual questions of the functionality, you can add information help (in the form of a hint that will open when you click on the question icon):

Below on the page there is a small block with a proposal to order a service. Despite the fact that the button is quite bright, no clicks were recorded on it:

As an experiment, you can try to pick up a different call to action and see if the behavior of your visitors will change.

Add-on page

The add-on is one of the pages in the "Marketplace" menu.

There is only one significant observation on it: there is too little information on the page, so visitors use pagination and the "Show All" button:

The combination of two different formats, page unfolding and numbering, leads to a distraction of the user's attention. We recommend leaving only one type of switch - pagination.

OkayCms marketer's comment:

Each visitor can choose the type of display that is more convenient for him to use. Experience has shown that users prefer the Show More button. This step is also important for SEO, a search engine can index all products on one page. And if only pagination, then products from the second page onwards may not be included in the index.

Template page

Let's move on to examining the template page. All of them are similar to each other and retain the structure typical for online stores.

To analyze this type of page, we activate click-through on all pages of the site.

Specifically, we see visitors clicking on the developer's link:

However, this link doesn't work.

Another nuance concerns the basket icon. If you add a template to the shopping cart, we see a corresponding mark on the icon on the right side of the site. Now we compare the number of clicks from all pages of this type and we see that the shopping cart button is clicked 10 times less:

The best solution is the appearance of a corresponding pop-up, which will ask if you need to place an order now, continue browsing other templates?

For example, what a pop-up like this looks like:

The page is a fairly popular feature with the ability to share content on social networks. We reviewed how many clicks this element actually collects on all pages of this type:

There are almost no clicks. In general, site visitors are not very interested in simply sharing a page with a product (there is no particular need for this). This block can be removed.

Basket

The next item in our audit was the basket.

It was rather strange to see this field:

Considering that the product is purely digital (templates for an online store), it is not clear why to find out the address of the customer. It is likely that this field was added automatically.

We also saw the obligatory "captcha":

In reality, most online stores do not use captcha. It checks whether a bot or a person leaves a comment. However, when ordering goods online, it is imperative to indicate the bank details of the card - additional steps in order to filter out bots are unnecessary here.

One of the elements collected a lot of clicks:

At the same time, it is clear that users simply do not understand which of the two buttons is active? Better would be to add a related question to the checkout fields:

Blog article

This project has its own blog. Let's see how the content pages look like, as well as how visitors perceive them.

The first thing that grabbed attention: users click on images in the text, although these elements are not clickable. This issue is especially acute in relation to such screenshots, which contain a lot of text.

However, you need to make sure that the ability to view full format will not increase the page load time. Download speed is a priority criterion.

Order page

There are clearly few clicks on this page:

More value descriptions would be worth adding. On the other hand, there is probably too little target audience on the site who is ready to order a store in this way. The link to this page must be added to the header, and then it will immediately become clear who will be interested in the service.

For example, there is no information here, which application will be sent to the partner base, what data will be disclosed between development partners?

Findings:

Thanks to our audit, we were able to better understand the behavior of our customers on the site and identify priorities for future changes.

There are controversial points that we will analyze with the help of A / B testing and choose the best option.

Look for an improvement on our website soon!