Website UX/UI Testing Parameters Part II

In this post, I will discuss compatibility, performance and security testing as important parameters of UX website testing.

In the previous post, I covered the first group of website testing parameters. In this post, I will discuss compatibility, performance and security testing.

website testing

  • Check how your website is rendered through different browsers and if the website functionality is maintained. You surely do not need to cover all existing browsers, however, the website should be compatible with the essential browsers and browser versions. In case you have visitor statistics from the past, you will know which browsers your visitors use (this may differ e.g. depending on the business you are in). Otherwise, you can use available statistics, such as by W3 (https://www.w3counter.com/globalstats.php). By the way, instead of installing all of the browsers, you can just turn to one of browser testing tools (Browser Sandbox, Ghostlab, etc.)
  • Device compatibility at a higher level means mobile-friendly layout and functionality. At a more granular level, it means compatibility with most often used devices, in particular with their screen sizes and resolutions.
  • Statistics on operating systems (device platforms) can also be found in your previous web analytics reports, or, in the absence of those, on the Web (here you can also refer to W3 website).
  • The last point on compatibility refers to the most common OS, browser and device combinations. Also here you can use professional testing tools without having to buy hundreds of devices.
  • Load testing examines how a site would perform at peak loads (extremely high user activity), stress testing may stretch the site beyond its limits or well beyond an expected peak load.
  • Take preventive measures in order for a website crash not to happen  (use a reliable hosting company, cautiously make code changes)  or to restore your website quickly in case it does crash (making a backup, of course).
  • Website speed greatly influences not only user experience but also how your website is ranked in the search engines. For determining the site speed you can again turn to Google Search Console, but there are a lot of other tools out there.
  • Login security guarantees that only logged in users can view certain areas of your site, but also that each user may only use their unique user name and password.
  • Form validation means that only valid information can be entered. It is essential that your website’s code cannot be manipulated through form fields.
  • Internal website files should not be available to external viewers unless you want some of them to be accessible (such as .pdf files for download). Also, be careful about any transactions involving file uploads to prevent visitors from uploading executable files.
  • SSL enables secure file transfer between a server and a client and is an crucial feature of any up-to-date website. Using SSL causes that the links in the browser appear as https://. In case SSL is not present, website visitors will get a warning from most browsers.
  • This is by no means a full list of measures to protect your website from hack attacks, so check logs of important transactions and error messages to identify any security breach attempts. Abnormal user behavior can sometimes be identified through your web analytics data.

Using the framework shown above, you will be able to test most important UX/UI parameters of your website before or just after it goes live.tes

Share this post

Website UX/UI Testing Parameters Part I

UX/UI testing is an essential step in website development. You should plan for testing early in the process and decide what will be tested in addition to the tools you will use. Remember that you cannot test everything, so prioritization should also take place.

This post is largely based on a Udemy UX and Web Design Masters course and provides a basic framework for website testing.

This table structures testing parameters into several categories. Below I will explain the first three groups of criteria. My next post will cover the rest of the parameters.

website testing

 

  • Links to and from pages on the site should point to a correct destination. This includes mailto: and social media links. While you will not be able to control all of the incoming links (links coming from other domains), bear in mind that changing your URLs without a redirect will cause them to become invalid. Pay special attention to internal links, that is cross-linking between the site’s pages.
  • Things to check on the forms are default form values, required data format, entry validation and storing entered information.
  • Apart from including a privacy statement, test what happens if cookies are actually rejected, blocked or deleted by users. Also check that all information is encrypted and that cookies are not stored longer than required.
  • CSS styles render the design of the page, such as fonts, colors, etc. HTML is the “carcass” of the page, while JavaScript is used for interactivity features. There are various code validators, for example https://validator.w3.org/.
  • The capability to be indexed by search engines is an aspect less related to the UI/UX of the page, however, it directly affects if and how your website appears in Google Search results. A popular tool to use is Google Search Console. This tool additionally checks the site usability on mobile devices.
  • Database connections include correct execution of database queries, reliable data storage and retrieval and correct updating of stored information in case of any changes.
  • Navigation clarity means that users should be able to find what they need on the site using the navigation. Furthermore, the navigation should stand out from the rest of content and its elements should be labeled clearly.
  • Ideally, the content of the website should match what visitors are looking for but in any case it should be understandable and actionable.
  • Distraction in the desired user journeys, such as pop-ups or multiple CTAs should be avoided.
  • Calls-to-action express the purpose of your website or, in other words, what you want users to do. In my post on CTAs I covered how they should be formulated and designed.
  • The main benchmark of your website’s usability is the ability of users to complete their tasks and their satisfaction with the results and the process.
  • Beside the correct rendering of fonts and colors, it is important that the overall readability and visibility of the content are not impacted (an example of bad usability is using light font colors over white background). In addition, consider emotional aspects of the website colors and how they match your brand.
  • Proper handling of errors means that they are recognized and assigned to the correct category. For example, an HTTP 404 error message is generated when users try to reach a non-existent page. Other examples of errors can be form submission errors or incorrect content display.
  • Error handling also includes displaying appropriate and understandable error messages to the user. In parallel, errors should be logged into the system for review. However, make sure not to include any security-sensitive information into the displayed error messages, e.g. user names.
  • It goes without saying that all known errors should be promptly fixed.

In the next part, I will go through testing parameters for compatibility, performance and security.

Share this post

Click Here, Not There: Making Your Calls-To-Action More Effective

Calls-to-action are the most important part of landing pages. In this article, I will provide some recommendations on how to make your CTA’s work better.

A call-to-action, or a CTA, is probably one of the most important parts of a landing page. Usually designed in the form of a button, this short imperative phrase tells the user what action to take. In this article, I will provide some general recommendations on how to make your calls-to-action work better.

  • CTA text

    Avoid vague formulations, such as “Click here”, tell your visitors exactly what you want them to do:  “Sign up for the newsletter”, “Submit the registration form”.  If the phrase used for CTA seems to be very long, you can break it into two parts (e.g. Sign up now – and receive our weekly newsletter). Write the explanatory, second part either below the main CTA (in smaller letters) or put it outside the button – above or below. In the CTA text, you can either evoke the sense of urgency: “Sign up now”, “Limited offer” ; or mention the main benefit for the user: “Get free expert advice”.

  • Number of unique CTA’s

    An older rule prescribes only one unique call to action per landing page. Asking users to perform two or more actions on the same page can confuse them when navigating. However, sometimes there are two or even more options a user may have on the same landing page, depending on their stage in the buying process or their buyer type. An example would be offering to sign up for the trial or taking a feature tour first. In this case you would need two CTA buttons. They can be positioned next to each other or one on top of the other. Usually, the more important one of the two CTAs comes first and is highlighted graphically (e.g. with a brighter color).

  • CTA design

    In designing your CTA’s, you will need to balance two requirements: first, your CTA should look like an organic element of the landing page, and second, it should have enough contrast to the rest of the page to be noticed and clicked. Make your button 3-dimensional: use gradients and shadowing to get that “clickable” look. Also, an arrow within the button or outside it can have a positive influence on conversion.

  • CTA color

    It is believed that buttons with signal colors (red or orange) work better, however, do not sacrifice the look of your page in favor of a red button if does not match the overall design. You may also use some creativity and add texture or pattern to the design of your button, but only if this goes well with the look of the page and the product you are offering. Remember that in any case, the CTA text must remain clearly readable.

  • CTA positioning

    Placing the CTA button “above the fold” as the first element on the page seems like a good idea. However, visitors might not be ready to perform the desired action until they know more about what you have to offer. So I would recommend listing your main benefits first and then introducing the first CTA. A widely used strategy for longer landing pages is several CTA buttons (one above and one or two below the fold). In this case, make sure that your buttons look the same and contain the same text, otherwise it may look confusing.

  • CTA size

    Make sure that the CTA you make has large (but not disproportional) size, in order to be noticed by users “skimming” the page.  Regardless of the size, you need to leave enough white space around the CTA: this will make the button recognizable in the text flow.

The given recommendations can help you to improve the click-through rate of a CTA. However, to achieve maximum results on your particular landing page, A/B testing is recommended.

Examples of CTA buttons

Share this post