... und ihre Alternativen

3 Webkomponenten, vor denen man sich 2016 in Acht nehmen sollte
Kommentare

Nicht immer ist alles Gold, was glänzt: Das gilt auch für Trends im Netz. Zahlreiche vermeintlich vielversprechende Entwicklungen überleben das schnelllebige Treiben im Web nicht oder können schlicht nicht das einhalten, was sie versprechen. Wir stellen euch drei populäre Webkomponenten vor, die man nicht ohne Weiteres in den eigenen Webauftritt integrieren sollte.

Egal ob in der Mode oder im Netz: Trends kommen und gehen. Kaum hat sich etwas durchgesetzt, gibt es schon Gerüchte über das neue große Ding. Manchmal sind die rasanten Veränderungen neuen technischen Fortschritten wie etwa dem responsiven Design geschuldet. Teilweise gehen sie auch auf Veränderungen in der grundlegenden gestalterischen Ausrichtung zurück. Die letzte große Verschiebung in diese Richtung war die Evolution des Flat Designs.

Aber nicht immer besitzen aktuelle Trends eine lange Halbwertzeit. Oftmals kommen die Neuerungen über den Status des schmückenden Beiwerks nicht hinaus und schränken im schlimmsten Fall die Funktionalität eines Produkts mehr ein als das sie ihr nützen. Ob man auf den aktuellen Zug aufspringt sollte, hängt darüber hinaus von der Art des Geschäftszweigs und den jeweiligen Bedürfnissen der Nutzer ab.

Die Entscheidung sollte daher niemals einzig aufgrund der Tatsache getroffen, dass etwas gerade „in“ ist. Die Meinungen im Netz wandeln sich schnell. Hält man sein Fähnchen nur in den Wind, vergeht der Erfolg meistens so schnell wie er gekommen ist.

Um diese Gefahr zu vermeiden, stellen wir entlang der Vorschläge von Daniel Schwarz drei Webkomponenten vor, denen man 2016 besser aus dem Weg gehen sollte. Aber nicht nur das: Es stehen bereits bessere Alternativen zur Verfügung!

1. Hamburger-Icon

Mit der massenhaften Verbreitung mobiler Endgeräte findet das Hamburger-Icon mehr und mehr Einsatz auf Desktop-Anwendungen. Anstatt das Interface mit einer Vielzahl unterschiedlicher Reiter zu überfrachten, werden die Menü- und Unterpunkte einfach hinter dem Icon verborgen. Der universale Bekanntheitsgrad des optischen Elements führt zu einer klareren und verständlicher visuellen Hierarchie, die sich wiederum positiv auf die User Experience auswirkt.

Aufgrund dieser Vorteile hat es das Hamburger-Icon bereits in unseren Ausblick auf die 6 wichtigsten Webentwicklungen in 2016 geschafft. Allerdings wurde schon dort kritisch angemerkt, dass die Navigation nicht für sämtliche Seitenauftritte geeignet ist. Insbesondere Homepages, die darauf setzen, dass die User ihren Content „entdecken“ sollen, sind mit dieser Variante der Menüführung eher schlecht beraten.

Gerade E-Commerce- und News-Seiten sollten von einer Implementierung des Hamburger-Icons absehen, da ihr Erfolg im Wesentlichen darauf basiert, dass die Nutzer auf neue Inhalte oder unbekannte Artikel stoßen. Die zusätzlichen Interaktionen, die durch das Klicken des Menü-Icons verursacht werden, können hierbei die Erfahrung der User mehr negativ als positiv beeinflussen.

Im Zweifelsfall sollten solche Internetauftritte deshalb trotz mobiler Revolution noch immer auf die altbewährten Top-Level-Menüs zurückgreifen. Sie machen es den Anwendern leichter, auf einen Blick sämtliche Inhalte eines Auftritts in den Blick zu bekommen. Möchte man aber auf den Einsatz eines Hamburger-Icons verzichten, bieten sich verschiedene Hybrid-Lösungen an.

Alternative: Die Kombination macht’s

hamburger-icon-hidden-1

Hamburger-Icon-Menu verdeckt, Quelle: time.com

So kombiniert etwa die Webpräsenz des amerikanischen Nachrichtenmagazins Time das Icon mit einem Ticker, in dem die aktuellen Artikel aufgelistet werden – die restlichen News-Themen bleiben hinter dem Hamburger-Symbol verborgen. Komplementiert wird die Seitenleiste durch eine integrierte Suchfunktion. Auf diese Weise bleibt es den Besuchern möglich, sowohl auf neue Inhalte hingewiesen zu werden als auch weiteren Content entdecken zu können.

hamburger-icon-hidden-2

Hamburger-Icon ausgeklappt, Quelle: Time.com

Allerdings ist die Erfolgsquote solcher Lösungsstrategien nicht leicht zu bestimmen und muss im Regelfall durch ausführliche Tests überprüft werden. So kann etwa die Entwicklung der Bounce-Rate darüber Auskunft geben, ob sich das Hamburger-Icon negativ auf die Konversion der Webseite auswirkt. Heatmaps sind ein weiteres praktisches Tool, um zu bestimmen, ob die Nutzer etwas mit der neuen Menüführung anfangen können.

Wer sich allerdings die Mühen sparen will oder einfach nicht genügend Zeit und Geld zur Verfügung hat, ist auch weiterhin gut damit beraten, auf eine herkömmliche Navigation bei Desktop-Anwendungen zu setzen.

2. Automatisierte Front-Page-Karussells

Im Gegensatz zum Hamburger-Icon soll der Einsatz von automatisierten Front-Page-Karussells die Aufmerksamkeit der Nutzer durch visuelle Stimuli gezielt auf bestimmte Inhalte lenken. Allerdings wird diese Methode heutzutage bereits so oft eingesetzt, dass der gewünschte Effekt bei den meisten Usern ausbleibt.

frontpage-Front-Page-karussells

Front-Page-Karussell, Quelle: hiphopdx.com

In der Regel liegt die Interaktionsrate von Karussellen bei unter einem Prozent. Dieser Wert gilt meistens auch nur für das erste Objekt innerhalb eines Sliders. Zurückzuführen ist dieser Umstand auf das Phänomen der Bannerblindheit: Wie Studien belegen, ignorieren viele Anwender Content im Netz, der durch visuelle Banner transportiert wird.

HTML5 Days

CSS Grid – das neue Layoutmodul im Einsatz

mit Dr. Florence Maurice (maurice-web.de)

Entgegen ihrer eigentlichen Intention sind sie also nicht in der Lage, die Aufmerksamkeit der Besucher auf bestimmte Inhalte zu lenken. Schlimmer noch: Dadurch, dass sie zumeist die obere Hälfte eines Internetauftritts belegen, rücken die restlichen Gehalte in den Hintergrund, was in Fragen der Content-Optimierung nicht gerne von Google gesehen wird.

Die mangelhafte Informationsvermittlung wird ergänzt durch eine schlechte Usability. Die Nutzer können die Ausgabe von automatisierten Slidern nur bedingt steuern und kontrollieren. Entweder erfolgt die Rotation zu langsam oder der Lesefluss wird durch die plötzliche Anzeige des nächsten Banners rapide unterbrochen. Ein korrektes Timing zu finden, das sämtliche Anwender berücksichtigt, ist so gut wie unmöglich.

Karussells besitzen aber nicht nur eine schlechte Usability, sondern wirken sich auch nachteilig auf die Performance einer Webseite aus. Die häufig eingesetzten hochauflösenden Bilder sind zumeist nur dürftig optimiert und werden in der Regel per JavaScript oder jQuery implementiert. Das treibt die Ladezeit einer so wichtigen Seite wie der Front-Page unnötig in die Höhe und hat Einbußen in der User Experience zur Folge.

Alternative: Komplexe Grid-Designs

Spätestens mit dem Aufkommen mobiler Endgeräte ist das Scrollen zu einem dominanten Faktor in der Webseiten-Navigation geworden. Hiervon profitieren insbesondere komplexe Grid-Layouts, die deshalb auch in unseren Top 5 der Webdesign-Trends für 2016 anzutreffen sind. Sie bieten einen Mix aus Bildern und Texten, durch den sich die Nutzer einen schnellen Überblick über das Angebot einer Webseite verschaffen können. Viele Besucher geht dieses Prinzip der Informationsaufnahme bereits intuitiv von der Hand, da sie tagtäglich auf ähnliche Weise mit unterschiedlichen Social-Media-Plattformen interagieren.

griddesign

Grid-Design, Quelle: baubauhaus.com

Aber nicht nur die mangelhafte Attraktivität automatisierter Front-Page-Karussells kann durch Grid-Layouts kompensiert werden. Der rasterförmige Aufbau erlaubt eine einfache und übersichtliche Darstellung der Inhalte, die wiederum zu einer Steigerung der Usability führt. Die gleichbleibende Gestaltung führt zudem zu einer flachen visuellen Hierarchie zwischen den einzelnen Bausteinen. Auf diese Weise wird verhindert, dass ein Element eine zu dominante Stellung im Gesamtaufbau gewinnt.

Letztlich wirkt sich der Einsatz von Boxen ebenfalls positiv auf die Webseiten-Performance aus. Durch die gleichbleibende Gliederung des Contents kann sichergestellt werden, dass immer nur das geladen wird, was gerade vonnöten ist.

3. Parallax-Scrolling (Scrolljacking)

Ebenso wie das Hamburger-Icon hat es auch das Parallax-Scrolling in unsere Top 6 der wichtigsten Webentwicklung in 2016 geschafft. Aber wie im Fall der alternativen Navigation kann ebenfalls die Parallax-Technik nicht für jeden Auftritt uneingeschränkt empfohlen werden.

Das Parallax-Scrolling hat seine Stärken im Storytelling. Kaum eine andere Methode im Webdesign kann eine Geschichte so effizient vorantreiben und gleichzeitig den Anwender aktiv mit einbeziehen. Allerdings ist noch nicht abschließend geklärt, wie stark die Schaffung einer erzählerischen Tiefe durch visuelle Effekte zulasten einer guten User Experience geht.

Allgemein wird angenommen, dass durch das Parallax-Scrolling die Usability gesteigert wird, was wiederum einen positiven Einfluss auf die UX hat. Aber das scheint nur die halbe Wahrheit zu sein. Wie eine Studie zeigt, gibt es signifikante Unterschiede darin, wie Nutzer auf das Parallax-Scrolling reagieren.

Im direkten Vergleich bevorzugt die Mehrzahl der Studienteilnehmer eine Webseite mit Parallax-Elementen, da sie wird von ihnen als angenehmere Erfahrung gewertet wird. Demgegenüber gab es auch Probanden, die im Zuge der Interaktion mit den visuellen Elementen überfordert waren. Sie klagten nicht nur über eine schlechte Usability, sondern sogar über körperliches Unwohlsein und Übelkeit.

parallax-scrolling

Scrolljacking, Quelle: world-of-swiss.com

Wie genau die Reaktion der User auf Parallax-Elemente ausfällt, kann also nicht klar vorausgesagt werden und ist womöglich von Zielgruppe zu Zielgruppe völlig unterschiedlich. Besonders deutlich wird diese Planungsunsicherheit mit Blick auf die Methode des „Scrolljackings“.

Sie stellt eine Erweiterung der Technik des Parallax-Scrolling dar und manipuliert das standardisierte Scrollverhalten der User. Anstatt sich wie gewohnt durch verschiedene Seiteninhalte zu blättern, bewirken die Interaktionen nun, dass sich der Bildschirm schneller, langsamer oder teilweise sogar zur Seite bewegt. World-of-Swiss demonstriert, wie diese Methode im Webdesign Verwendung findet.

Die Frage, wie die Manipulation des Scrollverhaltens letztlich bewertet werden kann, bleibt offen. Klar ist hingegen, dass das Parallax-Scrolling insbesondere zulasten einer guten Webseiten-Performance geht, da der Einsatz einer Vielzahl von Grafiken und JavaScript-Dateien zu einer deutlichen Anhebung der Ladezeit führt.

Im Ergebnis kann das nicht nur zu ungewollten Rucklern in der Darstellung führen, sondern bereitet vor allem mobilen Usern Kopfzerbrechen. Ihr begrenztes Datenvolumen hauen sie meistens nur ungern für visuellen Schnickschnack auf den Kopf.

Alternative: Scrollen ist heute völlig normal

Wenn man also eine Parallax-Seite erstellen möchte, sollte man sich gut überlegen, ob es die zu erzählende Geschichte wert ist, eine Vielzahl an Usern durch mögliche Usability- und Performance-Probleme zu verlieren. Ist man dazu nicht bereit, ist das aber nicht unbedingt ein Nachteil. Wie die Verbreitung von Grid-Layouts beweist, ist das Scrollen heutzutage zu einer komplett normalen Technik im Web geworden.

Die Zeiten, ihn denen allein die im oberen Teil der Webseite platzierten Inhalte von den Usern wahrgenommen wurden, sind vorbei. Das ist auch ein Grund, warum die Usability nicht durch den Einsatz von Front-Page-Karussells gesteigert werden kann. Mittlerweile ist es mitunter sinnvoller geworden, lange Artikel und Tutorials auf einer Seite darzustellen als sie in mehrere Abschnitte zu unterteilen. Solange der Content stimmt, stellt das Scrollen – egal ob animiert oder nicht – kein Problem im Hinblick auf die User Experience dar.

Aufmacherbild: Abstract background on risk business concept via Shutterstock / Urheberrecht: jesadaphorn

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -