it-swarm.com.de

Master- / Detailansicht leerer Status / Detailansicht, wenn nichts ausgewählt ist

Ich habe folgende Ansicht/Form:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Grundsätzlich ist es ein Formular, in dem ich einige Informationen für einen neuen Datensatz ausfüllen kann.
Wenn der Benutzer eine Kategorie aus dem ComboBox auswählt, möchte ich eine Liste der Elemente auf der rechten Seite und anzeigen a PieChart auf der linken Seite. Da jedoch anfangs nichts ausgewählt ist, muss ich irgendwie die Lücke füllen und mit dem leeren Zustand fertig werden.
Ich kann mir zwei Lösungen vorstellen:

  1. Anstelle von PieChart und List zeige ich den Leerraum mit einer Textüberlagerung an, die etwa Folgendes sagt: " Wählen Sie eine Kategorie aus, um Informationen anzuzeigen".
  2. Ich könnte ein leeres PieChart und einige Beispieleinträge in List haben, eine graue Überlagerung darüber legen und den obigen Text darüber legen (siehe das Modell).

Lösung 1 ist einfacher zu implementieren, aber ich habe viel Leerraum. Lösung 2 ist schwieriger zu implementieren, vermittelt dem Benutzer jedoch einen Eindruck davon, welche Art von Informationen angezeigt werden sollen.

Natürlich könnte ich eine Kategorie vorwählen und die Lücke zunächst ausfüllen, aber lieber leer lassen, da ich möchte, dass der Benutzer eine bewusste Entscheidung über die Kategorie trifft.

Gibt es eine andere Lösung für dieses Problem? Ich habe versucht, nach Beispielen aus der Praxis zu suchen, aber ich konnte keine guten finden. Vielleicht hat jemand einige Beispiele, die insbesondere aus Sicht des Designs/der Benutzeroberfläche/des Stils Inspiration liefern (Typografie, welche Farbe für die Überlagerung usw.).

6
timeu

Ich glaube, ich verstehe Ihre Frage, aber bitte klären Sie mich, wenn ich falsch liege. Ich glaube, das hat damit zu tun, was mit der leeren Tafel zu tun ist, ohne sie dem Benutzer langweilig oder unmotivierend zu machen. Ich glaube, das hängt von Ihrem Ziel über die Angst ab. Ich werde mich für Lösung 1 entscheiden. Wenn ich den Benutzer eher visuell als mit direkten Anweisungen führe, wird meiner Meinung nach der Push verringert und der Pull erhöht. Die gleiche Technik wird in Spielshows angewendet, wenn der Host dem Teilnehmer den Preis zeigt, bevor er die Antwort auswählt. Dies ist ein loses Beispiel, aber ich würde der Lösung 1 zustimmen. Es gibt jedoch eine Reihe von Möglichkeiten, wie ich dies tun würde, je nachdem, was ich erreichen oder dem Benutzer helfen wollte.

Hier ist ein großartiger Artikel darüber: http://ui-patterns.com/patterns/BlankSlate

Wenn Sie nicht möchten, dass sie Inhalte oder Beispielinhalte sehen, würde ich einfach eine symbolisierende Grafik für jeden resultierenden Bereich verwenden und möglicherweise eine hell gestrichelte Linie anstelle des Randes jedes resultierenden Bereichs anzeigen. Dies ist ein Beispiel, das ich in Axure zusammengeschmissen habe. Der Text kann ein wenig hell sein und Sie können kreativ werden und ein Farbsymbol und einen Pfeil verwenden, aber so oder so wird der Benutzer visuell geleitet.

http://www.flickr.com/photos/86134986@N07/7890947738/in/photostream

Weitere Vorschläge:

1) Füllen Sie den Inhalt an beiden Stellen vollständig aus und platzieren Sie eine Unschärfe, die die Daten vollständig verwischt, dem Benutzer jedoch ein klares Verständnis der Zusammensetzung vermittelt.

2) Fügen Sie der Dropdown-Liste eine Standardkategorie hinzu, die anfangs ALLE Kategorien enthält oder anzeigt, und platzieren Sie das Kategoriefeld in unmittelbarer Nähe zu den Ergebnissen der Kategorieliste (z. B. über dem Listencontainer) mit einer eindeutigen Bezeichnung (z. B. "Wählen Sie eine zu filternde Kategorie aus ") oder (zB" Filterkategorien "). Die Optionen der Sprache sind unbegrenzt und sollten von Ihrem definierten Benutzer abhängen.

Beginnen Sie als allgemeine Herangehensweise an den Entwurfsprozess mit dem einfachsten und fügen Sie Komplexität nur hinzu, wenn dies durch Benutzerrecherchen angezeigt wird.

Wenn Sie nichts haben, zeigen Sie nichts

Ein großes Leerzeichen ist normalerweise ein ziemlich guter Hinweis darauf, dass Sie nichts anzeigen müssen und Eingaben erforderlich sind, z. B. ein Formular mit einem leeren Textfeld. Solange das Leerzeichen visuell mit dem Dropdown-Menü "Kategorie" verknüpft ist (z. B. umfasst ein Frame beide) und das Dropdown-Label "Kategorie" ausreichend kommuniziert, was der Benutzer erhält (z. B. "Leistung der Produktkategorie: ") _ “), dann ist keine weitere Aufforderung erforderlich.

Ein einfaches Leerzeichen reduziert den Lese- und Denkaufwand des Benutzers (Option 1) und vermeidet, dass der Benutzer gefälschte Listendaten wirklich verwechselt (Option 2, zweite Hälfte). Benutzer wissen nicht unbedingt, dass Grau oder anderes Verblassen "Beispiel" oder "Fälschung" bedeutet. Sie denken möglicherweise, dass dies nur "deaktiviert" bedeutet (dh die Werte sind real, können aber nicht bearbeitet werden), oder sie denken, dass es sich nur um statisches Grafikdesign handelt, da Grau auf Grau auf Websites und beim Benutzer eine neuere Mode ist Möglicherweise haben Sie den Bereich noch nie gesehen, wenn er über echte Daten verfügt.

Ein großer leerer Bereich kann den Benutzer sogar dazu motivieren, eine Kategorie auszuwählen, gerade weil der leere Bereich „nicht richtig aussieht“ und der Benutzer versucht, das Gleichgewicht zu halten. Wenn Sie einen stärkeren Hinweis darauf geben möchten, was im leeren Bereich angezeigt wird, und Sie keinen Standardkategoriewert für diesen Zweck anzeigen können (siehe unten), zeigen Sie leere Diagramme und Felder an. Das heißt, zeigen Sie die Achse und die Titel der Diagramme, aber keine Daten (z. B. einen weißen Kreis für das Kreisdiagramm, wie Sie vorschlagen), und zeigen Sie die Spalten- und/oder Zeilenbeschriftungen in der Liste, aber leere Listenelemente.

Vermeiden Sie nichts - wählen Sie einen Standardwert

Sofern Usability-Tests nicht gezeigt haben, dass Benutzer die Dropdown-Liste "Kategorie" ignorieren, gehen Sie nicht davon aus, dass dies der Fall ist, und erstellen Sie eine minderwertige Benutzeroberfläche, die nur neue Probleme aufwirft, wie die von Ihnen beschriebenen und die in meinem Kommentar aufgeführten.

Es scheint diesen Mythos im Web-App-Design zu geben, dass das Versäumnis zu mehr Fehlern beiträgt als das Nicht-Versäumnis. Ich glaube, es gibt keine Beweise dafür, außer vielleicht für einige sehr spezifische Situationen (z. B. Likert-Optionsfelder in Meinungsumfragen). Es ist wahrscheinlich richtig, dass mehr Benutzer, die mit einem Standardwert konfrontiert sind, das Steuerelement für diesen Wert verlassen, als Benutzer diesen Wert auswählen, wenn sie zur Auswahl gezwungen werden. Dies bedeutet jedoch nicht unbedingt, dass Benutzer einen Fehler machen. Dies kann nur bedeuten, dass es den Benutzern egal ist, welchen Wert es hat.

Selbst wenn das Testen zeigt, dass Benutzer die Kategorie fälschlicherweise ignorieren, suchen Sie nach anderen Lösungen für das Problem, bevor Sie sich für eine Lösung entscheiden, die zu Aufwand, Fehlern und Verwirrung der Benutzer beiträgt. Diese Heilung kann schlimmer sein als die Krankheit. Möglicherweise müssen Sie beispielsweise die grafische Verbindung zwischen der Kategorie und den Detailbereichen verbessern (sie ist in Ihrem Drahtmodell ziemlich schwach). Oder Sie benötigen bessere Namen für die Optionen der Kategorie, damit Benutzer wissen, was sie bedeuten und was sie möchten.

Ihre Lösung könnte also # 3 sein. Stellen Sie das Dropdown-Menü "Kategorie" auf das erste Element in der Liste ein, das wahrscheinlich die häufigste, wichtigste oder veranschaulichendste Option sein sollte (auch wenn es nur geringfügig mehr als die anderen ist).

Übrigens würde ich nicht davon ausgehen, dass die Google Mail-Lösung auch für Google Mail eine gute ist. Viele große Unternehmen, von denen Sie denken, dass sie es besser wissen würden, tun es nicht.

2