Offline-UX-Designrichtlinien

Ein Leitfaden zur Entwicklung von Webinhalten für langsame Netzwerke und offline.

Dieser Artikel enthält Designrichtlinien dazu, wie Sie sowohl langsame Netzwerke als auch offline optimal nutzen können.

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

• Schlechte Abdeckung eines Dienstleisters.
• Extreme Wetterbedingungen.
• Stromausfälle.
• Dauerhafte „tote Zonen“, z. B. in Gebäuden mit Mauern, die Netzwerkverbindungen blockieren
• vorübergehende „tote Zonen“, z. B. wenn Sie mit einem Zug fahren oder einen Tunnel durchqueren
• Timebox-Internetverbindungen, z. B. an Flughäfen oder Hotels
• Kulturelle Praktiken, die zu bestimmten Zeiten oder an bestimmten Tagen nur begrenzten oder gar keinen Internetzugang erfordern.

Ihr Ziel ist es, eine positive Nutzererfahrung zu bieten, durch die die Auswirkungen von Änderungen bei der Konnektivität verringert werden.

Festlegen, was Nutzern bei schlechter Netzwerkverbindung angezeigt werden soll

Die erste Frage, die gestellt werden muss, ist, wie der Erfolg und Misserfolg einer Netzwerkverbindung aussehen wird. Eine erfolgreiche Verbindung ist das normale Online-Erlebnis Ihrer App. Der Ausfall einer Verbindung kann jedoch sowohl auf den Offlinestatus Ihrer Anwendung als auch auf das Verhalten der Anwendung in einem langsamen Netzwerk zurückzuführen sein.

Wenn Sie über den Erfolg oder Misserfolg einer Netzwerkverbindung nachdenken, müssen Sie sich diese wichtigen UX-Fragen stellen:

• Wie lange warten Sie, bis Sie den Erfolg oder Ausfall einer Verbindung ermitteln?
• Was können Sie tun, während Erfolg oder Misserfolg bestimmt wird?
• Was sollten Sie tun, wenn ein Fehler auftritt?
• Wie informieren Sie den Nutzer über die oben genannten Punkte?

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

Informieren Sie den Nutzer über die Aktionen, die er bei einem Netzwerkausfall noch ausführen kann, und über den aktuellen Status der Anwendung. Beispiele für solche Benachrichtigungen:

Die Netzwerkverbindung scheint nicht gut zu sein. Kein Problem. Nachrichten werden gesendet, wenn das Netzwerk wiederhergestellt wurde.

Nutzer informieren, wenn die Netzwerkverbindung besser wird oder wiederhergestellt wird

Wie Sie den Nutzer darüber informieren, dass seine Netzwerkverbindung verbessert wurde, hängt von Ihrer Anwendung ab. Apps wie eine Börsen-App, die aktuelle Informationen priorisiert, sollten automatisch aktualisiert und den Nutzer so schnell wie möglich benachrichtigt werden.

Es wird empfohlen, den Nutzer mithilfe von visuellen Hinweisen wie einem Material Design-Toast-Element darüber zu informieren, dass Ihre Webanwendung im Hintergrund aktualisiert wurde. Dazu muss sowohl das Vorhandensein eines Service Workers als auch eine Aktualisierung seiner verwalteten Inhalte erkannt werden. Ein Codebeispiel für diese Funktion in Aktion finden Sie hier.

Ein Beispiel hierfür ist der Status der Chrome-Plattform, bei dem ein Hinweis an den Nutzer gesendet wird, wenn die App aktualisiert wurde.

Außerdem können Sie in einem gut sichtbaren Bereich anzeigen, wann die App zuletzt aktualisiert wurde. Dies wäre beispielsweise bei einer Anwendung zur Währungsumrechnung hilfreich.

In Anwendungen wie Nachrichten-Apps kann eine einfache Benachrichtigung durch Tippen zum Aktualisieren angezeigt werden, die den Nutzer über neue Inhalte informiert. Die automatische Aktualisierung würde dazu führen, dass Nutzer ihren Platz verlieren.

Benutzeroberfläche aktualisieren, um den aktuellen Kontextstatus widerzuspiegeln

Jedes UI-Element kann seinen eigenen Kontext und seine eigene Funktionalität haben, die sich ändern, je nachdem, ob eine erfolgreiche Verbindung erforderlich ist. Ein Beispiel hierfür ist eine E-Commerce-Website, die offline durchsucht werden kann. Die Schaltfläche „Kaufen“ und die Preise werden deaktiviert, bis wieder eine Verbindung hergestellt wird.

Andere Formen kontextabhängiger Zustände könnten Daten umfassen. Die Finanzanwendung Robinhood ermöglicht es Nutzern beispielsweise, Bestände zu kaufen, und verwendet Farben und Grafiken, um den Nutzer zu informieren, wenn der Markt geöffnet ist. Die gesamte Benutzeroberfläche wird weiß und dann grau dargestellt, wenn der Markt schließt. Wenn der Wert des Aktienkurses steigt oder fällt, wird jedes einzelne Aktien-Widget je nach Status grün oder rot.

Sie informieren die Nutzenden, damit sie verstehen, was das Offlinemodell ist.

Die Offlinewiedergabe ist ein neues mentales Modell für alle. Sie müssen Ihre Nutzer darüber informieren, welche Änderungen auftreten, wenn sie keine Verbindung haben. Teilen Sie ihm mit, wo große Daten gespeichert werden, und geben Sie Einstellungen zum Ändern des Standardverhaltens. Stellen Sie sicher, dass Sie mehrere UI-Designkomponenten wie beispielsweise informative Sprache, Symbole, Benachrichtigungen, Farben und Bilder verwenden, um diese Ideen kollektiv zu vermitteln, anstatt sich auf eine einzelne Designentscheidung, wie z. B. ein eigenes Symbol, zu verlassen, um die ganze Geschichte zu erzählen.

Standardmäßig Offlinenutzung bereitstellen

Wenn Ihre App nicht viele Daten benötigt, speichern Sie diese Daten standardmäßig im Cache. Nutzer werden immer frustriert, wenn sie nur über eine Netzwerkverbindung auf ihre Daten zugreifen können. Versuchen Sie, die User Experience so stabil wie möglich zu gestalten. Eine instabile Verbindung gibt Ihrer Anwendung das Gefühl, nicht vertrauenswürdig zu sein. Eine Anwendung, die die Auswirkungen eines Netzwerkausfalls reduziert, wird für den Nutzer wie Magie wirken.

Nachrichten-Websites können vom automatischen Herunterladen und automatischen Speichern der neuesten Nachrichten profitieren, sodass Nutzer aktuelle Nachrichten auch ohne Internetverbindung lesen können, z. B. den Text ohne die Bilder des Artikels herunterladen. Passen Sie sich auch an das Verhalten der Nutzenden an. Wenn beispielsweise der Bereich „Sport“ dem Typ entspricht, den sie normalerweise sehen, legen Sie diesen Download als Priorität fest.

Den Nutzer informieren, wenn die App offline verwendet werden kann

Wenn eine Webanwendung zum ersten Mal geladen wird, müssen Sie dem Nutzer mitteilen, ob sie offline verwendet werden kann. Verwenden Sie dazu ein Widget, das kurzes Feedback zu einem Vorgang über eine Meldung am unteren Bildschirmrand bietet, z. B. wenn ein Abschnitt synchronisiert oder eine Datendatei heruntergeladen wurde.

Denken Sie auch hier an die Sprache, die Sie verwenden, um sicherzustellen, dass sie zu Ihrer Zielgruppe passt. Achten Sie darauf, dass die Nachricht in allen Fällen, in denen sie verwendet wird, gleich ist. Der Begriff Offline wird von einer nicht-technischen Zielgruppe im Allgemeinen missverstanden. Verwenden Sie daher eine handlungsorientierte Sprache, mit der sich Ihre Zielgruppe identifizieren kann.

Die Funktion zum Speichern offline verwenden

Wenn eine Anwendung große Datenmengen nutzt, sollten Sie darauf achten, dass ein Schalter oder eine Stecknadel vorhanden ist, um Elemente für die Offline-Nutzung hinzuzufügen, anstatt sie automatisch herunterzuladen, es sei denn, ein Nutzer hat dies explizit über ein Einstellungsmenü angefordert. Achte darauf, dass die Anpinnen- oder Download-Benutzeroberfläche nicht von anderen UI-Elementen verdeckt wird und dass die Funktion für den Nutzer offensichtlich ist.

Ein Beispiel wäre ein Musikplayer, der große Datendateien erfordert. Der Nutzer ist sich der damit verbundenen Datenkosten bewusst, möchte den Player aber möglicherweise auch offline verwenden. Wenn Sie Musik zur späteren Verwendung herunterladen, muss der Nutzer vorausplanen. Daher kann dies beim Onboarding erforderlich sein.

Verdeutlichen, was offline verfügbar ist

Machen Sie sich klar, welche Option Sie anbieten. Möglicherweise müssen Sie einen Tab oder eine Einstellung mit einer „Offlinebibliothek“ oder einem Inhaltsindex anzeigen lassen, damit der Nutzer leicht sehen kann, was auf seinem Smartphone gespeichert ist und was gespeichert werden muss. Achten Sie darauf, dass die Einstellungen kurz und prägnant sind und klar ist, wo die Daten gespeichert werden und wer Zugriff darauf hat.

Tatsächliche Kosten einer Aktion anzeigen

Viele Nutzer setzen Offline-Funktionen mit Downloads gleich. Nutzer in Ländern, in denen die Netzwerkverbindungen regelmäßig fehlschlagen oder nicht verfügbar sind, teilen Inhalte häufig mit anderen Nutzern oder speichern Inhalte zur Offlinenutzung, wenn sie eine Verbindung haben.

Nutzer mit Datentarifen können aus Kostengründen möglicherweise das Herunterladen großer Dateien vermeiden. Daher empfiehlt es sich, auch die damit verbundenen Kosten anzuzeigen, damit Nutzer einen aktiven Vergleich für eine bestimmte Datei oder Aufgabe vornehmen können. Wenn die obige Musik-App beispielsweise erkennen könnte, ob der Nutzer einen Datentarif nutzt, und die Dateigröße anzeigen könnte, damit Nutzer die Kosten einer Datei sehen können.

Hacking verhindern

Oft hacken Nutzer Inhalte, ohne zu merken, dass sie es tun. Vor den cloudbasierten Web-Apps für die Dateifreigabe mussten Nutzer beispielsweise große Dateien speichern und an E-Mails anhängen, um sie von einem anderen Gerät aus weiter bearbeiten zu können. Es ist wichtig, nicht in die Hacking-Erfahrung hineingezogen zu werden, sondern genau zu betrachten, was sie zu erreichen versuchen. Mit anderen Worten, anstatt darüber nachzudenken, wie Sie das Anhängen einer großen Datei benutzerfreundlicher gestalten können, sollten Sie das Problem der Freigabe großer Dateien für mehrere Geräte lösen.

Erlebnisse von einem Gerät auf ein anderes übertragen

Wenn Sie für instabile Netzwerke entwickeln, versuchen Sie, eine Synchronisierung durchzuführen, sobald die Verbindung besser ist, um eine Übertragung zu ermöglichen. Stellen Sie sich z. B. vor, dass bei einer Reise-App die Netzwerkverbindung während einer Buchung unterbrochen wird. Sobald die Verbindung wiederhergestellt ist, wird die App mit dem Konto des Nutzers synchronisiert, sodass er die Buchung auf seinem Computer fortsetzen kann. Es kann für Nutzer sehr störend sein, wenn sie keine Erfahrungen übertragen können.

Nutzer über den aktuellen Status ihrer Daten informieren Sie können beispielsweise angeben, ob die App synchronisiert wurde. Informieren Sie sie nach Möglichkeit, aber überlasten Sie sie nicht mit Werbebotschaften.

Inklusive Designerlebnisse schaffen

Achten Sie beim Designen auf Inklusivität, indem Sie sinnvolle Designgeräte, einfache Sprache, Standardsymbole und aussagekräftige Bilder bereitstellen, die Nutzende dazu führen, die Aktion oder Aufgabe abzuschließen, anstatt ihren Fortschritt zu behindern.

Verwenden Sie eine einfache, prägnante Sprache.

Bei einer guten UX geht es nicht nur um eine gut gestaltete Oberfläche. Sie enthält den Pfad, den der Nutzer verwendet, sowie die in der Anwendung verwendeten Wörter. Vermeiden Sie Fachjargon, wenn Sie den Status der Anwendung oder einzelne UI-Komponenten erklären. Beachten Sie, dass der Ausdruck „App offline“ dem Nutzer möglicherweise nicht den aktuellen Status der Anwendung vermittelt.

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

Verwenden Sie Sprache, Farbe und visuelle Komponenten, um eine Zustandsänderung oder den aktuellen Status darzustellen. Die alleinige Verwendung von Farben zur Darstellung des Zustands wird vom Nutzer möglicherweise nicht wahrgenommen und ist möglicherweise für Nutzer mit Sehbehinderungen nicht zugänglich. Außerdem geht es Designschaffenden instinktiert darum, eine graue Benutzeroberfläche für die Offlinedarstellung zu verwenden. Dies kann im Web jedoch eine geladene Bedeutung haben. Eine ausgegraute UI wie Eingabeelemente in einem Formular bedeutet auch, dass ein Element deaktiviert ist. Dies kann Verwirrung stiften, wenn Sie den Zustand nur durch Farbe darstellen.

Um Missverständnisse zu vermeiden, drücken Sie dem Nutzer verschiedene Status auf verschiedene Weise aus, z. B. durch Farben, Labels und UI-Komponenten.

Verwenden Sie Symbole, die die Bedeutung vermitteln

Stellen Sie sicher, dass Informationen mit aussagekräftigen Textbeschriftungen und Symbolen richtig vermittelt werden. Symbole allein können problematisch sein, da das Konzept des Offline-Zugriffs im Web relativ neu ist. Nutzende können die selbst verwendeten Symbole möglicherweise missverstehen. Beispielsweise ist die Verwendung einer Diskette zum Speichern für ältere Generationen sinnvoll, aber junge Nutzer, die noch nie eine Diskette gesehen haben, könnten von dieser Metapher verwirrt werden. Ebenso ist bekannt, dass das Menüsymbol „Hamburger“ die Nutzenden verwirrt, wenn es ohne Label angezeigt wird.

Versuchen Sie bei der Einführung eines Offlinesymbols, mit den Branchenstandards konsistent zu sein (sofern vorhanden) und ein Textlabel und eine Beschreibung bereitzustellen. Die Offlinespeicherung kann beispielsweise ein typisches Downloadsymbol sein. Wenn die Aktion eine Synchronisierung beinhaltet, könnte es ein Synchronisierungssymbol sein. Einige Aktionen werden möglicherweise so interpretiert, als würden sie für die Offlinewiedergabe speichern, statt den Netzwerkstatus anzuzeigen. Denken Sie an die Aktion, die Sie vermitteln möchten, anstatt den Nutzenden ein abstraktes Konzept zu präsentieren. Das Speichern oder Herunterladen von Daten wäre beispielsweise aktionsbasiert.

„Offline“ kann je nach Kontext verschiedene Bedeutungen haben, z. B. Herunterladen, Exportieren oder Anpinnen. Weitere Anregungen findest du in den Symbolen von Material Design.

Rasterlayouts mit anderen Feedbackmechanismen verwenden

Ein Skeleton-Layout ist im Wesentlichen eine Wireframe-Version Ihrer App, die angezeigt wird, während Inhalte geladen werden. Auf diese Weise können Sie dem Nutzer zeigen, dass der Inhalt gleich geladen wird. Sie können auch eine Preloader-UI mit einem Textlabel verwenden, das den Nutzer darüber informiert, dass die App geladen wird. Ein Beispiel wäre, den Inhalt des Wireframes zu pulsieren, um der App das Gefühl zu geben, dass sie lebendig ist und geladen wird. Dadurch wissen Nutzer, dass etwas passiert, und verhindern, dass Ihre App noch einmal eingereicht oder aktualisiert wird.

Inhalte nicht blockieren

In einigen Anwendungen kann ein Nutzer eine Aktion wie das Erstellen eines neuen Dokuments auslösen. Einige Anwendungen versuchen, eine Verbindung zu einem Server herzustellen, um das neue Dokument zu synchronisieren. Zur Veranschaulichung wird ein aufdringliches modales Ladedialogfeld angezeigt, das den gesamten Bildschirm abdeckt. Dies kann gut funktionieren, wenn der Nutzer eine stabile Netzwerkverbindung hat, aber wenn das Netzwerk instabil ist, kann er dieser Aktion nicht mehr entkommen und die Benutzeroberfläche blockiert sie praktisch an weiteren Aktionen. Netzwerkanfragen, die Inhalte blockieren, sollten vermieden werden. Erlauben Sie dem Nutzer, weiterhin Ihre App zu durchsuchen und Aufgaben in die Warteschlange zu stellen, die ausgeführt und synchronisiert werden, sobald die Verbindung verbessert wurde.

Zeigen Sie den Status einer Aktion, indem Sie Ihren Nutzenden Feedback geben. Wenn ein Nutzer beispielsweise ein Dokument bearbeitet, sollten Sie das Feedback-Design so ändern, dass es sich sichtbar vom Online-Modus unterscheidet, aber weiterhin anzeigt, dass seine Datei "gespeichert" wurde und synchronisiert wird, sobald eine Netzwerkverbindung besteht. Dadurch wird der Nutzer über die verschiedenen verfügbaren Status informiert und bestätigt, dass seine Aufgabe oder Aktion gespeichert wurde. Dies hat den zusätzlichen Vorteil, dass die Nutzer sicherer im Umgang mit Ihrer Anwendung werden.

Designs für die nächste Milliarde von Nutzern entwickeln

In vielen Regionen sind Low-End-Geräte üblich, die Konnektivität ist unzuverlässig und für viele Nutzer sind die Daten unerschwinglich. Sie müssen das Vertrauen der Nutzer gewinnen, indem Sie Daten transparent und sparsam einsetzen. Überlegen Sie, wie Sie Nutzern bei schlechter Verbindung helfen und die Benutzeroberfläche vereinfachen können, um Aufgaben zu beschleunigen. Versuchen Sie immer, Nutzer zu fragen, bevor Sie datenintensive Inhalte herunterladen.

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

Fazit

Bildung ist der Schlüssel zur Offline-UX, da die Nutzenden mit diesen Konzepten nicht vertraut sind. Versuchen Sie, Assoziationen mit vertrauten Dingen herzustellen.Beispielsweise ist das Herunterladen zur späteren Verwendung dasselbe wie das Offline-Speichern von Daten.

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

• Achten Sie bei der Entwicklung auf Erfolg, Misserfolg und Instabilität einer Netzwerkverbindung.
• Daten können kostspielig sein, daher sollten Sie die Nutzenden berücksichtigen.
• Für die meisten Nutzer weltweit ist das technische Umfeld fast ausschließlich mobil.
• Low-End-Geräte mit begrenzter Speicher-, Arbeitsspeicher- und Prozessorleistung, kleinen Displays und schlechterer Touchscreen-Qualität sind keine Seltenheit. Stellen Sie sicher, dass die Leistung Teil Ihres Designprozesses ist.
• Ermöglichen Sie Nutzern, Ihre Anwendung zu durchsuchen, wenn sie offline sind.
• Informieren Sie die Nutzenden über ihren aktuellen Stand und über Änderungen der Bundesstaaten.
• Wenn deine App nicht viele Daten benötigt, solltest du sie standardmäßig offline bereitstellen.
• Ist die App sehr datenintensiv, informiere die Nutzer darüber, wie sie sie zur Offlinenutzung herunterladen können.
• Funktionen auf andere Geräte übertragen
• Verwenden Sie Sprache, Symbole, Bilder, Typografie und Farbe gemeinsam, um den Nutzenden Ideen zum Ausdruck zu bringen.
• Geben Sie den Nutzenden Bestätigung und Feedback, um ihnen zu helfen.