Mobile-responsive Benutzeroberfläche
Sowohl die -Administrator- als auch die Endanwender-App sind mobil-responsiv und können ohne Funktionseinschränkungen auf mobilen Geräten genutzt werden. Die Benutzeroberfläche der mobilen Version ist größtenteils selbsterklärend und folgt den gängigen Industriestandards.
In diesem Thema werden die Desktop- und Mobilversion der Administrator-App verglichen. Einen entsprechenden Vergleich zur Endkunden-App finden Sie im USU Shop – Benutzerhandbuch.
Bitte sehen Sie sich die Bilder unten an, um Beispiele für die folgenden auf Mobilgeräte reagierenden UI-Transformationen zu sehen:
Die Desktop-USU-Werkzeugleiste [1] verwandelt sich in eine mobile Werkzeugleiste mit einem „Hamburger-Menü“
Anzeige-BeispielDie zusammenklappbare Sidebar [2]-Funktionalität (Umschalten zwischen den Modi [A] [B] [C] [D]) wird vom Hamburger-Menü bereitgestellt, ebenso wie das Benutzerprofil [E], das ursprünglich in der Werkzeugleiste zu finden war. Anzeige-Beispiel
Entweder die Registerkarte „Übersicht“ [3] oder die Registerkarte „Detail“ [4] wird auf einem Bildschirm angezeigt. Um zur Registerkarte Übersicht (Kategoriebaum, Angebotsliste) zu wechseln, klicken Sie auf die entsprechenden Einträge im Hamburger-Menü. Anzeige-Beispiel
Einige UI-Elemente können etwas anders platziert sein (Beispiel: [5]) Anzeige-Beispiel
Einige UI-Elemente können aus Platzgründen in der Benutzeroberfläche der mobilen Version weggelassen werden (Beispiel: [4]) Anzeige-Beispiel
Die Detail-Registerkarte in der mobilen Version enthält einen Breadcrumb-Link (Beispiel: [13]) für die Rückwärtsnavigation. Anzeige-Beispiel
Die Schaltflächen oben rechts im Detail-Tab der Desktop-Version finden Sie unten auf der Seite (Beispiel: [12]) in der mobilen Version. Anzeige-Beispiel
Generell wird in der mobilen Version der Schwerpunkt auf der Navigation durch vertikales Scrollen gelegt.
Beispiele
Vergleichen Sie diese Benutzeroberfläche der mobilen Version mit der Desktop-Version:
| direkt sichtbar |
| sichtbar beim Klicken |
Vergleichen Sie diese Übersichtsregisterkarte der mobilen Version mit der Desktop-Version:
| anders |
| das gleiche |
| Nur Desktop-Version |
Vergleichen Sie diese Detailregisterkarte der mobilen Version mit der Desktop-Version:
| anders |
| das gleiche |
| Nur mobile Version |