Was hält das Jahr 2016 in Sachen Webentwicklung bereit? Nachdem wir uns bereits mit den 5 Trends im Webdesign befasst haben, werfen wir jetzt einen Blick auf die sechs wichtigsten Webtechnologien im neuen Jahr. Abermals gilt: Um eine gute User Experience kommt man nicht herum.

Nach wie vor geht das Scrollen durch Seiteninhalte zulasten einer guten User Experience. Geübte User benutzen in der Regel das Mausrad oder bestimmte Tastenkürzel, um durch die Page zu navigieren. Die meisten greifen aber immer noch auf die Bildleiste zurück. Um Inhalte auf diese Weise anzusteuern, muss der Content umständlich hin und her geschoben und auf eine zentimetergenaue Feinjustierung geachtet werden. Menüs mit vielen Unterpunkten sowie eine Vielzahl unterschiedlichster Interaktionsmöglichkeiten tragen ihr Übriges dazu bei.

Mit der Einführung von Smartphones hat sich die Situation etwas entspannt. Das Scrollen per Hand- und Gestensteuerung ist deutlich intuitiver als die Navigation per Mausrad oder Bildleiste. Da heutzutage eine geräteübergreifende Kompatibilität von Inhalten entscheidend für eine gute Konversionsrate ist, setzen viele Webseiten auf einen Mobile-First-Ansatz. Auf diese Weise hält die Bedienarchitektur mobiler Endgeräte mehr und mehr Einzug in die Webentwicklung von Desktop-Anwendungen.

Durch die Reduzierung der benötigten Gesten soll den Usern nicht nur die Navigation, sondern ebenfalls das Finden der gesuchten Inhalte so einfach wie möglich gemacht werden. Oftmals wird hierfür auf die Technik des Parallax-Scrollings zurückgegriffen. Die Kombination von visuellen Elementen und Animationen zur Aufbereitung von Seiteninhalten ist allerdings nicht neu, sondern existiert so schon seit Ende 2008.

1. Parallax-Scrolling wird intuitiver

Aber erst durch die zunehmende Zahl von Breitbandanschlüssen, rechenstarken Endgeräten und hochauflösenden Displays ist das Parallax-Scrolling heute nicht mehr nur Eye-Candy, sondern eine ernst zu nehmende Alternative zur üblichen Browserbedienung geworden. Aber nicht nur die technischen Aspekte haben sich zugunsten der Methode entwickelt, sondern auch das veränderte Userverhalten trägt zu ihrem Erfolg bei.

Durch die massenhafte Verbreitung von mobilen Endgeräten haben sich die Anwender daran gewöhnt, Inhalte von überall und jederzeit abrufen zu können. Durch die lückenlose Verfügbarkeit des nahezu unerschöpflichen Angebots des Internets ist die Aufmerksamkeitsspanne der Nutzer mittlerweile unter das Niveau von Goldfischen gesunken und beträgt nun weniger als acht Sekunden.

Da die User Experience bei digitalen Produkten eine immer wichtigere Rolle spielt, wird das mühselige Scrollen durch unzusammenhängende Seiteninhalte mehr und mehr der Vergangenheit angehören. Aufgrund des technischen Wandels und veränderten Userverhaltens wird das Parallax-Scrolling in Zukunft das Bild vieler Webseiten bestimmen. Durch die Technik ist es möglich, Inhalte nicht nur schnell und einfach zugänglich zu machen, sondern sie gleichsam so anzuordnen, dass sie ein ansprechenden Gesamteindruck bei den Anwendern hinterlassen.

Ein gutes Beispiel, wie visuelle Elemente die Benutzerfreundlichkeit einer Homepage steigern können, ist der Internetauftritt von Madwell. Das Scrollen wird sowohl durch statische als auch sich bewegende Elemente unterstützt, während die Anzahl möglicher Interaktionen und Buttons auf ein Minimum reduziert ist. Das führt zu mehr Tiefe in der Gesamtdarstellung, was wiederum die Aufmerksamkeit der Nutzer auf sich zieht.

2. Performance-Boost durch Grids

Aber nicht nur die Aufmerksamkeit der Nutzer ist gesunken, sondern auch ihre Geduld. Dauert das Laden einer Webseite länger als zwei Sekunden, sind die meisten bereits auf der Suche nach einer schnelleren Alternative. Schuld daran ist die demografische Entwicklung. Die Generation Y ist die erste Generation, deren Teenagerzeit mit der weltweiten Digitalisierung zusammenfällt. Sie sind den Umgang mit einem breiten Angebot von digitalen Medien von klein auf gewöhnt und setzen auf eine effiziente Informationsverwaltung.

Wenn etwas nicht so funktioniert wie es soll, wird nicht lange rumexperimentiert, sondern die betroffene Seite verlassen und zur Konkurrenz gewechselt. Eine gute Performance ist heutzutage ein wichtiger Faktor für eine gute User Experience und wird in der Webentwicklung zu einer immer wichtigeren Größe. Um die Ladegeschwindigkeiten von Webseiten anzuheben, wird deshalb mehr und mehr auf ein zusammenhängendes visuelles Narrativ gesetzt.

Im Gegensatz zur Technik des Parallax-Scrollings, das auf einer in sich geschlossenen Erzählstruktur basiert, setzt das Grid Designs zur Optimierung der Ladezeiten auf eine kohärente Gesamtdarstellung. Die Anordnung und Gliederung der Inhalte in gleichbleibende Raster erlaubt es, reichhaltige Angebote organisiert und übersichtlich bei minimalem Ressourceneinsatz darzustellen.

Das führt nicht nur bei den Nutzern zu einem positiven ersten Eindruck, sondern besitzt ebenso aus technischer Sicht enorme Vorteile. Verschiedene Boxen können ohne großen Aufwand automatisch an verschiedene Displayauflösungen angepasst werden und sind daher prädestiniert für responsive und adaptive Designs. Durch die gleichbleibende Gliederung des Contents kann zudem sichergestellt werden, dass immer nur das geladen wird, was gerade wirklich vonnöten ist.

Der Internetauftritt von The Touch Agency ist ein gutes Beispiel dafür, wie man mittels eines Grid-Designs sowohl die Ladezeit optimiert als auch die Aufmerksamkeit der Nutzer auf sich zieht. Das minimalistische Design wirkt übersichtlich und sorgt mithilfe des dezenten Einsatzes von Farben und Animationen dafür, dass die Bedienung intuitiv von der Hand geht.

3. Hamburger-Icon als Menüersatz

Wie Parallax-Scrolling und Grid-Design zeigen, müssen sowohl die inhaltlichen Bausteine als auch die visuellen Elemente so einfach und so übersichtlich wie möglich gestaltet werden, damit die User Experience einer Webseite gesteigert werden kann. Der Mobile-First-Ansatz ist jedoch nicht nur in Bezug auf die optische Gestaltung von Vorteil, sondern wirkt sich ebenfalls positiv auf die Menüführung von Desktop-Seiten aus.

Schien es zunächst wenig aussichtsreich, umfangreiche Desktop-Menüs durch das Hamburger-Icon zu ersetzen, erfreut sich diese Methode immer größerer Beliebtheit. Im Gegensatz zu herkömmlichen Navigationen, die einen großen Teil des Interfaces ausmachen und in viele Unterkategorien gegliedert sind, besticht der mobile Konterpart durch eine simple Gestaltung.

Im Fahrwasser minimalistischer Designs groß geworden, wird durch die drei Linien die eigene Webseite auf ihre wesentlichen Elemente reduziert, was zu einer klareren visuellen Hierarchie führt. Der Internetauftritt von Longstoryshortdesign zeigt, wie die Aussage einer Homepage durch den Einsatz des Hamburger-Icons auf ihr Wesentliches beschränkt werden kann, ohne dass hierbei Einbußen in der Benutzerfreundlichkeit hingenommen werden müssen.

Die Entscheidung, das Icon nur farblich vom restlichen Design abzuheben, dürfte nicht zuletzt darauf zurückzuführen sein, dass die drei Linien mittlerweile altersübergreifend – mit Ausnahme der Zielgruppe 65+ – einen hohen Wiedererkennungswert besitzen.

Bei allen Vorteilen hat die versteckte Funktion aber auch einen Nachteil: Nutzer stoßen nicht mehr zufällig auf neuen oder unbekannten Content. Das kann mitunter dazu führen, dass bestimmte Inhalte einer Webseite von ihnen gar nicht wahrgenommen werden, da sie nicht mit ihnen gerechnet haben.

4. Mit Hero Headers auftrumpfen

Aufgrund des flächendeckenden Ausbaus von stationären und mobilen Breitbandanbindungen wandelt sich das Web mehr und mehr zum optischen Medium. Diese Entwicklung kommt insbesondere der gesunkenen Aufmerksamkeitsspanne der Nutzer sowie ihrer mangelnden Geduld zugute. Im Gegensatz zu textbasierten Webseiten können sich die User nicht nur besser an visuelle Informationen erinnern, sondern sie auch bis 60.000 Mal schneller verarbeiten.

Seitdem ebenfalls das Rendern von Texten und die Verfügbarkeit von Fonts kaum noch ein Problem im Netz darstellen, spielen simple Schriftarten in Kombination mit hochauflösenden Bildern eine immer wichtigere Rolle in der Webentwicklung. Viele Webseiten setzen verstärkt auf flächendeckende Hero Headers, um den Nutzern die wichtigsten Informationen gleich zu Beginn und ohne langes Suchen präsentieren zu können.

Da Hero Headers die Aussage einer Marke ausdrucksstark unterstreichen können, sind sie nicht nur für Portfolios und Landing Pages interessant. Um das Interesse der User zu wecken und sie zu Interaktionen zu bewegen, müssen die eingesetzten Fotos die Unternehmensziele angemessen reflektieren und gut mit den anderen Elementen auf der Webseite harmonieren.

Die zunehmende Anzahl von HD-Geräten macht es außerdem notwendig, dass die verwendeten Bilddateien gestochen scharf sind. Entgegen anderslautender Meinungen, kann durch die richtige Datenkomprimierung dafür gesorgt werden, dass die Ladezeit nicht unnötig in die Höhe getrieben wird.

Ein schönes Beispiel, wie mittels eines Hero-Headers die Message einer Marke schnell und einfach transportiert werden kann, ist der Internetauftritt von Evolutionfresh. Während die verwendeten Bilder sich nahtlos in das restliche Design einpassen, wird durch die Kombination von kurzen Textbausteinen und Call-to-Action-Buttons auf die Vorzüge des angebotenen Produkts hingewiesen.

5. Ghost-Buttons sind nicht nur was fürs Auge

Bei der Kombination von Hero Headern mit Call-to-Action-Buttons wird derzeit immer häufiger auf Ghost-Buttons zurückgegriffen. Im Gegensatz zu herkömmlichen CTAs, die in der visuellen Hierarchie zumeist ziemlich weit oben stehen, schmiegt sich der Ghost-Button unauffällig in Fotos und anderer Hintergründe ein. Trotz ihrer transparenten Gestaltung sind sie dennoch gut für die Nutzer zu erkennen. Sie drängen sich ihnen aber nicht auf und lassen anderen Kernaussagen den Vortritt.

Ghost-Buttons basieren in der Regel auf simplen Linien, die nahezu in jedes Design integriert werden können. Sie sind deshalb nicht bloß Elemente auf einer Seite, sondern vielmehr Komponenten, die den gestalterischen Entwurf funktional komplementieren. An dieser Stelle folgt die Form der Funktion, was wiederum ein Merkmal des UX-Designs im Gegensatz zum Visual Design ist.

Wie Ghost-Buttons durch ihr Understatement die User Experience minimalistischer Designs bestärken können, lässt sich am Beispiel von Turing.io gut nachvollziehen. Ihre Einbindung bietet den Nutzern zwar die Möglichkeit zur Interaktion, sie verdrängt aber nicht die eigentliche Aussage des Hero Headers, die weiterhin im Zentrum der Aufmerksamkeit der User steht.

6. Interaktive Infografiken

Wie das Parallax-Scrolling sind auch Infografiken schon seit geraumer Zeit im Netz anzutreffen. Im Laufe der letzten zwei Jahre setzten immer mehr Unternehmen auf diese Methode, um ihren Kunden sowie Interessenten Informationen zu vermitteln. Ganz im Sinne der sinkenden Aufmerksamkeit und Geduld der Nutzer vermitteln Infografiken eine Reihe an Informationen in optisch ansprechender und leicht verständlicher Art und Weise. Das ist ihr Vorteil gegenüber der üblichen Auflistung einer Reihe von Statistiken.

Der Trend, visuelle Bausteine durch Animationen und interaktive Elemente anzureichern, greift nun auch auf den Bereich der Infografiken über. Sie sind nicht länger nur statische Gebilde, sondern reagieren auf die Eingaben der Nutzer und bieten ihnen die Möglichkeit, sich interaktiv mit den angebotenen Daten auseinanderzusetzen. Wie durch kleine Animationen das Interesse der User geweckt werden kann, zeigt diese interaktive Infografik, die Informationen über Eastern Tennessee bereitstellt.

Aufmacherbild: Web Development concept via Shutterstock / Urheberrecht: Allies Interactive