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.

Nielsen Norman Group recommends the following response time durations. 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.

While there are several ways to optimize an app’s response time, we will be discussing the user's perceived time in this post. I.e, the psychological time.

Psychological time is time perceived by the end-users while interacting with the app. One of the most effective ways to optimize psychological time is by providing transparency to users by sharing more details on the ongoing task. Details such as the current progress of the task and the task’s completion time help users better perceive psychological time, as it gives an indication of how far along they are in terms of the ongoing task and how long they have to wait. An app that shares these details as UI feedback, paves way for more friendlier and enjoyable user interactions.

However, sharing the progress of the ongoing task can not always be possible and the task completion time cannot be determined in all cases.  The UI feedback can either be static or dynamic depending on the absence or presence of current progress of the ongoing task. The absence of current progress makes UI feedback static, while the presence of current progress makes UI feedback dynamic.

Now let’s discuss ways to optimize psychological time while using Angular Material for providing UI feedback in your app.

UI feedback with Angular Material

There are different UI components provided by Angular Material that can be used for providing feedback to the user about the ongoing task. Let’s discuss when and how to use these UI components to optimize the psychological time for an app’s ongoing task.

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.

<button mat-raised-button color="primary"> Submit
	<mat-icon>
        <mat-spinner color="accent" diameter="20"></mat-spinner>
    </mat-icon>
</button>

When task completion time can be determined, the developers can display current progress of the ongoing task as progress value to the UI feedback. The value property of the progress indicator components takes a numerical value and corresponds to the current progress of the ongoing task. Below is an example of  how it can be used:

<mat-spinner [diameter]="50" mode="determinate" [value]="70"></mat-spinner>
<br />
<mat-progress-bar mode="determinate" [value]="70"></mat-progress-bar>

For longer tasks where the UI response time is greater than 10seconds, it is recommended to use progress indicators with determinate mode and dynamic progress value of the ongoing task as UI feedback.

Details describing the current progress of the ongoing task can be added for more transparency. For instance, descriptive details that explain the progress of the ongoing task can be: fetching data from server, sending your message, storing file, working on placing your order, etc. This allows the users to perceive and tolerate psychological time better. Simply because the users now have more transparency with the UI feedback to perceive an approximate estimate of when the task is going to finish, so they are likely to wait.

Furthermore, Progress indicators when used within dialogs, can include the option to cancel the ongoing task, giving more freedom and control to the users. This makes the UI tolerant to errors, giving the users ability to undo or redo.

See the interactive stackblitz demo of the progress indicators below (link)

Some Other Ways of UI Feedback

Placeholder UIs

The placeholder UIs are being increasingly used in popular apps like Instagram, Slack etc.

Placeholder UIs are something that are not offered off-the-shelf by Angular material. There are several libraries like ngx-skeleton-loader, that provide components to create placeholder UIs in your app.

If you don't want to add another dependency to your app, you can use a simple DIV and some css to create a placeholder skeleton yourself. A simple example placeholder UI (stackblitz) below:

The placeholder UI’s are a good fit to be used when the task completion time cannot be determined at all times. In addition to indeterminately indicating the ongoing task in the app, the placeholder UIs are slightly more informative. They minimize surprise and let users know what content structure or skeleton to expect after the task is complete. This gives users a feeling of speed and thus optimizing psychological time.

Optimistic UI

A few apps adopt an optimistic approach, where the UI reacts optimistically instead of waiting for the ongoing task to complete and handles failure gracefully by notifying the user of any failure once the task is complete. A good example of this is the upvote button on StackOverflow, where the UI gives immediate optimistic feedback first. Incase of task failure, a notification is provided as a snackbar on top.

Custom Animations

Animations and graphics catch the user’s eye and allow the UI to feel more relatable and friendly. Many apps use custom loading animations as UI feedback to indicate progress. Usually these custom loading animations are in the form of progress spinners that can serve as UI feedback for indeterminate tasks with shorter response time. When used as feedback for longer response times, it might make the users impatient. If the current progress of the ongoing task can be shared and more descriptive details are added, it will improve transparency and optimize psychological time.

Ngx-spinner is a library that has multiple such spinner options.  

Progress Bar within Stepper

When users are interacting with a long form, the completion time of this task can make the users impatient. UI feedback should be provided to help determine the number of remaining  form fields the user has to fill. Angular material provides steppers to divide a task into shorter steps.

The stepper UI indicates the number of steps the user has to do to finish this form. It is recommended to make the steps of uniform size, i.e., include the same number of form fields.

However, in cases where one step is longer than the other, including a progress bar within the stepper UI will give users feedback on how far along they are in order to complete the particular step.

Thanks for reading!