So erstellen Sie leere Statusseiten für Websites und mobile Apps

Leere Zustandsseiten sind weniger bekannte Gestaltungselemente, die für die Benutzererfahrung eine wichtige Rolle spielen. In ihrer einfachsten Form sind leere Zustände Seitenlayouts, die angezeigt werden, wenn ein Benutzer zum ersten Mal eine Seite besucht, auf der kein Inhalt verfügbar ist.

Dies kann mobile Anwendungen, soziale Netzwerke oder sogar leere Blogkategorien umfassen. Der Zweck ist, eine leere Seite zu liefern sieht aus wie eine nicht leere Seite. Besucher sollten den Mangel an Inhalten als Mittel für drohende Inhalte erkennen.

Ich möchte gerne darauf eingehen, wie leere Statusseiten funktionieren und warum sie so wichtig sind. Schnittstellenentwickler sollten diese Punkte berücksichtigen und versuchen, sie gegebenenfalls auf leere Zustände anzuwenden. Um zu beginnen, wollen wir jedoch untersuchen, wie ein leerer Zustand funktioniert und wie er der Schnittstelle einen Wert verleiht.

Der Wert leerer Staaten

Die Schönheit eines großartigen, leeren Staatsdesigns liegt in der Einfachheit. Leere Seiten erklären Was sollte auf der Seite stehen Einmal gibt es etwas Inhalt. Es kann passiv sein wie ein leerer Posteingang oder es wartet aktiv auf den Benutzer wie ein leerer Twitter-Feed.

Leere Seiten sind langweilig, langweilig und sogar verwirrend. Leere Zustände Anleitung geben Benutzer zu verstehen, was sie suchen. Obwohl es sich um eine leere Seite handelt, hilft der zusätzliche Kontext.

Leere Zustände geben auch ein Gefühl von “Frische” mit neuen Konten ohne vorhandene Daten.

Bei diesem von Redditor Bambo_Ocha durchgeführten Test wurden 20 verschiedene Apps auf leere Statusentwürfe überprüft. Es gab verschiedene Designstile mit CTA-Schaltflächen, Beispieldaten und sogar kurze Anleitungen.

Apps, die auf einer Userbase erfolgreich sind, sollten leere Zustände entwerfen Benutzeraktivitäten fördern. Diese Aktivität könnte das Veröffentlichen von Inhalten sein, das Hinzufügen von Freunden, das Hochladen von Fotos oder was auch immer für die App gemacht wurde. Der Bildschirm von Tookapic ist ein gutes Beispiel.

Leere Zustandsseiten sind jedoch auch dann wertvoll, wenn keine Aktion erforderlich ist. Diese Designs dienen hauptsächlich der Information.

Statische Informationen sind ebenso wertvoll und es ist nicht grundsätzlich schlecht, einen leeren Status zu haben. Bei diesem Seitendesign werden beispielsweise keine aktuellen Messdaten aus einem Tracking-App-Dashboard angezeigt. Der Benutzer möchte vielleicht einige Metriken hinzufügen, aber es ist nicht schlimm, den Strich leer zu lassen.

Ähnliche statische Designs können für leere Blogarchive oder leere Nachrichtenordner gut geeignet sein. Es ist absolut akzeptabel, keine Nachrichten anzuzeigen. Die Seite sollte jedoch auch ohne Kontext nicht vollständig leer sein.

Wichtige Seitenelemente

Das wichtigste Element auf einer leeren Statusseite ist Kontext. Dies kann in Form von Grafiken, Text oder beidem erfolgen. Sie möchten die Benutzer darüber informieren, warum die Seite leer ist und welche Art von Daten dort vorhanden sein könnten (E-Mails, Tweets, Freundprofile usw.)..

Während Text das wichtigste Kommunikationsmedium im Web ist, können Sie den Wert von Grafiken und Symbolen nicht übersehen.

DigitalOcean verfügt über ein brillantes Dashboard mit leeren Zustandsgrafiken, die ihren Standpunkt klar veranschaulichen. Ihr Unternehmen setzt kreatives Branding und saubere Typografie ein. Kein Wunder, dass ihre leeren Staatsseiten so illustrativ sind.

Ein weiterer entscheidender Aspekt bei der Gestaltung leerer Staaten ist die Aufruf zur Aktionstaste. Dies ist normalerweise wie eine Schaltfläche gestaltet, auch wenn Hyperlinks einwandfrei funktionieren.

Das Ziel besteht darin, Benutzern zu helfen, Maßnahmen zu ergreifen und ihren leeren Status zu beseitigen. Unabhängig davon, ob dazu Daten hinzugefügt werden müssen oder Maßnahmen auf der Site ergriffen werden müssen, führen CTAs die Benutzer zu dem nächsten Schritt, der erforderlich ist, um den leeren Status zu löschen.

Dropbox hat ein tolles Design mit zwei CTA-Tasten. Wenn ein Dropbox-Benutzer keine Ordner hat, kann er entweder einen neuen Ordner erstellen oder einen Musterordner zur Seite hinzufügen.

Benutzeraktivitäten fördern

Aktionsschaltflächen sind die aktiven Elemente. Denken Sie jedoch daran, dass die Seitenkopie erklärt was der Benutzer tut. Niemand klickt einfach auf Knöpfe, ohne zu wissen warum.

Die beste Möglichkeit, zu Aktivitäten anzuregen, besteht darin, eine großartige Kopie auf Ihre leere Statusseite zu schreiben. Führen Sie Benutzer durch einen Inhaltsfluss, der die Benutzeraktivität über die gesamte Anwendung anregt.

Dieser leere Zustand von ModSpot ist ein brillantes Beispiel für Qualitätsdesign und ermutigende Inhalte.

Mit Symbolen wird gezeigt, was der Benutzer der Site hinzufügen soll. Ein Pfeil zeigt auf die Schaltfläche, auf die der Benutzer klicken sollte, zusammen mit einem Text, der das Verhalten ermutigt. Dies ist ein brillantes leeres Design mit allen Elementen, die Sie erwarten würden.

In ähnlicher Weise bietet der leere Zustand von Gumroad zwei Optionen für unterschiedliche potenzielle Aktionen. Benutzer können ein digitales Produkt oder ein physisches Produkt hinzufügen, um mit dem Verkauf zu beginnen.

Andere Links auf der Seite führen zu Hilfe-Leitfäden und Kontaktdetails. Alles ist unglaublich stromlinienförmig und verbindet sich schön.

Web vs. Mobile Apps

Leere Zustandsseiten für alle Medien sollten ähnlichen Designtrends folgen. Es gibt jedoch einige geringfügige Unterschiede bei der Benutzererfahrung auf einem Desktop im Vergleich zu einem Smartphone.

Websites auf größeren Bildschirmen mehr Platz haben für zusätzliche Tasten. Webseiten können auch haben größere Navigationselemente die Menschen anderswo auf die Website ziehen kann.

Dies kann auf ähnliche Weise gelöst werden wie Nusii auf der Seite mit den Vorschlägen. Wo es keine Vorschläge gibt, wird der Benutzer zu dem geleitet “Vorschläge hinzufügen” Schaltfläche in der oberen Navigationsleiste.

Mobile Apps haben möglicherweise ähnliche Probleme, die Bildschirme sind jedoch viel kleiner. Das macht es viel einfacher, Benutzer direkt in die Aktion zu ziehen.

Ich finde es am besten, mobile Apps mit weniger Optionen einfacher zu gestalten. Verwenden Sie visuelle Elemente als Augenweide, um zum Handeln anzuregen, und weisen Sie auf einen bestimmten Benutzerfluss hin.

Beispiele für den Entwurf eines leeren Zustands

Vielleicht ist der beste Weg, etwas über das Entwerfen leerer Zustände zu lernen, einige Beispiele. Die brillante Webgalerie emptystat.es kuratiert leere Statusseiten von verschiedenen Websites zu mobilen Anwendungen.

Ich habe einige Beispiele ausgewählt, die Ihre Aufmerksamkeit verdienen und die das Design eines leeren Staates am besten veranschaulichen. Wenn Sie weitere Vorschläge haben, können Sie uns dies gerne mitteilen.

Floating IPs von DigitalOcean