Progress wheel

It works like this:

  1. The user taps on an item to open it.

  2. A blank page with a progress wheel is displayed, showing the user that the content is loading.

  3. When loaded, the content is displayed.

Use when

A progress wheel is used to indicate an app is busy loading content to display. It can be applied to a complete screen, when the whole page has to be loaded, or only to a part of the page, e.g. in a module tab in which content has to be loaded. In addition, a small progress wheel in the title bar or action bar can be added.

The progress wheel is displayed within the current screen. So not on top of it in a dialog, nor is it triggered by a specific action from the user, like the progress wheel dialog in both cases would be. It is shown e.g. when the user moves from one app, screen, or tab to the other and the page needs some time to load the content. The progress wheel doesn't quantify the progress that's being made. For that you should use a progress bar.

If you want to show quantified progress for a certain action that the user triggered, you should apply a progress bar dialog. When you want to show the progress of an event that's running in the background, you should use ongoing status bar notifications.

The Good

  • The user knows that content is loading
  • Because loading the content is done inside the screen, instead of on top of it (as a progress wheel dialog would), the user can easily move away¬†to an other part of the app

The Bad

  • The user doesn't have an idea how long it will take the content to be loaded

    Examples

    Facebook

    1 The user enters on Facebook's dashboard, and wants to check her profile by tapping on the corresponding icon.

    2 The user's profile page is opened, but is not loaded yet. While loading, a progress wheel is shown in the content area, and in the app's action bar.

    3 When loaded, the content (i.e. images and text) is now displayed.

    Foursquare

    1 When Foursquare is launched, the title bar, tab bar and segmented controls are shown. The user's content is still loading, which is shown by the progress wheel in the content part of the screen, and in the title bar.

    2 When loaded the content is displayed.

    3 Switching to a new tab, asks for that content to be loaded as well.

    4 When done, the content is displayed.

    Android Market

    1 On the overview page of installed apps in Android market, the Google Maps app is selected to update.

    2 A blank screen with a progress wheel is shown, indicating that the content is loading.

    3 When the detail page for Google Maps is loaded, it is displayed.

    Leave a comment