Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Diese Fehler solltest du im kartenbasierten Webdesign vermeiden

Kartendesign im Web ist nicht schwierig, wenn man weiß, wie. (Foto: Pixabay)

Karten sind das neue Designkonzept – praktisch, allerdings solltest du es auch nicht übertreiben. Die folgenden Fehler solltest du deswegen vermeiden.

Kartenbasierte Designs sind aus Apps nicht mehr wegzudenken. Spätestens seit Einführung der Grundsätze des Material Design, zu dessen Konzepten auch das der Cards gehört, setzen sich die kleinen, variablen Informationshappen immer weiter durch. Vor einiger Zeit haben wir hier bei t3n einen Beitrag geschrieben, der den Trend näher erläutert und den du auch lesen solltest, wenn du dich tiefer mit dem Thema befassen willst.

Der gedankliche Ansatz hinter dem Kartendesign hat mehrere Aspekte: Zum einen dient die Karte als Zugangspunkt zu weiterführenden Informationen, quasi als Portal. Das ist der inhaltliche Aspekt. Zum anderen bietet die Karte als Designelement eine in sich variable Möglichkeit der Gestaltung größerer Zusammenhänge. Mit anderen Worten: Karten lassen sich als Form flexibel arrangieren, sodass sie das Design von Websites erleichtern, die auf vielen verschiedenen Auflösungen funktionieren müssen. Das ist der gestalterische Aspekt. Meiner Überzeugung nach ist das auch gleichzeitig der wichtigere.

Die generelle Vernachlässigung des inhaltlichen Aspekts hat dazu geführt, dass kartenbasierte Designs immer die gleichen Fehler aufweisen, die leicht zu vermeiden wären. Wenn du dir vor Augen hältst, dass die Karte deine kleinste individuelle Designeinheit ist, dann dürfte es dir nicht schwerfallen, folgende Fehler zu vermeiden:

Baue keine weiteren Unterteilungen ein

Die Karte ist deine kleinste Einheit. Unterteile sie nicht in weitere Einheiten, etwa indem du mit horizontalen oder vertikalen Linien arbeitest oder viel Whitespace innerhalb der einzelnen Karte einsetzt.

Erstelle eine Karte stets so kompakt wie möglich. Sie soll schnell vom Nutzer erfasst werden. Wenn er erst herausfinden muss, wie du dir das Kartendesign womöglich gedacht hast, ist es kein gutes.

Eine vorbildliche Karte mit allen wichtigen Elementen. (Bildquelle: Google Material Design Guidelines)
Anzeige

Setze auf visuelle Hierarchie

Statt mit weiteren Ordnungsmerkmalen wie Linien etc. dein Kartendesign zu strukturieren, setze lieber auf visuelle Hierarchie. Das erreichst du etwa durch typografisch sinnvolle Schriftgrößen für Header und Subheader. Strukturiere deine Karten stets gleich, etwa Bild, Header, Subheader, Teaser, Call to Action.

Verwende pro Thema eine Karte

Sobald der nächste Header fällig würde, weil du ein neues Thema zu bearbeiten gedenkst, erstelle eine neue Karte. Vermische die Themen nicht innerhalb ein und derselben Karte. Dadurch geht die Übersicht verloren. Zudem torpedierst du so das Konzept als solches.

Übertreibe es aber auch nicht

Wenn du zum Beispiel eine Kontaktliste anzeigen willst, dann ist diese Liste deine Karte. Komm nicht auf die Idee, aus jedem einzelnen Kontakt eine einzelne Karte zu erstellen. Wichtig ist, immer den logischen Zusammenhang zu wahren.

So nicht! Homogene Inhalte sollten nicht als einzelnen Karten dargestellt werden.. (Bildquelle: Google Material Design Guidelines)

Homogene Inhalte – wie die genannte Kontaktliste oder etwa eine Bildergalerie – gehören logisch zusammen und bilden so eine Karte.

Limitiere die Interaktionsmöglichkeiten

Zumeist ist eine Karte ein einziger Link. Wenn es die Aufgabe der Karte ist, deine Besucher zu einer bestimmten Information zu leiten, stelle sicher, dass die Karte auch tatsächlich als ein kompletter Link funktioniert. Optisch lässt sich das etwa durch einen leichten Schlagschatten um die Karte realisieren.

Kompakte Karten mit klaren Interaktionsmöglichkeiten. (Bildquelle: Google Material Design Guidelines)

Sollte das nicht die Aufgabe deiner Karte sein, musst du explizit Interaktionsmöglichkeiten vorsehen. Diese sollten dabei aber deinen Zielen entsprechen und nicht ins Beliebige abdriften. So solltest du insbesondere auf Links ins Irgendwo verzichten, wenn du eigentlich möchtest, dass der Besucher dein Produkt kauft oder deinen Newsletter abonniert.

Halte jede Karte so kompakt wie möglich

Bedenke, dass die Karte der Zugangspunkt zu weiteren Informationen sein soll und nicht die umfassende Information selbst. Auf eine Karte gehört daher nur das absolute Mindestmaß dessen, was sich als Zugangspunkt definieren lässt.

Karte in ein- und ausgeklapptem Zustand. (Bildquelle: Google Material Design Guidelines)

Wenn du dazu neigst, eher etwas mehr Infos zu geben, solltest du überlegen, die Karte erweiterbar anzulegen. So würde sie im eingeklappten Zustand nur das Minimum und im ausgeklappten Zustand etwas mehr an Informationen liefern. Der eingeklappte Zustand wäre der initiale, sodass der Besucher einen aufgeräumten und übersichtlichen optischen Eindruck gewinnt.

Fazit: Mit ein paar kleinen Tipps lässt sich das kartenbasierte Design optimieren

Kartenbasiertes Design ist nicht eben brandneu, hat aber auch eine Weile gebraucht, um sich durchzusetzen. Deshalb haben sich feste Best Practices noch nicht etabliert. Wenn du unsere Tipps hier ergänzen kannst, dann tue es bitte in den Kommentaren.

Quellen zum Weiterlesen:

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot