Editor’s note: This is a guest post by Thomas Peham, who is a Marketing Manager at Usersnap
When it comes to developing an ecommerce site, everyone is aware of the importance of testing the web pages before going live. Due to a variety of reasons, the testing process isn’t well prepared and executed in a great amount of projects.
Whether there are smaller errors, or more critical ones, with the great number of different browsers and devices, it is our responsibility – as web developers, designers and project managers – to ensure that our website or application is performing adequately. In this blogpost I’ll show you how to get started with proper testing for your ecommerce site by making use of these five tools.
First of all: When & how to get started with testing your checkout pages?
Before we dig into different testing tools for optimizing your checkout process, I’d like to take a look at the overall process. Generally speaking, testing your checkout pages and optimising your site comes into place after your designers have created fantastic designs and your web developers are finished with coding the defined features and functionalities.
Optimising checkout pages: The holy grail of testing?
Testing isn’t easy. Your heart probably gets to sink when you think about testing your checkout process on all kind of different devices, browser versions and screen resolutions. Now it’s definitely time to start with a testing plan for your ecommerce site.
Change requests, bug reports, feature requests and a lot more. During the testing process a lot of ideas, issues and real bugs appear on the surface and someone has to deal with them.
From securing the perfect usability, to providing the right amount of information, to making navigation as easy & painless as possible.
As mentioned it’s time for a testing plan which should include the following areas:
- What are we testing?
- Which pages/URL must be tested?
- Who are we testing for?
- Which browsers are supported?
- Which mobile devices + browsers are supported?
- Which screen resolutions are supported?
- What are our limits…
- concerning time?
- concerning money? (Who pays for testing & quality assurance?)
- concerning scope? (Which devices can be left out and which pages don’t need to be 100% perfect?)
- What is our support level?
- Which devices/browsers do we fully/partially supported?
- Which devices/browsers are not supported?
5 tools for checkout optimisation
After having a clear overview about the scope and limits of your testing process, it’s time to execute your testing plan. In general, I’d like to state that no tool will solve your problems and challenges. A simple spreadsheet documenting your testing scenario can be fine, too. It comes down to what works best for you. However I’ve found the following five tools quite helpful when it comes to optimising the checkout pages and testing them in different browsers and operating systems.
Automated browser testing is probably the easiest and one of the most efficient way of cross browser testing. You don’t need to test the checkout pages yourself. You simply run automated tests with services like Saucelabs. Saucelabs is a great tool when it comes to automated browser testing in different browsers. Besides that Saucelabs also offers automated mobile testing, which I definitely recommend when testing B2C e-commerce sites.
Saucelabs services include more than 400 OS browsers and devices on which the tests can be performed. There’s also the option for unlimited manual testing.
Pricing for Saucelabs starts at $12 / month and includes 2 concurrent virtual machines and 2 hours of automated testing. If you’d like to take a closer look at Saucelabs you can try their services for 14 days for free.
From my experience Saucelabs can be seen as the ultimate tool when it comes to testing your checkout page for bugs or different issues.
Browserstack is great when it comes to cross browser testing. Similar to Saucelabs, Browserstack offers you automated, manual and real cross browser testing. You can test your checkout pages with Browserstack on a comprehensive range of browsers and operating systems.
Especially if you don’t have QA agents or an own testing team, Browserstack works fine. Simply test your checkout pages on all different devices your real users are using. You can even make use of the web developers tools of the browser your testing in. Additionally Browserstack offers the possibility to grab a screenshot and annotate it to provide feedback to your web development team.
The pricing of Browserstack starts at $39 per month which includes two user (however you can only login at once, which makes parallel testing not possible).
Both tools I’ve shown you above are super awesome when it comes to automated browser testing. If you have your own quality assurance and testing team and you don’t want to test on virtual machines/in the cloud, you probably go with manual browser testing tools. In this case, I’d like you to take a look at Usersnap. By installing the widget from Usersnap on your checkout pages, your QA agents can test your website in different browsers & devices.
With the Usersnap widget your testers are able to create bug reports and browser screenshots directly in their browsers. All bug reports are automatically saved in your project dashboards. Attached to the testers’ annotations your web developers can find additional meta-information about browser versions, operating system, installed browser plugins and a lot more.
Usersnap offers a 15 day free-trial. Pricing for a personal plan starts at 19,- / month and includes 1 project with an unlimited number of users.
If you don’t have a testing team and you don’t want to test your checkout pages on virtual machines, UserTesting may be your go-to tool. UserTesting offers you browser tests from real people. You can test any web page you’d like at any stage of your development process – it’s even possible to test your prototypes during production which is great for dealing with different issues early on.
With UserTesting you can choose from a panel of users in order to secure that the real (potential) target group is testing your checkout pages. Further on, you’ll simply create certain tasks which the testers should complete on your testing site. Of course, you add additional information about browser versions and operating system with which the tests should be conducted.
Pricing starts at $ 49,- per video with the basic plan. I’d recommend to go for it if you’d like to get comprehensive feedback from real people or if you’re not too sure about certain checkout steps.
5. Crossbrowsertesting.com and Responsinator.com
If you’d like to test your checkout pages in different (mobile) browsers, crossbrowsertesting.com or responsinator.com is good place to go. It offers you access to more than 750+ browsers across 55 different operating systems. According to crossbrowsertesting.com these browsers are running on real (mobile) devices, and not on emulators. It even enables you to test your local files which can be uploaded to crossbrowsertesting.com. Pricing starts at $ 29,-/month – responsive testing included.
An free alternative for responsive design testing is the Responsinator. Want to see how your checkout pages look on different mobile devices?
With responsinator you’ll get a cheap & quick tool for checking your checkout pages on different devices.
Getting started with optimising your checkout pages isn’t that easy, especially if you created a completely new ecommerce site. By setting up an interactive test plan and making use of one of the mentioned tools, you’ll definitely find room for improving your checkout process and increase revenue!
You can find a summary of the mentioned tools below. Feel free to check them out and test which fits best for you and your QA team.
Besides the optimisation part you have to be aware of different cultural aspects while setting up your checkout/payment gateway. In some countries the integration of 3rd parties for the payment page is quite common, which means that the users are trained that these 3rd party integration is the most secure option.
Soft facts to consider
That said, there are also users who prefer well-known 3rd party payments when paying on smaller ecommerce sites which aren’t that known. In particular these 3rd party payment pages can increase trust & authority when dealing with international orders.
Your action plan for optimising your checkout process
You’ve now read about getting started with optimising your checkout process. Actually doing it, is something different. Getting started with optimising your checkout pages, I’d like to suggest carrying out the following actions:
- Set up a test plan (and think about scope, budget & limits)
- Create a list of relevant browsers, operating systems and support levels
- Check out the mentioned tools and sign up for the one which seems the best fit for you
- Create a time frame for your testing and QA steps
- Start testing your checkout pages and document findings, issues, bugs and tasks in an issue tracker
Share your thoughts with me on twitter or in the comments below.
About the author:
Thomas Peham is a marketing manager at the austrian startup Usersnap. He specialized on inbound & content marketing. In his spare time he writes about marketing & tech trends on his blog. Get in touch with him on Twitter.