Share
Leere Zustände sind für die meisten Designer oft nachträglich.
Die Startseite und der Zahlungswagen könnten beispielsweise die am stärksten priorisierte Funktion in Ihrem Backlog sein - aber was ist mit den leeren Zuständen dieser Funktionen? Wie sollen sie angegangen werden??
Der folgende Artikel ist nicht umfassend oder auf jeden Fall ein "Muss". Stattdessen werden drei gängige Typen leerer Zustände beschrieben:
Wir werden uns ein gutes Beispiel anschauen, warum es funktioniert und wie Sie ähnliche Ideen umsetzen oder je nach Ihrer individuellen Situation erweitern können.
Der folgende Bildschirm stammt aus der BBCNews-App. Dies ist ein Beispiel für einen Bildschirm, auf dem der Benutzer die App zum ersten Mal verwendet und eine Anleitung benötigt, um "loszulegen".
Es ist auf mehreren Ebenen wirksam:
Es bietet eine klare Erklärung. In diesem leeren Zustand wird erläutert, was die aktuelle Funktion bewirkt, und Sie erhalten eine Schaltfläche, die den Start erläutert. In diesem Fall muss der Benutzer Themen hinzufügen, um seinen eigenen persönlichen News-Feed zu erstellen.
Es bietet einen Link zum Auffüllen dieser Funktion. Die Schaltfläche, mit der der Benutzer auf die Seite gelangt, auf der er den Bildschirm anzeigen kann, ist eine praktische Funktion. Der Benutzer muss nicht nach Hause navigieren und versuchen, den Bildschirm auf andere Weise zu finden.
Wie können Sie also etwas Ähnliches selbst umsetzen??
Geben Sie eine Reihenfolge beim Einsteigen vor. Wenn der Benutzer Ihre Web-App zum ersten Mal verwendet, sollten Sie eine Einführung in Betracht ziehen, um ihn auf den neuesten Stand zu bringen. Bedenken Sie jedoch, dass dies den Experten und den Zwischenbenutzer frustrieren kann. Sie können es nur einmal anzeigen und dann in Ihrem Hilfeabschnitt verbreiten.
Die folgende Seite ist die Wunschliste aus dem Apple iTunes Store. Dies ist ein Beispiel für eine Seite, auf der der Benutzer nichts hat oder alles von seiner Liste gelöscht hat.
Was macht diese leere Seite so effektiv??
Etwas ist besser als nichts. Diese Wunschliste gibt nicht nur nichts aus. Es gibt dem Benutzer einen Hinweis, dass er ein Element zur Liste hinzufügen muss. Das Symbol ist groß und mutig, aber dennoch subtil. Ihr leerer Zustand sollte die Aufmerksamkeit der Benutzer auf sich ziehen - Sie haben hier nichts! -, aber auch auf Leere hinweisen, z. mit gedämpften Farben usw.
Direkt und direkt zum Punkt. Es ist verlockend, in Ihrem leeren Zustand etwas Flusentext einzufügen ... vielleicht ein Zitat von jemandem. In den meisten Fällen ist es jedoch am besten, direkt und direkt zu dem Punkt zu gelangen, der im obigen Beispiel gezeigt ist: "Sie haben Ihrer Wunschliste nichts hinzugefügt"..
Diese Wunschliste-Seite könnte verbessert worden sein. Was können wir daraus lernen??
Geben Sie ein Beispiel an. Sie können auch ein Beispiel hinzufügen, wie ein ausgefüllter Zustand aussehen könnte. Dies ist wahrscheinlich relevanter für Desktop-Anwendungen als für mobile Schnittstellen, da Sie etwas mehr Bildschirmfläche zur Verfügung haben.
Die folgende Fehlerseite ist Teil des Google Chrome-Browsers. Dies ist ein Beispiel für eine Situation, in der der Benutzer etwas anderes als seinen gewünschten Zustand erhält. In diesem Fall können sie keine Verbindung zum Internet herstellen.
Diese Grafik ist Millionen vertraut geworden, aber warum funktioniert sie??
Es ist der Situation angemessen. Es funktioniert, weil das Symbol subtil und der Schwere des Problems angemessen ist. Es ist üblich, ein Kreuz oder ein „X“ zu machen, und das ist in Ordnung. Es ist ein guter Weg, um jemandem die Aufmerksamkeit zu erregen, aber hier möchten Sie den Benutzer nur darüber informieren, dass etwas nicht stimmt. Sie müssen nicht mit einem über dem oberen Symbol oder einer Nachricht darüber schreien.
Es bietet mehr Informationen. Sie sollten Ihre Benutzer niemals unsicher machen, was als nächstes zu tun ist. In diesem Fall hat Chrome eine Mehr , um das Problem zu beheben. In den meisten Fällen ist dem Benutzer wahrscheinlich bewusst, dass er sein WLAN einschalten, sein Modem zurücksetzen oder seinen Internetanbieter anrufen muss. Dies bietet jedoch einen Mehrwert für Benutzer, die mehr Informationen benötigen.
Wie wäre es, wenn Sie das selbst anwenden??
Bedenken Sie, wie kritisch Ihre Fehlermeldungen sind. Wie schlimm ist der Fehler? Wenn dies für den Benutzer von entscheidender Bedeutung ist, müssen Sie mit starken Farben und einer klaren Hierarchie wirklich auf sich aufmerksam machen. Berücksichtigen Sie die verwendete Sprache und fühlen Sie sich mit der Position des Benutzers einverstanden. Ein lustiges Symbol, das eine frustrierende Situation beleuchtet, kann die Sache noch verschlimmern!
Dieser Artikel bietet Ihnen einen guten Startrahmen, den Sie beim Betrachten leerer Zustände berücksichtigen sollten. Überlegen Sie, für welche Art von leerem Zustand Sie die Seite entwerfen und welche Möglichkeiten am besten geeignet sind, um die Seite anhand der Situation Ihrer Benutzer und ihrer Ziele zu gestalten.
Einige gute Faustregeln sind:
Accentsconagua