Nach oben

Webtrends: Grosses auf kleinstem Raum

Die Bildschirme werden kleiner, der Content wichtiger und umfassender. Dies führt mehr denn je zu Gedränge auf knappem Platz. Dieses Dilemma ist Kern der aktuellen Webtrends.

Artikel als PDF: Netzwoche 16/2013 (PDF, 1 Seite, 200 KB)

Fachartikel Netzwoche
Von Thomas Ehrat und Andrea Rosenbusch

Webdesign muss viele Informationen auf beschränktem Raum darstellen. Dies gilt speziell für die kleinen Bildschirme mobiler Geräte. Helfen können hier neue Designprinzipien

Details auf Abruf

Übersicht ist auf mobilen Sites wichtiger denn je. Das Ziel sind klare, ballastfreie Seiten, obwohl es an Platz für grafische Orientierungselemente fehlt. Das Prinzip des «progressive disclosure», des schrittweisen Aufdeckens von Informationen, ist Kern des neuen Webdesigns. So sieht ein Leser etwa den Titel eines Artikels. Die Details werden vor Ort eingeblendet, aber nur dann, wenn sie sie wirklich interessant sind. Anderer Inhalt wird verschoben oder überdeckt. Die neue Website des Kantons Basel-Stadt beispielsweise bietet auf den Seiten jeweils verwandte Inhalte aus Datenbanken, Karten und weiteren Quellen an. Im Fly-up am Seitenfuss kann der User jederzeit den Stadtplan oder Statistiken aufrufen, ohne eine neue Seite zu laden.

To-Do-App «Clear»: Alle Funktionen werden über Gesten gesteuert. Quelle: Apple App Store.

Gesten sparen Interaktionselemente

Interaktionselemente wie Buttons rauben auf kleinen Bildschirmen Platz. Besonders in Apps werden sie vermehrt durch Gesten ersetzt. Zu bekannten Gesten wie «Pinching/Spreading» für das Verkleinern oder Vergrössern von Bildern oder «Panning» für das Verschieben von Kartenausschnitten gesellen sich deshalb laufend neue. Im Gegensatz zu Interaktionselementen sind die von einer Anwendung unterstützten Gesten aber nicht ersichtlich. Bei Apps mit breitem Nutzerkreis ist es deshalb sinnvoll, sich auf intuitive und geläufige Bedienmuster zu beschränken und nicht zu viel Neues auf einmal einzuführen.

Interaktive Visualisierung

Animation wird gerne als Benutzerfeedback eingesetzt. Bewegung kann aber auch helfen, inhaltliche Zusammenhänge zu visualisieren – etwa um in Bildern die Zweidimensionalität der Bildschirme und Seiten zu durchbrechen. So kommen Raum und Zeit als zusätzliche Dimensionen für Content hinzu und helfen mit, komplexe Inhalte besser zu veranschaulichen.

Besonders auf Landkarten vermag das «adaptive Zooming» die Informationsflut einzudämmen. So wird erst nur die Position des Hotels in der Stadt angezeigt. Mit zunehmender Vergrösserung erscheinen dann Sehenswürdigkeiten, Restaurants und Veranstaltungsorte der Umgebung. Im Tourismus, aber auch im E-Commerce schlummert noch viel Potenzial, um Kartenmaterial mittels solcher Verfahren bedarfsgerecht zu gestalten.

Atomic Design

Content und Funktionen müssen für verschiedene Verwendungsarten in unterschiedlicher Grösse und Umfang für vielerlei Geräte zur Verfügung stehen: Der Trend dazu sind Designeinheiten, die wie Atome funktionieren: Die atomaren Bausteine, zum Beispiel das Eingabefeld, werden zu Molekülen kombiniert. Ein Molekül, beispielsweise die Rechnungsadresse, wird mit anderen zu einem Element, beispielsweise einem Bestellformular, ergänzt. Mit weiteren Bild- und Textelementen zusammen ergibt dies die komplette Seite. So lassen sich Seiten schnell und in unterschiedlichsten Kombinationen zusammenstellen.

Voraussetzung für funktionierendes «Atomic Design» ist eine gut durchdachte Informationsarchitektur. Denn nur wenn der Inhalt zielgerichtet gegliedert wird, lässt er sich später in den Atomen nutzbringend darstellen. Dieser Übergang von Inhaltsseiten zu Elementen ist aber auch in anderer Hinsicht von grosser Bedeutung: Zunehmend werden nicht nur Seiten im Web verlinkt, sondern auch einzelne Elemente. Einerseits werden Plugins in einem anderen Kontext weiterverwendet, zum Beispiel ein Newsfeed aus Twitter in eine Website eingebunden. Andererseits können Suchmaschinen Informationen aus verschiedenen Quellen kombinieren und als einen einzigen Treffer zusammen anzeigen.

Kommentare

Kommentar schreiben

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.