#11 - What are the Response Time Guidelines in a monitor

Sent the July 21st

Issue Artwork by Nicholas Lokasasmita

Article written by

Juan Jesús Millo

Types of interface response time patterns

First of all, say that these principles are not determined by the system itself, or by the casuistry of the moment, but by how our brain works. These times come from Robert Miller's study in 1968 (.pdf) and will remain the same for a long time.

We can classify the response times into four sections, 0.1 second, 1 second, 10 seconds and unknown.

Immediate response time

0.1 second

Time in which the system reacts instantly to our interactions, so we feel that we are directly manipulating the interface (interaction where we receive instant feedback when interacting virtually or physically).

Components such as dropdowns or sliders must fall into this category, or else we will believe that it is the system that interacts with us based on what we are telling it.

When the output is received in less than 1 second, we will still think that the system is acting in real time and that we are in control without losing patience, but everything that happens in the second will be transformed into a sense of blockage.

In this range, the delay that is generated leads to think that the system is working to give us an answer. The purpose of every website is that each page loads in less than this time, but there is still a long way to go before those stakeholders see a ROI in terms of improving the loading speed.

Maximum time that a user feels within the interaction flow, since from this time on, users lose track of the task they were completing.

The feedback on what the system is doing is critical here in order to provide transparency on why so much time is needed. Anything that exceeds this limit is a serious block. The user here feels stuck so the probability of him leaving is very high (except for major flows such as hotel reservations or final ecommerce steps).

Slow response time

+10 seconds or undetermined

Starting from a broken flow, we must tell the user what is happening so that he knows what he can do while the process is ending. The main component here is the progress bar, with the following advantages:

It offers transparency in telling us that the system is not broken.
It tells us how long it can take to finish this process (will it give me time to make a coffee or will it give me time to do my shopping or take a shower?)
It is something we can entertain ourselves with. In this case, the role of creating animated loaders becomes especially important, something cute and funny, related to the brand or even some kind of mini-game.

If we don't know how long it will take, we can continue offering transparency in another way, like indicating how many system steps have been completed (for example, if we eliminate a batch of 150 rows from a table, the system will indicate how many rows it has eliminated with respect to the total), accompanying the text with an infinite loader.

One thing to say is that if a process takes between 2 and 10 seconds, we must be careful with the principle of display inertia, which tells us that we must minimize the changes to only what is necessary, avoiding losing context, having to reload the entire screen, or creating unnecessary flashes, can you imagine that the page has to load completely when we click/tap on a dropdown?

We can minimize this by using infinite loaders and indicating the percentage of progress in a non-intrusive way, while only showing the part that has been updated, so that the user interprets only the relevant update with respect to the original context.

Articles & Ideas

From Gut to Plan: The Thoughtful Execution Framework‍

In this article, Annina Koskinen presents her Thoughtful Execution framework —the go-to resource for teams in Spotify’s Growth Opportunities mission to reach their goals and ship with impact. Spotify.Design ‍

Collaborative design research‍

They’ve helped to bridge the gap between the isolation of the design process and the emotional intensity of collaboration. Matthew Strom ‍

The Principle of Common Region: Containers Create Groupings‍

In visual design, elements within the same boundary are perceived as related. Aurora Harley ‍

There is no “myths of color contrast accessibility”‍

A guide on picking the right set of colors for accessible components, bringing meanings around accessibility levels, along with some stats. Geoffrey Crofte ‍

An interaction design framework to cover all your bases‍

Pointers to keep in mind before delving deep in micro-interactions and pixel level details. Adhitihya ‍

Creating a UX Research System: Making your work understood as a researcher‍

Far too often, we find ourselves persuading stakeholders and selling the value of our work more than actually carrying out our real responsibilities Aravind Ravi ‍

Aren sliders better than numbered scales?‍

Each of these formatting decisions has a variety of opinions and research, both pro and con, in the scientific literature at large. Jim Lewis, PhD and Jeff Sauro, PhD

Products

Ouch Icons v2‍

Ouch helps creators who don’t draw overcome the lack of quality graphics. Download the free PNG and SVG illustrations from top Dribbble artists to class up your product.‍

Awesome Figma Tips‍

Small but awesome tips to work faster in Figma.‍

aCe Accessibility Free Audit‍

Find out if your website is ADA & WCAG compliant. Get an immediate and accurate answer to whether or not your site is compliant with web accessibility legislation for free!‍

Design Rant‍

We all try to remain positive people but occassionally we need to complain. This site is a place to vent about some of the user interfaces and experiences that drive us all insane.‍