Quadratisch. Praktisch. Gut? – Designtrend Kacheldesign

Überfrachtet, nicht bedienerfreundlich und zu wenig an den Bedürfnissen der Kunden orientiert: Die meisten Websites werden mit ihrem heutigen Layout nicht lange dem Konkurrenzdruck im Web standhalten. Doch mit welchen Designmustern lassen sich Inhalte einfach und zukunftssicher gliedern?

Smartphones, Tablets, Wearables…

Eine Fahrt mit öffentlichen Verkehrsmitteln genügt, um zu verstehen, dass wir bei der Konzeption und Gestaltung von Webseiten heute nicht mehr von einem Festrechner mit 1024×768 Pixeln grossem Monitor ausgehen können. Smartphones haben sich rasant verbreitet. Für viele ist die Nutzung ihres Handys natürlicher, wichtiger und persönlicher, als die ihres PCs oder Notebooks.  Das Problem: Die meisten Website-Layouts tragen diesen neuen Devices immer noch keine (oder zu wenig) Rechnung. Dabei verläuft der Dialog zwischen Kunde und Dienstleister unter dieser Prämisse.

Mittlerweile werden mehr Tablets als Notebooks verkauft, und es gibt inzwischen Millionen von Bildschirmen in allerlei Formen, Größen und Auflösungen. Der Informationszugang zu allen möglichen Quellen wird immer einfacher, und Webseiten vernetzen sich heutzutage durch soziale Medien immer stärker. Das Internet wird umgebaut.

Kacheldesign: Die große digitale Entrümpelung

Wie bei einem digitalen Frühjahrsputz fangen immer mehr Webseitenbetreiber an, ihren Content und ihre Gestaltung so anzupassen, dass diese zu einem komplett neuen Erlebnis für ihre Nutzer wird. Microsofts Metro-Oberfläche (Metro-Design) und der inzwischen weit verbreitete Flat Design Trend haben den Weg dafür geebnet.

Unter Flat Design versteht man den aktuellen Trend zu einer Gestaltung, die geprägt ist durch Verzicht auf Texturen, Typografie als Gestaltungsmittel und dem Verzicht auf Plastizität (Skeuomorphismus). Anwendung fand das Flat Design zuerst in der Gestaltung von Smartphone-Apps und setzte sich in aktuellen Versionen des Android-Betriebssystems fort. Einen endgültigen Durchbruch erfuhr Flat Design, erstaunlich offensiv, im Metro-Design von Windows 8.

Der Weg führt weg von klassischen, “öden” Contentseiten, hin zu hochgradig personalisierbaren und dynamischen Webapplikationen. Dabei wird der Content auf das Wesentliche heruntergebrochen und in individuelle (meist kleinere) Komponenten oder Modulen aggregiert. Sie sollen eine völlig neue Erfahrung bieten, wie wir das Netz erleben. Ein „entmülltes Netz“, in dem man sich auf die wesentlichen, zu erkennenden Ziele konzentriert:

• Informationen schnell und einfach finden
• Informationen sind überall zugänglich (Barrierefreiheit)
• Die Interessen und Vorlieben der Nutzer
• Die Interessen, Vorlieben und das Verhalten von Freunden, Bekannten und Kollegen des Nutzers
• Den räumlichen und zeitlichen Kontext des Nutzers
• Den Wunsch der Nutzer, Informationen zu bewerten und zu teilen

Und was hat das jetzt alles mit Kacheldesign zu tun? Ganz einfach: Wenn Mobilgeräte die dominanten digitalen Medien unserer Zeit sind, dann ist logischerweise das (beste) dazugehörige Designmuster…

Kacheln, Fliesen, Karten!

Die Idee, Karten als Medium zur Verbreitung von Informationen zu nutzen, existiert schon seit Jahrhunderten. Schon im 9. Jahrhundert benutzte man in China die ersten Spielkarten. Im Europa des 18. Jahrhunderts benutzten Lakaien der Aristokraten Kärtchen, um die bevorstehende Ankunft von hohen Gästen anzukündigen. Und schließlich benutzen wir seit hunderten von Jahren Visitenkarten, um unsere Geschäftsdaten auszutauschen. Wir versenden Grußkarten, Geburtstagskarten, Postkarten, Fotos. Die Portemonnaies sind voll mit Kundenkarten, Coupons, Kreditkarten, Ausweisen und Führerscheinen. In meiner Kindheit waren wir von Kartenspielen, Panini Stickeralben und Quizkarten umgeben. Vor dem Computer-Zeitalter verwendeten Fluglotsen Karten, um die Flugzeuge am Himmel zu organisieren. Storyboards von Filmen wurden (oder werden teilweise immer noch) auf Karten geschrieben. Jede Karte repräsentiert jeweils eine Szene oder Handlung. Karte um Karte um Karte erzählen sie eine Geschichte.

Mobile First? Content First!

Responsive Webdesign (RWD) ist nicht “mobiles Webdesign” oder “Design für das iPhone”. Durch RWD erreichen wir vielmehr, dass sich eine Webseite an die jeweilige Umgebung anpassen kann. Egal, auf welchem Medium wir uns befinden, das Ziel sollte eine bessere Usability für die Nutzer, und über diesen Umweg eine bessere Akzeptanz der eigenen Webseite sein. Es gibt hierfür noch keine elegante und allgemein gebräuchliche Lösung, aber der größte Vorteil von Kacheldesigns liegt in ihrer fast beliebigen Manipulierbarkeit. Im Alltag lassen sich Karten einfach umdrehen, kippen, stapeln, sortieren, gruppieren oder verteilen. Es ist möglich, zusätzliche Informationen auf ihnen zu offenbaren und zu teilen. Oder einfach nur Platz zu sparen.

Bei der Gestaltung für Bildschirme können wir ebenfalls auf alle diese “Features” zurückgreifen. Im Gegensatz zur realen Welt können wir unseren digitalen Karten Animation und Bewegung verleihen und viele weitere Multimedia-Inhalte, wie Fotos, Videos oder Musik einbinden. Sie lassen sich horizontal oder vertikal aneinanderreihen und stapeln um eine Art “Stream” oder Datenkette zu visualisieren. Mit variablen oder statischen Abmessungen. Eine Kachel kann den Contentraum von Smartphones einnehmen. Zwei Kacheln können den Content eines Tablets füllen. Drei Kacheln den Raum eines Desktops usw…

Die Vorteile von Kacheldesign auf einen Blick:

• Fluide Kachellayouts passen sich automatisch an, um immer den kompletten Viewport zu nutzen. Dabei gewährleisten individuelle Kachelformate und „Platzhalterkacheln“, dass stets das komplette Browserfenster gefüllt ist.
• Kachelmodule sind leicht zu pflegen und zu aktualisieren. Die Wahrscheinlichkeit das Layout durch unsachgemäße Contentbearbeitung zu „zerschiessen“ hält sich in grenzen.
• Individuelle „Aktionskacheln“ lassen sich z.B. permanent einblenden, um bestimmte Produkte oder Aktionen hervorzuheben.

Kacheldesign als neue kreative Bühne

Man wird beim nächsten Relaunch oder Facelift seines Internetauftritts nicht drum herum kommen, sich über die Übersichtlichkeit und Zugänglichkeit seines Contents Gedanken zu machen. Modularer Content berücksichtigt die Bedürfnisse und Vorlieben der heutigen Nutzer und sie verlangen es. Kacheln bieten die perfekte Bühne dafür. Egal ob wir Content auf Facebook, Twitter, Pinterest, Instagram oder sonst wo konsumieren: alles wurde auf Basis der Kachel-Metapher (und Metro-Design von Microsoft) umgesetzt.

Im Webdesign häufig “Tiles” oder “Cards” genannt, sind sie als Designmuster perfekt dazu geeignet, die unterschiedlichsten Bildschirmgrößen und Formate zu bespielen und abzudecken. Es ist aufregend zu sehen, wie zukünftige Webseiten ihren Content damit gestalten, um den Besuchern ein noch persönlicheres Erlebnis zu bieten. Die Möglichkeiten sind grenzenlos.

Einige inspirierende Links zum Thema Kacheldesign:

• Kacheln sind das primäre Gestaltungselement von Google Glass
• Twitter Cards bietet die Möglichkeit Multimedia-Inhalte mit Tweets zu kombinieren
• Apple’s Passbook App benutzt Karten um den Look von Tickets zu nachzuahmen