Offline-UX-Designrichtlinien

Mustafa Kurtuldu

Thomas Steiner

Auf dieser Seite finden Sie Designrichtlinien für eine gute Nutzererfahrung bei langsamen Netzwerken und offline.

Die Qualität einer Netzwerkverbindung kann von einer Reihe von Faktoren beeinflusst werden, z. B.:

• Schlechte Abdeckung durch den Mobilfunkanbieter.
• Extreme Wetterbedingungen
• Stromausfälle
• Betreten von dauerhaften „Funklöchern“, z. B. in Gebäuden mit Wänden, die Netzwerkverbindungen blockieren.
• Wenn Sie vorübergehende „Funklöcher“ befahren, z. B. wenn Sie mit dem Zug durch einen Tunnel fahren.
• Zeitlich begrenzte Internetverbindungen, z. B. an Flughäfen oder in Hotels
• Kulturelle Praktiken, für die zu bestimmten Zeiten oder an bestimmten Tagen nur eingeschränkter oder gar kein Internetzugriff erforderlich ist.

Als Entwickler sollten Sie dafür sorgen, dass die Nutzerfreundlichkeit so hoch ist, dass sich Verbindungsprobleme möglichst wenig bemerkbar machen.

Festlegen, was Nutzern bei einer schlechten Netzwerkverbindung angezeigt werden soll

Die erste Frage, die Sie sich stellen sollten, ist, wie ein erfolgreicher und ein fehlgeschlagener Verbindungsaufbau für Ihre App aussehen. Eine erfolgreiche Verbindung ist die normale Onlinenutzung Ihrer App. Ein Verbindungsfehler bezieht sich sowohl auf das Verhalten Ihrer App im Offlinemodus als auch in Netzwerken mit Verzögerungen.

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

• Wie lange warten Sie, um den Erfolg oder Misserfolg einer Verbindung zu bestimmen?
• Was können Sie tun, während der Erfolg oder Misserfolg ermittelt wird?
• Was sollten Sie tun, wenn die Verbindung fehlschlägt?
• Wie informieren Sie den Nutzer darüber, was passiert?

Nutzer über ihren aktuellen Status und Statusänderungen informieren

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

Offenbar haben Sie eine schlechte Netzwerkverbindung. Kein Problem. Nachrichten werden gesendet, sobald das Netzwerk wiederhergestellt ist.

Nutzer informieren, wenn sich die Netzwerkverbindung verbessert oder wiederhergestellt wird

Wie Sie dem Nutzer mitteilen, dass sich seine Netzwerkverbindung verbessert hat, hängt von Ihrer Anwendung ab. Apps, bei denen aktuelle Informationen im Vordergrund stehen, z. B. Wetter- oder Börsen-Tracker, sollten automatisch aktualisiert werden und den Nutzer so bald wie möglich darüber informieren.

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

Ein Beispiel hierfür ist der Chrome-Plattformstatus, der Nutzer über eine Aktualisierung der App informiert.

Bei einigen Apps kann immer das Datum angezeigt werden, an dem sie zuletzt aktualisiert wurden. Das ist beispielsweise besonders nützlich für Währungsumrechner-Apps.

Nachrichten-Apps können eine einfache Benachrichtigung mit der Aufforderung zum Tippen anzeigen, um neue Inhalte zu aktualisieren. Wenn ein Artikel automatisch aktualisiert wird, verlieren Nutzer ihren Leseplatz.

Benutzeroberfläche entsprechend dem aktuellen Kontextstatus aktualisieren

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

Andere Formen von Kontextzuständen können Daten enthalten. In der Finanz-App Robinhood wird beispielsweise mithilfe von Farben und Grafiken angezeigt, wann die Börse geöffnet ist. Die gesamte Benutzeroberfläche wird weiß und dann ausgegraut, 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 über das Offlinemodell

Die meisten Nutzer sind es gewohnt, immer eine Netzwerkverbindung zu haben. Sie müssen ihnen erklären, was sich in Ihrer App ändert, wenn sie keine Verbindung haben. Informieren Sie sie darüber, wo große Daten gespeichert werden, und geben Sie ihnen Einstellungen, 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 einzige Designentscheidung wie ein einzelnes Symbol zu verlassen, um die gesamte Geschichte zu erzählen.

Standardmäßig eine Offlinefunktion bereitstellen

Wenn Ihre App nicht viele Daten benötigt, sollten Sie diese standardmäßig im Cache speichern. Nutzer können zunehmend frustriert werden, 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 lässt Ihre App nicht vertrauenswürdig erscheinen. Eine App, die die Auswirkungen eines Netzwerkausfalls verringert, begeistert ihre Nutzer.

Nachrichtenwebsites können von einem automatischen Download und Speichern der neuesten Nachrichten profitieren. Dabei können Daten gespart werden, indem nur der Text heruntergeladen wird, damit Nutzer die Nachrichten des Tages auch ohne Verbindung lesen können. Sie können dieses Verhalten an das Nutzerverhalten anpassen, indem Sie den Download der Nachrichtenkategorien priorisieren, die der Nutzer am häufigsten aufruft.

Nutzer informieren, wenn die App für die Offlinenutzung bereit ist

Wenn eine Webanwendung zum ersten Mal geladen wird, muss sie dem Nutzer mitteilen, ob sie für die Offlinenutzung bereit ist. Verwenden Sie dazu ein Widget, das über eine Nachricht unten auf dem Bildschirm kurzes Feedback zu einem Vorgang gibt, z. B. wenn ein Bereich synchronisiert oder eine Datei heruntergeladen wurde.

Achten Sie darauf, dass die Sprache zu Ihrer Zielgruppe passt, und verwenden Sie in allen Fällen dieselbe Formulierung. Nicht technische Zielgruppen verstehen das Wort „offline“ oft falsch. Verwenden Sie stattdessen aktionsbasierte Sprache, mit der sich Ihre Zielgruppe identifizieren kann.

Die Option „Für die Offlinenutzung speichern“ muss auf der Benutzeroberfläche gut sichtbar sein.

Wenn eine App viele Daten verbraucht, muss es eine Option oder Markierung geben, mit der ein Element zur Offlinenutzung hinzugefügt werden kann. Dateien nur dann automatisch herunterladen, wenn ein Nutzer dies über ein Einstellungsmenü ausdrücklich angefordert hat. Die Benutzeroberfläche für das Anpinnen oder Herunterladen muss für den Nutzer deutlich sichtbar sein und darf nicht von anderen Benutzeroberflächenelementen verdeckt werden.

Ein Beispiel hierfür wäre 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 Nutzung herunterladen möchten, müssen sie vorausplanen. Daher sollten Sie sie während des Onboardings darüber informieren.

Erläutern, 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 Nutzer sehen können, was sie auf ihrem Gerät gespeichert haben und was noch gespeichert werden muss. Die Einstellungen sollten prägnant sein und klar angeben, wo die Daten gespeichert werden und wer darauf Zugriff hat.

Tatsächliche Kosten einer Aktion anzeigen

Viele Nutzer setzen die Offlinefunktion mit „Herunterladen“ gleich. Nutzer in Ländern, in denen Netzwerkverbindungen regelmäßig ausfallen oder nicht verfügbar sind, teilen oft Inhalte mit anderen Nutzern oder speichern Inhalte zur Offlinenutzung, wenn eine Verbindung besteht.

Nutzer mit Datentarifen vermeiden manchmal das Herunterladen großer Dateien aus Angst vor hohen Kosten. Daher sollten 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 ein Datentarif hat, und die Dateigröße anzeigen, damit der Nutzer die Kosten einer Datei sehen kann.

Gehackte Websites vermeiden

Nutzer hacken oft eine Website, ohne es zu merken. Bevor es cloudbasierte Web-Anwendungen zur Dateifreigabe gab, speicherten Nutzer große Dateien häufig und hängten sie an E-Mails an, damit sie diese Dateien von einem anderen Gerät aus bearbeiten konnten. Eine gute Benutzeroberfläche löst das Problem, das Nutzer lösen möchten, ohne dass sie in die gehackte Umgebung gezogen werden. Bieten Sie beispielsweise eine Möglichkeit, große Dateien auf mehreren Geräten zu teilen, anstatt den Anhängen großer Dateien an E-Mails mehr Nutzerfreundlichkeit zu verleihen.

Inhalte von einem Gerät auf ein anderes übertragen

Wenn Sie für labile Netzwerke entwickeln, sollten Sie versuchen, sobald die Verbindung besser ist, zu synchronisieren, damit die App auch auf anderen Geräten funktioniert. Stellen Sie sich beispielsweise vor, dass die Netzwerkverbindung einer Reise-App mitten in einer Buchung unterbrochen wird. Wenn die Verbindung wiederhergestellt wird, wird die App mit dem Konto des Nutzers synchronisiert. So kann er seine Buchung auf seinem Computer fortsetzen und die Nutzung ist nahtlos.

Informieren Sie den Nutzer darüber, in welchem Status sich seine Daten befinden. Sie können beispielsweise anzeigen, ob die App synchronisiert wurde. Informieren Sie sie nach Möglichkeit, aber überfordern Sie sie nicht mit zu vielen Informationen.

Inklusive Designs entwickeln

Achten Sie beim Entwerfen Ihrer UX darauf, inklusiv zu sein, indem Sie aussagekräftige Designelemente, einfache Sprache, Standardsymbole und aussagekräftige Bilder verwenden, die die Nutzer bei der Ausführung der Aktion oder Aufgabe unterstützen, ohne sie zu behindern.

Verwenden Sie eine einfache, klare Sprache.

Gutes UX-Design besteht nicht nur aus dem Entwerfen der Benutzeroberfläche. Dazu gehören der Pfad, den ein Nutzer durch Ihre App nimmt, und alles, was er dabei sieht, einschließlich der Sprache, die in der App verwendet wird, um diesen Pfad zu beschreiben. Vermeiden Sie Fachjargon, wenn Sie UI-Komponenten oder den Status der App erklären. Das Wort „offline“ ist oft nicht klar genug, um den Nutzern zu vermitteln, was Ihre App tut.

Don'ts

Do

Mehrere Designgeräte verwenden, um barrierefreie Nutzererfahrungen zu schaffen

Verwenden Sie Sprache, Farbe und visuelle Komponenten, um einen Status oder eine Statusänderung anzuzeigen. Wenn nur die Farbe verwendet wird, um den Status anzuzeigen, ist dieser für Nutzer möglicherweise schwer zu erkennen oder für sehbehinderte Nutzer sogar völlig unzugänglich. Außerdem wird im Webdesign in der Regel Grau für deaktivierte Elemente verwendet. Wenn Sie also eine ausgegraute Benutzeroberfläche verwenden, um anzuzeigen, dass Ihre App offline ist, kann das zu Verwirrung darüber führen, was Ihre App im Offlinemodus tun kann, insbesondere wenn Sie nur Farbe verwenden, um den Status anzuzeigen.

Um Missverständnisse zu vermeiden, sollten Sie den App-Status dem Nutzer auf unterschiedliche Weise anzeigen, z. B. mit Farbe, Labels und UI-Komponenten.

Do

Don'ts

Verwenden Sie Symbole, die eine Bedeutung haben.

Verwenden Sie neben Ihren Symbolen aussagekräftige Textlabels. Symbole allein können verwirrend sein, vor allem weil das Konzept „offline“ im Web relativ neu ist. Weitere Beispiele für verwirrende Symbole sind die Verwendung einer Diskette für „Speichern“, was für jüngere Nutzer, die noch nie eine Diskette gesehen haben, keinen Sinn ergibt, sowie das Dreistrich-Menüsymbol.

Wenn Sie ein Offlinesymbol einführen, halten Sie sich an die visuellen Darstellungen des Branchenstandards, sofern vorhanden, und fügen Sie ein Textlabel und eine Beschreibung hinzu. So können Sie beispielsweise ein Downloadsymbol für das Speichern für die Offlinenutzung und ein Synchronisierungssymbol für eine Aktion verwenden, die eine Synchronisierung umfasst. Seien Sie vorsichtig, wenn Sie Symbole verwenden, um den Status zu verdeutlichen, die stattdessen als Speicher- oder Downloadaktion interpretiert werden könnten.

Weitere Inspiration finden Sie im Material Design-Symbolsatz.

Skelettlayouts und andere Feedbackmechanismen verwenden

Während Inhalte in Ihrer App geladen werden, sollten Sie den Nutzern anzeigen, dass sie geladen werden, damit sie nicht denken, dass die App nicht funktioniert. Eine Möglichkeit dazu ist die Verwendung eines Skelettlayouts, 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 den Nutzer darüber informiert, dass die App geladen wird, oder eine sanft pulsierende Animation für den Wireframe, die den Eindruck erweckt, dass die App aktiv ist und geladen wird. So wird dem Nutzer signalisiert, dass etwas passiert, und es wird verhindert, dass er den Vorgang noch einmal durchläuft oder unnötigerweise die Seite aktualisiert.

Geben Sie Feedback, um den Status einer Aktion anzuzeigen. Wenn ein Nutzer beispielsweise ein Dokument offline bearbeitest, sollten Sie das Feedbackdesign so ändern, dass es sich deutlich von dem Design unterscheidet, das angezeigt wird, wenn er online ist. Es sollte aber trotzdem angezeigt werden, dass die Datei „gespeichert“ wurde und synchronisiert wird, sobald eine Netzwerkverbindung besteht. So erfahren Nutzer mehr über die Funktionsweise Ihrer App und können sich darauf verlassen, dass ihre Aufgabe oder Aktion gespeichert wurde. Das kann ihnen die Nutzung Ihrer App erleichtern.

Inhalte nicht blockieren

In einigen Apps kann ein Nutzer eine Aktion auslösen, z. B. das Erstellen eines neuen Dokuments. Einige Apps versuchen, eine Verbindung zu einem Server herzustellen, um das neue Dokument zu synchronisieren. Um dies zu demonstrieren, wird ein aufdringliches modales Ladedialogfeld angezeigt, das den gesamten Bildschirm bedeckt. Das funktioniert möglicherweise, wenn der Nutzer eine stabile Netzwerkverbindung hat. Wenn das Netzwerk jedoch instabil ist, kann er diese Aktion nicht beenden. Die Benutzeroberfläche verhindert dann, dass er etwas anderes tut.

Vermeiden Sie Netzwerkanfragen, die Inhalte blockieren. Der Nutzer kann weiterhin in Ihrer App surfen und Aufgaben in die Warteschlange stellen, die ausgeführt und synchronisiert werden, sobald die Verbindung wieder stabil ist.

Design für die nächste Milliarde

In vielen Regionen sind Low-End-Geräte weit verbreitet, die Konnektivität 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 schlechter Internetverbindung helfen und die Benutzeroberfläche vereinfachen können, um Aufgaben zu beschleunigen. Fragen Sie Nutzer immer, bevor Sie datenintensive Inhalte herunterladen.

Biete Nutzern mit langsamen Verbindungen Optionen mit niedriger Bandbreite an. Stellen Sie bei langsameren Netzwerkverbindungen kleinere Assets bereit oder bieten Sie die Möglichkeit, Assets mit hoher oder niedriger Qualität auszuwählen.

Fazit

Aufklärung ist der Schlüssel zum Offline-UX, da Nutzer damit nicht vertraut sind. Um das Lernen zu erleichtern, sollten Sie Verknüpfungen zu bekannten Konzepten herstellen. Erklären Sie beispielsweise, dass das Herunterladen für die spätere Verwendung dasselbe ist wie das Herunterladen von Daten für die Offlinenutzung.

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

• Planen Sie für den Erfolg, den Ausfall und die Instabilität einer Netzwerkverbindung.
• Daten können teuer sein, daher sollten Sie Rücksicht auf die Nutzer nehmen.
• Für die meisten Nutzer weltweit ist die Technologieumgebung fast ausschließlich mobil.
• Low-End-Geräte sind weit verbreitet. Sie haben wenig Speicherplatz, Arbeitsspeicher und Rechenleistung, kleine Displays und eine geringere Touchscreen-Qualität. Achten Sie darauf, dass die Leistung Teil Ihres Designprozesses ist.
• Sie können Nutzern erlauben, Ihre App auch dann zu verwenden, wenn sie offline sind.
• Informieren Sie die Nutzer über ihren aktuellen Status und über Statusänderungen.
• Bieten Sie die Offlineversion standardmäßig an, wenn Ihre App nicht viele Daten benötigt.
• Wenn die App viele Daten benötigt, informieren Sie die Nutzer darüber, wie sie Inhalte zur Offlinenutzung herunterladen können.
• Die Nutzung muss auf allen Geräten möglich sein.
• Verwenden Sie Sprache, Symbole, Bilder, Typografie und Farbe, um Nutzern Ideen zu vermitteln.
• Beruhigen Sie den Nutzer und geben Sie ihm Feedback.