Back to overview

Animation and transitions

The Scout app uses solutions that are based on the specifications in the style guide.

Popups and settings menu

“Display” animation

In popups and the settings menu, the element slides from the lower border of the screen to the target position.

Popups and settings menu  

Wireframes: Scout app

“Hide” animation

The elements disappear with a flowing fade-out effect. They do not move.

Update

Update  

Activity indicator

The activity indicator is displayed while updates are being downloaded.

The “Filling waiting times” section distinguishes between different types of display.

Panning area on the start screen

Panning area on the start screen  

Panning area on the start screen

The panning area at the top of the homepage enables users to scroll elements from left to right and vice versa.

Category pages

Category page with open navigation  

Category page with open navigation

The menu buttons in the left-hand navigation menu are selected one after the other:

  • This goes from top to bottom. When the bottom is reached, it goes back to the start.
  • Every time a product is selected it is displayed in the contents area.
  • It appears with a fade-in effect and disappears with a fade-out effect.
  • A time offset ensures that the content stays visible for long enough for users to see it.

Slide decks

Slide decks support horizontal swiping. Swiping switches between the various slides in the deck. Make sure that the slides follow the finger while the swiping gesture is being carried out. This includes:

  • Swiping gestures from right to left: the current page slides left and disappears. The new page moves onto the screen from the right.
  • The same applies in the opposite direction.
Slide decks  

Wireframes: Scout app

Menus

In the Scout app, menu buttons are animated in two ways.

Example 1: navigation menu, left:

  • When the user navigates one level deeper, the current group of menu entries slides left and disappears from the screen. The new entries slide into their final position from the right.
  • When navigating to a higher level the animation does the same in reverse order.
  • More information can be found in the “Buttons” section and below.
Menus  

Wireframes: Scout app

Example 2: settings menu:

  • When the user opens the settings menu and moves one level down, the current view slides left and disappears from the dialog. At the same time, the new content slides in from the right.
  • When the user navigates up a level, the transition takes place in the opposite direction.

 

Menus  

Wireframes: Scout app


Back to overview
Best practice – Scout app

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect