Structure

The framework describes the basic structure of a screen for mobile apps for tablets and smartphones as well as their behavior.

Elements

Tablet and smartphone  

Structure of the user interface on tablets and smartphones

The header is permanently visible. It is not hidden.

The menu on the left-hand side contains the main navigation menu. The control used is called Mobile Menu. The menu is hidden by default whenever it is not in use. Users can open the main navigation menu via icons in the header or by swiping from left to right. In exceptional circumstances the main navigation menu is permanently displayed. This option is only available on tablets. The system also displays a status bar along the top of the screen. It is displayed by the device. It is not shown in the figures.

The contents area fills the entire free space that is not covered by the main navigation menu, other navigation areas or the app navigation bar. This area supports the paging function. The content of the paging area is arranged in a single column.

User interfaces on tablets and smartphones  

Contents area: upper border 1.15 rem (left), side borders 2 rem (right)

Interaction pattern for navigation

Off-canvas pattern  

Off-canvas pattern

Off-canvas pattern

Off-canvas pattern uses more space than is available on the screen. The contents project beyond the edge of the screen. They are accessed by means of an action. This pattern is ideal for mobile devices with small screens (smartphones, tablets, etc.).

Phoenix Contact applications should ideally use this pattern to show or hide navigation elements (e.g., the navigation menu). The space on the screen is used to display content until the user presses a button to open the menu. Clicking on the button again hides the menu. Other uses are possible. These depend on the context of the application in question. Avoid conflicts with the navigation function. Two off-canvas menus are used in the Scout app, for example.

Different content must not be displayed along different borders of the screen at the same time.

Tiling  

Screenshot: Scout app

Tiling

On a user interface with tiling (e.g., Windows 8/10), tiles are arranged in a grid with rows and columns. This enabled clear and attractive typography.

Tiles are used in Phoenix Contact applications to give users a quick overview of the available contents. They provide access to important functions. Ideally, tiles should be used on the homepage of an app.

A tile is used in the same way as a button. Tapping a tile triggers an action.

Every tile must contain a symbol or image. A short label should also describe the tile or its function. Tiles of different sizes can be used. The size distinguishes the function and emphasizes its features. Users cannot change the size of the tiles. The size is application-specific and is defined during the development process.

Interaction principles: touch gestures

Touch-capable elements must be designed in such a way that users can distinguish between active and inactive elements.

Every time users press an active button or tile, they should be given direct feedback. This may take the form of a change in color or size or a movement.

According to the “Content follows finger” principle, the elements should follow the finger moving across the screen. This applies to all objects that can be scrolled or moved (e.g., panning areas). The principle only applies to the direction in which the elements can move. In other words, a container that scrolls horizontally cannot be made to move vertically.

Touch gestures: tapping  

Screenshot: Scout app

Touch gestures: tapping

Tapping means touching the screen briefly without moving across the interface. Tapping on an element triggers its primary action, such as starting an application or performing a function.

Tapping is the equivalent to clicking with the left mouse button.

Touch gestures: swiping

A finger is moved across the screen without losing contact. This gesture is used primarily for scrolling or panning. It can also be used to move objects (equivalent to drag & drop).

Touch gestures: swiping  

Wireframes: Scout app

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect