Introduction
You’ve probably already discovered that we like to be tech-savvy and love statistics, response times, and loading indicators. Why? Because all of these items are some of the most important sources that inspire us to defy more limits. Having something palpable to show and share in a Feature Planning discussion is definitely helpful.
With that being said, let’s take a look at one of the most important parameters to add when any new feature is implemented – the response time.
What is response time, and why is it important?
Basically, the response time is the amount of time it takes a system to react to something.
We can classify response times as follows:
- Undetectable – under 1 second – the user notices the system reacting instantaneously;
- Detectable:
- 1 second – the user sees a delay in the page’s response, but the flow stays uninterrupted.
- > 10 seconds – the user encounters a noticeable delay in the system’s response, and the flow is interrupted.
Ideally, the response time should be as fast as possible (near to instantaneous), and the system shouldn’t take long to respond to any request. If it does, it only drags the users into negative feedback loops: rage clicks, force reloads, checking the internet connection, and disabling different browser extensions or VPNs, which is basically a trip to the dark side.
Since nobody wants the users to stop using their service, there is a visual way to accommodate longer but accepted response times – Loading spinners! They are also called loading indicators or the eye candy of load times!
A loading spinner is an ideal solution whenever a page, call, or step takes longer than 1 second. This way, the user can have visual feedback that something is happening – that the system is processing. There are plenty of loaders over the internet; it all depends on your framework or programming language.
Our job as QA is to test if the loading indicator is implemented correctly. Does it match the color scheme and theme of the application? Is it displayed long enough? How does it look on mobile screens? Etc.
Loading Indicators - Classification and Examples:
For a better grasp of loaders, here’s a classification with concrete examples:
- Linear or Circular
A linear indicator is used to animate an indicator along the length of a fixed, visible track. In contrast, a circular indicator is used to animate an indicator along an invisible circular track in a clockwise direction.
- Determinate and indeterminate
An indicator is determined when the process completion rate can be detected and indeterminate when there is an unspecified amount of wait time.
- Percent-done indicator
It tells the user how long the process takes to complete using numbers instead of lines or circles.
- General time estimation texts
Texts that say, “This might take a minute,” can be enough to encourage and inform the user to wait.
- Number of steps
Even if the user doesn’t know how long the step will take, at least they are informed that there are several steps to consider before a process is finished.
- Skeleton Loading Screen
The entire screen has only the outlined elements, just the places where the elements will soon load.
Tips on How to Test Loading Indicators:
Here’s how to check if loading spinners do show up (if you have a fast Internet connection):
- Use a bandwidth limitation tool like Network Link Conditioner (available on MacOS) which allows you to slow down your connectivity.
- If you’re on a Windows box, you can use Chrome Developer Tools and check the Network Throttling tool.
What to Look for:
In some cases, more than one spinner can show up. Or the spinner might not be centered while resizing the browser window. Here’s what you can do:
- Disable the connection while the spinner is active. Reconnect and see if it goes away.
- Check the consistency with the other loaders from the app – Do they match?
- Where is the loading indicator placed? Is it visible to the user?
- Is the indicator’s logic being followed? Is the loader following the logic process for percentages, steps, and determinate loaders? The application must not jump to step 6 if there are only 3 steps available.
- How would a spinner behave when you do accessibility testing and your users are visually impaired?
While all these examples can improve the user experience and provide positive feedback, it’s better not to overuse them. Creative or perfectly matching loading effects can’t solve the problem of slow loading and response times. When the users see the same loading indicator over and over again, they will soon start blaming the app for its slow loading time.
You can always reach out to us if you have any questions, but for further reference on response times and loading indicators, definitely check out these articles.
Stay Updated with the Latest in QA
The world of software testing and quality assurance is ever-evolving. To stay abreast of the latest methodologies, tools, and best practices, bookmark our blog. We’re committed to providing in-depth insights, expert opinions, and trend analysis that can help you refine your software quality processes.
Delve deeper into a range of specialized services we offer, tailored to meet the diverse needs of modern businesses. As well, hear what our clients have to say about us on Clutch!
