Zwei der gebräuchlichsten Arten, Webseiteninhalte heutzutage zu organisieren, sind Karten und Listen. Jeder hat seine eigenen Vor- und Nachteile. Während es Listen gibt, die es seit den Anfängen des Internets gibt, ist Karten-gestütztes Design erst seit kurzem eine ernst zu nehmende Kraft und eine zunehmend beliebte Wahl für die Organisation von Inhalten.

Karten und Listen sind einzigartige Möglichkeiten, Inhalte anzuzeigen, dh sie sind für bestimmte Situationen besser bzw. schlechter. Der Schlüssel für Webdesigner liegt natürlich darin, zu verstehen, wann genau jeder Benutzer eine bessere Benutzererfahrung bietet. Die Antworten mögen Sie überraschen und dazu führen, dass Sie Designprinzipien etwas anders betrachten.

Hier untersuchen wir, wann es im Webdesign sinnvoll ist, Karten gegen Listen zu verwenden und umgekehrt.

Was ist eine Karte? Was ist eine Liste?

Um uns zu helfen, zu verstehen, wenn die Verwendung einer Karte oder Liste für UX-Zwecke besser geeignet ist, hilft es uns sehr, zuerst zu verstehen, was jeder ist und was jeder tut (oder tun soll).

Eine Karte ist ein Container, der verschiedene Bits verwandter Informationen anzeigt, von denen Benutzer noch mehr Informationen erhalten können. Obwohl es sich immer noch um ein flaches Design handelt, wird es besser als Flat Design 2.0 klassifiziert, da es normalerweise leichte 3D-Effekte wie Schlagschatten zur Anzeige der Klickbarkeit aufweist. 3D-Effekte wie diese visuelle Tiefe fungieren als Signifikant für Benutzer und geben an, dass sie auf weitere Informationen klicken können.

Interessanterweise gibt es bei einer Karte eine Art Zwiespalt, da sie in Form und Größe einer echten Spielkarte ähnelt. Dies deutet auf den veralteten Skeuomorphismus hin, bei dem grafische Elemente tatsächlichen Elementen ähnelten.

Eine Liste ist eine Seite, auf der die Suchkriterien oder Surfgewohnheiten eines Benutzers sie treffen. Die Auflistungsseite weist im Wesentlichen eine Anzahl verschiedener Kandidatenelemente oder Einträge auf. Daher muss eine Liste eine effiziente und schnelle Augenuntersuchung für die richtige UX ermöglichen. Dies ist ein wichtiger Unterschied, der uns hilft zu unterscheiden, wenn eine Liste in Bezug auf die Benutzerfreundlichkeit besser geeignet ist als eine Karte.

Wann man Karten benutzt

Jetzt, da wir die Hauptunterschiede zwischen Karten und Listen kennen, ist es für uns einfacher, mit Sicherheit zu wissen, wann sie im Webdesign verwendet werden.

Zum Durchsuchen der Informationen (im Gegensatz zur Suche)

Karten machen es für die Benutzer schwierig oder sogar unmöglich, die Ranking-Wichtigkeit von Inhalten zu erkennen. Zum Beispiel liefern Karten keine offensichtlichen Informationen über die Reihenfolge, in der Inhalt auf einer Seite betrachtet werden sollte, da die Umrisse / Grenzen von Karten alle ähnlich aussehen. Zweifelsohne schlägt die grundlegende Eye-Tracking-Forschung immer vor, dass Nutzer zunächst mit Inhalten auf der linken und oberen Seite einer Seite beginnen, aber Listen machen es für Nutzer intuitiver, diesen grundlegenden Weg der Aufnahme von Online-Inhalten zu verfolgen.

Karten03

Deshalb ist die Verwendung von Karten zum Durchsuchen großer Sammlungen - wie beispielsweise auf Pinterest - ideal. Wenn Sie nur die Suchergebnisse auf Pinterest durchsuchen, anstatt zu bestimmen, in welcher Reihenfolge sie angezeigt werden sollen, macht das unendliche Scrollen der kartenbasierten Ergebnisse das Surfen attraktiv, unterhaltsam und einfach. Wenn Sie etwas Interessantes sehen, können Sie sofort auf die Karte klicken, um weitere Informationen zu erhalten. Es ist sofortige Befriedigung.

Für Gruppierungen verschiedener Artikel

Abhängig von der App oder dem Programm, das Sie verwenden, werden Sie möglicherweise auf ein Dashboard stoßen, das kartenbasiertes Design verwendet, um die Unterscheidung verschiedener Inhaltstypen zu erleichtern. Dies ist ein Beispiel für die Stärke von Karten, mit denen Benutzer schnell die verschiedenen Arten von Inhalten identifizieren können, die sie verwalten.

Karten02

Da Karten Grenzen verwenden, um visuelle Grenzen zu setzen, sind sie ideal, wenn es darum geht, unterschiedliche Elemente zu gruppieren.

Karten04
Karten01

Wann man Listen benutzt

Listen können etwas einfacher als Karten sein, vielleicht weil sie länger im Webdesign sind. Als Ergebnis ist es leichter zu bestimmen, wann sie gut zu verwenden sind.

Für ein effizientes Augenscannen

Listen werden bevorzugt, wenn Benutzer auf einer Website schnell nach etwas suchen müssen, das sie möchten, z. B. wenn sie nach der Eingabe ihrer Suchbegriffe die Seite mit den Suchergebnissen aufrufen. Listen, die vertikal sind und bei denen ein Element in einer Reihe über der nächsten sitzt, helfen, die Augen des Benutzers viel besser zu fokussieren als Karten, da Listen fixiert sind, während Karten nicht in festen Positionen in Reihen sitzen.

list04

Für kleinere Bildschirme

Einfach gesagt, Karten nehmen viel mehr Immobilien auf dem Bildschirm auf. Dies macht ihre Verwendung auf mobilen Geräten und einigen Tablets problematisch, da Benutzer gezwungen sind, auf der Seite nach unten zu scrollen, um mehr Auswahlmöglichkeiten zu sehen, als wenn Listen verwendet werden. Da die Elemente einer Liste nur in kurzen Reihen über die Länge einer Seite angeordnet sind, können Benutzer mehr Auswahlmöglichkeiten sehen, ohne sich auf Kurzzeitgedächtnis verlassen zu müssen (was diejenigen, die ein kartenbasiertes Design betrachten, tun müssten, wenn sie nach unten scrollen sehen Sie mehr Elemente).

Sobald Ihr Design erfordert, dass Benutzer sich an weiter unten auf dem Bildschirm liegende Optionen erinnern, werden sie beginnen, darauf zu stoßen kognitive Belastung , was UX schadet. Kognitive Belastung bedeutet, dass Ihr Gehirn härter arbeiten muss, um sich an etwas zu erinnern, während es noch zusätzliche, neue Informationen verarbeitet. Dies führt wiederum zu einer Verlangsamung der Geschwindigkeit von Aufgaben und möglicherweise zu einer vollständigen Aufgabe einer Benutzeraufgabe.

Liste03a

In der App-App meines Smartphones sind App-Kategorien in einer übersichtlichen, vertikalen Liste angeordnet, die acht Elemente auf einer Seite anzeigt, ohne dass ich mir Sorgen machen muss, dass ich nach unten blättern muss, um mehr zu sehen und mich an frühere Entscheidungen zu erinnern. Wenn dies in einem Layout mit den viel größeren Karten gemacht worden wäre, hätte ich höchstens ein paar Auswahlmöglichkeiten gesehen und meine UX behindert.

Liste02
Liste01

Karten gegen Listen

Karten sind einfach ein organisatorisches System, um Bits verwandter Informationen anzuzeigen, die mit zusätzlichen Informationen in der Site-Navigation verknüpft sind. Sie eignen sich hervorragend, um Benutzern das Durchsuchen vieler Informationen und Gruppieren von Elementen zu ermöglichen.

Listen sind Seiten, die Suchergebnisse und Einträge anzeigen, bei denen es sich um Kandidatenelemente handelt, die mit der Suchanfrage übereinstimmen. Sie sind ideal zum Organisieren ähnlicher Inhalte in vertikaler Ausrichtung.

Denken Sie daran, diese wichtige Unterscheidung zwischen den beiden, und Sie werden Inhalte mit großartigem Design meisterhaft organisieren.