Augen auf bei diesen Trends im Webdesign

Warum man nicht auf jeden neuen Zug aufspringen muss

Webdesign und Mode haben einige Gemeinsamkeiten. Eine davon ist das Phänomen der Trends. Trends kommen und gehen, weil sich Geschmäcker ändern oder weil die Industrie das so möchte. Erinnert sich noch jemand an Skeuomorphismus und die Benutzeroberfläche der ersten iPhones mit ihrer imitierten Holz- und Lederoptik? In Zeiten des Flat Design schon fast ein schrullig-niedlicher Anachronismus.

Andere Trends entwickeln sich aus einer schieren Notwendigkeit heraus, wie etwa das responsive Design. In den Zeiten vor dem mobilen Internet bestand schlichtweg keine Notwendigkeit dafür, Webinhalte für unterschiedliche Bildschirmgeometrien aufzubereiten. Und wo das doch einmal notwendig war, erfolgte meist der dezente Hinweis, dass die entsprechende Webseite für einen definierten Browser mit einer bestimmten Bildschirmauflösung programmiert sei. (Gut, das war im letzten Jahrhundert. Dennoch findet man noch den einen oder anderen dieser Hinweise auf verwaisten Seiten.)

Die Entscheidung, einem bestimmten Webdesigntrend zu folgen sollte immer vor dem Hintergrund der Notwendigkeit gefällt werden. Webdesigner sollten sich immer die Frage stellen: "Ist es wirklich sinnvoll und richtig, eine Webseite so und nicht anders zu erstellen, oder machen wir das nur, weil die coolen Seiten das auch so machen."

Vor diesem Hintergrund lohnt es sich, einmal über diese sechs aktuellen Trends im Webdesign nachzudenken.

1) Hamburger Menus wohin man blickt

Sie kennen das Icon mit den drei übereinander angeordneten horizontalen Balken. Seine Struktur erinnert entfernt an einen Burger - eine Scheibe Hackfleisch zwischen zwei Brötchenhälften. Deshalb firmiert dieses Symbol auch unter dem griffigen Namen Hamburger Menu Icon.

Man könnte glauben, dieses Symbol hätte seinen Ursprung als platzsparendes Symbol für responsive Seiten. Tatsächlich taucht es allerdings zum ersten Mal im Jahr 1981 in der grafischen Benutzeroberfläche des Xerox Star auf.
Die Vorteile des Hamburger Menu Icons liegen auf der Hand. Das Symbol ist schlicht und elegant und verleiht einer Seite eine schlanke und aufgeräumte Struktur. Statt eines detaillierten Menübaumes bekommen Benutzer ein kleines Icon präsentiert, unter dem sich das Menu erst bei Bedarf öffnet. Das Symbol selbst ist mittlerweile so weitverbreitet, dass es kaum noch einen Benutzer im Unklaren über seine Funktion lässt. Zumal das Hamburger Icon Menu mittlerweile seinen Siegeszug ausgehend von mobil optimierten Seiten hin zu Desktopanwendungen angetreten hat. Firefox und Thunderbird verstecken die globalen Menus genauso hinter den drei Balken wie Chrome (auch wenn Google drei senkrecht angeordnete Punkte verwendet) oder Windows 10.

Ob eine Webseite mit einem Hamburger Menu oder einem klassischen Menu aufwarten sollte, darüber entscheidet einzig und allein das Nutzerverhalten. Testen Sie beides und entscheiden Sie sich anschließend für die Lösung mit der höheren Conversion Rate. Und die muss nicht unbedingt die Form eines Hamburgers haben.

2) Karussell fahren macht keinen Spaß

Karussells oder Slider waren eine Zeit lang der letzte Schrei jeder Startseite. Jeder wollte plötzlich diese Diashow, die entweder automatisch oder durch Nutzerinteraktion in Bewegung gesetzt wird, auf seiner Homepage integriert sehen. Der Hype ist insofern verständlich, als dass Karussells nach dem angekündigten Ende der unseligen Flashanimationen, eins der ersten eleganten beweglichen Designelemente waren. Karussells bieten Informationshäppchen und Eindrücke in einer eleganten Form, ohne den Nutzer zu irgendeiner Art von Information zu nötigen.

Und genau hier liegt eines der Probleme von Slideshows. Studien aus dem Jahr 2013 ergaben, dass lediglich ein Prozent der Nutzer mit den angebotenen Karussells interagiert. Die übrigen 99 Prozent ignorieren die bewegten Bilder einfach. Dieses Phänomen ist nicht neu und wird in Fachkreisen als Banner-Blindness bezeichnet.

Wenn Banner-Blindness das einzige Hindernis für Karussells wären, ließe sich großzügig darüber hinwegsehen und das ganze Phänomen als Eyecandy verbuchen. Aber Karussells bereiten große Schwierigkeiten bei der Suchmaschinenoptimierung (SEO). Viele Slider präsentieren nur Bilder, sind also aus der Sicht von Suchmaschinencrawlern recht inhaltsarm. Allzu viel Metainformation lässt sich auch nicht in die bewegten Bilder quetschen, auch wenn die Möglichkeit besteht, den Bildern einen kurzen Textanreißer mitzugeben. Aber auch diese Textschnipsel werden von Google nicht besonders hoch gerankt, weil sie sich zu oft ändern.

Abgesehen davon benötigt ein Karussell, das wirklich professionell aussehen soll, eine Menge hoch aufgelöster Bilddaten, was die Ladezeit einer Webseite extrem negativ beeinflussen kann.

3) Irgendwann ist es auch genug mit dem Parallax-Effekt

Sie haben den Parallax-Effekt bestimmt schon einmal im Netz gesehen. Falls nicht, erinnern Sie sich an ihre letzte Zugfahrt. Wenn Sie bei einem fahrenden Zug aus dem Fenster schauen, ziehen weiter entfernte Objekte, wie Hügel, scheinbar langsamer an Ihnen vorbei, als näher an der Strecke liegende Bäume oder Häuser.

Mithilfe moderner HTML5-Techniken ist es möglich diesen Effekt auf einer Webseite zu imitieren. Das sieht großartig aus, wenn Sie als Webdesigner zum Beispiel eine Geschichte erzählen wollen, durch die sich der Nutzer durchscrollen kann.

Als simples Eyecandy wirkt der Parallax-Effekt sehr schnell überflüssig und bringt ähnliche SEO-Probleme mit sich, wie ein Karussell: Auf zu viel Platz kann zu wenig Metainformation für Suchmaschinencrawler untergebracht werden. Außerdem erfordert ein gut umgesetzter Parallax-Effekt ebenfalls eine große Menge an Grafikdaten, was die üblichen negativen Auswirkungen auf die Ladezeit mit sich bringt.

4) Nervige Load Screens

Load Screens sind eine tolle Erfindung. Sie geben Nutzern eine direkte Rückmeldung und nicht das Gefühl, umsonst auf etwas zu warten. Im Idealfall erwächst eine fertige Seite aus dem Load Screen, sodass der Benutzer die Wartezeit tatsächlich als Surferlebnis empfindet.

Eher abstoßend wirken optisch überbordende und vollgepackte Loadscreens, die einen Benutzer mit einer Fülle optischer Information erschlagen. Wenn das Ganze dann noch künstlich in die Länge gezogen wird, sei es durch Filmelemente oder erzwungene Interaktion, ist für die meisten Besucher bereits an dieser Stelle Schluss. Die entsprechende Seite wird als nervig eingestuft und so schnell nicht wieder aufgesucht.

Wenn Sie also einen Load Screen in ein Projekt integrieren müssen, weil tatsächlich längere Ladezeiten notwendig sind, achten Sie darauf, dass sich für den Benutzer eine konsistente Nutzererfahrung ergibt, in der der Load Screen nicht als störend wahrgenommen wird.

5) Überbordende JavaScript-Effekte

Mit JavaScript lassen sich eine Menge toller Dinge realisieren. Viele interaktive Elemente ließen sich zum ersten Mal erst so richtig in der Scriptsprache umsetzen. Allerdings hat HTML5 hier einen großen Funktionalitätssprung hingelegt, sodass sich viele Medienelemente mittlerweile besser mit HTML5 umsetzen lassen.

Außerdem sollten Sie bedenken, dass viele mobile Endgeräte JavaScript nicht oder nicht richtig unterstützen. Darüber hinaus ist auch auf vielen Desktoprechnern das entsprechende Plugin standardmäßig deaktiviert.
Überlegen Sie also vor dem Einsatz eines JavaScript-Elementes, ob sich die gewünschte Funktionalität nicht anders abbilden lässt.

6) Komplexe Typografie

Moderne Browser unterstützen endlich eine große Auswahl an Schrifttypen. Vorbei sind die Zeiten, als lediglich Times New Roman und Arial als einigermaßen darstellungssicher galten. Da liegt die Gefahr nahe, sich beim Erstellen einer Typografie kurz zu vergessen und zu viele verschiedene Schrifttypen einzubinden.

Bedenken Sie, dass auch im Netz die gleichen Regeln wie für ein analoges Druckerzeugnis gelten:

• Mehr als zwei verschiedene Schrifttypen wirken verwirrend.
• Die verwendete Schrifttype sollte zum repräsentierten Unternehmen passen
• Schrifttypen für Überschriften eignen sich nicht für Fließtext.

Fazit

Gute Designer sind immer Skeptiker, die nicht jedem Trend nachlaufen. Viele Trends vergehen von selbst, ohne großartige Spuren zu hinterlassen. Manche Trends bleiben und gerade im Webdesign ist es dann immer noch früh genug, sie umzusetzen. Dabei sollte die Leitfrage nie lauten "Wie machen das die anderen?", sondern immer "Was nützt meine Lösung dem Anwender?"