Back to overview

Screen types and structure

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

Loading screen

Loading screen  

Loading screen for the Scout app

The loading screen is the first thing the user sees when starting the application. The purpose of the loading screen is:

  • To fill the time required to load the application.
  • To communicate the brand
  • To introduce users to the application

The loading screen should always be displayed regardless of the actual loading time. It disappears automatically.

The general description of a loading screen can be found in the elements under “Splash screen”.

Update

The Scout app is used to communicate content that is regularly updated. If an update is available, the Scout app informs the user of this via the start screen or the settings menu. The change history informs the user of any changes. Users have the option of performing an update directly. The update process consists of several steps and is performed automatically. An activity indicator signals that the process is running. It does not, however, indicate how long it will take. Users can cancel the process at any time.

Scout app update  

Start screen with indicator for updates (top left), settings menu with update (top right), example of the change history (bottom left), running update (bottom right).

Start screen

Start screen  

Start screen of the Scout app

A panning area shows the latest products and special features.

The most important categories are shown below it. Each category has a tile that varies in size.

Settings menu

Users can only access the settings menu via the start screen. It contains various settings and other app entries, e.g., legal information, manual update.

Settings menu  

Settings menu with typical entries

Category page

Category page  

Example of a category page

From the homepage, users must be taken to a category page in order to navigate through the various levels of the app.

The screen contains explanatory text for the main categories and graphical material. According to the off-canvas pattern, the navigation menu can be hidden on the left-hand side so that the content can make full use of the screen.

According to the off-canvas pattern, the navigation menu can be hidden on the left-hand side of every category page in order to display the content in full-screen mode.

Slide decks

Slide decks  

Example of a slide deck

The Scout app presents product-specific information using slide decks. In this way, information is distributed across several pages. Users can move through the pages one after the other by scrolling or paging.

Every deck contains attachments (Internet links, video material, information sheets, etc.). Users can access the list of attachments via the buttons in the navigation bar.

Off-canvas menus

The Scout app uses two off-canvas menus. They are both displayed or hidden as required:

  • The left-hand menu contains the main navigation menu. It is available on all category pages and the slide decks.
  • The right-hand menu contains cross-references. It is only available at slide deck level. The menu contains references to additional information relating to the currently displayed product.
Off-canvas menus  

Main navigation (left) and cross-references (right)

Popups

A popup is used to briefly display additional information or a selection of actions.

The Scout app uses modal and non-modal popups.

  • Modal popups contain important information or prompts. They always contain at least one button that helps users choose which action to perform next.
  • Non-modal popups, on the other hand, are used purely for information purposes.
Popups  

Two examples of modal popups (top) and non-modal popups (bottom)


Back to overview
Best practice – Scout app

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

Referrer: