it-swarm.com.de

Wie kann eine hierarchische Kategorieliste mit einer Vorschau am besten angezeigt werden?

Ich arbeite an einer Site, die Daten anzeigt, die in hierarchischen Kategorien organisiert sind. Wir suchen nach der besten Möglichkeit, diese Kategorien anzuzeigen, um dem Benutzer eine große Menge an Informationen mit möglichst wenigen Klicks anzuzeigen.

Einige Anforderungen:

  1. Die Kategorieliste ist eine willkürliche Anzahl von Ebenen, aber wir müssen nur zwei Ebenen auf einer bestimmten Seite anzeigen - d. H. Wenn wir uns auf einer Seite für eine Kategorie der Ebene 2 befinden, möchten wir ihre Kinder und Enkelkinder zeigen.
  2. Eine beliebige Anzahl von Kindern und Enkelkindern in einer bestimmten Kategorie, aber nur die ersten ~ 10 Kinder und ~ 3 Enkelkinder für jedes Kind müssen anfangs angezeigt werden. Der Rest kann ausgeblendet und erweitert/reduziert werden.
  3. Jede untergeordnete Kategorie "Blattknoten" (d. H. Eine, die keine Enkelkinder enthält) enthält Inhalte, die ebenfalls in der Liste angezeigt werden müssen, aber auszugsweise aufgeführt werden können.
  4. Wenn Sie den Mauszeiger über eine Kategorie bewegen (oder auf einen Link "Vorschau" daneben klicken), wird ein Vorschaufenster angezeigt, in dem einige Inhalte dieser Kategorie angezeigt werden, sodass ein Benutzer die wichtigsten Informationen für diese Kategorie anzeigen kann, ohne von der aktuellen Seite weg zu navigieren.

Fast alles andere ist in der Luft - z. B. ob die Vorschau per Hover oder Klick aktiviert wird; ob es sich um einen Tooltip oder ein statisches Element usw. handelt.

Hier ist ein Kandidat, an dem wir arbeiten. In diesem Beispiel schwebt der Benutzer über "Eisbergsalat" oder hat darauf geklickt. "Körner" ist ein Blattknoten mit einem Auszug aus dem Inhalt. Die "23 More" und "Collapse" erweitern oder reduzieren die Liste der Enkelkinder.

enter image description here

Hat jemand von euch Erfahrung mit der Implementierung von so etwas? Vorschläge sind sehr willkommen. :) :)

5
Eric P

Ich kann mir ein paar Vorschläge vorstellen (die Ihnen vielleicht gefallen oder nicht, ich würde konstruktives Feedback begrüßen), aber die meisten davon könnten in Kombination verwendet werden. Sehen Sie also, was Sie denken:

  1. Zeigen Sie die Kategoriebeschreibung beim Onhover-Ereignis des Kategorietitels an (dies funktioniert jedoch nicht für Touch-Geräte).
  2. Zeigen Sie neben dem Kategorienamen ein Stück Text an, um die Anzahl der Unterkategorien anzugeben:
    Früchte (23 Unterkategorien)
  3. Fügen Sie eine Dropdown-Anzeige neben dem Kategorienamen hinzu und zeigen Sie ein gitterartiges Menü mit Unterkategorien (mehrspaltig) an. Dies ist im Grunde ein mehrspaltiges Menü, das auf eine weitaus größere Liste als ein Standardmenü skaliert werden kann.
  4. Verwenden Sie eine Schaltflächen-ähnliche Anzeige zum Erweitern/Reduzieren, platzieren Sie sie jedoch beispielsweise links neben dem Kategorienamen. Dann muss der Benutzer die Unterkategorien nicht scannen, um die Schaltfläche zum Erweitern/Reduzieren zu finden (wie in Ihrem aktuellen Beispiel) ), weil es immer am selben Ort ist. Hierfür können Text und/oder ein Bild verwendet werden (wobei der Text die Anzahl der Unterkategorien anzeigt):
    # 23 Früchte

Einige davon (insbesondere wenn sie in Kombination verwendet werden) können dazu führen, dass die Kategorieüberschriften ziemlich beschäftigt aussehen. Dies hängt davon ab, was Ihrer Meinung nach die nützlichsten Informationen für die Benutzer sind und wie lange Ihre Kategoriebeschreibungen dauern.

1
SteB

Ich würde ein Layout wie dieses empfehlen, in dem Sie einen Teil des Inhalts am Anfang anzeigen und auf mehr anzeigen klicken. Die anderen Spalten werden vollständig reduziert und die einzige ausgewählte Spalte wird vollständig erweitert. In der Zahl neben der Ansicht wird mehr angegeben, wie viele Elemente in der Kategorie vorhanden sind.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

0
Mervin

Die Anzahl der Klicks ist keine Benutzerfreundlichkeit. Was Sie wollen, ist Zeit für Aufgaben und Fehlerzahlen. Wenn ein Benutzer länger braucht, um visuell zu erkennen, wo er klicken möchte (dies ist normalerweise eine langwierige Aufgabe), verlieren Sie. Wenn es schnell ist, aber in 90% der Fälle der Benutzer am falschen Ort landet, verlieren Sie. Amazon hat einen sehr guten Weg gefunden, dies zu tun, unterstützt durch Millionen von Dollar und mit Einnahmen in Milliardenhöhe. Ich würde ihr Modell kopieren, auch wenn es noch einen Klick bedeutet.

Eine hierarchische Navigation bedeutet außerdem, dass Sie Pixel speichern und Ihre Designs für Effizienz und Ästhetik ausstrahlen können. Dies wird Ihrem Benutzer wahrscheinlich auch helfen, die Informationsarchitektur der Website langfristig zu verstehen.

0
Riche Design