Wissen 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.
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.
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.
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!
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