Offline-UX-Designrichtlinien

Mustafa Kurtuldu

Thomas Steiner

Veröffentlicht: 10. November 2016

Die Qualität einer Netzwerkverbindung kann durch eine Reihe von Faktoren beeinträchtigt werden, z. B.:

• Schlechte Abdeckung durch den Netzwerkanbieter.
• Extreme Wetterbedingungen.
• Stromausfälle.
• Sie betreten dauerhafte Funklöcher, z. B. in Gebäuden mit Wänden, die Netzwerkverbindungen blockieren.
• Sie fahren in vorübergehende Funklöcher ein, z. B. wenn Sie mit dem Zug durch einen Tunnel fahren.
• Zeitlich begrenzte Internetverbindungen, z. B. an Flughäfen oder in Hotels.
• Kulturelle Praktiken, die zu bestimmten Zeiten oder an bestimmten Tagen einen eingeschränkten oder keinen Internetzugang erfordern.

Als Entwickler ist es Ihr Ziel, eine gute Nutzererfahrung zu bieten, die die Auswirkungen von Änderungen bei der Verbindung verringert.

Festlegen, was Nutzern bei einer schlechten Netzwerkverbindung angezeigt werden soll

Die erste Frage, die Sie sich stellen sollten, ist, wie Erfolg und Misserfolg einer Netzwerkverbindung für Ihre App aussehen. Eine erfolgreiche Verbindung ist die normale Online-Erfahrung Ihrer App. Zu Verbindungsfehlern gehört sowohl das Verhalten Ihrer App im Offlinemodus als auch in langsamen Netzwerken.

Um zu entscheiden, wie Sie mit Verbindungsfehlern umgehen, stellen Sie sich die folgenden wichtigen UX-Fragen:

• Wie lange warten Sie, bis Sie feststellen, ob eine Verbindung erfolgreich war oder nicht?
• Was können Sie tun, während über Erfolg oder Misserfolg entschieden wird?
• Was sollten Sie tun, wenn die Verbindung fehlschlägt?
• Wie teilen Sie dem Nutzer mit, was passiert?

Nutzer über den Status informieren

Informieren Sie den Nutzer sowohl über den Status der Anwendung als auch über die Aktionen, die er bei einem Netzwerkausfall weiterhin ausführen kann. Eine Benachrichtigung könnte beispielsweise so aussehen:

Ihre Netzwerkverbindung ist offenbar schlecht. Kein Problem. Nachrichten werden gesendet, wenn die Netzwerkverbindung wiederhergestellt ist.

Nutzer über Verbesserungen bei der Verbindung informieren

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

Wir empfehlen, den Nutzer darüber zu informieren, dass Ihre Web-App „im Hintergrund“ aktualisiert wurde. Verwenden Sie dazu ein visuelles Signal wie ein Material Design-Toast-Element. Dazu muss sowohl das Vorhandensein eines Service Workers als auch eine Aktualisierung der von ihm verwalteten Inhalte erkannt werden. Hier finden Sie ein Codebeispiel für diese Funktion.

Ein Beispiel dafür ist Chrome Platform Status. Dort wird dem Nutzer eine Benachrichtigung angezeigt, wenn die App aktualisiert wurde.

Bei einigen Apps wird immer angezeigt, wann sie zuletzt aktualisiert wurden. Das ist beispielsweise besonders nützlich für Währungsumrechner-Apps.

Nachrichten-Apps können eine Benachrichtigung mit der Aufforderung zum Tippen zum Aktualisieren anzeigen, um Nutzer über neue Inhalte zu informieren. Wenn ein Artikel automatisch aktualisiert wird, verlieren Nutzer den Überblick.

Benutzeroberfläche aktualisieren, um den aktuellen Kontextstatus widerzuspiegeln

Jedes UI-Element kann einen eigenen Kontext und ein eigenes Verhalten haben, das sich je nach Bedarf einer erfolgreichen Verbindung ändert. Ein Beispiel wäre eine E-Commerce-Website, die offline durchsucht werden kann, aber Preise und die Schaltfläche „Kaufen“ deaktiviert, bis die Verbindung wiederhergestellt ist.

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

Informieren Sie den Nutzer darüber, was das Offlinemodell ist.

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. Informieren Sie sie darüber, wo große Datenmengen gespeichert werden, und geben Sie ihnen Einstellungen an die Hand, mit denen sie das Standardverhalten ändern können. Verwenden Sie mehrere UI-Designkomponenten (z. B. informative Sprache, Symbole, Benachrichtigungen, Farben und Bilder), um diese Ideen zu vermitteln, anstatt sich auf eine einzelne Designentscheidung zu verlassen, z. B. ein einzelnes Symbol.

Standardmäßig eine Offline-Nutzung anbieten

Wenn Ihre App nicht viele Daten benötigt, sollten Sie diese standardmäßig im Cache speichern. Nutzer können zunehmend frustriert sein, wenn sie nur mit einer Netzwerkverbindung auf ihre Daten zugreifen können.

Versuchen Sie, die Nutzung so stabil wie möglich zu gestalten. Eine instabile Verbindung kann dazu führen, dass Nutzer Ihrer App nicht vertrauen. Eine App, die die Auswirkungen eines Netzwerkausfalls verringert, begeistert ihre Nutzer.

Nachrichtenseiten können davon profitieren, dass die neuesten Nachrichten automatisch heruntergeladen und gespeichert werden. Dabei können Daten gespart werden, indem nur der Text heruntergeladen wird. So können Nutzer die Nachrichten des Tages auch ohne Verbindung lesen. Sie können dieses Verhalten an das Verhalten des Nutzers anpassen, indem Sie das Herunterladen der Nachrichtenpriorisieren, die der Nutzer am häufigsten aufruft.

Nutzer informieren, wenn die App offline ist

Wenn eine Web-App zum ersten Mal geladen wird, muss sie dem Nutzer mitteilen, ob sie für die Offline-Nutzung bereit ist. Verwenden Sie dazu ein Widget, das kurzes Feedback zu einem Vorgang in Form einer Meldung unten auf dem Bildschirm gibt, z. B. wenn ein Bereich synchronisiert oder eine Datei heruntergeladen wurde.

Achten Sie darauf, dass die Sprache, die Sie verwenden, zu Ihrer Zielgruppe passt, und verwenden Sie in allen Fällen, in denen sie zutrifft, dieselbe Formulierung. Nicht technisch versierte Nutzer missverstehen das Wort „offline“ oft. Verwenden Sie stattdessen handlungsorientierte Formulierungen, die Ihre Zielgruppe nachvollziehen kann.

„Offline speichern“ in der Benutzeroberfläche hervorheben

Wenn eine App viele Daten verwendet, sollte es einen Schalter oder eine Schaltfläche geben, mit der ein Element für die Offlineverwendung hinzugefügt werden kann. Dateien werden nur dann automatisch heruntergeladen, wenn ein Nutzer dieses Verhalten über ein Einstellungsmenü ausdrücklich angefordert hat. Achten Sie darauf, dass die Benutzeroberfläche zum Anpinnen oder Herunterladen für den Nutzer gut sichtbar ist und nicht von anderen UI-Elementen verdeckt wird.

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

Klären, was offline verfügbar ist

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

Tatsächliche Kosten einer Aktion anzeigen

Viele Nutzer setzen die Offline-Funktion mit dem Herunterladen gleich. Nutzer in Ländern, in denen Netzwerkverbindungen regelmäßig fehlschlagen oder nicht verfügbar sind, teilen Inhalte oft mit anderen Nutzern oder speichern Inhalte für die Offline-Nutzung, wenn sie eine Verbindung haben.

Nutzer mit Datentarifen vermeiden es manchmal, große Dateien herunterzuladen, um Kosten zu sparen. Daher sollten Sie möglicherweise auch die entsprechenden Kosten anzeigen, damit Nutzer einen aktiven Vergleich für eine bestimmte Datei oder Aufgabe anstellen können. Die oben erwähnte 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.

Gehackte Konten vermeiden

Nutzer hacken oft eine Experience, ohne es zu merken. Bevor es cloudbasierte Web-Apps für die Dateifreigabe gab, war es beispielsweise üblich, dass Nutzer große Dateien gespeichert und an E-Mails angehängt haben, damit sie diese Dateien auf einem anderen Gerät weiter bearbeiten konnten. Eine gute Benutzeroberfläche löst das Problem, das Nutzer zu lösen versuchen, ohne dass sie in die gehackte Umgebung gezogen werden. Bieten Sie beispielsweise eine Möglichkeit, große Dateien geräteübergreifend freizugeben, anstatt das Anhängen großer Dateien an E-Mails benutzerfreundlicher zu gestalten.

Erlebnisse von einem Gerät auf ein anderes übertragen

Wenn Sie für instabile Netzwerke entwickeln, sollten Sie die Synchronisierung so schnell wie möglich starten, sobald sich die Verbindung verbessert, damit die Nutzererfahrung übertragbar ist. Stellen Sie sich beispielsweise vor, dass eine Reise-App mitten in einer Buchung die Netzwerkverbindung verliert. Wenn die Verbindung wiederhergestellt wird, synchronisiert sich die App mit dem Konto des Nutzers. So kann er die Buchung auf seinem Desktopgerät fortsetzen und die Nutzung fühlt sich nahtlos an.

Informieren Sie den Nutzer über den Status seiner Daten. Sie können beispielsweise anzeigen, ob die App synchronisiert wurde. Informieren Sie sie nach Möglichkeit, aber überfordern Sie sie nicht mit zu vielen Nachrichten.

Inklusives Design schaffen

Achten Sie beim UX-Design auf Inklusivität, indem Sie aussagekräftige Designelemente, einfache Sprache, Standardsymbole und aussagekräftige Bilder verwenden, die den Nutzer bei der Ausführung der Aktion oder Aufgabe unterstützen, ohne ihn zu behindern.

Verwenden Sie eine einfache, klare Sprache.

Bei gutem UX geht es nicht nur um das Design der Benutzeroberfläche. Dazu gehört der Pfad, den ein Nutzer in Ihrer App durchläuft, und alles, was ihm dabei begegnet, einschließlich der Sprache, in der die App diesen Pfad beschreibt. Vermeiden Sie bei der Beschreibung von UI-Komponenten oder des App-Status Fachjargon. Das Wort „offline“ ist oft nicht eindeutig genug, um dem Nutzer zu vermitteln, was Ihre App tut.

Don'ts

Do

Barrierefreie Nutzerfreundlichkeit mit mehreren Designelementen

Verwenden Sie Sprache, Farbe und visuelle Komponenten, um einen Status oder eine Statusänderung darzustellen. Wenn der Status nur durch Farben angezeigt wird, kann es für Nutzer schwierig sein, ihn zu erkennen. Für Nutzer mit Sehbehinderungen ist er möglicherweise sogar überhaupt nicht zugänglich. Da im Webdesign für deaktivierte Elemente häufig Grau verwendet wird, kann eine graue Benutzeroberfläche, die anzeigt, dass Ihre App offline ist, zu Verwirrung darüber führen, was Ihre App im Offlinemodus leisten kann. Das gilt insbesondere, wenn Sie den Status nur durch die Farbe anzeigen.

Um Missverständnisse zu vermeiden, sollten Sie den App-Status auf verschiedene Arten ausdrücken, z. B. mit Farben, Labels und UI-Komponenten.

Do

Don'ts

Symbole verwenden, die eine Bedeutung vermitteln

Verwenden Sie aussagekräftige Textlabels neben Ihren Symbolen. Symbole allein können verwirrend sein, insbesondere weil das Konzept von „offline“ im Web relativ neu ist. Ein weiteres Beispiel für verwirrende Symbole ist die Verwendung einer Diskette für „Speichern“, die für jüngere Nutzer, die noch nie eine Diskette gesehen haben, bedeutungslos sein kann. Das gilt auch für das Menüsymbol in Form eines „Hamburgers“.

Wenn Sie ein Offlinesymbol einführen, sollten Sie sich an den branchenüblichen Grafiken orientieren, sofern vorhanden, und ein Textlabel und eine Beschreibung angeben. Sie können beispielsweise ein Downloadsymbol verwenden, um das Speichern für die Offline-Nutzung zu kennzeichnen, oder ein Synchronisierungssymbol für eine Aktion, bei der eine Synchronisierung erfolgt. Seien Sie vorsichtig, wenn Sie Symbole verwenden, um den Status zu veranschaulichen, der stattdessen als Speicher- oder Downloadvorgang interpretiert werden könnte.

Weitere Inspirationen finden Sie im Material Design-Iconsatz.

Skelettlayouts und andere Feedbackmechanismen verwenden

Zeigen Sie dem Nutzer an, dass Ihre App Inhalte lädt, damit er nicht denkt, dass sie nicht funktioniert. Eine Möglichkeit dazu ist die Verwendung eines Skelett-Layouts, einer Wireframe-Version Ihrer App, die angezeigt wird, während Inhalte geladen werden. Sie können auch eine Preloader-Benutzeroberfläche mit einem Textlabel verwenden, das dem Nutzer mitteilt, dass die App geladen wird, oder eine sanft pulsierende Animation für das Wireframe, damit es sich anfühlt, als würde es geladen. So ist klar, dass die Inhalte gleich geladen werden. Das kann dazu beitragen, dass Nutzer die Seite nicht noch einmal senden oder unnötig aktualisieren.

Den Status einer Aktion durch Feedback anzeigen Wenn ein Nutzer beispielsweise ein Dokument offline bearbeitet, sollten Sie das Feedback so gestalten, dass es sich deutlich von dem Feedback unterscheidet, das angezeigt wird, wenn der Nutzer online ist. Es sollte aber trotzdem darauf hingewiesen werden, dass die Datei „gespeichert“ wurde und synchronisiert wird, sobald eine Netzwerkverbindung besteht. So erfährt der Nutzer, wie Ihre App funktioniert, und wird darüber informiert, dass seine Aufgabe oder Aktion gespeichert wurde. Das kann das Vertrauen in Ihre Anwendung stärken.

Inhalte nicht blockieren

In einigen Apps kann ein Nutzer eine Aktion auslösen, z. B. ein neues Dokument erstellen. Einige Apps versuchen, eine Verbindung zu einem Server herzustellen, um das neue Dokument zu synchronisieren. Dazu wird ein aufdringliches Lade-Modal-Dialogfeld angezeigt, das den gesamten Bildschirm abdeckt. Das kann funktionieren, wenn der Nutzer eine stabile Netzwerkverbindung hat. Wenn das Netzwerk jedoch instabil ist, kann er diese Aktion nicht abbrechen und die Benutzeroberfläche verhindert, dass er etwas anderes tut.

Vermeiden Sie Netzwerkanfragen, die Inhalte blockieren. Lassen Sie den Nutzer weiterhin in Ihrer App browsen und Aufgaben in die Warteschlange stellen, die ausgeführt und synchronisiert werden, wenn die Verbindung besser ist.

Für die nächste Milliarde Nutzer entwickeln

In vielen Regionen sind Low-End-Geräte weit verbreitet, die Verbindung ist unzuverlässig und für viele Nutzer sind Daten extrem teuer. Gewinnen Sie das Vertrauen Ihrer Nutzer, indem Sie transparent und sparsam mit Daten umgehen. Überlegen Sie, wie Sie Nutzern mit schlechten Verbindungen helfen und die Benutzeroberfläche vereinfachen können, um Aufgaben zu beschleunigen. Fragen Sie Nutzer immer, bevor Sie datenintensive Inhalte herunterladen.

Bieten Sie Nutzern mit langsamen Verbindungen Optionen mit niedriger Bandbreite an. Stellen Sie kleinere Assets über langsamere Netzwerkverbindungen bereit oder bieten Sie eine Option zum Auswählen von Assets in hoher oder niedriger Qualität an.

Fazit

Aufklärung ist für die Offline-UX von entscheidender Bedeutung, da Nutzer damit nicht vertraut sind. Um ihnen das Lernen zu erleichtern, sollten Sie versuchen, Verbindungen zu vertrauten Konzepten herzustellen, z. B. indem Sie erklären, dass das Herunterladen zur späteren Verwendung dasselbe ist wie das Offlinestellen von Daten.

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

• Berücksichtigen Sie beim Design die Erfolgs-, Fehler- und Instabilitätsfaktoren einer Netzwerkverbindung.
• Daten können teuer sein. Nehmen Sie daher Rücksicht auf den Nutzer.
• Für die meisten Nutzer weltweit ist die technische Umgebung fast ausschließlich mobil.
• Low-End-Geräte sind weit verbreitet. Sie haben nur wenig Speicherplatz, Arbeitsspeicher und Rechenleistung, kleine Displays und eine geringere Touchscreen-Qualität. Achten Sie darauf, dass die Leistung Teil Ihres Designprozesses ist.
• Nutzern erlauben, Ihre Anwendung zu verwenden, wenn sie offline sind
• Informieren Sie Nutzer über ihren aktuellen Status und über Änderungen des Status.
• Wenn Ihre App nicht viele Daten benötigt, sollten Sie sie standardmäßig offline anbieten.
• Wenn die App viele Daten benötigt, sollten Sie Nutzer darüber informieren, wie sie Inhalte für die Offline-Nutzung herunterladen können.
• Nutzererlebnisse zwischen Geräten übertragen
• Verwenden Sie Sprache, Symbole, Bilder, Typografie und Farben, um dem Nutzer Ideen zu vermitteln.
• Geben Sie dem Nutzer Sicherheit und Feedback, um ihm zu helfen.