Leere Zustände – Der am meisten übersehene Aspekt von UX

Obwohl für die Benutzererfahrung wichtig, werden leere Zustände oft übersehen. Zu wissen, was sie sind und wie man sie verwendet, und die Anwendung von UX Best Practices kann erhebliche Vorteile bringen.

Was ist ein leerer Zustand?

UX-Designer haben viele Möglichkeiten, angenehme und sinnvolle Erlebnisse zu schaffen. Eine solche Gelegenheit, die oft nicht beachtet wird, ist der „leere Zustand“ oder der leere Bildschirm. Leere Zustände sind Momente in der Erfahrung eines Benutzers mit einem Produkt, in denen nichts angezeigt werden kann.

Hier sind einige Beispiele für häufige Situationen mit leerem Zustand:

• Ein neuer Dropbox-Bildschirm, auf dem keine Dateien oder Ordner erstellt wurden.
• Der resultierende Bildschirm nach Abschluss aller Aufgaben in einem Aufgabenlisten-Manager.
• Erhalten eines Fehlerbildschirms in Slack, wenn ein Befehl nicht unterstützt wird.
• Starten Sie ein neues Konto für soziale Netzwerke und es bestehen keine Verbindungen.
• In Google Mail nach etwas suchen und keine Ergebnisse erhalten.

Diese Zwischenmomente bieten Gelegenheiten, die Benutzererfahrung zu verbessern und folglich die Geschäftsmöglichkeiten zu erweitern. Für UX-Designer ist es eine gute Sache, jede Gelegenheit zu nutzen, um die Benutzererfahrung zu verbessern und einen Mehrwert für das Unternehmen zu schaffen.

Ein nützlicher leerer Zustand lässt den Benutzer wissen, was passiert, warum es passiert und was dagegen zu tun ist. Hier sind zwei Beispiele für gute UX-Designs im leeren Zustand:

Hier sind einige Beispiele für leere Zustandsdesigns mit verpassten Gelegenheiten:

Arten von leeren Zuständen

Hier sind vier Arten von häufig anzutreffenden leeren Zuständen:

• Erste Verwendung – Tritt bei einem neuen Produkt oder einer neuen Dienstleistung auf, wenn noch nichts vorzuweisen ist, wie z. B. ein neues Evernote- oder Dropbox-Konto.
• Benutzer gelöscht – Tritt auf, wenn Benutzer Aktionen wie das Löschen ihres Posteingangs oder ihrer Aufgabenliste ausführen und das Ergebnis ein leerer Bildschirm ist.
• Fehler – Diese treten auf, wenn etwas schief geht oder wenn Probleme auftreten, z. B. wenn ein Mobiltelefon aufgrund von Netzwerkproblemen offline geht.
• Keine Ergebnisse/Keine Daten – Tritt auf, wenn nichts anzuzeigen ist. Dies kann passieren, wenn jemand eine Suche durchführt und die Abfrage leer ist oder keine Daten zum Anzeigen verfügbar sind (z. B. beim Filtern nach einem Datumsbereich, der keine Daten enthält).

Da das leere Zustandsdesign mehr Aufmerksamkeit erhält, stellen UX-Designer fest, dass es vorteilhafte Ergebnisse gibt, sie zu nutzen, sowohl aus geschäftlicher als auch aus der Sicht der Benutzererfahrung.

Benutzer probieren viele Apps aus, entscheiden aber innerhalb der ersten 3-7 Tage, welche sie nicht mehr verwenden möchten. Bei „anständigen“ Apps bleibt die Mehrheit der Benutzer, die 7 Tage lang behalten werden, viel länger in der Nähe. Der Schlüssel zum Erfolg besteht darin, die Benutzer während dieser kritischen ersten 3-7 Tage zu begeistern. – Ankit Jain

Die Vorteile der Verwendung gut gestalteter leerer Zustände

Das Entwerfen gut durchdachter und nützlicher leerer Bildschirme kann dazu beitragen, das Produktengagement zu fördern, Benutzer zu begeistern und die Abwanderung zu reduzieren. Dies verringert die Wahrscheinlichkeit, Benutzer an Konkurrenzprodukte zu verlieren, wodurch sie frustriert oder verloren bleiben.

In seinem Buch What Customers Really Want legt Scott McKain sechs Leitprinzipien für ein großartiges Kundenerlebnis dar.

Er schreibt, dass Kunden wollen:

1. Ein überzeugendes Erlebnis
2. Ein persönlicher Fokus
3. Gegenseitige Loyalität
4. Unterscheidung
5. Koordinierung
6. Innovation

Bei der Anwendung auf das Empty-State-Design können diese Prinzipien für ein Unternehmen von großem Nutzen sein – zum Beispiel eine Steigerung der Produktzufriedenheit und die Senkung der Abbruchraten.

Hier sind drei weitere Bereiche, die ebenfalls von einem guten Leerzustandsdesign profitieren können:

• Benutzer-Onboarding – Bietet die Möglichkeit, Vertrauen aufzubauen und das Produkt zusätzlich zu einer verbesserten Benutzererfahrung weiter zu nutzen.
• Markenaufbau – Generiert Bekanntheit und fördert das Unternehmen, um einen erhöhten Markenwert aufzubauen.
• Personalisierung – Kann in verschiedenen Nutzungszuständen spielerisch, lustig, ernsthaft oder dynamisch sein; schafft eine persönliche Note.

Die Vorteile gut gestalteter leerer Zustände dürfen nicht unterschätzt werden. Sie tragen nicht nur zu einem überzeugenden Kundenerlebnis bei, sondern da die Gelegenheiten, Kunden zufrieden und engagiert zu halten, immer kürzer werden, sind sie einfach ein gutes Geschäft.

Gemieden: Die vergessenen Bildschirme des UX-Designs

Da es offensichtlich positive Ergebnisse für gut gestaltete leere Zustände gibt, warum werden sie überhaupt ignoriert?

Erstens treten im Vergleich zur Gesamtzahl der Bildschirme in einer App, einem Produkt oder einer Website nur sehr wenige Situationen mit leerem Zustand auf, sodass sie oft vernachlässigt werden, weil sie nicht als Priorität angesehen werden und Designer ihre Bemühungen darauf konzentrieren die sichtbareren Teile eines Designs.

Zweitens, da nur schätzungsweise 2-5 % der Benutzer einen leeren Zustand sehen, ist dies nicht immer eine wirtschaftliche oder praktische Verwendung der Zeit eines Designers.

Zu guter Letzt wurden leere Zustände nicht immer gut verstanden in Bezug darauf, wo sie auftreten und was mit ihnen zu tun ist, also traten sie zugunsten der populäreren Bildschirme und Seiten in den Hintergrund.

Was passiert, wenn leere Zustände ignoriert werden?

Leere Bildschirme ohne Anleitung können zu Verwirrung, Unsicherheit und Enttäuschung führen. Dies kann zu höheren Abbruchraten und einer geringeren Gesamtzufriedenheit mit dem Produkt führen.

Glücklicherweise beginnen sich die Dinge zu ändern, da die Vorteile und Möglichkeiten des Entwerfens guter leerer Bildschirme zu einem wichtigeren und prioritären Teil des UX-Designprozesses werden.

So füllen Sie einen leeren Bildschirm mit Sinn

Hier sind einige Best Practices für UX, um sicherzustellen, dass leere Bildschirme nützlich, hilfreich und informativ sind.

Empathie. Das Hinzufügen von Überraschung und Freude , Emotion und Persönlichkeit sind alles Möglichkeiten, wie UX-Designer selbst in den dunkelsten Ecken eines Produkts bessere Erfahrungen geschaffen haben. Bei leeren Bildschirmen sorgt empathisches Messaging für Abwechslung und schafft ein ansprechenderes, personalisierteres Erlebnis.

Bilder. Es gibt ein Designprinzip, das als Biophilie-Effekt bezeichnet wird. Dies ist ein Zustand von reduziertem Stress und verbesserter Konzentration, der sich aus der Naturbetrachtung ergibt. Das Hinzufügen einiger szenischer Bilder (z. B. der Hintergrund eines leeren Zustandsfehlerbildschirms) kann zu einer angenehmeren Benutzererfahrung führen.

Hilfreiche Anleitung. Je nach Produkttyp können leere Zustände verwendet werden, um den Benutzer zu führen. Ein gutes Beispiel hierfür ist eine Projektmanagementanwendung. Bei einem neuen Konto sind noch keine Projekte im Spiel, was eine potenziell großartige Gelegenheit bietet, dem Benutzer beim schnellen Einstieg zu helfen und dadurch die Wahrscheinlichkeit eines Abbruchs zu verringern. Hier ist ein Beispiel:

Starter-Inhalt. Es gibt viele Bildschirme, die lange genug leer bleiben, damit der Benutzer frustriert wird und geht. Bei bestimmten Produkten hilft ihnen die Bereitstellung guter Einstiegsinhalte, sich vorzustellen, was vor sich geht und was sie als Nächstes tun können.

Hier ist ein Beispiel für einen leeren Zustandsbildschirm mit Starterinhalt:

Bereitstellen eines Aktionsschritts. Bei einigen Produkten müssen wir keine Anleitung geben oder den Bildschirm mit Inhalten füllen, da dies keinen Sinn machen würde. In diesen Fällen könnten Designer einfach einen Aktionsschritt bereitstellen.

Es ist jedoch am besten, die Aktionen auf ein Minimum zu beschränken. Hicks Gesetz besagt, dass „die Zeit, die benötigt wird, um eine Entscheidung zu treffen, mit der Anzahl und Komplexität der Entscheidungen zunimmt“. Daher werden Benutzer wahrscheinlich schneller handeln, wenn Calls-to-Action auf ein oder höchstens zwei beschränkt sind. Hier ist ein tolles Beispiel:

Ein weiteres gutes Beispiel ist Instagram. Wenn Leute neu auf der Plattform sind, folgen sie noch niemandem (und niemand folgt ihnen). Es wäre einfach, sich auf alle großartigen Funktionen von Instagram zu konzentrieren, aber ein guter leerer Statusbildschirm könnte ihnen beispielsweise die Option geben, „Personen hinzuzufügen, denen sie folgen möchten“.

Best Practices für UX im leeren Zustand – aus der Praxis

Toptal verfügt über weltweit hochrangige freiberufliche Talente in allen Bereichen des Designs. Hier ist, was ein paar UX-Designer von Toptal über ihre Erfahrungen beim Entwerfen leerer Bildschirme zu sagen hatten.

Toptal-Designer: Tamara Olson

Designdisziplin: UX-Design

An welchen guten leeren Zustandsdesigns haben Sie gearbeitet oder sie gesehen?

Gute, moderne leere Zustandsdesigns, die ich beobachtet habe, bestehen normalerweise aus zwei Teilen Anleitung und einem Teil Freude. Wenn eine Benutzeroberfläche leer ist, ist es die Aufgabe des UX-Designers, den Benutzern zu helfen, zu verstehen, was in den Bereich hineinpasst, wenn er gefüllt ist. Wenn es die Aufgabe des Benutzers ist, es zu füllen, sollte die Nachricht Anweisungen dazu enthalten, wie. (Zum Beispiel könnte eine leere „Klassen“-Tabelle in einem Edtech-Produkt einen Text enthalten, der die Lehrer darüber informiert, wie sie ihre erste Klasse erstellen.)

Ich sehe auch, dass viele Apps die großzügigen Immobilien leerer Staaten als Gelegenheit nutzen, um etwas Freude und spielerische Markenpersönlichkeit einzubringen. Man könnte sagen, es ist die Web-App-Version der 404-Seite einer Website.

Haben Sie jemals leere Zustände übersehen, und wenn ja, warum?

Natürlich ist es eine einfache Falle. Wenn wir visionär sind, stellen wir uns Apps und Produkte vor, wenn sie in vollem Gange sind, gefüllt mit Inhalten und Benutzern. Als ich bei Google arbeitete, kommentierte ein VP of Product, dass Produkte wie Flugzeugflüge seien; Die meisten Probleme treten bei Starts und Landungen auf.

Wenn ein Benutzer Ihr Produkt zum ersten Mal betritt, sind leere Zustände unvermeidlich, und wir möchten nicht, dass er in Sackgassen gerät, bevor er überhaupt angefangen hat. Ich würde Nachwuchsdesigner ermutigen, einen separaten Satz linearer Designs zu entwerfen, die den Onboarding-Flow des Benutzers zeigen.

Haben Sie Kundenerfolge mit der Verwendung leerer Zustände gesehen? Wenn ja, auf welche Weise?

Ich habe kürzlich mit National Novel Writing Month an der Neugestaltung ihrer Plattform gearbeitet, die es Benutzern ermöglicht, Ziele rund um ihren Schreibfortschritt festzulegen und zu verfolgen. Unser Produktteam hatte einen absoluten Ball mit den leeren Zuständen; Es war eine wunderbare Möglichkeit, die Funktionalität und Persönlichkeit der Plattform vorzustellen und zu necken und die Benutzer zu inspirieren, mit der Protokollierung ihres Fortschritts zu beginnen.

Was ist die erfolgreichste Nutzung eines leeren Zustands, die Sie erlebt haben?

Als „Zero-Inboxer“ freue ich mich immer wieder über die leere Posteingangsillustration der Google Mail-App: eine Person unter einem Regenschirm, die im Sonnenschein ein Buch liest, mit der Überschrift „Du bist fertig!“. Es bricht technisch gesehen die Regel, die ich erwähnt habe, dass leere Zustände einen Aufruf zum Handeln brauchen, und doch tut es das nicht, denn der unterschwellige CTA lautet: „Hör auf mit deiner E-Mail und genieße dein Leben.“ Ich liebe das.

Toptal-Designer: Michael Clingerman

Designdisziplin: SaaS-Produktdesign

Wenn Sie für leere Zustände entworfen haben, welche Typen sehen Sie am häufigsten?

Die leeren Zustände, mit denen ich am besten vertraut bin, sind 404/Fehlerzustände und vom Benutzer gelöschte Zustände.

Haben Sie Kundenerfolge mit der Verwendung leerer Zustände gesehen? Wenn ja, auf welche Weise?

Jawohl. Ich habe Fälle gesehen, in denen leere Bildschirme Teil einer ansprechenden und ansprechenden Inhalts- und Kommunikationsstrategie wurden. Es gibt andere Fälle, in denen Kunden sie verwendet haben, um ihre Markenpersönlichkeit aufzubauen.

Was ist die erfolgreichste Nutzung eines leeren Zustands, die Sie erlebt haben?

Ich habe es schon immer geliebt, dass Dropbox einfache und einfarbige Illustrationsstile verwendet, um die Persönlichkeit, den Ton und den Charakter der Unternehmensmarke zu verdeutlichen.

Fazit

Es ist leicht, leere Zustände (oder leere Bildschirme) im UX-Design zu übersehen, weil sie selten vorkommen und nicht immer gut verstanden werden. Die Vorteile ihrer Einbeziehung werden jedoch unterschätzt, da sie die Benutzererfahrung verbessern und dazu beitragen, ein zusammenhängenderes Produkt zu schaffen.

• • •

Weiterführende Literatur im Toptal Design Blog

• UI-Design Best Practices und häufige Fehler
• Mobile UX Design – Best Practices, Einschränkungen und Zusammenarbeit mit Entwicklern
• Heuristische Prinzipien für mobile Schnittstellen
• Einfluss durch Design – Ein Leitfaden zu Farbe und Emotionen
• Die Gestaltungsprinzipien und ihre Bedeutung