9 Vorteile von Cards als GUI-Design Pattern

9 Vorteile von Cards als GUI-Design PatternWissen Sie, was Cards bzw. Kacheln im User Interface Design sind und welche Vorteile sie haben?

Big Player wie Google, Android, Netflix, iOS und Windows 8 beweisen schon länger, wie erfolgreich Kacheln (im Englischen Cards) als User Interface Design Patterns sind. Welche guten Gründe sie dafür haben, erfahren Sie im Folgenden.

Was sind Cards im User Interface Design?

Sie können sich eine Kachel als einen Container für Inhalte zu einem Thema vorstellen. Diese Inhalte können Bilder, Text oder Interaktionselemente sein.

Vorteile von Cards

Die Kombination von Container und Inhalt ist schlicht und wirkungsvoll. Schauen wir uns die Vorteile von Cards im Einzelnen an:

1. Cards fördern gehirngerechte Informationseinheiten

Cards gehören die Zukunft im GUI-Design, weil mit ihnen Informationen gehirngerecht portioniert werden können. Sie erreichen dies, indem Sie mit jeder Kachel nur eine überschaubare Informationseinheit darstellen. Das entlastet das stark begrenzte Arbeitsgedächtnis Ihrer Nutzer enorm.

Beispiel für Card für externe Empfehlungen
Card für externe Empfehlungen in Xing

2. Cards haben Grenzen

Da Cards auf Containern basieren, sind sie automatisch begrenzt. Dank dieser Eigenschaft können Nutzer sie sehr einfach wahrnehmen und von anderen Cards unterscheiden.

3. Cards können sich in ihrer Art unterscheiden

Darüber hinaus können sich Kacheln auch in Ihrer Art unterscheiden und zur Visualisierung verschiedener Contenttypen eingesetzt werden. So können Sie die Erwartungen der User hinsichtlich der Inhalte lenken.

Ob die Grenzen Ihrer Cards durch Whitespace oder sichtbare Linien verdeutlicht werden, beeinflusst, wie greifbar sie wirken. Messbare Konsequenzen für die User Experience sind uns hierzu jedoch bislang nicht bekannt. Derzeit gehen wir davon aus, dass die Verwendung von sichtbaren oder unsichtbaren Cardgrenzen wohl Geschmackssache ist.

4. Cards sind der Anfang

Wer die begrenzte Informationseinheit einer Card als digitalisierten Gedanken versteht, liegt gar nicht so verkehrt. Sie fungieren als Gedankenanstöße und elegante Einstiegspunkte zur Vertiefung eines Themas sowie der damit verbundenen Interaktion.

Beispiel für Cards für interne Beiträge
Cards für interne Beiträge in Xing

5. Cards strukturieren gedächtniskonform

Zudem können die Informationseinheiten mit Hilfe von Cards so im grafischen User Interface (GUI) strukturiert werden, wie Menschen dies auch in ihren Köpfen anhand von Ober-, Unter oder Nebenkategorien tun.

Beispiel für Unterkacheln eines Beitrages
Kachel für externe Beiträge und Kommentarkachel als Unterkacheln eines Beitrages

6. Cards bedienen Entscheidungsstrukturen

Die Parallelen, die Cards zu menschlichen Gedanken aufweisen, machen sie zu einem mächtigen UI-Pattern. Mit ihnen können Sie die Erwartungen, Denk- und Entscheidungsstrukturen Ihrer Nutzer im Grafischen User Interface nachempfinden.

Setzen Sie die Cards richtig ein, regen Sie die Interaktion der User mit Ihrem System positiv an. Das setzt natürlich voraus, dass Sie die Struktur kennen, die Ihre User im Kopf haben. Die Card-Sorting Methode hilft Ihnen dabei, diese Struktur kennenzulernen.

7. Cards fügen sich Responsivem Design

Auch für Responsives Design sind Cards gut geeignet. Sie ermöglichen eine geräteübergreifende konsistente Erfahrung und passen sich auf verschiedene Bildschirmgrößen an.

8. Cards nutzen der Content Strategie

Aufgrund der zuvor genannten Vorteile können Cards entsprechend ihrer Content-Strategie priorisiert und abhängig von der Bildschirmgröße angezeigt werden. Auf diese Weise kann sicher gestellt werden, dass Ihr Content vom Smartphone bis hin zum Desktop besser zum Nutzungskontext passt.

9. Cards sind die Zukunft

Die Konsequenzen von Cards mit ihren überschaubaren Informationseinheiten sind jedoch noch viel weitreichender. Sie zählen zu den Treibern, die das Web verändern.

Jede Card ist mehrfach verwendbar. Somit kann dieselbe Informationseinheit in verschiedenen User Interfaces eingebunden werden. Wir kennen das bereits beispielsweise von YouTube Videos oder der Werbung, die passend zum Seitenbesucher eingeblendet wird.

In Zukunft werden Webseiten, die für viele Besucher gleich aussehen, zunehmend durch vollständig personalisierte Erfahrungen ersetzt. Dabei werden die Inhalte individuell aus den wiederverwendbaren Cards zusammengestellt. Somit sieht jeder Besucher einer URL, die Webseite, die am besten zu ihm und seiner Story passt.

Cards passen UI-Inhalte auf die Denkstruktur der User an

Zusammenfassend lässt sich also sagen, Cards liefern Ihren User Interfaces die Inhalte, geben ihnen eine Struktur und erleichtern den Usern die Orientierung. Vorausgesetzt Sie verstehen Ihre User und ihren Nutzungskontext . Auf dieser Basis sind Cards Wunderwaffen für Ihr gelungenes GUI Design.

Ihre Gedanken zu diesem Artikel sind uns wichtig. Bitte teilen Sie Ihre Fragen oder Anregungen mit uns und hinterlassen Sie einen Kommentar. Danke und viel Spaß beim Weiterlesen!

Ein Gedanke zu “9 Vorteile von Cards als GUI-Design Pattern

  1. Mit Cards (Kacheln oder auch Tiles genannt) zu arbeiten ist eine angenehme Lösung einerseits für den Entwickler als auch für den Anwender. Für mich als Entwickler bietet sich zunächst die Chance die Anwendung strukturierter aufzubauen, was mir die Übersicht im Code und die Wartbarkeit verbessert. Auf der Anwenderseite hat dieser einen angenehmen Einstieg in eine Anwendung. Ich selbst habe erst vor wenigen Monaten angefangen über ein sogenanntes Dashboard in Desktop-Applikationen über Kacheln einen intuitiven Einstieg dem Anwender zu bieten. Ich kann die GUI somit sachgerecht und Kontext bezogen unterteilen. Kacheln sind jedoch nur ein Werkzeug von vielen. Man darf nicht ausser Acht lassen, dass eine gute Navigation zwischen den Kacheln bzw. innerhalb der GUI ebenfalls sehr wichtig ist.

    Mit freundlichen Grüßen
    Jürgen-Robert Schlischo

Bitte verfassen Sie einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s