Our Front-End Website Testing Guide: Improve Client Experience
How many times have you been browsing a company’s website only to discover a typo, a broken link, or a confusing design feature? How did this experience impact your perception of the company? Odds are it didn’t improve your view of them. Maybe it made them seem inexperienced or inattentive to detail. Maybe, if it was a bigger flaw in the site, it even made them seem untrustworthy. How can you trust a company with your personal information or rely on them for crucial services to your business if they seem careless with their own website?
Your company’s website often shapes potential clients’ first impressions of your business, and you can’t risk damaging that impression with bad user experiences.
You have to find your mistakes before they do. Of course, this is easier said than done; no matter how talented your developers are, you likely have many, many more users than developers, and one of those users may find something that slipped through the cracks. Additionally, it can be difficult for developers – or anyone who’s very familiar with the site – to catch these mistakes, as they’ll view the site much differently than a first-time user would.
So, if making a good first impression on customers with your website is incredibly important, but your customers far outnumber your team, and your team is too familiar with your site to find issues with it, what are you to do? Fortunately, as dire as this situation sounds, there’s an answer: front-end testing.
WHAT IS FRONT-END TESTING?
At Archetype, we often perform front-end testing for our partners in order to help them polish their sites. Front-end testing is testing the part of the site that users actually see. 38% of consumers will stop engaging with your site if they do not like the experience or the design. When we test we want to ensure that the site runs completely smoothly and works correctly for end users so that they continue to use the site.
We look at how the site functions, if the content makes sense, and whether the design communicates the brand message. We also want to ensure that the site is intuitive, meaning users can easily and naturally navigate and use it. We navigate through the site as regular users would, but we also test that the site can withstand malicious or improper use.
THE IMPORTANCE OF DESIGNING SECURE WEBSITES
Building a website that can handle being used incorrectly as well as correctly is a crucial part of good design. We don’t, for example, want the site to crash when a user makes a typo in a search term and accidentally includes a special character. We also don’t want to allow the site to be exploited. This means preventing malicious use such as users viewing other users’ personal information (or PII) in their user profiles that should be private. This also means handling pathological inputs – ways a user can interact with a site attempting to intentionally cause the site to malfunction or behave in a way it shouldn’t.
FRONT-END TESTING IN ACTION
To see what this process looks like in action, let’s consider the process of testing a small but crucial feature of any site: the navigation bar. While it might not seem like there’s much to test here at first glance, there are plenty of aspects of the navigation bar that we want to examine to ensure that it can do its job and do it well. A few questions we might want to ask are:
Even though much of testing may seem straightforward, it’s clear that even in this small example there are plenty of questions to ask, and that it’s important to be sure you ask the right questions. The testing process can make a significant impact on how customers interact with a business, so we put a lot of emphasis on ensuring we do our due diligence.
COMMON ISSUES WHEN TESTING
There are some misconceptions and commonly made mistakes in front-end testing. One common mistake is to overlook constant elements on each page, such as the logo, footer, any sidebars, the navigation bar, and so on. It’s easy to believe that checking these just once is sufficient, especially since in many cases each page reuses the same pieces of code for these elements. However, it’s always a good idea to double check to confirm that these parts of the website are consistent from page to page.
As an example, we once tested a partner’s site that included a logo in the footer. When double checking that the footer was consistent across all pages, we found that one page used a variant of the logo that was slightly different from the logo used on all other pages. This wouldn’t have been caught if we’d just checked the footer once; it may not have been caught if we’d checked the footer sporadically, as the logo variation only appeared on one page. Even though much of the time these elements will be the same across the site, it pays off to check them on every page to ensure that the site is fully consistent.
Consistency across a site signals to users that the business pays attention to detail and prioritizes a more cohesive experience.
Another common mistake is to not test enough varieties of pathological inputs. This can be one of the most difficult parts of auditing; it can be challenging to switch from asking yourself “What input would a user give the site here?” to asking yourself “What input does the site expect here, and how can I give it an input that doesn’t fit those expectations?” It’s much less natural, but nevertheless it’s important to consider because we want our partners’ websites to be able to handle these unusual cases.
We encountered a case where coming up with an input like this uncovered a bug when auditing a partner’s site. Their site included an ecommerce platform. When viewing products in the cart, users could adjust the quantity of each item using a text box. We tested that the text box did not accept non-numerical characters, and it didn’t, meaning it was robust enough to handle that type of pathological input. However, we also discovered that it was possible to adjust the quantity of an item to 0. When we did this, the item wasn’t removed; the cart simply treated it as though we were purchasing 0 of the item for a total of $0.00. Because we found this in auditing, we were able to work with our partner and the development team to make sure that the site could handle even this unlikely scenario appropriately.
IMPROVING THE USER EXPERIENCE
Front-end testing is crucially important in order to fine-tune the experience users have when interacting with your brand. A cohesive, intuitive website that can withstand all kinds of use communicates to users that you take your business seriously and are committed to providing them with a good experience. Conversely, a website with bugs or typos, or a website that’s difficult to navigate, can cause users to doubt your professionalism. When we audit websites, we do so to ensure that our partners’ brands and expertise are clear and that users have a good experience with them.