Faster Perceived Response Time with Angular Material to tackle Need for Speed

The attention span of end users is getting shorter with technology upgrades like high end hardware. Naturally, their Need For Speed has increased and it is quite high. An app’s user interface (UI) response time plays a major role in overall user satisfaction when interacting with an app.

Most interactions on the web result in network requests which cause delays in response time, like waiting for an order to be placed after checkout, support chat reply, filling out a long form, etc. These are a few common scenarios where an app need to provide some UI feedback of continuous operations. Handling the end-user’s need for speed in these scenarios is challenging for the front-end developers.

Luckily, we have a few tools available for the job. But before we start looking at those tools, I’d like to elaborate on the difference between response time and psychological time.

Response Time & Psychological Time

Response time is the time it takes for the app to respond to a user action. It is often categorized as user interaction response time and page load time.

Providing UI feedback for user interactions can get tricky very easily. The response time to provide UI feedback should neither be too fast nor too slow. When UI feedback is provided quickly to the users, they do not notice change in view components and it gets hard for them to understand. And when the UI feedback is too slow, the pace of interaction with the app might make the users impatient.

Based on the user actions such as slider toggle, button click the app needs to maintain a response time of 0.1 sec and show immediate feedback. Response time of 1 sec can be applied for navigating between app views. For scenarios when the app deals with async http requests, longer response time of about 10 seconds can be tolerable by users.

Progress Indicators

Progress spinners and progress bars are two UI components offered by Angular material that are used to indicate progress of an ongoing task.

Both progress indicator components have mode and value properties. Based on the nature of task completion time, the mode property in progress indicator components represents determinate or indeterminate ongoing task completion time.

Indeterminate mode can be used to give UI feedback when the response time is about less than 10 seconds. Here, progress spinners can be favored over progress bars to provide UI feedback.
In many cases, progress spinners are used with buttons, only to indicate that the button was clicked and there is a task that’s ongoing.