Ein Leitfaden zum Entwerfen von Weberlebnissen für langsame Netzwerke und offline.
Dieser Artikel enthält Designrichtlinien dazu, wie Sie sowohl bei langsamen Netzwerken als auch offline ein hervorragendes Erlebnis schaffen können.
Die Qualität einer Netzwerkverbindung kann von verschiedenen Faktoren beeinflusst werden, darunter:
- Schlechte Abdeckung eines Anbieters.
- Extreme Wetterbedingungen.
- Stromausfälle.
- Betreten eines permanenten Bereichs ohne Empfang, z. B. in Gebäuden mit Mauern, die die Netzwerkverbindungen blockieren
- Vorübergehende „Leerräume“ erreichen, z. B. wenn Sie in einem Zug oder durch einen Tunnel fahren
- Internetverbindungen mit Zeitfenster, z. B. an Flughäfen oder Hotels
- Kulturelle Praktiken, die zu bestimmten Zeiten oder an bestimmten Tagen einen eingeschränkten oder gar keinen Internetzugang erfordern.
Ihr Ziel ist es, Nutzern eine positive Erfahrung zu bieten, die die Auswirkungen von Änderungen bei der Konnektivität verringern.
Entscheiden Sie, was Nutzern bei schlechter Netzwerkverbindung angezeigt werden soll.
Die erste Frage, die gestellt werden muss, ist, wie der Erfolg und Misserfolg einer Netzwerkverbindung aussehen. Eine erfolgreiche Verbindung ist der normale Online-Betrieb Ihrer App. Der Ausfall einer Verbindung kann jedoch sowohl auf den Offlinestatus Ihrer Anwendung als auch auf ihr Verhalten bei einem langsamen Netzwerk zurückzuführen sein.
Wenn Sie über den Erfolg oder Misserfolg einer Netzwerkverbindung nachdenken, müssen Sie sich die folgenden wichtigen UX-Fragen stellen:
- 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 sollten Sie im Falle eines Scheiterns tun?
- Wie informieren Sie die Nutzenden über die oben genannten Punkte?
Nutzer über ihren aktuellen Zustand und ihre Statusänderung informieren
Informieren Sie den Nutzer über die Aktionen, die er bei einem Netzwerkfehler noch ausführen kann, und über den aktuellen Status der Anwendung. Eine Benachrichtigung könnte zum Beispiel lauten:
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 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 priorisieren, sollten automatisch aktualisiert werden und den Nutzer so schnell wie möglich benachrichtigen.
Es empfiehlt sich, den Nutzer mithilfe eines visuellen Hinweises wie eines Toast-Elements aus Material Design darüber zu informieren, dass Ihre Web-App „im Hintergrund“ aktualisiert wurde. Dazu muss sowohl das Vorhandensein eines Service Workers als auch eine Aktualisierung des verwalteten Inhalts erkannt werden. Ein Codebeispiel für diese Funktion finden Sie hier.
Ein Beispiel dafür ist der Chrome-Plattformstatus, bei dem ein Hinweis an den Nutzer gesendet wird, wenn die App aktualisiert wurde.
Außerdem können Sie in einem gut sichtbaren Bereich das Datum der letzten App-Aktualisierung anzeigen lassen. Dies wäre z. B. für eine Anwendung mit Währungsrechner nützlich.
Anwendungen wie Nachrichten-Apps können eine einfache Benachrichtigung zum Aktualisieren durch Tippen anzeigen, die den Nutzer über neue Inhalte informiert. Die automatische Aktualisierung würde dazu führen, dass die Nutzenden ihren Platz verlieren.
Benutzeroberfläche aktualisieren, um den aktuellen Kontextstatus widerzuspiegeln
Jedes UI-Element kann einen eigenen Kontext und eine eigene Funktionalität haben, die sich ändern, je nachdem, ob eine erfolgreiche Verbindung erforderlich ist. Ein Beispiel hierfür wäre 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 des kontextbezogenen Status könnten Daten umfassen. In der Finanzanwendung Robinhood können Nutzer beispielsweise Aktien kaufen und sie werden mithilfe von Farben und Grafiken über die Börsenöffnung informiert. Die gesamte Oberfläche wird weiß und wird grau dargestellt, wenn der Markt schließt. Wenn der Wert eines Aktienkurses steigt oder fällt, wird jedes einzelne Aktien-Widget je nach Status grün oder rot.
Informieren Sie die Nutzenden, um das Offlinemodell zu verstehen.
Offline 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 an. Verwende mehrere UI-Designkomponenten wie informative Sprache, Symbole, Benachrichtigungen, Farben und Bilder, um diese Ideen kollektiv zu vermitteln, anstatt dich 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 verärgert werden, 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 fühlt sich Ihre App nicht vertrauenswürdig an. Eine App, die die Auswirkungen eines Netzwerkausfalls verringert, wird für den Nutzer magisch wirken.
Nachrichtenwebsites können davon profitieren, die neuesten Nachrichten automatisch herunterzuladen und zu speichern, sodass Nutzer die aktuellen Nachrichten ohne Internetverbindung lesen können, z. B. den Text ohne Bilder des Artikels herunterladen. Außerdem sollten Sie sich an das Verhalten der Nutzenden anpassen. Wenn Nutzer beispielsweise normalerweise den Sportbereich sehen, wählen Sie diesen Download als priorisierten Download aus.
Nutzer informieren, wenn die App offline verwendet werden kann
Wenn eine Web-App 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 gibt, und zwar über eine Meldung am unteren Bildschirmrand, z. B. wenn ein Abschnitt synchronisiert oder eine Datendatei heruntergeladen wurde.
Denken Sie noch einmal über die Sprache nach, die Sie verwenden, um sicherzustellen, dass sie zu Ihrer Zielgruppe passt. Achten Sie darauf, dass die Botschaft in allen Fällen, in denen sie verwendet wird, gleich ist. Der Begriff „Offline“ wird von nicht technisch versierten Zuschauern im Allgemeinen falsch verstanden. Verwenden Sie daher aktionsbasierte Formulierungen, mit denen sich Ihr Publikum identifizieren kann.
„Für Offline-Nutzung speichern“ sollte ein offensichtlicher Bestandteil der Benutzeroberfläche für datenintensive Apps sein
Wenn eine Anwendung große Datenmengen verwendet, sollten Sie einen Schalter oder eine Stecknadel verwenden, um Elemente zur Offline-Verwendung hinzuzufügen, anstatt sie automatisch herunterzuladen, es sei denn, ein Nutzer hat dies ausdrücklich über ein Einstellungsmenü angefordert. Achte darauf, dass die Markierung oder die Download-UI nicht durch andere UI-Elemente verdeckt wird und die Funktion für den Nutzer offensichtlich ist.
Ein Beispiel wäre ein Musikplayer, der große Datendateien erfordert. Der Nutzer weiß die damit verbundenen Kosten für Daten, kann den Player aber auch offline verwenden. Wenn Nutzer Musik für die spätere Verwendung herunterladen möchten, muss sie vorausplanen. Daher kann es bei der Einrichtung erforderlich sein, sich darüber zu informieren.
Stellen Sie dar, was offline verfügbar ist.
Seien Sie klar, welche Option Sie anbieten. Möglicherweise müssen Sie einen Tab oder eine Einstellung mit einer „Offline-Mediathek“ oder einem Inhaltsindex anzeigen lassen, damit Nutzer leicht sehen können, was auf ihrem Smartphone gespeichert ist und was gespeichert werden muss. Die Einstellungen müssen prägnant sein und klar sein, wo die Daten gespeichert werden und wer Zugriff darauf hat.
Tatsächliche Kosten einer Aktion anzeigen
Viele Nutzer setzen Offline-Funktionen mit „Herunterladen“ gleich. Nutzer in Ländern, in denen Netzwerkverbindungen regelmäßig ausfallen oder nicht verfügbar sind, teilen Inhalte häufig mit anderen Nutzern oder speichern sie für die Offlinenutzung, wenn eine Verbindung besteht.
Nutzer mit Datentarifen vermeiden das Herunterladen großer Dateien aus Kostengründen. Daher kann es sinnvoll sein, auch die entsprechenden Kosten anzuzeigen, damit Nutzer einen aktiven Vergleich für eine bestimmte Datei oder Aufgabe durchführen können. Wenn die obige Musik-App beispielsweise erkennen könnte, ob der Nutzer einen Datentarif hat, und die Dateigröße anzeigen könnte, damit Nutzer die Kosten einer Datei sehen können.
Hacking verhindern
Nutzer hacken häufig eine Websitevariante, ohne zu merken, dass sie es tut. Vor cloudbasierten Web-Apps für die Dateifreigabe war es beispielsweise üblich, dass Nutzer große Dateien speichern und an E-Mails anhängen, um sie dann auf einem anderen Gerät weiter bearbeiten zu können. Es ist wichtig, nicht in ihre Erfahrungen mit Hackerangriffen hineingezogen zu werden, sondern sich anzusehen, was sie erreichen wollen. Mit anderen Worten: Anstatt darüber nachzudenken, wie Sie das Anhängen großer Dateien benutzerfreundlicher gestalten können, lösen Sie das Problem der gemeinsamen Nutzung großer Dateien über mehrere Geräte.
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. Wenn die Verbindung wiederhergestellt ist, wird die App mit dem Konto des Nutzers synchronisiert, sodass dieser die Buchung auf seinem Computer fortsetzen kann. Es kann für Nutzer sehr verstörend sein, keine Erfahrungen zu übertragen.
Sie informieren Nutzer über den aktuellen Status ihrer Daten. So lässt sich zum Beispiel anzeigen, ob die App synchronisiert wurde. Informieren Sie sie nach Möglichkeit, aber überlasten Sie sie nicht mit Nachrichten.
Inklusive Designerlebnisse schaffen
Achten Sie bei der Designentwicklung auf Inklusivität und stellen Sie aussagekräftige Designgeräte, einfache Sprache, Standardsymbole und aussagekräftige Bilder zur Verfügung, die die Nutzer zum Ausführen der Aktion oder Aufgabe leiten, anstatt ihren Fortschritt zu behindern.
Eine einfache, prägnante Sprache verwenden
Bei einer guten UX geht es nicht nur um eine gut durchdachte Oberfläche. Er enthält den vom Nutzer verwendeten Pfad sowie die in der App verwendeten Wörter. Vermeiden Sie Fachjargon, wenn Sie den Zustand der App oder einzelne UI-Komponenten erklären. Beachten Sie, dass der Ausdruck „App offline“ dem Nutzer möglicherweise nicht den aktuellen Status der App vermittelt.
Mehrere Designgeräte verwenden, um barrierefreie User Experiences zu schaffen
Verwenden Sie Sprach-, Farb- und visuelle Komponenten, um Statusänderungen oder den aktuellen Status darzustellen. Die reine Verwendung von Farbe zur Darstellung des Zustands wird vom Nutzer möglicherweise nicht bemerkt und ist für Nutzer mit Sehbehinderungen möglicherweise nicht zugänglich. Außerdem ist der Grundstein für Designer, eine graue Benutzeroberfläche zur Darstellung von Offlineinhalten zu verwenden, aber dies kann im Web eine überladene Bedeutung haben. Eine graue Benutzeroberfläche wie Eingabeelemente in einem Formular bedeutet auch, dass ein Element deaktiviert ist. Dies kann Verwirrung stiften, wenn Sie nur Farbe zur Darstellung des Zustands verwenden.
Um Missverständnisse zu vermeiden, sollten Sie Nutzern verschiedene Status auf verschiedene Weise ausdrücken, z. B. mit Farben, Labels und UI-Komponenten.
Bedeutungsvolle Symbole verwenden
Stellen Sie sicher, dass Informationen mit aussagekräftigen Textbeschriftungen und Symbolen korrekt vermittelt werden. Symbole allein können problematisch sein, da das Konzept des Offline-Zugriffs im Web relativ neu ist. Nutzende können Symbole, die sie selbst verwendet haben, möglicherweise falsch verstehen. Beispielsweise ist die Verwendung einer Diskette zum Speichern für eine ältere Generation sinnvoll, aber junge Nutzer, die noch nie eine Diskette gesehen haben, könnten durch diese Metapher verwirrt werden. Ebenso ist bekannt, dass das Symbol für das Hamburger-Menü die Nutzenden verwirrt, wenn es ohne Beschriftung angezeigt wird.
Versuchen Sie bei der Einführung eines Offlinesymbols, mit den branchenüblichen visuellen Elementen (sofern vorhanden) konsistent zu bleiben und ein Textlabel und eine Beschreibung bereitzustellen. Das Speichern für den Offlinezugriff kann beispielsweise ein typisches Downloadsymbol sein. Wenn es sich bei der Aktion um eine Synchronisierung handelt, könnte dies ein Synchronisierungssymbol sein. Einige Aktionen können so interpretiert werden, dass sie für den Offlinezugriff gespeichert werden und nicht den Netzwerkstatus. 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 eine Reihe von Dingen bedeuten, z. B. Herunterladen, Exportieren, Anpinnen usw. Wenn Sie sich noch mehr Inspiration ansehen möchten, sehen Sie sich die Symbole von Material Design an.
Rasterlayouts mit anderen Feedbackmechanismen verwenden
Ein Skeleton-Layout ist im Wesentlichen eine Wireframe-Version Ihrer App, die angezeigt wird, während Inhalte geladen werden. So weiß der Nutzer, 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 das Pulsieren des Wireframe-Inhalts, um der App das Gefühl zu geben, dass sie aktiv ist und geladen wird. So wissen Nutzer genau, was passiert, und sorgt dafür, dass die App nicht 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. Dies zeigt zu Demonstrationen, dass sie ein störendes modales Ladedialogfeld anzeigen, das den gesamten Bildschirm abdeckt. Dies kann problemlos funktionieren, wenn der Nutzer eine stabile Netzwerkverbindung hat, aber wenn das Netzwerk instabil ist, kann er diese Aktion nicht verlassen, und die Benutzeroberfläche hindert ihn effektiv an anderen Aktionen. Netzwerkanfragen, die Inhalte blockieren, sollten vermieden werden. Erlaube dem Nutzer, weiterhin deine App zu durchsuchen und Aufgaben in die Warteschlange zu stellen, die ausgeführt und synchronisiert werden, sobald die Verbindung verbessert wurde.
Demonstrieren Sie den Status einer Aktion, indem Sie Ihren Nutzenden Feedback geben. Wenn ein Nutzer beispielsweise ein Dokument bearbeitet, kann es sinnvoll sein, das Feedbackdesign so zu ändern, dass es sich sichtbar vom Onlinemodus unterscheidet, aber weiterhin anzeigt, dass seine Datei „gespeichert“ wurde und synchronisiert wird, sobald eine Netzwerkverbindung besteht. So wird der Nutzer über die verschiedenen verfügbaren Status informiert und die Bestätigung erhalten, dass seine Aufgabe oder Aktion gespeichert wurde. Dies hat den zusätzlichen Vorteil, dass die Nutzer sicherer im Umgang mit Ihrer Anwendung werden.
Design für die nächste Milliarde von Nutzern
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 Ihre Daten transparent und sparsam einsetzen. Überlegen Sie, wie Sie Nutzern mit schlechten Verbindungen helfen und die Benutzeroberfläche vereinfachen können, um Aufgaben zu beschleunigen. Fragen Sie die Nutzer immer, bevor Sie datenintensive Inhalte herunterladen.
Bieten Sie Optionen mit niedriger Bandbreite für Nutzer mit langsamen Verbindungen an. Wenn also die Netzwerkverbindung langsam ist, stellen Sie kleine Assets zur Verfügung. Bieten Sie die Möglichkeit, Assets mit hoher oder niedriger Qualität auszuwählen.
Fazit
Bildung ist der Schlüssel zur Offline-UX, da Nutzende mit diesen Konzepten nicht vertraut sind. Versuchen Sie, Assoziationen mit Dingen herzustellen, die Ihnen vertraut sind.Beispielsweise ist das Herunterladen zur späteren Verwendung dasselbe wie das Offline-Speichern von Daten.
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, deshalb sollten Sie auf den Nutzer 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 Rechenleistung sowie kleine Displays und eine geringere Touchscreen-Qualität. Stellen Sie sicher, 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 App viele Daten enthält, informieren Sie die Nutzer darüber, wie sie sie zur Offline-Nutzung 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 zusammen, um den Nutzenden Ideen zum Ausdruck zu bringen.
- Geben Sie Sicherheit und Feedback, um den Nutzenden zu helfen.