Made by Opower UX

Loading and progress

If an interactive experience involves multiple steps or calculations, it’s important to surface those things in the interface.

There are a few scenarios where loading or progress indicators are important:

  • Something is being calculated or loaded
  • The user is working through a series of tasks
  • A process or goal is unfinished

Loading indicators

`spin-loader`
`cubes-loader`
`potion-loader`

These indicators are useful for describing a process that is currently running, calculating, or otherwise “working.” The message to the user is “hang on, something is happening behind the scenes.” Nothing should be required by the user—these loading spinners should always be temporary, quick to disappear, and indicative of an application process.

{% toggleText('loaders') %}
  • Only use for brief load times—these indicators create an expectation that something will happen in a few seconds
  • Don’t include multiple loading indicators on 1 feature

Loading spinners in AngularJS

If you’re developing on the Nextweb platform or otherwise using AngularJS, you can easily add an Opattern spin-loader to your app with the op-spin-loader directive.

{% toggleText('op-spin-loader') %}
$ npm install opattern-angular

// Inject op-spin-loader as a dependency
angular.module('your-angular-app', [
    require('opattern-angular/directives/op-spin-loader').name,
    // ... more injected dependencies
]);

// Import the spinner styles into your stylesheet
@import '../node_modules/opattern-angular/directives/op-spin-loader/index`;

tunneling|~~~|

User progress

When users are moving through a series of actions, it’s helpful to remind them where they are, what’s coming next, and how much time they’re committing to the task. A progress meter is especially useful if we’re “tunnelling” users to finish an action consisting of multiple steps.

Simple progress meter

{% toggleText('progress') %}

A basic progress meter is useful to passively show that something is unfinished. For example, if a user has missing information in their home profile.

  • Show that a task is incomplete
  • Less useful if the sequence of steps is important

Labeled progress meter

  1. Step 1
    Wash
  2. Step 2
    Rinse
  3. Step 3
    Repeat
{% toggleText('labeled-progress') %}

    
    
        
  1. 
            
    
                Step 1
            
    
            
    
                Wash
            
    
        
    2. 
        
  2. 
            
    
                Step 2
            
    
            
    
                Rinse
            
    
        
    3. 
        
  3. 
            
    
                Step 3
            
    
            
    
                Repeat
            
    
        
    4.

If the action the user is taking has 3-6 discreet steps in a specific sequence, it’s helpful to label the progress meter’s segments. People are more likely to complete complex tasks if they know what they’re getting into.

  • Ideal for sequences of 3-6 steps
  • Don’t over-explain the steps—keep descriptions to 1 or 2 words

Check-off progress

  1. Wash
  2. Rinse
  3. Repeat
{% toggleText('checked-progress') %}

    
    
        
  1. 
            
    
                Wash
            
    
            
    
                
            
    
        
    2. 
        
  2. 
            
    
                Rinse
            
    
            
    
                
            
    
        
    3. 
        
  3. 
            
    
                Repeat
            
    
            
    
                
            
    
        
    4.

Sometimes, it’s important to communicate that if a step is finished, it’s done for good—the user will never need to repeat it (for example, the user submits an outage report). A simple checkmark is a subtle visual cue that something is complete, even if the overall task still has a few steps left.

  • Use checkmarks to indicate the user won’t need to repeat the step
  • Don’t use icons other than checkmarks
Lists
Notifications