Was sind UI Cards?
Eine UI Card ist die gesamte Benutzeroberfläche, die weitgehend oder ausschließlich darauf basiert, den Nutzerinhalt auf Karten darzustellen.
Es geht darum lange Texte zu vermeiden und Inhalte besser spannbar zu machen. Auch wenn Nutzer:innen mit dem Konzept einer UI Card aus gestalterischer Sicht nicht vertraut sind - so wissen sie doch sofort, wie sie UI Cards verwenden können.
Bevor sich UI-Cards im digitalen UI-Design (User Interface) durchsetzten, waren physische Karten bereits ein beliebtes Mittel, um bestimmte Informationen zu vermitteln. Sie wurden und werden als einfache Möglichkeit verwendet, um eine Vielzahl von Botschaften zu übermitteln und so diese zu scannen oder sich zu merken. Ein Beispiel sind Visitenkarten, die uns vor allem helfen, uns die winzigen Details wie zum Beispiel die eines Blumenladens in der Nähe, Inhaber:in oder Telefonnummer zu merken.
UI-Cards erfüllen in dieser Hinsicht kaum eine andere Funktionalität. Oft erinnern sie uns an physische Karten, normalerweise mit quadratischen oder abgerundeten Kanten. Sie können allerdings in unterschiedlichen Formen und Größen auftreten. Typischerweise haben die Karten ein einfaches Layout, es besteht aus dem Hintergrund, einem Bild und ein paar Containern, von denen es nie mehr als drei oder vier gibt. Diese Behälter enthalten so genannte "Elemente". Ein Element kann ein Bild, eine CTA-Schaltfläche (Call to Action Aufforderung) , ein Titel oder ein Untertitel sein.
UI Card Design ist eine wichtige Technik für moderne Websites und Mobile-Apps geworden
Heutzutage können wir mit Sicherheit sagen, dass UI Cards zum Grundstock im Design von Websites und mobilen Apps geworden sind. Und dafür gibt es gute Gründe. UI Card Design ist einfach, intuitiv und ästhetisch ansprechend. Sie sind ein effektives Werkzeug, um Websites so zu erstellen, dass sie auf allen Endgeräten ansprechend wirken und lesbar sind (responsive).
In diesem Beitrag schauen wie uns an, wofür UI Cards verwendet werden und warum sie so beliebt sind. Wir haben ein paar Tipps, wie du die perfekte Karte erstellen kannst. Lies weiter, um zu entdecken, wie UI Card Design dir und deinen Nutzer:innen das Leben leichter machen kann!
Warum liegt UI Card Design im Trend?
Es gibt mehrere Gründe warum UI Cards an Beliebtheit gewonnen haben. Wenn sie richtig angelegt sind, können UI Cards die Navigation deiner Website oder App verbessern und so das UX (Nutzererlebnis) steigern. Bestimmte Informationsbrocken können so isoliert und dadurch Informationen auf eine kognitiv freundlichere Weise gespeichert und lesbar gemacht werden.
Durch das UI Card Design wird die Möglichkeit geboten, Informationen auf interessante, einprägsame Art und Weise anzuzeigen. Das ist inzwischen der Grund, warum sie in fast allen Bereichen zu finden sind.
UI Card Design hilft Navigationsprobleme auf der Website zu lösen
Das Karten Design bietet eine interessante Lösung, wenn es um die visuelle Darstellung von Informationen auf inhaltsreichen Websites geht.
Es sollte höchste Priorität haben, den Nutzer:innen bei der Navigation durch eine Website oder App zu helfen. UI Cards helfen dabei, ähnlich einer ausgeschilderten Straße - leicht verständlich, die gesuchten Inhalte zu finden. Sie können auch eine gute Alternative zu Sitemaps sein.
Anstatt viele Menüs und Links über das gesamte UI verstreut zu haben, hilft das Karten-UI-Design, die Dinge aufzuräumen. So werden prägnant mehrere verschiedene Informationen und Medientypen auf einer Seite festgehalten.
UI Cards sind intuitiv
Das UI Card Design ist per Definition minimalistisch. Letztlich ist das das Mantra der meisten UX-Designer:innen, nämlich saubere, ästhetisch ansprechende UIs zu schaffen. Minimalistische UIs sind intuitiver, reduzieren die kognitive Belastung und erhöhen das Verständnis der Nutzer:innen für den Inhalt einer Website oder mobilen App.
Daher ist es das Ziel der Designer:innen die Karten-UI-Designs so zu gestalten, dass eine vereinfachte und leichter zugängliche Web- oder Mobile-UI geschaffen wird. Inbegriffen ist deswegen, dass die Karten niemals zu viele Informationen enthalten, sie müssen leicht "scannbar" bleiben.
UI Cards sind überschaubar und responsive
Das Schöne am UI Card Design ist: die Fähigkeit, kleine, vereinfachte Informationsschnipsel zu präsentieren, die es den Anwender:innen ermöglicht, den angebotenen Inhalt aus der Vogelperspektive zu betrachten. Diese Schnipsel können mit einem Klick zu detaillierteren Inhalten führen.
Betrachte UI Card Design als eine Möglichkeit, den User:innen zu helfen, durch Massendaten zu blättern und doch fix die Informationen finden zu können, die für sie am wichtigsten sind.
Einer der Hauptgründe, warum sich die UI Cards schnell durchsetzen, ist, dass sie einfach responsive umzusetzen sind. Es ist sehr einfach, die Auflösung der Karten zu skalieren, da ihre quadratische Form in jedes Rastersystem passt. So sind sie ideal für Websites, die auf verschiedenen Endgeräten lesbar sein müssen. Und dieser Standard sollte inzwischen als gesetzt gelten.
Super ist, dass die Richtung, in die sich Karten bewegen, ebenfalls geändert werden kann. Zum Beispiel kannst du für mobile Geräte das vertikale Scrollen aktivieren, anstatt horizontal. Dies macht das UI Card Design zum Freund der Webdesigner:innen.
UI Card Design ist vielseitig einsetzbar und effektiv
UI Card Design eignet sich für viele Web- oder App-Seiten in Form von: Bildergalerien, Textinhalten, Audiobibliotheken, Videos und vieles mehr. Sie können in allen Größen und Farben kreiert werden und eine gute Informationsstruktur aufbauen.
Des Weiteren können UI Cards gut auf einer E-Commerce-Website eingebunden werden, da den Benutzer:innen so geholfen wird durch verschiedene Produktkategorien zu navigieren und gleichzeitig eine reichhaltige Darstellung des Angebotes zu erhalten. Kund:innen können durch Produkte blättern und streichen und dabei CTA-Schaltflächen verwenden, die sie einladen, ein Produkt anzusehen oder zu kaufen. Hier ein Beispiel.
Social Media Plattformen neigen dazu, UI Cards sehr häufig zu verwenden, damit schnell durch die Inhalte gescrollt werden kann und sie so letztlich häufiger geteilt werden. Darüber hinaus verwenden Medienseiten oft Karten, um Kategorien von Nachrichteninhalten anzuzeigen und einzelne Nachrichten darzustellen.
UI Cards sind benutzerfreundlich
Das Kartendesign ist ein gutes Mittel, das UX zu verbessern, da sie physische Karten mit Informationseinheiten ersetzen und so intuitiv von den Nutzer:innen verwendet werden. Die meisten Menschen sind es gewohnt, ihre Augen von links nach rechts über eine Seite und von oben nach unten zu bewegen. So wird ihnen die Erkundung der Website erleichtert.
Websites, die mit horizontal scrollenden UI Cards moduliert sind, oder mobile Geräte, die vertikal scrollende UI Cards eingebunden haben, sind Gewinner in Bezug auf ein visuelles Design, das Informationen einfach durch unsere Auge-Hirn-Koordination verarbeiten kann.
Wann sollte UI Card Design verwendet werden?
Es besteht kein Zweifel, dass UI Cards das UX verbessern kann. Das bedeutet aber nicht, dass es deswegen für jede Anwendung geeignet ist. Bevor du dich jetzt mit Vollgas in das UI Card Design für deine Website oder App stürzt, solltest du ein paar Punkte beachten.
Für vielfältige Inhalte!
Keine Sorge, dieses Konzept ist einfacher als es klingt! Nehmen wir an, du möchtest UI Cards für deine Landing Page erstellen. Du musst sicherstellen, dass die Informationen, die deine Karten darstellen sollen, heterogen sind, das heißt, dass die Inhalte vielfältig sind. Das liegt daran, dass Karten aufgrund ihrer natürlichen Grenzen in der Lage sind, nicht zusammenhängende Inhalte sehr gut zu isolieren.
Um dies zu demonstrieren, lass uns einen gewöhnlichen Blog betrachten. Ein UI Card Design kann hervorragend funktionieren, um verschiedene Blogbeiträge zu unterschiedlichen Themen unter derselben Kategorie darzustellen. Wenn deine Inhalte jedoch homogen sind oder in engem Zusammenhang stehen, sind sie vielleicht im Listenformat besser aufgehoben.
Wenn du außerdem Inhalte hast, die Benutzer:innen vergleichen möchten, zum Beispiel Texte, Bilder oder Produkte, ist es besser, sich für eine Galerie oder Listenansicht zu entscheiden.
Für Interaktionen und Mediendateien
Ein andere Möglichkeit, wie Karten extrem hilfreich sein können, ist, wenn du interaktive Inhalte, wie zum Beispiel audiovisuelle Medien hast. Die Möglichkeit, diese Inhalte in Blöcke oder Zusammenfassungen zu verpacken, kann helfen, deine Medien in eine visuelle ansprechende Reihenfolge zu bringen, damit sie schnell erfasst werden können.
Für CTAs (Call to Action Buttons)
UI Cards sind eine wunderbare Idee, um CTAs einzubauen. Sagen wir, du möchtest, dass deine User:innen einfach eine Story teilen können. Die Einbindung auf eine UI Card mit einer klaren CTA-Schaltfläche ist die Möglichkeit, dies zu fördern. Oder nehmen wir an, du entwirfst eine UI für eine E-Commerce-Wesbsite, dann wäre es eine gute Idee, einen „Jetzt bestellen“- oder „Jetzt kaufen“-CTA einzubauen.
Tipps für gutes UI Card Design
Gutes UI Card Design kann subjektiv sein. Es gibt viele Möglichkeiten, eine Karte zu gestalten, und viele praktische Anwendungen für sie. Es gibt jedoch einige allgemeingültige Prinzipen, die du nicht aus dem Auge verlieren solltest. Für ein erfolgreiches UI Card Design solltest du diese Tipps beherzigen:
- Lass jede Karte nur eine Idee, ein Thema oder ein Produkt repräsentieren!
- Plane eine Informationshierarchie für die UI Cards!
- Halte genug Abstand zwischen den Karten ein!
- Lass die Karten klickbar aussehen!
- Verwende niemals Inline-Links - die Karte selbst ist ein Link!
- Verwende leichte Schattierungen, um den Karten einen realistischen Eindruck zu geben!
- Verwende klare einfache Schriftarten!
Zu guter Letzt, und das ist mit das Wichtigste, solltest du immer planen, wie du das Problem des Responsive Designs angehst (damit es auf allen Endgeräten funktioniert und gut aussieht). Stelle sicher, dass deine UI Cards auch auf kleinere Auflösungen skaliert werden, zum Beispiel von einer Reihe mit drei auf zwei.
Fazit
UI Card Design wird zunehmen.
Zu wissen, wie du ein gutes Karten-UI-Design erstellst, bedeutet einschätzen zu können, wie ein intuitives Browsing-Erlebnis für deine Benutzer:innen geschaffen wird. Großartiges Karten-UI-Design ist wie eine funktionale Augenweide, wenn es richtig gemacht wird.
Kurz gesagt, Karten-UI-Design ist eine dieser wichtigen Fähigkeiten, mit der du, wenn du sie einmal beherrschst, eine breite Palette von UI-Design-Problemen lösen kannst. Und das Gute ist, die Karten liegen jetzt und zukünftig voll im Trend.