Bei der Optimierung für mobile Geräte denken wir in erster Linie an die Anpassung des Webseitenlayouts für kleinere Bildschirme. Um Inhalte aber tatsächlich optimal für den Konsum über Smartphones und Tablets aufzubereiten, reicht dieser Ansatz nicht aus.
Im folgenden Artikel werfen wir einen Blick auf gestalterische und technische Muster, die zu einer besseren Nutzererfahrung auf Geräten mit Touch-Steuerung und langsamen Internetverbindungen führen. Außerdem stellen wir Konzepte zu einer bewussten Führung des Nutzers vor und zeigen, wie diese im modernen Webdesign umgesetzt werden können.
Call-to-Actions: Wichtigkeit in drei Stufen
Jede Webseite bietet einem Besucher eine Vielzahl an Interaktionsmöglichkeiten: Über die Navigation können weitere Seiten aufgerufen werden, der "Weiterlesen"-Link verspricht zusätzliche Informationen und der große "Jetzt registrieren"-Button lädt zur Erstellung eines Benutzerkontos ein.
Damit diese Vielzahl an Möglichkeiten nicht zu einer Überforderung des Nutzers führt, emfpiehlt sich eine klare Strukturierung aller Interaktionsmöglichkeiten in drei Stufen:
- Die einzigartige Hauptaktion
Jede Seite sollte maximal eine Hauptaktion beinhalten, die dem Nutzer an präsenter Stelle angeboten wird. - Auffordernde Aktionen
Ein Nutzer wird an verschiedenen Stellen auf typische Aktionen einer Webseite hingewiesen. Diese Aktionen betreffen in der Regel die Navigation von Inhalten oder die Durchführung von Vorgängen wie einer Anmeldung. - Weiterführende Aktionen
Zu einem Element können weiterführende Aktionen durchgeführt werden. Typische Beispiele sind globale Navigationselemente und "Weiterlesen"- oder "mehr erfahren"-Verlinkungen.
Im Material Design lassen sich diesen drei Aktionsgruppen unterschiedlich gestaltete Interaktionselemente zuordnen:
- Die Hauptaktion wird durch einen auffälligen "floating action button" repräsentiert.
- Auffordernde Aktionen sind über hervorgehobene "raised buttons" möglich.
- Weiterführende Aktionen eines Elements werden durch zurückhaltende "flat buttons" abgebildet.
Die Übernahme dieser grafische Unterscheidung im Webdesign führt zu einer klaren Struktur und Präsentation von Interaktionsmöglichkeiten: Die wichtigste Aktion springt direkt ins Auge des Besuchers und ist im besten Fall stets präsent. Auffällige Buttons weisen gezielt auf weitere typische Aktionen hin, während sich weiterführende Aktionen im Hintergrund halten und erst bei der Auseinandersetzung mit ihrem zugehörigen Inhaltselement wahrgenommen werden.
Die wichtigste Interaktion: Der Floating Action Button
Die Kernaktion einer Seite kann über einen auffälligen Button hervorgehoben werden. Im Material Design ist dafür der sogenannte "floating action button" vorgesehen: Eine runde Schaltfläche, die in der Regel ausschließlich ein einzelnes Icon beinhaltet, das auf die durchführbare Aktion(en) hinweist. Je nach Layout kann diese Schaltfläche fix auf der Webseite positioniert und somit immer erreichbar sein oder an einer prominenten Stelle in das Design integriert werden.
Besteht die wichtigste Interaktionsmöglichkeit einer Webseite aus mehreren zusammengehörigen Aktionen, so können auch diese über einen einzigen interaktiven "floating action button" erreicht werden:
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
.example-floating-btn--mini {
opacity: 0;
visibility: hidden;
transform: translatex(-10px);
transition: all 0.4s ease
}
.example-floating-btn--container:hover .example-floating-btn--mini {
opacity: 1;
visibility: visible;
transform: translateX(0)
}Typische Beispiele für "floating action buttons" im Webdesign sind unter Anderem folgende Aktionen:
- Bestellen eines Produkts bzw. ein Produkt in den Einkaufswagen legen
- Kontakt aufnehmen oder ein Angebot anfordern
- Erstellung eines Objekt, beispielsweise eines Kommentars oder einer Nachricht
Prominente Präsentation der Navigation
Eine weitere gute Einsatzmöglichkeit stellt die Präsentation der Hauptnavigation einer Webseite dar, da diese über einen "floating action button" prominent und gut erreichbar präsentiert wird. Wir setzen auf genau dieser Seite am oberen Bildschirmrand einen solchen Button ein (für größere Tablets und Desktop-Computer).
Swipen und Pullen: Gesten im Webdesign
Smartphones und Tablets haben eine neue Generation der Mensch-Maschine-Kommunikation eingeleitet: Die unmittelbare Steuerung einer Software mit den eigenen Fingern (und somit ohne Hilfswerkzeuge wie eine Maus) fühlt sich intuitiv an - und macht Spaß.
Einfache "Touch"-Aktionen wie das Tappen auf eine Schaltfläche lassen sich im Webdesign einfach abbilden, da die meisten Browser auf mobilen Geräten eine solche Interaktion mit einem traditionellen "Klick" gleichsetzen (wenn auch mit einer kurzen Verzögerung, die sich jedoch vielseitig beheben lässt).
Die Integration kontextbasierter Gesten gestaltet sich im Webdesign hingegen eher schwierig und lässt sich nur mit Hilfe von JavaScript lösen. Insbesondere die JavaScript-Bibliothek "Hammer.js" stellt dafür bereits ein umfangreiches Toolkit bereit und ermöglicht eine Reaktion auf typische Gesten wie den Zoom oder die Rotation mit zwei Fingern ("pinch" bzw. "rotate"). Sogar die Abfrage und somit Auswertung der Fingeranzahl einer Interaktion ist möglich.
// Standard use
var touchInterface = new Hammer(domElement, options);
touchInterface.on(swipe, function(e) {
// Use e.direction to react to the swipe and its direction..
});
// Wrapped within a jQuery plugin
$(domElement).hammer(options).bind("swipe", function(e) {
// Use e.direction to react to the swipe and its direction..
});Integration von Gesten im Webdesign: "Swipe to refresh"
Das erneute Laden einer Webseite erfolgt in der Regel über spezielle Buttons im Interface des Browsers. Gerade auf mobilen Geräten ist der Platz auf dem Bildschirm jedoch so gering, dass die meisten Browser solche Elemente ausblenden. Daher sind für ein einfaches Neuladen einer Seite häufig mehrere Eingaben nötig.
Nicht zuletzt im Material Design hat sich daher eine einfache Geste entwickelt, über die intuitiv ein erneutes Laden einer Webseite angefordert werden kann: Beim sogenannten "Swipe to refresh" zieht man einfach mit einem Finger von oben nach unten über den Bildschirm, woraufhin ein Signal (der sogenannte Indikator) erscheint und den Nutzer darauf hinweist, dass die Webseite oder Anwendung manuell neu geladen wird.
Material Design definiert zusätzlich mehrere Vorgaben, wie das Signal für das Neuladen einer Seite aussehen soll.
- Der Indikator ist immer am oberen Rand und horizontal zentriert relativ zum ladenden Inhalt fixiert.
- Der Indikator bleibt solange sichtbar, bis der Ladevorgang vollständig abgeschlossen ist (und somit alle neuen Inhalte sichtbar sind) - oder bis der Nutzer zu einer weiteren Seite navigiert.
- Der Indikator wird nur im Zusammenhang mit dem manuellen Nachladen angezeigt. Automatische Ladevorgänge sollten auf andere Weise repräsentiert werden.
Diese Vorgaben sind in erster Linie für die Gestaltung und Programmierung von Apps wichtig, um ein einheitliches Look & Feel sicherzustellen. Dennoch bieten die Vorgaben auch im Webdesign eine gute Grundlage für die Gestaltung eines solchen Indikators.
"Swipe to refresh" im Webdesign
Mittlerweile bieten einige Browser - beispielsweise Chrome unter Android - die "Swipe to refresh"-Geste bereits von Haus aus an. Über die oben vorgestellte "Hammer.js"-Bibliothek lässt sich ein ähnlicher Effekt jedoch auch einfach selbst implementieren.
Schönere Ladevorgänge: Einblenden von Bildern
Um Inhalte auch bei langsameren Internetverbindungen möglichst schnell ausliefern zu können, haben sich verschiedene Techniken im Webdesign etabliert. Bilder, die in der Regel einen Großteil der Datenmenge einer Webseite ausmachen, werden beispielsweise häufig erst dann geladen, wenn sie tatsächlich benötigt werden. Grundsätzlich gibt es dafür bereits zahlreiche Plugins (z.B. das bekannte jQuery Lazy Load oder das neuere Lazy load XT).
Vollständig geladene Bilder werden in der Regel über einen einfachen Fade-In angezeigt. Gerade für Grafiken und Bilder bieten die neuen CSS-Filter jedoch die Möglichkeit, auch deutlich ansprechendere Einblendungen von Bildern zu programmieren. Beispielsweise können die Sättigung ("saturation") und die Verschwommenheit ("blur") eines Bildes im Webdesign über CSS animiert werden und so für ein natürliches und ansprechendes Einblenden genutzt werden:
Leider erfüllt ihr Browser nicht die Anforderungen, um dieses Code-Beispiel korrekt darzustellen.
Vielleicht möchten Sie auf einen aktuellen Browser umsteigen, um in den vollen Genuss des modernen Internets zu kommen.
.example-image-loading--container img {
opacity: 0;
filter: grayscale(100%) blur(8px);
filter: url(#greyscale);
filter: gray;
transition: all 0.9s ease
}
.example-image-loading--container.is-active img {
opacity: 1;
filter: grayscale(0) blur(0);
}Die CSS-Filter sind in allen aktuellen Browsern verfügbar, sollten jedoch aufgrund der hohen Performanzansprüche nur bewusst und auf kleinere Bilder und Grafiken angewandt werden.
Vorschläge für eine benutzerfreundlichere Suche
Für Webseiten und Webanwendung mit umfangreichen Inhalten stellt die Suche ein zentrales Navigationselement dar. In der Regel ist eine solche Suche sehr einfach aufgebaut: Über ein Textfeld wird eine Suchanfrage eingegeben und abgesendet, woraufhin passende Ergebnisse angezeigt werden.
Vor dem Hintergrund von Apps definiert Material Design weitere Features, die eine Suche sinnvoll verbessern:
- Such-Historie:
Bereits gesuchte Begriffe werden vor und/oder während der Eingabe vorgeschlagen. - Auto-Vervollständigung:
Während der Eingabe werden bereits mögliche Treffer angezeigt. - Sprachsuche:
Neben der manuellen Eingabe des Suchbegriffs kann dieser verbal angegeben werden.
Die ersten beiden Features sind heutzutage auch im Webdesign häufig anzutreffen. Gerade für eine auf Smartphones und Tablets fokussierte Zielgruppe ist allerdings auch die Sprachsuche ein wichtiges Feature.
Für die Eingabe von Sprache gibt es zwar kein Input-Element, die "Speech Input API Specification" des W3C definiert aber Richtlinien, wie die Spracheingabe für ein normales Input-Element aktiviert werden kann:
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="25" x-webkit-speech/>
<input type="submit" value="Auf Google suchen" />
</form>Die Spracheingabe funktioniert aktuell ausschließlich in Google Chrome - andere Browser ignorieren das Attribut (Stand: März 2015).
Zusammenfassung: Neue Herausforderungen für Webdesigner
Die neue Generation von Konsumgeräten erweitert die Möglichkeiten und Werkzeuge einer Webseite enorm. Dennoch birgt diese schöne neue Welt auch zahlreiche Herausforderungen und Ansprüche an die konzeptionelle, gestalterische und technische Umsetzung eines Webdesigns, denen wir uns als Webdesigner stellen müssen:
Die Inhalte einer Webseite müssen nicht nur für verschiedenste Bildschirmgrößen optimiert und aufbereitet werden, sondern auch über verschiedene Interaktionsmöglichkeiten erreichbar sein. Außerdem sollen Webseiten den gewohnten Komfort von Apps in den Browser bringen und müssen somit auch komplexe Gesten und sogar Spracheingaben verstehen.
So geht es weiter: Material Design und die Usability einer Webseite
Im nächsten Artikel beschäftigen wir uns mit der Usability und Accessibility von Webseiten und überprüfen, wie die Richtlinien des Material Designs helfen können, ein ansprechendes und barrierefreies Webdesign zu erstellen.
Dieser Artikel ist Teil der Serie "Material Design im Webdesign".
Weitere Artikel zum Thema:
- Flat Design 2.0: Das ist Material Design
- Authentische Bewegungen: Masse & Gewicht im Webdesign
- Der "Material Design"-Style: Farben, Typographie und Bilder
- Magisches Papier: Layout und Tiefe im Webdesign
- Buttons, Tabs und Cards: Komponenten im “Material Webdesign”
- Call-to-Actions & Touch-Gesten: Nutzerführung im Webdesign
- Material Design für ein barrierefreies Webdesign
- Ressourcen und Tools: So gelingt der Einstieg in Material Design
- Update: Material Design goes Webdesign