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 article, 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 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).
  • 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 username 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 a 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 hackers’ 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 the most important UX/UI parameters of your website before or just after it goes live.

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 based on my own experience as well as the 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 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 get 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 the content and its elements should be labeled clearly.
  • Ideally, the content of the website should match website visitors’ expectations, but in any case it should be understandable and actionable.
  • Distraction in the desired user journeys, such as a number of 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. Users should be satisfied both 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. usernames.
  • 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

The Basics of Paper Prototyping

Paper prototyping allows early testing of a UI design for any kind of software. The simplest method is drawing a user interface or a series of “screens”.

This post is a recap of the Scrum User Group meeting on February 5, 2014, in Karlsruhe.Paper prototyping

During the workshop, the participants were shown some sample drawings and then could put the theory into practice, by developing a paper prototype for a restaurant app.

So, what is actually paper prototyping? This method allows for early testing of a user interface design for any kind of software. The simplest method of paper prototyping is drawing of a user interface or a series of “screens” the end-user will see. The clear advantage of this method is that it saves a lot of money and time in testing and trying out different designs before the actual development has taken place.

Some important things to remember whilst applying paper prototyping are:

  • It is better to have cross-departmental teams involving somebody from an IT, a designer, a usability specialist and possibly a marketing/sales specialist. Only in this way it is possible to evaluate the ideas from a 360-degree angle. As an example: often a small change in the design requires a lot of extra work for the IT that could be avoided if the prototype had been discussed by the whole of the development team from the very start.
  • The initial design should be kept simple, without much detail (e.g. the texts can be omitted first),  the main focus should be on the layout and functionality of the software.
  • Paper prototyping naturally has limitations in comparison to the testing on the devices, e.g. interactivity or performance on different screen sizes. These parameters should definitely be kept in mind as an adjustment in the design may be required later.
  • Remember that one picture often says more than a thousand words. Do not be reluctant to draw, even if you think you are not good at drawing. In essence, most  Graphic User Interface (GUS) elements can be depicted using simple geometric forms, e.g. “a trash bin” is nothing more than a cylinder with a parallel line with a dot on top of it.
  • Consider the user journey in developing your paper prototype. Does the user expect a “next” button at the top or bottom of the screen? Does he/she find a confirmation screen helpful? Though it is nice to be creative, the usability and clarity of your GUS  should be the primary goal.

All in all, paper prototyping is important in the initial stages of a software development process, and if done accurately, helps to save a lot of effort during the development stage.

 

Share this post

Two Types of Online Users: Simplifying the Segmentation

Below I will describe a simple approach to customer segmentation online, based largely on behavioral characteristics.

There are numerous approaches to customer segmentation, some of which include a lot of hard and soft factors and fracture the customer base down to “a segment of one”. However, this micro-marketing is hard to apply in practice: modern online marketing is largely data-driven and the problem is rather to generalize and structure the massive amounts of user data and to incorporate it in simple procedures that you can actually manage and apply.

Below I will describe a simple approach to customer segmentation online, based largely on behavioral characteristics. All users can be subdivided into two groups. There is empirical data by Yandex proving the existence of these two user types, as well as some surveys  such as the one by Novomind  introducing the subdivision of online users/buyers into two main types.

Let us see how the theory can be applied to understanding the user behavior and conversion on a website.

Segment 1: “Experimenters”

Type 1 users, “experimenters”  or “synthetical” type are driven by emotions rather than reason.

  • They tend to “skim” through the page or read it “diagonally” paying attention to the parts that stand out or create a structural break in the page.
  • They are more likely to click on a CTA that is three-dimensional, large or made in contrasting colors.
  • They seldom read the text attentively and are not moved by detailed explanations.
  • If offered a choice of products, they make their decisions rather quickly without much scrolling and clicking, though having a lot of choice is important for them.
  • They tend to break off if prompted to type in extra data, or if forced to do extra clicks.
  • They leave the page rather quickly if they do not find what they want immediately.
  • They are often on the lookout for new, innovative or exclusive products.
  • They are prone to do spontaneous purchases if offered a good deal on the spot.
  • They seldom make repeat purchases and have less customer loyalty to an online shop.
  • These users are slightly more likely to be male or younger users.

Segment 2: “Readers”

Type 2 users, “readers” or “analytical” type tend to be more consistent and methodical when navigating a page.

  • They normally navigate the page “top to bottom” thus paying attention to less “visible” elements
  • They make less spontaneous clicks.
  • They react to CTA’s that match the background design of the page, as this makes them more “trustworthy”.
  • They tend to look thoroughly through the website and need time to make a final purchase decision.
  • They get irritated if the website lacks a clear structure or if there is too little information about the products or services.
  • They often  break off the buying process if feeling insecure about their personal data or feel pressed for decision (“limited offer, buy now!”).
  • If satisfied with service and products, they are likely to return and even become permanent customers.
  • These users are slightly more likely to be female or older users.

Implications of the Segmentation

Having in mind these two customer types helps to explain why the same conversion optimization measures yield completely different if not contradictory results when implemented on different websites (as their customer base may predominately have users of type 1 or type 2).

While the first user type require interactivity, large print and colors to attract their attention and reacts negatively to the informational overload, the second type, on the contrary, require clear and detailed information and dismiss anything that seems suspicious to them or resembles advertising.

If one is not quite sure what type of users a website has or if there seems to be a good mixture of both, balancing off the interests of both groups (e.g. additional information is easy to find, but can as well be skipped through) or even designing several types of interfaces for different landing pages may serve as a solution.

Share this post