Think outside the box

Time to Think “out of the box”

As testers, our passion for quality and taking pride in our work can sometimes be seen to conflict with other project priorities, like the need to deliver at pace, and to rapidly adapt to change. As I alluded to in my last blog, technology is changing so quickly that there is no longer a one size fits all testing approach; no two platforms are the same, and no two customers are the same. At Eclipse, while we have a defined test strategy and some core testing processes on which we base our approach, there is often a need to tailor the way we work.

I was recently discussing the importance of testing Magento Commerce, and the differences in approach to other platforms, when I was asked a question which I was very familiar with; “If we’re taking a platform that is fully tested out of the box, and we’re plugging in already tested extensions, then why do we even need testing in Magento Commerce projects?”

And this is a question that not only applies to this product, but other products or platforms which are sold as fully tested core packages. So why should we test something which is “out of the box”? Great question!

 

What does “Out of the Box” even mean?

Out of the box is a term that is “used to refer to the immediate usability or functionality of a newly purchased product, typically an electronic device or a piece of software.” So by this definition, it’s understandable that people would question why it would need an additional level of testing, but let’s think about a real life example.

 

Building from the ground up…

Let’s consider a scenario where you are investing in a new build home. You have secured your plot, seen your house plans and visited the show home. You have specified all your extra requirements in terms of materials, fixtures and fittings and you wait eagerly for the build to be completed. You are likely to visit throughout the build process to see progress, discuss any issues or changes as they arise, but you are dependent on your contractors to carry out all build work for you to a high standard.

Let’s assume for example that you have selected a standard bathroom suite but opted for a different model or brand of electric shower to those usually recommended. Before you come to move in, you are relying on your appliances to have been installed and confirmed as working. If at the point you come to use your new shower and find that it is working but there’s only cold water coming out of it, you become the person triaging defects to get them resolved.

The point here is that installing a shower is in theory low risk because hey, it’s a shower, we install them all the time, right? It’s only when you come to use it that you find something doesn't work due to a fault with either that specific product, or how it is installed in that particular setting, that you're then going to have cold showers to look forward to when you get the keys!

If you’d have had the option to have some additional testing done to guarantee that everything has been installed properly, is working as expected "out of the box" and fully meets your requirements, would you? You are likely to say yes to gain some additional confidence in your investment and more importantly peace of mind on move-in day.

 

How does this apply to Digital Testing?

In the Magento Commerce example, we offer development services that help clients to get set up with the core product, plus combinations of extensions from varying sources that are specific to the client and their use cases. This development also then includes elements such as data feeds and additional configuration that begins to take the standard Magento product and turns it into one that meets your requirements.  Testing here plays a vital role in verifying these requirements have been met, confirming that your now customised product does what you need it to.

As pointed out in the real-life example, the same applies. If you just install an extension into Magento and assume it’ll work as expected (because of course the extension has been tested before it is released to market) things will be great. Potentially it will and as before, the water will come out, but most of the time it’s not always possible to check every possible scenario due to time or budget constraints. Unfortunately, in the world of testing, we see that a lot of the time basic requirements are not met where things are left to assumptions. Ensuring there is a good solid test strategy defined means that things don’t get left to chance, leaving you with a shock when things go live. We build confidence in quality and reduce these risks throughout your build process.

It also allows you to get into the minds of your core users, which can be defined by identifying your user personas, as Lucy in our Experience team has identified in her post.

So, before you start to cut down your testing scope, here are some points you should think about if you are asked to reconsider your approach:

  • Any customisation or change to the standard configuration (no matter how big or small) is a change to what is tested “out of the box”.
  • Testing for base or core product packages focuses only on sample use cases – not real-life scenarios specific to those of your business or your customers.
  • Data can impact the way a system behaves, especially in terms of presentation of data, data validation rules and performance.
  • Configuration is always different depending on the client, industry, use case, and even within the same industry no two clients will be the same.

If you’re struggling to define your test approach, why not talk to us? We’re here to advise and guide you on how you can give the right things the right level of testing focus to make sure quality is not compromised.


2020 fridge magnets

Our Top 5 Posts from 2020

2020 is behind us and the new year has begun but we thought we'd take one last look back at our Top 5 posts from our blog. We wrote a lot of different kinds of articles over the year from opinion pieces on the industry to guides on how to get the most out of your digital store front with design and CRO and these 5 are the posts that users were drawn to and spent the most time with.

Here is our Top 5.

 

AR & Furniture Retail | A match made in heaven? We Think So.

Read Post

 

 

Is Magento a good choice to launch your first online store?

Read Post

 

 

 

The ROI of UX & why not investing in it is a huge problem for you.

Read Post 

 

 

What it a User Journey Map?

Read Post

 

 

 

Testing in testing times

Read Post

 

 

 

We hope you enjoyed our posts and insights in 2020 and that you'll be joining us again this years as we've got even more great stuff planned.


Man at desk with 3 screens

Testing in Testing Times

For many of us, these are “testing times” indeed. In the run-up to 2020, there was a sense of optimism about the future. Businesses were working harder to achieve a good balance between in-store and online, with a lot of focus being put on harmonising the two. There were big projects on the horizon. Investment in technology was ever-increasing. And Coronavirus or COVID-19 was creeping into the headlines…

Digital IT is an ever-changing world. Often described to me as “the place to be” in terms of my career, the last 8 months have shown that IT, Digital and Ecommerce really have paved the way for a step-change in how we shop and interact with businesses. Many companies have had to rapidly accelerate their shift towards digital and digital strategies, as physical stores were impacted by closures, social distancing, and restrictions since the first lockdown in March. As we at Eclipse recognise, shopping trends are changing, and technology is essential. Ensuring we are delivering rapidly, but maintaining high levels of quality is as important as ever to maintain customer satisfaction, and to lure perhaps hesitant customers into this new digital era.

In these testing times, we talk now more than ever about needing to deliver quality solutions, but as we know quality is often sacrificed when time and cost are a greater factor. So how can we adapt our software testing practices and align with the changing world of digital? Here are some top tips for making Testing work harder within your organisation in the right ways.

 

Test Early!

There is a lot written about testing early and a lot to be said for the benefits of it. “Static analysis” or “testing a work product without the work product code being executed” is a useful testing phase that is often neglected. The word static itself implies that nothing is moving or changing and when there is an urgency to deliver, the focus is often to get cracking with the development and ask questions later. But taking the time to fully understand a requirement, by thinking and talking scenarios through, can result in less rework at later stages in the development lifecycle (after testers have found the coded defects). As testers in Eclipse applying Agile methodologies, we utilise our static testing skills during product backlog refinement sessions, collaborative discussions with developers and analysts, asking the right questions (my personal favourite is “what if?”) and detecting defects early before they have been coded!

 

Try “Trifecta”

The Trifecta also referred to as the Three Amigos, is a name given to the 3 roles of an agile team who will discuss, refine, groom, enrich and identify the best solution approach for every Product Backlog Item (PBI) taken into a sprint – Analysts, Developers and Testers. By involving the right individuals from multiple disciples in discussions about solutions and keeping the communication channels open throughout makes a HUGE difference. Having Trifecta sessions including analysts or owners of the requirements prompts discussions on differences in understanding, fuelling our test early principle and saving time and cost throughout.

 

Prioritise!

Everyone wants to have the most beautiful fully functioning website. As software testers, it is in our nature to strive for the best, but we know that this takes time. At Eclipse, we know that prioritising our effort based on factors agreed with our product owners and teams can make all the difference – the age-old debate of breadth vs depth of coverage. We ask about the MVP, we calculate risk and we focus our efforts where it matters. This allows us to be confident in quality levels whilst supporting building the backlog of improvements to be tackled over time.

 

Test!

This might sound strange in a blog about testing, but don’t neglect or underestimate the benefit of any form of testing. Done in the right way, testing can save time and effort in the future, and ultimately could be what protects your reputation. I have seen first-hand how neglecting testing effort can then go onto have the butterfly effect – it can take one customer or end-user to find something that affects their experience, and damage limitation has to come into play. At Eclipse, testing and quality assurance is a default part of our services. We give it the attention it requires and deserves (whilst prioritising our efforts of course!)

 

Automate!

Look for ways to complement your manual test cases, reap the benefits of reducing the repeatability and allow your testers to focus on testing more complex cases; those which often require more thought and are perhaps exploratory in nature. At Eclipse, by automating those repeatable but critical tests based on factors such as those with high business value or functionality where the level of regression and defect rates are high, we have helped our customers to move from irregular large releases to regular iterative releases. A little investment goes a long way; the investment in the short term pays dividends in the long term by increasing manual testers efficiency and effectiveness.

 

If testing is something that you feel needs a little more attention, speak to us about how Eclipse can help you with your Testing approach to ensure you are getting the most out of your processes, tools and teams.


2 people looking at phone

How to Conduct a UX Audit

What is a UX Audit?

A UX audit is an analysis to discover how users are interacting with your website, product or app. This is usually done to optimise your site for better conversion or better user experiences. The audit will provide recommendations for tests and improvements that can be made to your site. These suggestions are based on the data and research found through the audit. An audit will help you uncover some of the struggle's users are having on your site so then you can enhance the experience.

 

What is the Benefit of Conducting an Audit?

Great user experience is something that customers are coming to expect from brands. Conducting an audit is the first step in improving those experiences. The value of UX can be seen in the numbers “Forester Research shows that, on average, every dollar invested in UX brings 100 dollars in return.” (Forbes.com 2017) Eclipse clients have experienced this themselves for example, on the first round of the conversion rate optimisation (CRO) programme, HM Post Office reported cost savings of over £250,000 within the first 6 months.

 

What to do Before Starting the Audit

Define business objectives – It’s important to understand the goals of your organisation so you have an aim for your audit’s solutions and outcomes that you can measure against the objectives. Without them, the report is subjective and not measurable. Usually, the goals are around conversion rates and user satisfaction.

Decide on your resource – The amount of time and money you can commit to an audit will have an impact on the output. If you choose to do an audit in two days this will not have as many actionable insights but maybe you need a quick turnaround. Make the decision that is right for your business before you get started.

 

The Audit Processes

Find out who the users are – Define who your users are, their demographic, how they’re getting to your site, and what device they’re using to access it. Platforms like Google and Adobe Analytics can be great for getting this information. Alternatively, your business may have a set of user personas, these will be helpful at this stage. If not, you should look at creating some and this post gives you everything you need to think about when creating them.

Analyse user behaviour – This can be done by using tools to track user's behaviour on your site. You may already have tracking and analytics on your site, or you can set it up at this stage. You should look at heatmaps, mouse flows and screen recordings to see current customer flows to identify any patterns or pain points on the site. This can highlight any pages where you see lots of users exiting the site or getting lost or stuck on a journey.

Collect user feedback on your site – Feedback collected from users can be cross-referenced with the behaviour analysis to back up comments and claims made by users. Many tools can be used to do this, for example, Usabilla and Hotjar.

Review performance of the site – Test the loading speed and check for errors. A slow website can be a disaster for your business with users leaving before getting past the first page. Errors and bugs will cause trust issues and identifying these problems so that they can be fixed is vital to improving your website.

Competitor analysis – Look at industry trends and competitor solutions. Seeing how competitors' websites or products compare to yours gives you an idea of what users expect from your site.

Go through the basics – Check the accessibility, for example, are the colours and font sizes appropriate. Making your website or app accessible will make sure it can be used by as many people as possible.

Analyse page hierarchy – Is it obvious what the user needs to do next. Common problems users have on a website are not being able to find the information they want or not knowing what tasks they need to complete. Spending some time looking at the page hierarchy will help you to spot if this is an issue on your website.

Page Analysis – Look at each page of the website and rate it based on best practice solutions. The main areas to focus on are:

  • Header
  • Footer
  • Search
  • Homepage
  • Product listing page (PLP)
  • Product display page (PDP)
  • Basket
  • Checkout
  • Account
  • Accessibility
  • Performance

Break down these areas further within each section for analysis. For an example of this type of analysis, take a look at our report ‘The state of UX’. It looks at some of the big players in the electronics market and how their sites are stacking up.

Opportunities – Look for other improvement opportunities and usability issues that come up on reviewing the site, make sure you capture these as you go.

Review functions – Look at how well functions such as search and filter work. Is there any room for improvement?

Complete report – Once you’ve collected all the data it’s time to put it into a digestible format. This will highlight the key findings and present hypothesis and solutions to test and implemented on your site.

 

What Next?

Hopefully, you found this useful and you now have a set of hypothesises to test but what’s next? Once you have all these ideas it’s time to create a backlog. You should fix any critical usability first. Then categorising all the issues by the effort required to put them in place and by the impact they will have on the business goals. This will determine their priority.

If you would like some help conducting a UX audit or implementing and coming up with solutions for problems that you have found, we would be happy to help. Get in touch and we can find a solution for your business.


Website Speed Tips

6 Tips to Increase Your Website Page Speed - Part 2

Looking to get a better page speed on your website? Look no further...these tips will get you moving.

Upgrade your server to HTTP/2

HTTP/2 has been a long time coming, for too long we’ve been building on top of a legacy protocol, this means a lot of our techniques have been put in place because we’re working with HTTP/1.

One of the many benefits of HTTP/2 is that we can now download assets in a much more fluid way, HTTP/1 forced us to download assets in batches, this was useful to keep connections open but meant we’d wait for the largest file to finish before we could move onto the next batch.

HTTP/2 has done away with this meaning that we can now download assets as soon as we finish any other asset currently being downloaded, this means that techniques like concatenation of files and turning images into sprites are now not best practices and should be avoided, favouring more smaller files which can be downloaded and displayed to the user as and when they get delivered.

HTTP/2 does have some requirements, one of which being browser support, the other being that it must be used in conjunction with a valid certificate. Both of which aren’t a problem to get over to help you reap the rewards of HTTP/2.

HTTP/2 has other huge benefits, Daniel Stenberg has written http2 explained if you’d like to dive in deeper.

Optimise for the critical render path

If you’ve use Google Page Speed Insights, you’ve seen this phrase. This is a much more complicated challenge than anything else we’ve discussed so far, but I’ll outline what we’re trying to achieve here.

The critical render path defines the assets required for the browser to do it’s first render, this means everything the browser first sees when scanning the initial HTML that’s delivered. The challenge of optimising the critical render path is all about prioritising your assets to get that first render as quick as possible.

This means we may want to delay our JavaScript completely, we may even want to delay a large section of our CSS and only focus on what the user can see which, if they are on mobile, could be as little as the header and some initial content. The goal here is to try and make our critical render path so small, that even on a very slow network, we could get for that ever ideal goal of our first render happening in under 1 second.

The reason this is a more complicated solution than anything we’ve discussed previously is that after we’ve delayed all those assets we then need to pull them in in a way that isn’t jarring for the user and doesn’t impact the rest of their experience. We still need all these assets delivered quickly and giving to the user without them noticing.

Ilya Igrigorik has done amazing work on the critical render path and you can see his video here.

Increase your perceived web performance

Okay, so this isn’t going to make your website faster on any metric, but it can have just as much impact on your user experience.

Perceived web performance is all about how fast your website feels as opposed to how fast it actually is.

There are a few accepted ways of increasing your perceived web performance:

Sleight of hand

I call this Sleight of hand because it works similar to how a street magician can steal your watch, we are essentially distracting the user while we load the assets to the website. The most simple way of doing this would be adding in some animation while loading in a new section of the website, if our animation takes 2 seconds and it takes us 1 second to load in the new thing, the user may not even realise it’s taken any time before they can interact with the new part of the website. If this seems pointless to you, the web already uses this a lot and you’re probably not even noticing it.

Skeletons

This is a technique that is heavily used by social media website such as Facebook, Twitter and Instagram, the technique here is basically just loading in something that looks like the asset the user is trying to get at. In the case of Facebook, who use this heavily on your timeline, it’s a dummy post, your brain is already expecting to see a post so by seeing this skeleton in place, your head is already partly accepting the fact that the page is loaded. This is really effective and although has no increase to the actual page speed, it can increase your conversion rate massively.

Keep ‘em busy

This should be saved for when we’ve got a long wait that we can’t speed up for some reason, give the user something to do. The gaming industry will often give users a mini game to play while they load the main game. This could be a simple version of what they’re going to be playing or a tutorial. We could just give the user some information, if we’re a holidays website, we could display the weather while we’re doing some heavy processes that can’t be sped up for example.

Everything I’ve said about are all web performance techniques that actually work, I’ve implemented them, I’ve seen the results and I can vouch for them.

I’d love to hear your stories implementing some of these results, equally, I’d love to hear some of your web performance techniques that do or don’t work, so please reach out in the comments.


eCommerce Site Search Best Practice

eCommerce Site Search - Best Practice

In this article, we discuss the importance of a good search bar and how to make the most of yours.

On eCommerce sites, up to 30% of visitors will use the site search bar to navigate.

These users are showing a clear intent to purchase by entering product names they may wish to browse. Therefore, you want to ensure you’re making the most of it and create the best experience for your visitors.

Make it easy to find

This probably sounds simple but it’s very important - make it easy to find. If the user can’t find the search bar, you could be losing out on that potential extra 30% of sales. It doesn’t necessarily need to be too big or bold but users should be able to find it quickly when they arrive at a page and look around. Here, Halfords have gone as far as to dim the rest of the site when a user clicks on the search box.

Positioning the search box

The position of the search box on the site can influence the user's decision to make use of it to look for products. Navigation should be clear across the entire site, including the site search boxes. This is so that visitors can move around easily, whichever page they happen to arrive at.

However do bare in mind that you want to avoid any confusion on your site. So to do so, make sure you do not locate the search bar too near to other boxes, such as newsletter sign-ups or postcode searches for stock information.

Use autocomplete for site search

By applying this feature to your search bar you improve the search experience by reducing the work that the visitor needs to do. As they type, products are suggested. The use of images not only provides a visual appeal but it also allows them to check the products quickly, such as is shown with PrettyLittleThing.com

If I were the user and I typed in ‘red’, not only do suggestions appear, such as ‘red crop top’ and ‘red denim skirt’ but images appear too which makes the experience for the user better as they get to instantly preview the items.

Filtering the results page

 

Whether a customer clicks or leaves your website can be down to your search results page. Not only do you want the searching experience to be easy and hassle free, you want to bring up relevant results.

With a good site search engine, you should be able to customise your users search to great deal. For instance, if you were a womens fashion retailer, one of your visitors could search for ‘black dress’ and all black dresses would appear. I have used retailer ASOS for this example (see images).

That user should then be able to filter their search more by features such as size, length (do they want a midi, mini or maxi length?), price and so on. Using filters helps to narrow down the options available for the customer so they aren’t overwhelmed and can therefore find their desired item faster.

You can see that just by adding a few filters the search for black dress has gone down drastically.

Track your searches

Some tools you should be taking advantage of are Google Analytics and Google Keyword.

The majority of search engines or hosted searches will keep a list of search terms that users have been looking for on your website. This is a great way to keep track of what the most popular items are and you can see what users are after. With this information you are then able to place these items nearer the top of search results.

Leaving the right breadcrumbs

It can be very irritating when a website produces breadcrumbs like Home > Search > Your Search Result. But leaving the right breadcrumbs can make the users life much easier. People use them to get a more precise search. Helpful breadcrumbs allow people to search without clearing everything and starting from the beginning.

For instance, using this John Lewis camera search query, we can see that convenient breadcrumbs have been left on the site. The item selected while browsing, in this example the Sony camera, might not be exactly what the customer is looking for, therefore leaving useful breadcrumbs such as ‘Cameras & Camcorders’ or even ‘Electricals’, makes searching easier. Furthermore, a faster and hassle-free shopping experience will more likely result in a sale.

Make sure it works and it’s fast

Or risk losing revenue. There is correlation between the amount of users who purchase something from your website and the load time. The same is true for search results. When load times increase, profit decreases. Amazon reported that “one additional second would cost them $1.6 Billion dollars in sales”. Therefore, run tests and ensure your load time is acceptable - this includes checking the load time on mobile devices.

When considering search result load times, even loading time by half a second can be detrimental. In 2012 Google conducted an experiment on search results by increasing results from 10 to 30. The outcome showed that revenue and traffic decreased by 20% because the additional search results took milliseconds longer to load.

Give search suggestions

Placing suggestive text in your search bar will encourage or prompt the user to search for something on your website, but make sure you limit your hints to just a few words.

Not only does a sample search query give them suggestions but it also makes it clear on what they can search for on your website and how many criteria are available. For instance Triavago.co.uk search for hotels and have given ‘New York’ as their search sample, whereas Odeon have given multiple samples, ‘Films, Cinema’s and Questions’.

 


Website Speed Tips

6 Tips to Increase Your Website Page Speed - Part 1

As anybody who knows me will tell you, I’m a huge self-confessed web performance geek, I love websites that download fast, I believe that fast internet is a basic human right and I think hotels that claim to have WiFi but instead have LiFi (WiFi that doesn’t quite seem to download anything) are criminal and should be boycotted.

This means that I’m always on the hunt for a good website performance technique and I thought I’d share 6 of the best web performance techniques that work every time.

Reduce the size of your images

The most commonly overlooked technique to get a faster website, can not only give you some of the biggest rewards but it’s also the easiest technique to implement.

There are a few areas in which you can reduce the size of your images:

Reducing the aspect ratio
This sounds very obvious but a huge amount of websites I’ve optimised and found that their main banner at the top of every page is 5000 pixels wide but is being displayed at 20% that. Just by reducing that you can save yourself a huge amount of bytes and therefore save your users from a huge download for no real benefit.

Make sure you’re showing the right image for the device
If your customer is viewing your product on their mobile, show them a version of the image that’s no wider than the device. When CSS is used to reduce the size of an image, it’s still the same size to download, just the browser then has to process it to the size required by the CSS, adding more time. Consider looking into srcset which is becoming more widely supported.

Compress the image

Tools like TinyPNGTinyJPG and ImageOptim can save your users from many kilobytes of download without reducing the visual of your image in any way your users will notice. This means that you can save a large amount of bytes on your page, without actually impacting your users. If you can have this built into your media upload, you don’t even need to think about it.

Reduce the ‘quality’ of the image

By reducing the quality of our images, we’re really talking about simplifying the amount of colours being used. This means that we can not only reduce the file size but also making tools like Gzip more effective. Other more advanced techniques of this include reducing the quality significantly to the point where you can see but saving the image at double the resolution, this has been proven to deliver even smaller file sizes without impacting the asset visually.

Remove old and unneeded code

Technical debt is an unavoidable part of any development, making sure you go through and remove old CSS, HTML and JavaScript is hugely important, though.

A few common areas that get overlooked regularly:

Removing vendor files

Pulled out an old version of a carousel or a split testing tool, make sure to pull out the assets as well, that includes the JS and CSS that goes with it.

Removing losing variants of split tests

Very often I’ve seen examples where 2 or more versions of the same element have been created and tested. After this has been analysed and a winner decided, the traffic is pushed down one stream to the winning variant only for the old versions to be forgotten about. Make sure to remove any old code associated with the losing variants of the split test.

Not including the entire framework

This is the most common cause of removing unneeded code, when people include frameworks like Bootstrap or Zurb, they very often include the entire framework, this means all the JS and CSS that build elements that the website might never even use. You can build these files up as and when you need them by not including the unneeded Sass files or only downloading part of the JS. For instance, the entire bootstrap CSS and JS is 668KB whereas the bootstrap grid is just using the grid is 13KB. You can use the customize tool on the Bootstrap website to do this for yourself and tailor the download to your needs.

Prioritise your assets

This is equally as important as anything else, make sure you’re downloading your assets as and when you need them. The simplest case of this is making sure to put your CSS in the head of your file and the JS in the bottom.

Even more than this though we can look at preloading pages and lazy loading.

Preloading

Preloading is when you download an asset before the user requires it and store it in cache or local storage, this means when they get to the area of your website where you think they might need it it’s already available and you don’t have to download it. A good example of when this could work is if you have a booking flow on your website, your booking flow will probably have some extra functionality, so before the user clicks on the search button on your booking engine, you could preload some of this functionality meaning you can load the page quicker and hopefully convert that user.

Lazy loading

Lazy loading is the other side of this, delaying your assets on the page the user is currently looking at until they actually need them. If for instance, you’ve got a gallery on your page, you don’t need to load all of the images the moment the user lands on the page. A more optimal way of doing this would be to download nothing at first, this allows for the first render to happen. Once we’ve displayed the page we download the first couple of images, and maintain being 1 or 2 images ahead of the image in view. This means you’re not downloading images that your user might not ever see but still make your users feel everything is instant as they slide through your gallery.

This is part 1 of a two part series, read part 2 here.

Everything I’ve said about are all web performance techniques that actually work, I’ve implemented them, I’ve seen the results and I can vouch for them.

I’d love to hear your stories implementing some of these results, equally, I’d love to hear some of your web performance techniques that do or don’t work, so please reach out in the comments.