Duration

Duration represents the time between a user performing an action and the system giving feedback. Consistency in timing provides comfort and can increase trust in a system.

There are four durations available to choose from: instant, perceptible, notable and cut-off.

It's important to use the correct duration to ensure the user feels in control of the interface. The duration should reflect the importance of the element or information being animated. Responses that occur too quickly can distract or obstruct a workflow (e.g., tooltips should never appear instantly as a user moves the mouse pointer over the user interface (UI)). If responses occur too slowly, the application may appear unresponsive, resulting in unnecessary clicks or potential user error (e.g., a system action occurs, but a progress component isn't displayed quickly enough to communicate its state).

An instant duration is an immediate response by the system to a user’s interaction within 0–100ms. The response should take no more than 100ms to complete. Interactions that can trigger an instant response include hovering over a button, clicking a radio button, typing into an editable field, or dragging an object. No feedback is required as the system response itself is the feedback.

A perceptible duration is a short, but detectable delay between a user's action and the system's response.

Perceptible duration is recommended for revealing secondary guidance or information to a user.

With a notable duration, the user is aware the system is slow to respond. A feeling of loss of control may occur, so it's important the delay is clearly communicated. Notable delays are intentional and may be required to load a data grid or retrieve search results. Should users experience delays longer than 1s they may feel held back by the system.

A 1s delay is usually the maximum limit for experiencing an interaction as one continuous flow. The user understands a ‘notable’ duration as a two-way interaction between them and the system. By contrast, with an instant (100ms) duration, users feel they've directly caused the outcome of the interaction.

With a delay of 1s (salt-duration-notable) there's no need to provide visual feedback to the user; however, it can be used as a breakpoint. Once a delay has exceeded the 'notable' duration, it's useful to indicate to the user that the system is working on the problem, for example by displaying a progress indicator or loading state.

Spinner is a visual representation of a process that is taking an indeterminate amount of time to complete. A spinner can be displayed at any point between salt-duration-notable and salt-duration-cutoff, but should not be displayed any sooner, as the assumption should be that the user's actions will have completed before it's necessary to show a loading state.

Cut-off, salt-duration-cutoff, is the point at which any attempt for a system to respond should finish, and a status message should be displayed.

To prevent a frustrating or unproductive user experience, the time until a cut-off duration can be used for:

• Displaying messages that inform the user of the current interaction and which processes are taking time.
• Displaying general hints and tips for using the application.
• If possible, allowing the user to continue using other parts of the UI while the content loads.

There may be a requirement for a system to continue loading an interaction for an indeterminate amount of time, past the cut-off point, due to a workflow dependency. A system may need to support a highly performant UI that concurrently updates a significant number of data points such as a trading platform.

We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.