Zurück zur Übersicht

Screen-Typen und Struktur

Die Scout-App verwendet Lösungen, die auf den Vorgaben des Styleguides basieren.

Ladebildschirm

Ladebildschirm  

Ladebildschirm der Scout App

Der Ladebildschirm ist das Erste, was ein Nutzer beim Starten der Anwendung sieht. Zweck des Ladebildschirms ist:

  • die Zeit zum Laden der Anwendung überbrücken.
  • Kommunikation der Marke
  • Einführung in die Anwendung

Der Ladebildschirm sollte immer angezeigt werden und dabei unabhängig von der tatsächlichen Ladezeit sein. Er verschwindet automatisch wieder.

Sie finden die allgemeingültige Beschreibung eines Ladebildschirms in den Elementen unter Splash-Screen.

Update

Die Scout-App dient zur Kommunikation von Inhalten, die regelmäßig aktualisiert werden. Wenn ein Update vorliegt, weist die Scout-App die Nutzer über den Startbildschirm oder das Einstellungsmenü darauf hin. Die Änderungshistorie informiert den Nutzer über die Änderungen. Nutzer haben die Wahl, direkt zu aktualisieren. Der Aktualisierungsprozess hat mehrere Schritte und läuft von selbst ab. Ein Aktivitätsindikator signalisiert, dass der Prozess läuft. Er gibt aber keinen Hinweis auf die Dauer. Nutzer können den Prozess zu jedem Zeitpunkt abbrechen.

Update Scout App  

Startbildschirm mit Indikator für Updates (oben links), Einstellungsmenü mit Update (oben rechts), Beispiel der Änderungshistorie (unten links), laufende Aktualisierung (unten rechts)

Startbildschirm

Startbildschirm  

Startbildschirm der Scout-App

Eine Panning-Area informiert über neueste Produkte und Besonderheiten.

Unterhalb werden die wichtigsten Kategorien angezeigt. Für jede Kategorie gibt es eine Kachel in individueller Größe.

Einstellungsmenü

Auf das Einstellungsmenü können Nutzer nur über den Startbildschirm zugreifen. Es enthält verschiedene Einstellungen und anderen Einträge zur App, z. B. Impressum, manuelles Update.

Einstellungsmenü  

Einstellungsmenü mit typischen Einträgen

Kategorienseite

Kategorienseite  

Beispiel einer Kategorienseite

Von der Startseite kommend muss der Nutzer auf eine Kategorienseite, um durch die verschiedenen Ebenen der App zu navigieren.

Der Bildschirm umfasst erläuternde Texte für die Hauptkategorie und Bildmaterial. Gemäß dem Off-Canvas-Pattern kann das Navigationsmenü auf der linken Seite verborgen werden, sodass der Inhalt den vollen Bildschirm zur Verfügung hat.

In Übereinstimmung mit dem Off-Canvas-Pattern kann auf jeder Kategorieseite das Navigationsmenü auf der linken Seite versteckt werden, um den Inhalt im Vollbildmodus anzuzeigen.

Slide-Decks

Slide-Decks  

Beispiel eines Slide-Decks

Die Scout-App präsentiert produktspezifische Informationen mit Slide-Decks. So werden Informationen über mehrere Seiten verteilt. Durch Scrolling oder Paging kann der Nutzer sie nacheinander durchblättern.

Jedes Deck bietet Anhänge (Links ins WWW, Videomaterial, Informationsblätter, etc.). Die Liste der Anhänge erreicht der Nutzer über die Buttons in der Navigation Bar.

Off-Canvas-Menüs

Die Scout-App setzt zwei sog. Off-Canvas-Menüs ein. Jedes der beiden Menüs wird bei Bedarf ein- oder ausgeblendet:

  • Das linke Menü stellt die Hauptnavigation bereit. Es steht auf allen Kategorienseiten zur Verfügung und den Slide-Decks.
  • Das rechte Menü ist für Querverweise bestimmt. Es steht nur auf Ebene der Slide-Decks zur Verfügung. Das Menü enthält Verweise auf Zusatzinformationen jeweils passend zum aktuell angezeigten Produkt.
Off-canvas-Menüs  

Hauptnavigation (links) und die Querverweise (rechts)

Popups

Ein Popup ist dafür geeignet, kurzzeitig zusätzliche Informationen anzuzeigen oder Aktionen anzubieten.

Die Scout-App setzt modale und nicht-modale Popups ein.

  • Modale Popups bieten wichtige Hinweise oder Aufforderungen. Sie enthalten immer mindestens einen Button, mit deren Hilfe Nutzer direkt die nächsten Aktionen entscheiden können.
  • Nicht-modale Popups sind hingegen rein informativ.
Popups  

Zwei Beispiele für modale Popups (oben), nicht-modale Popups (unten)


Zurück zur Übersicht
Best Practice – Scout App

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect