Struktur

Das Framework beschreibt den grundlegenden Aufbau eines Bildschirms für mobile Apps für Tablets und Smartphones und deren Verhalten.

Elemente

Tablet und Smartphone  

Struktur der Benutzeroberfläche bei Tablets und Smartphones

Der Header ist dauerhaft sichtbar. Er wird nicht ausgeblendet.

Das Menü auf der linken Seite enthält die Hauptnavigation. Das verwendete Control heißt Mobile-Menu. Standardmäßig ist das Menü verborgen, solange es nicht verwendet wird. Durch Icons im Header oder durch eine Wischgeste von links nach rechts blendet der Nutzer die Hauptnavigation ein. In Ausnahmefällen wird die Hauptnavigation permanent angezeigt. Die Option ist nur auf Tablets verfügbar. Zusätzlich stellt das jeweilige System eine Statusleiste am oberen Rand dar. Sie wird vom jeweiligen Gerät angezeigt. Sie ist in den Abbildungen nicht enthalten.

Der Inhaltsbereich füllt sämtlichen freien Bereich, der nicht durch die Hauptnavigation, weitere Navigationsbereiche oder die App-Navigationsleiste belegt ist. Der Bereich unterstützt die Paging-Funktion. Inhalte innerhalb des Paging Bereichs sind einspaltig strukturiert.

Benutzeroberflächen bei Tablets und Smartphones  

Inhaltsbereich: oberer Rand von 1,15 rem (links), Seitenränder von 2 rem (rechts)

Interaktionsmuster zur Navigation

Off-Canvas-Pattern  

Off-Canvas-Pattern

Off-Canvas-Pattern

Beim Off-Canvas-Pattern wird mehr Raum genutzt als auf dem Bildschirm verfügbar ist. Die Inhalte ragen über den Bildschirmrand hinaus. Sie werden über eine Aktion zugänglich gemacht. Dieses Muster eignet sich gut bei mobilen Geräten mit kleinen Bildschirmen (Smartphones, Tablets etc.).

Phoenix Contact Anwendungen sollten dieses Muster in erster Linie zum Verbergen oder Anzeigen von Navigationselementen verwenden (z. B. das Navigationsmenü). Der Platz auf dem Bildschirm wird zur Anzeige von Inhalten genutzt, bis der Nutzer einen Button auslöst und so das Menü einblendet. Ein erneuter Klick auf den Button versteckt das Menü wiederum. Andere Einsatzzwecke sind möglich. Sie hängen vom Kontext der jeweiligen Anwendung ab. Vermeiden Sie Konflikte mit der Navigation. Z. B. werden in der Scout-App zwei Off-Canvas-Menüs verwendet.

Die gleichzeitige Anzeige mehrere Inhalte an mehreren Kanten des Bildschirms ist nicht erlaubt.

Kacheln  

Screenshot: Scout-App

Kacheln

In einer Benutzeroberfläche mit Kacheln werden Kacheln in einem Raster mit Zeilen und Spalten angeordnet (z. B. Windows 8/10). Das ermöglicht eine klare und ansprechende Typografie.

Für Phoenix Contact-Anwendungen werden Kacheln eingesetzt, um Nutzern einen schnellen Überblick über verfügbare Inhalte zu verschaffen. Sie ermöglichen den Zugriff auf wichtige Funktionalitäten. Vorzugsweise werden Kacheln auf der Startseite einer App verwendet.

Eine Kachel verhält sich wie ein Button. Das Antippen einer Kachel löst eine Aktion aus.

Jede Kachel muss eine Grafik oder Bild enthalten. Zusätzlich beschreibt ein kurzes Label die Kachel bzw. die dahinter liegende Funktion. Kacheln gibt es in unterschiedlichen Größen. Die Größe wird genutzt, um Funktionalität hervor zu heben und Akzente zu setzen. Nutzer können die Größe der Kacheln nicht selbst ändern. Sie ist anwendungsspezifisch und wird im Entwicklungsprozess festgelegt.

Interaktionsprinzipien: Touch Gesten

Touch-fähige Elemente müssen so gestaltet sein, dass Nutzer aktive und inaktive Elemente unterscheiden können.

Jede Berührung einer aktiven Fläche soll ein direktes Feedback auslösen. Dies kann geschehen durch Farbwechsel, Größenveränderungen oder Bewegung.

Das Prinzip "Content follows finger" besagt, dass Elemente dem über den Bildschirm bewegten Finger folgen. Das gilt für alle Objekte, die gescrollt oder bewegt werden können (z. B. Panning-Areas). Zudem gilt das Prinzip nur in Bewegungsrichtung. Ein horizontal scrollbarer Container führt natürlich keine vertikale Bewegung am Finger aus.

Touch-Geste: Antippen  

Screenshot: Scout-App

Touch-Geste: Antippen

Antippen bedeutet ein kurzes Berühren der Oberfläche ohne Bewegung parallel zur Oberfläche. Ein Element anzutippen löst dessen Primäraktion aus, wie den Start einer Anwendung oder das Auslösen einer Aktion.

Das Antippen ist die äquivalente Aktion zu einem linken Mausklick.

Touch-Geste: Wischen

Der Finger wird auf der Oberfläche bewegt ohne den Kontakt zu verlieren. Solche Aktionen werden in erster Linie zum Scrollen oder Panning verwendet. Außerdem ist sie geeignet, um Objekte zu verschieben (äquivalent zu Drag-and-Drop).

Touch-Geste: Wischen  

Wireframes: Scout-App

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect