Offline-UX-Designrichtlinien

Mustafa Kurtuldu

Thomas Steiner

Diese Seite enthält Designrichtlinien dazu, wie Nutzer auch bei langsamen Netzwerken und offline optimal arbeiten können.

Die Qualität einer Netzwerkverbindung kann von mehreren Faktoren beeinflusst werden, darunter:

• Schlechte Netzabdeckung.
• Extreme Wetterbedingungen.
• Stromausfälle.
• Eingabe dauerhafter Zonen ohne Empfang, z. B. in Gebäuden mit Mauern, die Netzwerkverbindungen blockieren.
• Vorübergehende Zonen ohne Empfang, z. B. bei einer Zugfahrt durch einen Tunnel
• Zeitlich begrenzte Internetverbindungen, z. B. auf Flughäfen oder Hotels.
• Kulturelle Praktiken, die zu bestimmten Zeiten oder an bestimmten Tagen nur einen begrenzten oder keinen Internetzugang erfordern.

Ihr Ziel als Entwickler ist es, eine gute Nutzerfreundlichkeit zu bieten, die die Auswirkungen von Änderungen an der Konnektivität verringert.

Entscheiden Sie, was Nutzern bei schlechter Netzwerkverbindung angezeigt werden soll.

Als Erstes sollten Sie sich fragen, wie der Erfolg und Misserfolg einer Netzwerkverbindung für Ihre App aussieht. Eine erfolgreiche Verbindung entspricht dem normalen Online-Verhalten Ihrer App. Ein Verbindungsfehler bezieht sich sowohl auf das Offlineverhalten Ihrer Anwendung als auch in langsamen Netzwerken.

Stellen Sie sich die folgenden wichtigen UX-Fragen, um herauszufinden, wie Sie mit Verbindungsfehlern umgehen sollten:

• Wie lange müssen Sie warten, um den Erfolg oder Ausfall einer Verbindung festzustellen?
• Was können Sie tun, während Erfolg oder Misserfolg ermittelt werden?
• Was tun Sie, wenn die Verbindung fehlschlägt?
• Wie teilen Sie den Nutzenden mit, was los ist?

Nutzer über ihren aktuellen Zustand und ihre Statusänderung informieren

Teilen Sie dem Nutzer sowohl den Anwendungsstatus als auch die Aktionen mit, die er bei einem Netzwerkfehler noch ausführen kann. Eine Benachrichtigung könnte zum Beispiel Folgendes enthalten:

Du hast offenbar eine schlechte Netzwerkverbindung. Kein Problem. Die Nachrichten werden gesendet, wenn das Netzwerk wiederhergestellt ist.

Nutzer informieren, wenn die Netzwerkverbindung besser wird oder wiederhergestellt wird

Wie Sie dem Nutzer mitteilen, dass sich seine Netzwerkverbindung verbessert hat, hängt von Ihrer Anwendung ab. Apps, die aktuelle Informationen priorisieren, z. B. das Wetter oder Börsen-Tracker, sollten automatisch aktualisiert werden und den Nutzer so schnell wie möglich informieren.

Wir empfehlen Ihnen, den Nutzer mithilfe eines visuellen Hinweises wie eines Material Design-Toast-Elements darüber zu informieren, dass Ihre Webanwendung „im Hintergrund“ aktualisiert wurde. Dazu muss sowohl das Vorhandensein eines Service Workers als auch ein Update der verwalteten Inhalte erkannt werden. Ein Codebeispiel für diese Funktion in der Praxis finden Sie hier.

Ein Beispiel hierfür ist der Chrome-Plattformstatus, bei dem dem Nutzer eine Benachrichtigung gesendet wird, wenn die App aktualisiert wurde.

Bei einigen Apps kann immer der Zeitpunkt der letzten Aktualisierung angezeigt werden. Dies ist beispielsweise bei Anwendungen mit Währungsrechner besonders nützlich.

Nachrichten-Apps können eine einfache Benachrichtigung zum Antippen anzeigen, um Nutzer über neue Inhalte zu informieren. Das automatische Aktualisieren eines Artikels würde dazu führen, dass Nutzer ihren Platz verlieren.

Benutzeroberfläche aktualisieren, um den aktuellen Kontextstatus widerzuspiegeln

Jedes UI-Element kann einen eigenen Kontext und ein eigenes Verhalten haben, die sich ändern, je nachdem, ob eine erfolgreiche Verbindung erforderlich ist. Ein Beispiel wäre eine E-Commerce-Website, auf der offline gesucht werden kann, aber die Preise und die Schaltfläche „Kaufen“ deaktiviert sind, bis die Verbindung wiederhergestellt ist.

Andere Formen des kontextbezogenen Status können Daten umfassen. Die Finanz-App Robinhood beispielsweise verwendet Farben und Grafiken, um dem Nutzer mitzuteilen, wann die Börse geöffnet ist. Die gesamte Oberfläche wird weiß und wird grau dargestellt, wenn der Markt schließt. Wenn der Wert einer Aktie steigt oder fällt, wird jedes einzelne Geräte-Widget je nach Status grün oder rot.

Informieren Sie die Nutzenden, um das Offlinemodell zu verstehen.

Die meisten Nutzer sind es gewohnt, immer eine Netzwerkverbindung zu haben. Sie müssen sie darüber informieren, was sich in Ihrer App ändert, wenn sie keine Verbindung haben. Teilen Sie ihm mit, wo große Daten gespeichert werden, und geben Sie Einstellungen zum Ändern des Standardverhaltens an. Verwenden Sie mehrere UI-Designkomponenten (z. B. informative Sprache, Symbole, Benachrichtigungen, Farben und Bilder), um diese Ideen zu vermitteln, anstatt sich auf eine einzige Designentscheidung wie z. B. ein Symbol allein zu verlassen, um die ganze Geschichte zu erzählen.

Standardmäßig Offlinenutzung ermöglichen

Wenn Ihre App nicht viele Daten benötigt, sollten Sie diese Daten standardmäßig im Cache speichern. Es kann zunehmend frustrierend sein, wenn Nutzer nur über eine Netzwerkverbindung auf ihre Daten zugreifen können.

Versuchen Sie, die Nutzererfahrung so stabil wie möglich zu gestalten. Eine instabile Verbindung lässt Ihre App unvertrauenswürdig wirken. Eine App, die die Auswirkungen eines Netzwerkfehlers verringert, freut ihre Nutzer.

Nachrichtenwebsites können von einem automatischen Download und einer automatischen Speicherung der neuesten Nachrichten profitieren. Eventuell spart man Daten, indem nur der Text heruntergeladen wird, sodass ein Nutzer die Nachrichten von heute auch ohne Internetverbindung lesen kann. Du kannst dieses Verhalten an das Nutzerverhalten anpassen, indem du vorrangig die Nachrichtenkategorien herunterlädst, die sich der Nutzer am häufigsten ansieht.

Nutzer informieren, wenn die App offline verwendet werden kann

Beim ersten Laden einer Web-App muss dem Nutzer mitgeteilt werden, ob sie offline verwendet werden kann. Verwenden Sie dazu ein Widget, das kurzes Feedback zu einem Vorgang gibt, und zwar über eine Meldung am unteren Bildschirmrand, z. B. wenn ein Abschnitt synchronisiert oder eine Datei heruntergeladen wurde.

Achten Sie darauf, dass die verwendete Sprache zu Ihrer Zielgruppe passt, und verwenden Sie immer und überall dieselbe Formulierung. Nicht technische Zielgruppen verstehen den Begriff „Offline“ häufig falsch. Daher sollten Sie stattdessen aktionsbasierte Formulierungen verwenden, mit denen sich Ihre Zielgruppe identifizieren kann.

'Für Offline speichern' in der Benutzeroberfläche deutlich sichtbar machen

Wenn eine Anwendung viele Daten verbraucht, sollten Sie einen Schalter oder eine Markierung zum Hinzufügen eines Elements für die Offlinenutzung verwenden. Dateien werden nur dann automatisch heruntergeladen, wenn ein Nutzer dies über ein Einstellungsmenü ausdrücklich angefragt hat. Achten Sie darauf, dass die Anpinnen oder die Download-UI für den Nutzer deutlich ist und nicht durch andere UI-Elemente verdeckt wird.

Ein Beispiel hierfür ist ein Musikplayer, der große Dateien erfordert. Der Nutzer ist sich der damit verbundenen Datenkosten bewusst, möchte den Player aber möglicherweise auch offline verwenden. Wenn Sie Musik für die spätere Verwendung herunterladen, muss der Nutzer vorausplanen. Daher sollten Sie den Nutzer bereits während des Onboardings darüber informieren.

Stellen Sie dar, was offline verfügbar ist.

Seien Sie klar, welche Optionen Sie anbieten. Möglicherweise müssen Sie einen Tab oder eine Einstellung für eine „Offlinebibliothek“ oder einen Inhaltsindex anzeigen lassen, damit der Nutzer sehen kann, was er auf seinem Gerät gespeichert hat und was gespeichert werden muss. Achten Sie darauf, dass die Einstellungen prägnant sind und deutlich machen, wo die Daten gespeichert sind und wer darauf Zugriff hat.

Tatsächliche Kosten einer Aktion anzeigen

Viele Nutzer setzen Offline-Funktionen mit „Herunterladen“ gleich. Nutzer in Ländern, in denen regelmäßig Netzwerkverbindungen ausfallen oder nicht verfügbar sind, teilen Inhalte häufig mit anderen Nutzern oder speichern Inhalte für die Offline-Nutzung, wenn sie eine Verbindung haben.

Nutzer mit Datentarifen vermeiden manchmal das Herunterladen großer Dateien aus Kostengründen. Daher können Sie auch die zugehörigen Kosten anzeigen, damit Nutzer einen aktiven Vergleich für eine bestimmte Datei oder Aufgabe vornehmen können. Die oben genannte Musik-App könnte beispielsweise erkennen, ob der Nutzer einen Datentarif hat, und die Dateigröße anzeigen, damit der Nutzer die Kosten einer Datei sehen kann.

Hacking verhindern

Nutzer hacken häufig ein Erlebnis, ohne es zu merken. Vor der Einführung cloudbasierter Web-Apps für die Dateifreigabe war es beispielsweise üblich, dass Nutzer große Dateien speichern und an E-Mails anhängen, um diese Dateien von einem anderen Gerät aus weiter bearbeiten zu können. Eine gute UI löst das Problem, das Nutzer zu lösen versuchen, ohne in das Hacking-Erlebnis gezogen zu werden. Bieten Sie beispielsweise eine Möglichkeit, große Dateien geräteübergreifend zu teilen, anstatt große Dateien an E-Mails nutzerfreundlicher anzuhängen.

Erfahrungen von einem Gerät auf ein anderes übertragbar machen

Wenn Sie instabile Netzwerke entwickeln, versuchen Sie mit der Synchronisierung, sobald sich die Verbindung verbessert hat, damit die Umgebung übertragen werden kann. Stellen Sie sich vor, eine Reise-App verliert mitten in der Buchung die Netzwerkverbindung. Sobald die Verbindung wiederhergestellt ist, wird die App mit dem Konto des Nutzers synchronisiert, sodass der Nutzer die Buchung auf seinem Computer fortsetzen kann.

Teilen Sie dem Nutzer mit, in welchem Zustand sich seine Daten befinden. So lässt sich z. B. anzeigen, ob die App synchronisiert wurde. Informieren Sie sie nach Möglichkeit, aber überfordern Sie sie nicht mit zu vielen Botschaften.

Inklusive Designerlebnisse schaffen

Achten Sie beim UX-Design darauf, inklusiv zu sein. Stellen Sie dazu aussagekräftige Designgeräte, einfache Sprache, Standardsymbole und aussagekräftige Bilder bereit, die die Nutzer zur Ausführung der Aktion oder Aufgabe führen, ohne zu stören.

Verwenden Sie eine einfache, klare Sprache.

Bei einer guten UX geht es nicht nur um das Entwerfen Ihrer Benutzeroberfläche. Sie umfasst den Weg, den ein Nutzer durch Ihre App zurücklegt, und alles, was ihm dabei begegnet, einschließlich der Sprache, in der die App diese User Journey beschreibt. Vermeiden Sie Fachjargon, wenn Sie UI-Komponenten oder den Zustand der App erklären. Das Wort „offline“ ist oft nicht klar genug, um dem Nutzer zu vermitteln, was Ihre App tut.

Don'ts

Das sollten Sie tun:

Mehrere Designgeräte verwenden, um barrierefreie User Experiences zu schaffen

Verwenden Sie Sprach-, Farb- und visuelle Komponenten, um einen Status oder eine Statusänderung darzustellen. Die ausschließliche Verwendung von Farben zur Darstellung des Zustands kann für Nutzer schwer zu erkennen oder für Nutzer mit Sehbehinderungen sogar vollständig unzugänglich sein. Da das Webdesign dazu neigen, Grau für deaktivierte Elemente zu verwenden, kann die Verwendung der grauen Benutzeroberfläche, um zu zeigen, dass deine App offline ist, zu Unklarheiten darüber führen, was deine App offline tun kann, insbesondere wenn du nur Farbe zur Anzeige des Zustands verwendest.

Um Missverständnisse zu vermeiden, kannst du Nutzern auf verschiedene Arten App-Status mitteilen, z. B. durch Farben, Labels und UI-Komponenten.

Das sollten Sie tun:

Don'ts

Bedeutungsvolle Symbole verwenden

Stellen Sie sicher, dass Sie neben Ihren Symbolen aussagekräftige Textbeschriftungen verwenden. Symbole allein können verwirrend sein, vor allem deshalb, weil das Konzept des "Offline" im Web relativ neu ist. Weitere verwirrende Symbole sind beispielsweise die Verwendung einer Diskette zur Darstellung von „Speichern“, was für jüngere Nutzer, die noch nie eine Diskette gesehen haben, bedeutungslos sein kann, sowie das Hamburger-Menüsymbol.

Bleiben Sie bei der Einführung eines Offlinesymbols an visuelle Elemente des Branchenstandards und geben Sie eine Beschriftung und eine Beschreibung an. Beispielsweise kann ein Downloadsymbol für die Offlinespeicherung verwendet werden, ein Synchronisierungssymbol für eine Aktion, die eine Synchronisierung umfasst. Seien Sie vorsichtig, wenn Sie Symbole zur Darstellung eines Status verwenden, der stattdessen als Speicher- oder Downloadaktion interpretiert werden könnte.

Weitere Inspirationen finden Sie in der Symbolsammlung von Material Design.

Rasterlayouts und andere Feedbackmechanismen verwenden

Während deine App Inhalte lädt, solltest du den Nutzern zeigen, dass sie geladen wird, damit sie nicht den Eindruck bekommen, dass sie fehlerhaft ist. Eine Möglichkeit dazu ist die Verwendung eines Skeleton-Layouts. Dies ist eine Wireframe-Version Ihrer App, die beim Laden von Inhalten angezeigt wird. Sie können auch eine Preloader-Benutzeroberfläche mit einem Textlabel verwenden, das den Nutzer darüber informiert, dass die App geladen wird, oder eine leicht pulsierende Animation für den Wireframe, damit es sich anfühlt, als würde er lebendig werden und geladen. Dadurch wissen Nutzer, dass etwas passiert, und verhindern, dass sie das nächste Mal eingereicht werden oder unnötige Aktualisierungen nötig sind.

Zeigen Sie den Status einer Aktion durch Feedback an. Wenn ein Nutzer beispielsweise ein Dokument offline bearbeitet, kann es sinnvoll sein, das Feedback-Design so zu ändern, dass es sich sichtbar vom Online-Modus des Nutzers unterscheidet. Es wird jedoch angezeigt, dass seine Datei "gespeichert" wurde und synchronisiert wird, sobald eine Netzwerkverbindung besteht. So weiß der Nutzer, wie Ihre App funktioniert, und versichert ihm, dass seine Aufgabe oder Aktion gespeichert wurde, was dazu beitragen kann, dass er die Anwendung sicherer nutzt.

Inhalte nicht blockieren

In einigen Apps lösen Nutzer möglicherweise eine Aktion aus, z. B. das Erstellen eines neuen Dokuments. Einige Anwendungen versuchen, eine Verbindung zu einem Server herzustellen, um das neue Dokument zu synchronisieren. Um dies zu zeigen, wird ein aufdringliches modales Ladedialogfeld angezeigt, das den gesamten Bildschirm abdeckt. Dies kann funktionieren, wenn der Nutzer eine stabile Netzwerkverbindung hat, aber wenn das Netzwerk instabil ist, kann er diese Aktion nicht beenden, sodass die Benutzeroberfläche ihn daran hindert, etwas anderes zu tun.

Vermeiden Sie Netzwerkanfragen, die Inhalte blockieren. Lassen Sie den Nutzer weiter in Ihrer Anwendung suchen und Aufgaben, die ausgeführt und synchronisiert werden, sobald sich die Verbindung verbessert hat, in die Warteschlange.

Design für die nächste Milliarde von Nutzern

In vielen Regionen sind Low-End-Geräte üblich, die Konnektivität unzuverlässig und für viele Nutzer sind Daten extrem teuer. Gewinnen Sie das Vertrauen Ihrer Nutzenden, indem Sie Daten transparent und sparsam einsetzen. Überlegen Sie, wie Sie Nutzern mit schlechter Internetverbindung helfen und die Benutzeroberfläche vereinfachen können, um Aufgaben zu beschleunigen. Fragen Sie Nutzende immer, bevor Sie datenintensive Inhalte herunterladen.

Bieten Sie Nutzern mit langsamen Verbindungen Optionen mit geringer Bandbreite. Stellen Sie kleinere Assets bei langsameren Netzwerkverbindungen bereit oder bieten Sie eine Option zur Auswahl von Assets mit hoher oder niedriger Qualität an.

Fazit

Bildung ist entscheidend für die Offline-UX, weil die Nutzenden damit nicht vertraut sind. Versuchen Sie, Assoziationen mit bekannten Konzepten herzustellen, z. B. indem Sie erklären, dass das Herunterladen zur späteren Verwendung dem Offline-Speichern von Daten entspricht.

Beachten Sie beim Design für instabile Netzwerkverbindungen die folgenden Richtlinien:

• Achten Sie bei der Entwicklung auf den Erfolg, Fehler und die Instabilität einer Netzwerkverbindung.
• Daten können kostspielig sein, daher solltest du auf die Nutzenden Rücksicht nehmen.
• Für die meisten Nutzer weltweit ist das Technologieumfeld fast ausschließlich mobil.
• Low-End-Geräte sind allgegenwärtig. Sie bieten begrenzt Speicherplatz, Arbeitsspeicher und Prozessorleistung, kleine Bildschirme und eine geringere Touchscreen-Qualität. Achten Sie darauf, dass die Leistung Teil Ihres Designprozesses ist.
• Nutzern erlauben, Ihre Anwendung zu nutzen, wenn sie offline sind.
• Nutzer werden über ihren aktuellen Status und über Statusänderungen informiert.
• Wenn Ihre App nicht viele Daten anfordert, versuchen Sie, die Offline-Funktion standardmäßig bereitzustellen.
• Wenn die Anwendung datenlastig ist, informieren Sie die Nutzer darüber, wie sie sie zur Offlinenutzung herunterladen können.
• Sorgen Sie dafür, dass Geräte auf andere Geräte übertragen werden können.
• Verwenden Sie Sprache, Symbole, Bilder, Typografie und Farbe, um den Nutzenden Ideen zum Ausdruck zu bringen.
• Geben Sie Sicherheit und Feedback, um den Nutzenden zu helfen.