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

The Why, How, and What of Onsite UX/UI User Surveys

Onsite user surveys are a cost-efficient way to gather not only quantitative but also qualitative information useful for business decisions.  There are two basic types of onsite surveys: website-related (UX/UI surveys) and offering-related (about the actual product or service promoted through your website). In this post, I will concentrate on the first type of questionnaires and give some guidance on how successfully set up, run and evaluate them.

Why

As with other projects, we always start with a Why – question. Without formulating a clear purpose, you will not be able to derive much useful information from the survey. Do not start with a general question such as “Do users find the website easy to use?”- but concentrate on particular UI components (e.g. top navigation, product finder or product descriptions). You may also run a survey to gather more insight into the data from analytics, e.g. high bounce rate on a particular page or repeated shopping cart abandonment by users. Another possibility is to follow up on a particular user journey (registration, form submission).

When & Where

When and Where to place the user survey will depend on its purpose. Say, if you are testing a new color scheme of the site you could place a survey on most pages, but if you are interested why users do not manage to submit forms, you will display a questionnaire only on Submission Failed page.

Besides placing the survey on relevant pages, you may additionally target a random sample of users, i.e. 10% of visitors, or show the questionnaire after a certain time on site/to returning users. Sometimes it is also possible to display a survey on an event, such as a button click or multiple mouse-overs a page element. If the software you use allows gathering user data, consider targeting certain user groups (e.g. users coming from a particular device or from a certain country).

When displaying the survey, decide how long the delay should be. If a user first needs to read the contents of the page, the delay may be up to a minute. In any case, loading the questionnaire simultaneously with the page may confuse users, so several seconds delay will still be appropriate (it will also exclude users who are in the “explore mode”, i.e. just clicking through the pages).

How

Speaking about How the survey will be set up, it can be a pop-up, a slide-out panel or a Feedback button (during user journey or placed in the header of the page). In any case, you will need to include a recognizable Close button to avoid irritating users who do not wish to participate. You may, however, display the survey again at a later point/during the next visit or allow the visitor to choose, by implementing a Maybe Later button.

What

When deciding What to include in the survey, consider the number and the type of questions you want to ask.  Generally true: the shorter the survey – the higher the submission rate. If you want to ask questions on different areas of the website, break them into two or three smaller surveys and display upon user interaction.

As for the type of questions asked, open fields and ratings will probably give you the most insights into how users perceive your site. If possible, avoid asking many yes/no or very broad questions, such as: “What do you think of our new site?”

Users may also be reluctant to provide personal details, so reduce personal questions to a minimum. In other words, every question should fulfill the purpose of the survey or be removed.

Monitoring

Once the user survey is live, continue monitoring and adjusting it, whilst carefully recording all changes made in the process. Some adjustments can be: broaden the display rules if too few visitors view the forms, reformulate a question that seems to cause misunderstanding, exclude some user group from targeting.

Reporting

Last but not least: results processing. You may report daily, weekly or monthly, depending on the traffic volume and stakeholder requirements. The reports you produce should have the same format in order to compare results over time. Questions with open fields are the most useful, but also the most time-consuming to evaluate. You can group responses into categories and later re-formulate the question as a multiple-choice, still leaving one variant as open field.

With UX/UI surveys, you are likely to get some irrelevant responses, such as comments about the product or customer service queries. Make sure to have a process to deal with such responses in place.

As a short conclusion, here are some do’s and don’t’s of onsite UX/UI surveys.

The Why, How, and What of Onsite UX/UI User Surveys

Share this post

Rapid Prototyping for Web and Mobile

In one of my previous posts, I have already touched upon paper prototyping.  This time I would like to discuss some other prototyping methods for websites and applications. I will concentrate on rapid prototyping, which does not deliver precise product copies, but rather defines the position of UI (user interface) elements and their function (this is why pixel-perfect Photoshop representations are not considered to be rapid prototypes).

But why do you need rapid prototypes?

  • You create them quickly and easily
  • You show the structure of the future website/application, leaving little room for ambiguity and misunderstanding
  • You evaluate technical and time resources needed for building an application
  • You implement and test any feedback  immediately

One important note: before you start mocking-up the design, you should have a clear idea about the content of your future website or application. Ideally, you have already written your content in a document and have thought about navigation tabs, CTAs (calls-to-action) and other important UI elements.

Industry Pages Wireframe v
A wireframe for a Web pageWireframing

Wireframing

This is a very simple method of demonstrating the layout of a website/application. The easiest way of doing it is paper prototyping. You just draw the elements of your future UI on paper, each in a very abstract and schematic way. If you want to make a more accurate model, there is different software developed specially for wireframing, such as Balsamiq Mockups or Mockingbird. Some of these wireframing tools allow you to build clickable prototypes by adding a few interactive elements, such as hyperlinks.

The main advantage of this method is its simplicity and universal applicability. However, a wireframe lacks design (patterns, fonts, etc.)  and responsiveness and thus does not give a full idea about the end product.

Style Tiles

The main function of style tiles is to represent the design of the future website. They consist of samples of colors, patterns, fonts, images, etc. placed on one sheet. This is a perfect tool for designers, however, it will be less helpful to a developer who actually has to construct the site and needs its exact layout.

Style_Tile_Template
A style tile for Miseya website redesign

HTML /CSS Prototyping

Creating a prototype by coding it has the advantage that the functionality, the usability and the responsiveness of a website can be tested to the full extent. However, though ready-made code pieces are used, creating such a prototype requires specialist knowledge and takes some time. The most common tools in this case are Bootstrap or Foundation.  After you have set up placeholder elements, you should start adding the pre-written content. This way you can control if the content actually fits the placeholders.

All in all, there are hundreds of  programs and schemes used for prototyping. This probably means that there is no one-fits-all solution.  Also, a combination of several methods throughout the product development cycle will yield better results than sticking to one method only.

Share this post