• Facebook
  • Google+
  • Twitter
  • XING
10.04.2016

Die Anatomie eines Listeneintrags

Um die Suche und den Produktvergleich zu unterstützen, sollten die Artikelbezeichnungen auf Listenseiten ein visuelles Design und Layout haben, welches die Prioritäten der Inhalte bewahrt.

© Oleksandr Delyk


by Kim Flaherty 
(deutsche Übersetzung) - 10. April 2016


Vor nicht allzu langer Zeit habe ich online ein Hotel für einen Wochenendtrip gebucht. Ich durchlief den Prozess der Ortung, Verarbeitung und Einengung meiner Optionen auf einer Handvoll verschiedener Websites. Am Ende dauerte es mehrere Tage bis ich endlich eine Entscheidung treffen konnte, wo ich bleiben wollte und es war absolut strapaziös.

Wie so vieles anderes was wir online machen, bedeutet eine Hotelreservierung im Web Betrachtung, Abschätzung und Einengung der Optionen. Meistens bestimmen die Nutzer Kriterien oder browsen durch eine Reihe von Kategorien und enden auf einer Listenseite, die mehrere vorgeschlagene Artikel oder Listeneinträge enthält. Die Listenseite ist der Nullpunkt für die Analyse der vielen verfügbaren Möglichkeiten und muss effizientes Suchen und Entscheiden unterstützen.

Hinweis: Listenseiten werden manchmal „Kategorieseiten“ (wenn sie Artikel einer bestimmten Produktkategorie enthalten), „Adresslisten“ (wenn sie Orte oder Leute auflisten) oder „Galerieseiten“ (wenn sie Zeichnungen oder Bilder enthalten) genannt. Ergebnisseiten von Suchmaschinen (SERP - Search-Engine Results Pages) sind noch ein weiterer Typ von Listenseiten. Im gesamten Artikel werden wir all diese Übersichtsseiten als Listenseiten bezeichnen.

Darstellung der Hierarchie von Listeneinträgen.

Die Listenseite dient als Knotenpunkt mit der Darstellung der vorgeschlagenen Artikel (Listeneinträge), die möglicherweise den Bedürfnissen des Users entsprechen. Jeder Listeneintrag enthält gemeinhin eine Beschreibung des Artikels auf oberster Ebene und einen Link zur Artikelseite (Datenseite). Beachten Sie, dass Sites mit einer tief gehenden Navigationshierarchie zusätzliche Ebenen zwischen der Homepage und den Listenseiten haben würden.

Die Nutzbarkeit der Listenseite hängt davon ab, wie die einzelnen Listeneinträge gestaltet sind. Jeder Eintrag muss nicht nur funktional und leicht verständlich in sich sein, sondern auch gut mit den anderen auf einer Seite gelisteten Optionen zusammenpassen. Es gibt mehrere Anforderungen die erfüllt sein müssen, um nutzbare Listeneinträge und Listenseiten zu realisieren.

1. Priorisieren Sie Attribute des Listeneintrags, um eine Informationshierarchie anzulegen

Wenn Nutzer eine Liste von Optionen durchsuchen, wollen sie schnell entscheiden, welche Elemente interessant sind und welche sie ignorieren können. Zu viele Informationen können den Nutzer überwältigen und ein überladenes Erscheinungsbild bewirken. Andererseits lässt ein Listeneintrag ohne ausreichende Details zu viele Fragen offen und zwingt den User, zu Pogo Sticking (also zu jeder Datenseite navigieren, um die benötigten Informationen zu erhalten). ‘Pogo Sticking‘ signalisiert oft unzureichend hilfreiche Angaben auf der Listenseite.

Screenshot Circalighting.com

Circalighting.com: Auf dieser Galerieseite zeigen die Listeneinträge für Wandleuchten nur die Produktnamen und lassen wichtige Details wie Anstrich, Glühbirnentyp oder sogar den Preis weg. Nutzer müssen zu der Datenseite jedes Artikels hin und her navigieren, um diese Informationen zu erhalten. Auch wenn beim Kauf von Wandleuchten das Bild das wichtigste Element für den Käufer sein mag, sollten der Preis und andere wichtige Unterscheidungsmerkmale auf dieser Ebene nicht außen vor gelassen werden.

 

Screenshot Usautoparts.net

Usautoparts.net: Diese Listenseite für Autozubehör enthält zu viele Details für jedes Produkt. Nutzer müssen durch eine lange Liste von Produktmerkmalen suchen, um jene Produkte auswählen zu können, die für sie relevant sind. Mit solch einem Design ist das Browsen ermüdend und ein Vergleich schwierig.

Wie in der Geschichte von Goldlöckchen muss die Anzahl der Produktmerkmale in dem Listeneintrag genau passen: zu viel wird die Nutzer überladen und sie daran hindern, ausreichend Auswahlmöglichkeiten auf einen Blick zu sehen; zu wenig wird sie ‘Pogo Sticking‘ lassen. Identifizieren Sie die Attribute, die die Informationsbedürfnisse der Mehrheit Ihrer Zielgruppe befriedigen und stellen Sie diese in dem Listeneintrag dar. Nutzen Sie Analysen und Anwenderforschung, um sich bei der Entscheidung, welche Attribute die meisten Informationen für Ihre Nutzer übermitteln, leiten zu lassen.

  • Analysen - Wenn Sie zurzeit Sortier- oder Filtermöglichkeiten auf Ihren Listenseiten haben, finden Sie heraus, welche Filter- und Sortierkriterien am häufigsten genutzt werden. Welche werden in der ersten Sichtungsrunde genutzt und welche werden später angewendet, um das Ergebnis weiter zu optimieren?
  • Nutzerforschung - Führen Sie Tagebuch- und Usability-Studien durch, um zu verstehen, welche Elemente für den Entscheidungsprozess wichtig sind und bis zu welchem Grade und auch welche Produktmerkmale üblicherweise für die Einengung der Optionen genutzt werden.

Die Nutzerdaten und die Analysen werden Ihnen bei der Festlegung helfen, welche Attribute in Ihren Listeneintrag aufgenommen, welche hervorgehoben und welche heruntergespielt werden sollten. Bestimmen Sie die Prioritätenreihenfolge jedes einzelnen Attributs bevor Sie beginnen, über das Layout und visuelle Design des Listeneintrags nachzudenken. Diese Prioritäten bilden die Basis für die Informationshierarchie in einem Listeneintrag.

Wir werden Ihnen ein bisschen Nahforschung ersparen und Ihnen sagen, dass es in all unseren 22 Jahren der Gebrauchstauglichkeitsprüfungen eine Information gab, die jeder Nutzer gefordert hat: der Preis.

 

Screenshot Travelocity.com

Travelocity.com’s Fluglisteneintrag beinhaltet Schlüsselinformationen wie die Abflugzeit, Ankunftszeit, Reisedauer, Anzahl der Zwischenstopps und Aufenthaltszeit sowie die Flugnummer und den Betreiber. Diese Informationen helfen den Usern, einen Flug auszusuchen ohne sie zu überfordern. Falls gebraucht, ist ein Pfad für zusätzliche Details verfügbar.

2. Spiegeln Sie die Attributprioritäten in der Mini-IA und dem visuellen Design jedes Listeneintrags wider

Das Design der einzelnen Listeneinträge soll den Nutzern helfen, schnell jede Option zu verstehen und sollte einen Produktvergleich unterstützen.

Behandeln Sie jeden Listeneintrag als wäre es eine kleine Website und stellen Sie sicher, dass Ihr Layout und visuelle Aufarbeitung jedes einzelnen Attributs in dieser Beschreibung seiner Priorität im Vergleich zu anderen Attributen entspricht.

  • Platzierung und Layout - Als Faustformel gilt, dass die obersten und  linken Bereiche des Kastens für den Listeneintrag die meiste Aufmerksamkeit erlangen. Höher priorisierte Informationen sollten in diesen Bereichen platziert werden (zumindest in Kulturen, die von links nach rechts lesen). Dies im Hinterkopf, organisieren Sie die Attribute gem. der Priorität, um eine Informationshierarchie (oder mini-IA - Mini-Informationsarchitektur) in jedem Listeneintrag zu erstellen.

Screenshot Blickverlauf auf Anzeigeseiten

Eine Eyetracking Blickaufzeichnung auf einer Ergebnisseite einer Suchmaschine zeigt, dass der Nutzer jeden Listeneintrag scannt und die meisten Blicke auf die oberen und linken Bereiche jedes Eintrags lenkt.

  • Visuelle Priorisierung - Lenken Sie mit visuellem Design das Auge auf die wichtigste Information:

    • Heben Sie Schlüsselattribute durch größere Schrift und Schriftstärke oder die Verwendung einer einzigartigen oder dunklen Farbe hervor.
    • Erwägen Sie den Einsatz von  Ikonografie, um Aufmerksamkeit zu erregen und die Suche zu erleichtern.
    • Isolieren Sie ein wichtiges Attribut durch die Abgrenzung mit weißem Leerraum, was es hervorstechen lässt und Aufmerksamkeit erregt.

Seinen Sie vorsichtig bei visuellen Aufarbeitungen, um die Aufmerksamkeit auf Schlüsselattribute zu lenken. Übertreibung kann nach hinten losgehen und das Scannen eines Eintrags schwierig gestalten, der so viele rivalisierende Elemente enthält.

Gemeinsam schaffen die Platzierung und die visuelle Aufbereitung von Informationen einen visuellen Pfad, der das Auge in der Reihenfolge ihrer Wichtigkeit über die Attribute lenkt und ein einfaches und effizientes Scannen jedes Listeneintrags ermöglicht. Viele Nutzer mögen nur einen oberflächlichen Scan der wichtigsten und hervorgehobenen Attribute brauchen, um eine Entscheidung zu treffen. Jene mit spezielleren Bedürfnissen mögen einen Blick auf die sekundären Attribute für ein tieferes Verständnis ihrer Optionen werfen.

Screenshot United Healthcare

Ein Listeneintrag auf der United Healthcare‘s Adressseite für medizinische Anbieter hebt den Namen des Anbieters in großer blauer Schrift hervor. Die Spezialität des Anbieters ist ebenfalls in kleinerer, aber fetter Schrift direkt unter dem Namen hervorgehoben. Andere wichtige Informationen sind isoliert und zur Rechten mit Icons gekoppelt, um Aufmerksamkeit zu erregen. Es ist leicht, die Schlüsselinformationen dieses Anbieters auf einen Blick zu sehen.

Sceenshot Booking.com

Einem Listeneintrag auf Booking.com mangelt es an klarer Informationshierarchie und bietet den Usern keinen visuellen Pfad. Dieser Listeneintrag enthält zu viele einzigartige und rivalisierende visuelle Aufarbeitungen, die erhebliche Anstrengung zum Scannen und Verstehen erfordern.

Screenshot Nextwarehouse.com

Ein Listeneintrag auf Nextwarehouse.com liefert keine Informationshierarchie: der Produktname, Preis, Vorrat und andere Details haben die gleiche Schrift und visuellen Style. Obwohl der Markenname und die Artikelnummer jeweils in rot und blau dargestellt werden, ist der Kontrast zu gering, um das Auge zu lenken und erschweren es dem User, wichtige Attribute herauszufiltern.

Screenshot Nextwarehouse.com

Unser Neudesign des NextWarehouse.com Listeneintrags: Mit nur wenigen visuellen Designoptimierungen, stechen die wichtigen Informationen über diesen Drucker hervor. Zusätzliche Informationen sind priorisiert und ausgerichtet, was das Scannen und Verstehen dieses Listeneintrags vereinfacht.

3. Nutzen Sie einheitliches Styling bei Listeneinträgen um das Vergleichen zu unterstützen

In unserer Eyetracking-Untersuchung stellen wir fest, dass User, die zwischen mehreren Optionen auf der Listenseite wählen müssen, oft von einem Listeneintrag zum nächsten und wieder zurück gucken - gleiche Informationen in verschiedenen Einträgen vergleichend. Um diesen Prozess zu unterstützen, sollten die Listeneinträge vorhersehbar und einheitlich sein - mit der gleichen Platzierung und visuellen Aufarbeitung für übereinstimmende Attribute.

Blickverlauf Produktevergleich

Eine Eyetracking Blickaufzeichnung von einem User, der eine Digitalkamera kauft, zeigt, dass die Augen des Users zwischen zwei Kameras hin und her wandern. Dieses Zick-Zack-Muster deutet an, dass der Nutzer Produktmerkmale verglichen hat.

Screenshot Travelocity’s Fluglisteneinträge

Travelocity’s Fluglisteneinträge sind einheitlich. Für jeden Flug werden die gleichen Informationen am gleichen Ort in der gleichen visuellen Aufarbeitung dargestellt.

Obwohl das Layout und die Platzierung der Attribute in jedem einzelnen Listeneintrag grob die gleichen sein sollten, gibt es Umstände, wo wichtige Unterscheidungsmerkmale hervorgehoben werden sollten. Wenn zum Beispiel ein Produkt im Angebot oder ausverkauft ist, ist es akzeptabel, einzigartige Angaben oder Indikatoren zu zeigen, um die Aufmerksamkeit hierauf zu lenken. Seien Sie nichtsdestotrotz wählerisch, welche Informationen sie auf diese Weise hervorheben. Die Anzeige von einzigartigen Indikatoren in mehr als 2-3 Situationen überlädt die Listenseite und macht das Scannen schwierig.

Screenshot Redmart.com

Ein Nutzer beim Kauf einer Zahnpasta auf Redmart.com fand die Angebots-Indikatoren hilfreich und bemerkte „Eine gute Sache beim Betrachten all der Zahnpasten hier ist, dass es leicht zu erkennen ist, welche Artikel im Angebot sind; so würde ich vielleicht einen dieser Artikel wählen, was ich ansonsten nicht getan hätte.“

Screenshot Booking.com

Booking.com‘s Listeneinträge für verschiedene Hotels sind inkonsistent - Hoteldetails wechseln von einem Eintrag zum nächsten die Platzierung. Dieses Beispiel zeigt auch, wie der Gebrauch von zu vielen Indikatoren leicht ausufern kann. In den o.a. 3 Hotelbeschreibungen gibt es 11 dynamische Indikatoren mit unterschiedlichen Informationen, was die Seite überlädt und den Hotelvergleich schwierig gestaltet.

Schlussfolgerung

Finden Sie heraus, welche Informationen die meisten Ihrer Nutzer brauchen, um ihre Auswahl einzuengen. Priorisieren Sie diese Informationen und erstellen Sie eine einheitliche mini-IA der Details in jedem Listeneintrag, um den Usern ein leichtes und effizientes Verständnis für die Optionen und die Auswahl zu ermöglichen.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen