So gestaltest du leere Ansichten und Suchen ohne Treffer

Eine leere Projektliste kann bedeuten, dass noch nie ein Projekt angelegt wurde. Sie kann aber auch bedeuten, dass eine Suche keine passenden Projekte gefunden hat. Beide Ansichten enthalten vielleicht dieselbe leere Fläche. Trotzdem brauchen sie unterschiedliche Erklärungen und Aktionen.

Der praktische Unterschied liegt darin, warum Inhalte fehlen. Eine tatsächlich leere Sammlung braucht meist einen Einstieg oder eine Erklärung, wie Inhalte hineinkommen. Eine Suche ohne Treffer braucht eine Möglichkeit, Suchbegriff, Filter oder Suchbereich zu ändern, durch die sonst vorhandene Inhalte ausgeblendet werden. Wenn beide Personen „Projekt erstellen“ angeboten bekommen, kann aus einem einfachen Suchproblem doppelte Arbeit werden.

Eine Suche ohne Treffer ist eine Form des Leerzustands. Die hilfreiche Unterscheidung ist die zwischen einer leeren Sammlung und einer erfolglosen Abfrage: Die erste verändert sich, wenn Inhalte hinzukommen; die zweite, wenn sich die Anfrage ändert.

Frage, wodurch Inhalte erscheinen würden

Bevor du eine Überschrift schreibst, vervollständige diesen Satz: Hier würden Inhalte erscheinen, wenn die Person was täte? Die Antwort reicht oft schon aus, um eine nützliche leere Ansicht von einer generischen zu unterscheiden.

Lautet die Antwort „ihr erstes Projekt erstellen“, kann die Ansicht erklären, was ein Projekt enthält, und diese Aktion anbieten. Lautet sie „den Filter Archiviert entfernen“, sollte sie beim Ändern des Filters helfen. Lautet sie „auf den Abschluss einer Anfrage warten“, lädt die Oberfläche noch. Lautet sie „wieder Zugriff erhalten“, ist ein Erstellen-Button möglicherweise irrelevant oder gar nicht verfügbar.

Die Frage verhindert außerdem einen häufigen Textfehler: Keine sichtbaren Zeilen sind kein Beweis dafür, dass keine Daten existieren. Vielleicht weiß die Ansicht nur, dass keine zugänglichen Datensätze zur aktuellen Anfrage passen. Ihre Meldung sollte diesen Wissensstand wiedergeben, statt eine weiterreichende Aussage über den gesamten Arbeitsbereich zu machen.

Der Artikel der Nielsen Norman Group über leere Ansichten beschreibt, weshalb der Systemstatus erklärt und ein passender Einstieg in die Aufgabe angeboten werden sollte. Er warnt auch davor, bereits eine Meldung über fehlende Ergebnisse anzuzeigen, während Inhalte noch laden. Das ist eine hilfreiche Grundlage. Die konkrete Entscheidung hängt weiterhin davon ab, was deine Anwendung über Sammlung und Anfrage weiß.

Power BI erklärt, wie Inhalte erscheinen; NexTag zeigt die Bedeutung der Hierarchie

Der NN/G-Artikel zeigt eine Ansicht zuletzt verwendeter Elemente aus Microsoft Power BI. Sie erklärt, wie Inhalte dorthin gelangen: Geöffnete Inhalte erscheinen unter Recents. Entscheidend ist der Zusammenhang zwischen Ursache und Ergebnis. Die Ansicht behauptet weder, dass das gesamte Konto leer sei, noch, dass etwas Neues erstellt werden müsse.

Einen Gegenfall beschreibt NN/G in seiner Untersuchung zu Suchen ohne Treffer. Auf einer historischen NexTag-Suchseite übersah eine Testperson die kleine Meldung über fehlende Treffer und betrachtete stattdessen die auffälligeren Inhalte darunter. Der aufgezeichnete Blickverlauf zeigte keine Fixationen auf der Meldung selbst. Vorschläge zum Weiterkommen waren vorhanden, doch die Person hatte den Grund dafür nicht bemerkt.

Daraus folgt nicht, dass jede leere Ansicht eine riesige Überschrift braucht. Die Power-BI-Meldung hat eine lokale Aufgabe: Sie erklärt eine Ansicht in einem bestehenden Arbeitsbereich. Eine Suchergebnisseite muss dagegen die Erwartung unterbrechen, dass ihr Hauptbereich passende Treffer enthält. Gib dem Status die für seinen Kontext nötige Auffälligkeit und mache anschließend die nächste sinnvolle Aktion leicht auffindbar. Dekorative Illustrationen und unzusammenhängende Empfehlungen können diese Reihenfolge untergraben, selbst wenn der Text irgendwo vorhanden ist.

Bestimme den Zustand anhand von Fakten, nicht anhand eines leeren Arrays

Eine Antwort mit null Einträgen reicht nicht aus, um die Oberfläche festzulegen. Die Anfrage könnte noch laufen, fehlgeschlagen oder eingeschränkt sein oder erfolgreich ein leeres Ergebnis geliefert haben. In der tatsächlichen Umsetzung sollten neben der sichtbaren Anzahl auch Anfragestatus und Geltungsbereich die Meldung bestimmen.

Besonders hilfreich wird diese Tabelle beim Prüfen von Übergängen. Gib eine Suchanfrage ein, ersetze sie sofort durch eine andere und lass die Antworten in umgekehrter Reihenfolge eintreffen. Die Ansicht muss den Zustand der aktiven Anfrage zeigen. Eine alte leere Antwort darf ein neueres erfolgreiches Ergebnis nicht überschreiben. Das ist ein Fehler im Datenfluss. Eine weitere Illustration wird ihn nicht beheben.

Eine praktische Prüffrage lautet: „Was würdest du jetzt tun?“ Zeige den Bildschirm, ohne seinen Zustand vorher zu erklären. Wählt jemand Erstellen, weil die erhaltene Suchanfrage nicht auffindbar ist, brauchen die Bedienelemente zum Weiterkommen Aufmerksamkeit. Wartet die Person, weil die Ansicht unfertig aussieht, muss klarer werden, ob die Verarbeitung abgeschlossen ist. Halte die Interpretation fest, nicht nur den Klick auf den vorgesehenen Button: Ein zufällig richtiger Klick kann einen missverstandenen Zustand verdecken.

Schreibe für die Ursache der leeren Ansicht

Erste Nutzung: ein glaubwürdiger Einstieg

Eine Ansicht zur ersten Nutzung sollte erklären, was für ein Objekt gleich erstellt wird. „Hier ist noch nichts“ benennt zwar die leere Fläche, erklärt aber nicht den Zweck des Bereichs. „Projektbriefings, Links und Prüfnotizen an einem Ort sammeln“ gibt neuen Nutzern einen konkreteren Grund anzufangen.

Verbinde diese Erklärung mit einer tatsächlich verfügbaren Aktion. Braucht ein Projekt nur einen Namen, kann „Projekt erstellen“ diesen kleinen ersten Schritt öffnen. Muss zunächst ein externer Dienst verbunden werden, sollte die Aktion genau diese Verbindung benennen. Ein Button, der einfach klingt und unerwartet eine komplexe Einrichtung öffnet, kann direkt das nächste Problem schaffen.

Die Menge an Erklärung sollte zur wahrscheinlichen Erfahrung der Person passen. Wer zum ersten Mal einen Projektarbeitsbereich öffnet, kann von einem kurzen Beispiel profitieren. Wer bewusst die letzte gespeicherte Suche gelöscht hat, braucht vermutlich keine Einführung in die Suche. Beide Sammlungen sind leer, aber die Personen wissen Unterschiedliches.

Gehe vorsichtig mit Beispieldaten um. Demonstrationszeilen können ein Konzept greifbar machen. Sie müssen aber unverkennbar als Beispiele gekennzeichnet sein und dürfen nicht wie eigene Daten der Person aussehen. Enthält ein Beispielprojekt den Status „Vom Kunden freigegeben“, darf er nicht mit einer echten Freigabe zu verwechseln sein. Der Leerzustand soll Unsicherheit verringern und sie nicht durch hübsche Fiktion ersetzen.

Keine Treffer: die Anfrage ändern

„Keine Ergebnisse gefunden“ sagt, dass die Suche beendet ist. Ursache und Ausweg bleiben offen. Eine nützliche Meldung erhält den Zusammenhang zwischen Anfrage und Ergebnis. Bei einer Suche gilt: Lass den eingegebenen Suchbegriff sichtbar und bearbeitbar. Bei Filtern bleiben die aktiven Filter sichtbar. Sonst muss sich die Person zunächst erinnern, wonach sie gefragt hat, bevor sie entscheiden kann, was sie ändert.

Eine klare Überschrift für unser Beispiel wäre „Keine Projekte passen zu ‚Herbststart‘“. Ist der Datumsfilter möglicherweise die Einschränkung, kann die Erklärung ergänzen: „Der aktuelle Zeitraum ist der 1.–7. Oktober.“ Das ist auch dann hilfreich, wenn die Anwendung nicht weiß, ob Suchbegriff oder Zeitraum für die fehlenden Treffer verantwortlich ist.

Wähle Aktionen, die die relevante Bedingung ändern. „Datumsfilter entfernen“ ist präziser als „Neu beginnen“, wenn ein einzelner Datumsfilter aktiv ist. „Alle Filter entfernen“ passt nur, wenn tatsächlich alle Filter entfallen. Bleibt der Suchbegriff bestehen, muss die Formulierung diesen Unterschied verständlich machen. Ein Zurücksetzen, das unbemerkt Suche und Filterbereich ändert, kann Menschen überraschen, die nur einen Aspekt ändern wollten.

Die NN/G-Empfehlungen für Suchseiten ohne Ergebnisse raten dazu, das Ergebnis klar zu zeigen, weitere Wege anzubieten und einen spöttischen Ton zu vermeiden. Wende diese Grundsätze auf die konkrete Aufgabe an. Eine Projektsuche, ein Produktkatalog und eine Bibliothek juristischer Dokumente brauchen nicht dieselben Vorschläge oder Bilder.

Wenn du Alternativen vorschlägst, erkläre sie als solche. „Ähnliche Projekte“ sollten nicht wie Treffer zur erfolglosen Anfrage aussehen. Platziere die Erklärung über fehlende Ergebnisse vor den Vorschlägen und beschrifte deren Sammlung gesondert. Niemand sollte erst erschließen müssen, weshalb nach einer konkreten Suche scheinbar unpassende Einträge erscheinen.

Sage nur, was das System tatsächlich feststellen kann

„Es existieren keine Projekte“ ist eine weitreichende Aussage. „Keine Projekte passen zu diesen Filtern“ ist enger. „In diesem Arbeitsbereich sind für dich keine Projekte sichtbar“ beschreibt wiederum eine andere Grenze. Entscheide nach den verfügbaren Belegen, nicht danach, welcher Satz gut in eine Zeile passt.

Das ist bei privaten oder geschützten Inhalten wichtig. Ein leeres Ergebnis bedeutet nicht zwingend, dass ein Objekt fehlt. Möglicherweise darf die Person es nicht sehen. Das Produktteam muss entscheiden, was offengelegt werden darf und welche nächsten Schritte passen. Die Gestaltung sollte nicht die Existenz vertraulicher Datensätze verraten, nur um eine spezifischere Meldung schreiben zu können.

Auch ohne Berechtigungsfragen kann die Ansicht nur einen Teil des Sachverhalts kennen. Suchindizes werden unter Umständen erst nach dem Speichern aktualisiert; Importe laufen womöglich noch. Weiß die Anwendung, dass ein Import läuft, kann sie diesen Zustand benennen. Weiß sie es nicht, erfinde kein beruhigendes Versprechen, die fehlenden Einträge würden gleich erscheinen.

Für den fiktiven Arbeitsbereich lässt sich eine kleine Textregel festhalten: Eine erfolgreiche Abfrage ohne Treffer kann „Keine passenden Projekte“ ergeben. Ein bestätigter Sammlungsbestand von null kann „Noch keine Projekte“ ergeben. Eine fehlgeschlagene Abfrage ergibt keines von beidem. Diese einfache Unterscheidung verhindert, dass ein Netzwerkproblem den optimistischen Ton der ersten Nutzung übernimmt.

Erhalte genug Struktur für den nächsten Schritt

Eine leere Ansicht darf ruhiger aussehen als eine gefüllte Liste und trotzdem nützliche Bedienelemente erhalten. Suche, Filterchips, Seitentitel und Sammlungsbereich erklären, wo sich die Person befindet. Wenn all das einer zentrierten Illustration weicht, kann der Bildschirm ansprechend aussehen, aber das Weiterkommen erschweren.

Lass in unserer Projektsuche ohne Treffer das Suchfeld an derselben Stelle und den gewählten Arbeitsbereich sichtbar. Platziere die Erklärung dort, wo normalerweise Ergebnisse stehen. So kann die Person ihre Anfrage ändern, ohne ein Bedienelement suchen zu müssen, das wegen der neuen Trefferzahl verschoben wurde.

Eine Ansicht zur ersten Nutzung hat mehr Freiheit. Es gibt keine Zeilen zum Vergleichen, und eine größere Einführung kann passen. Erhalte trotzdem vertraute Navigation und einen klaren Seitentitel. Bevor jemand den Button betätigt, sollte klar sein, ob das Projekt im persönlichen Bereich oder im gemeinsamen Teambereich entsteht.

Mache die benötigte Fläche nicht von einem einzigen kurzen englischen Satz abhängig. Teste längere Projektnamen, längere Übersetzungen und Filter, die auf zwei Zeilen umbrechen. Leere Ansichten werden oft bei angenehmen Desktopbreiten entworfen und anschließend in schmale Seitenleisten gedrückt. Ein Entwurf, der nur mit dem kurzen englischen Text „No items“ funktioniert, ist für realistische Inhalte noch nicht bereit.

Wähle die sinnvollste Aktion mit dem geringsten unnötigen Aufwand

Ein Ausweg sollte Fortschritt ermöglichen, ohne unnötig Arbeit zu verwerfen. Hat jemand sorgfältig Arbeitsbereich, Zeitraum und verantwortliche Person gewählt, ist das Löschen aller Einstellungen ein großer Neustart. Er mag das fehlende Ergebnis beheben, zerstört aber auch den Kontext, den die Person untersuchen wollte.

Biete eine kleinere Änderung an, wenn das System sie unterstützt. Ein einzelner entfernter Filter kann nützlicher sein als eine vollständig gelöschte Anfrage. Ein erweiterter Zeitraum kann einen relevanten Suchbegriff erhalten. Die Rückkehr zum übergeordneten Ordner kann informativer sein als der Sprung zur Startseite der Anwendung.

Erwecke nicht den Eindruck, die kleinste Aktion werde garantiert zum Erfolg führen. „Datumsfilter entfernen“ beschreibt ehrlich einen Vorgang. „Deine Projekte anzeigen“ verspricht ein Ergebnis, von dem die Oberfläche möglicherweise nicht weiß, ob sie es liefern kann. Ist eine verlässliche Vorschauanzahl verfügbar, darf der Vorschlag konkreter werden. Andernfalls sollte die Beschriftung sachlich bleiben.

Auch auf einer Seite ohne Treffer kann Erstellen hilfreich sein, meist aber als ergänzende Option. Vielleicht sucht jemand vor dem Anlegen eines Projekts zunächst, ob es bereits existiert. Biete diesen Weg an, ohne Erstellen als einzigen Ausweg darzustellen. Sind Duplikate teuer, kann es sinnvoll sein, zunächst zu erklären, dass die Suche nur den aktuellen Arbeitsbereich umfasste.

Prüfe dieselbe Seite im zeitlichen Verlauf

Am aufschlussreichsten ist eine kurze Abfolge, keine Sammlung einzelner leerer Screenshots. Beginne mit einer gefüllten Liste, setze einen Filter ohne Treffer, entferne ihn wieder und prüfe, ob die ursprüngliche Liste zurückkehrt. Lege anschließend eine tatsächlich leere Sammlung an und vergleiche Meldung und Aktion.

Im fiktiven Arbeitsbereich startet eine Person mit sechs Projekten in der aktuellen Sammlung. Sie wählt eine verantwortliche Person, die in der gewählten Woche keine Projekte hat. Der Ergebnisbereich meldet fehlende Treffer und lässt Personen- und Datumssteuerung sichtbar. Wird der Datumsfilter entfernt, erscheinen passende Projekte aus dem größeren Zeitraum; die gewählte Person bleibt erhalten.

Wechsle nun in einen neuen Arbeitsbereich ohne Projekte. Derselbe Ergebnisbereich erklärt den Zweck von Projekten und bietet ihre Erstellung an. Filter zu entfernen wäre unnötig: Es sind keine aktiv, und die zugrunde liegende Sammlung ist leer. Die Oberfläche kann Typografie und Abstände mit dem ersten Zustand teilen, ohne dieselbe Meldung zu verwenden.

Das sind sowohl Umsetzungs- als auch Gestaltungsfragen. Ein statischer Vergleich kann das gewünschte Verhalten festlegen. Die laufende Anwendung braucht zusätzlich Tests für zeitliche Abläufe von Anfragen und Zustandswechsel. Konzentriere die Prüfung auf diesen kleinen Weg, statt sie in einen unzusammenhängenden Katalog aller denkbaren Oberflächenzustände auszuweiten.

Stimme den Ton auf die Situation ab

Eine leere persönliche Favoritenliste darf leicht und einladend wirken. Ein leeres Auditprotokoll während einer Störungsuntersuchung sollte ruhig und präzise sein. Dieselbe lächelnde Illustration mit „Los geht’s!“ würde beiden Situationen nicht gerecht.

Überlege, was die Person wahrscheinlich wissen möchte. Neue Nutzer fragen vielleicht: „Was gehört hierher?“ Wer eine bekannte Datei sucht: „Habe ich den Zugriff verloren, den falschen Ort gewählt oder den Namen falsch eingegeben?“ Wer erledigte Arbeit prüft, braucht möglicherweise nur die Bestätigung, dass nichts mehr offen ist. Die Tonwahl fällt leichter, wenn die zugrunde liegende Frage klar ist.

Gratuliere nicht allein deshalb, weil eine Liste null Zeilen enthält. Eine leere Aufgabenwarteschlange kann bedeuten, dass alles erledigt ist. Sie kann ebenso bedeuten, dass ein Filter Aufgaben versteckt. Feiern setzt einen bestätigten positiven Zustand voraus. Kann die Anwendung diesen nicht feststellen, ist eine neutrale Erklärung vertrauenswürdiger.

Entschuldige dich umgekehrt nicht für normale erste Nutzung. Es ist nichts grundsätzlich falsch daran, dass eine neue Sammlung noch keine Datensätze enthält. Verwende Störungssprache für tatsächliche Unterbrechungen und lasse gewöhnliche leere Ansichten als normalen Teil der Produktnutzung erscheinen.

Lass Illustrationen ihren Platz rechtfertigen

Eine Illustration kann erklären, welche Inhalte in einer Sammlung erscheinen werden, oder erste Nutzung und erfolglose Suche voneinander unterscheiden. Sie sollte die nützliche Aktion nicht aus dem zunächst sichtbaren Bereich verdrängen und die Seite nicht wie eine Sackgasse wirken lassen. Wird die Meldung ohne Bild verständlicher, überarbeite die Komposition, statt die Dekoration zu verteidigen.

Für den Arbeitsbereich kann eine zurückhaltende Linienzeichnung einer Projektkarte zeigen, welche Informationen ein Projekt enthält. Bei fehlenden Suchtreffern reicht vielleicht ein kleines Suchsymbol, weil Suchbegriff und Filter bereits Kontext liefern. Beide Zustände können dieselbe visuelle Sprache sprechen, ohne dasselbe große Bild zu verwenden.

Lass wesentliche Erklärungen als echten Oberflächentext stehen. Eine Illustration kann die Beziehung zwischen Filter und Ergebnis verdeutlichen, doch der Text muss auch ohne Bild verständlich bleiben. Das ist besonders wichtig bei winzigen Bildbeschriftungen, die in der Designdatei scharf wirken und im schmalen Layout unlesbar werden.

Prüfe den Unterschied in OpenDesign

Mit einer unterstützten HTML-Vorschau in OpenDesign lassen sich diese Varianten gut vergleichen. Erstelle Beispiele für leere Sammlungen und Suchen ohne Treffer mit realistischen Texten, passe Texte oder Stile manuell an und prüfe sie mit Viewport-Vorgaben. Kommentare an den Chat können die genaue Meldung oder Aktion benennen, die überarbeitet werden muss.

Bitte bei der Prüfung eine Person zu erklären, was auf jedem Bildschirm passiert ist und was sie als Nächstes tun würde. Stelle die Ansichten nicht vorher als „erste Nutzung“ und „gefilterter Leerzustand“ vor. Damit verrätst du die Antwort, die eigentlich die Gestaltung vermitteln soll. Werden beide Ansichten gleich verstanden, ist der Unterschied noch nicht klar genug.

Prüfe die Datenbedingungen auch in der laufenden Anwendung: Aktive Suchanfrage, Berechtigungsbereich und Filterzurücksetzung müssen diejenige Meldung auswählen, die im Entwurf geprüft wurde.

Eine kleine Entscheidung verhindert ein größeres Missverständnis

Lies vor der Freigabe einer leeren Fläche ihre Überschrift als Tatsachenbehauptung. Prüfe dann, ob die Anwendung genug weiß, um diese Behauptung aufzustellen. Lies ihre Hauptaktion als Versprechen darüber, was sich ändern wird, und prüfe, ob das Bedienelement genau diese Änderung ausführt.