Oben der Header mit dem Logo, links die Navigation, rechts die Inhalte: Das gute alte Schema F hat beim Webdesign ausgedient. An seine Stelle sind moderne Gestaltungsvarianten wie Onepage und Fullscreen getreten. Doch wie steht es um die Usability? Wie vertraut sind die Nutzer tendenziell mit den neuen Spielarten des Website-Aufbaus? Dieser Frage ist das Siegfried Vögele Institut in seiner Untersuchung „Webdesign-Trends 2016 im Test“ nachgegangen. Das Institut mit Sitz in Königstein im Taunus ist eine Tochter der Deutschen Post und bietet Seminare für Dialogmarketing sowie Eye-Tracking- und Usability-Analysen an.
Vier Designvarianten im Nutzertest
Das Fullscreen Design besticht durch große Bilder. Die schlicht gehaltenen Ghost-Buttons gehen aber leicht unter. (Dunkelgrün: sehr hohe Aufmerksamkeit, hellgrün: geringe Aufmerksamkeit, grau: fast keine/ gar keine Aufmerksamkeit) (Quelle: Siegfried Vögele Institut)
Für den Test hatte das Institut vier eigene Webseiten gestaltet: eine im Fullscreen Design, eine im Card Design, eine im Onepage Design und eine im Material Design. Die vier Varianten wurden jeweils 20 Probanden gezeigt, ihre Reaktion mit einer Augenkamera aufgezeichnet und analysiert. Zudem mussten die Tester zwei Wissensaufgaben lösen. Abschließend wurden alle 80 Probanden zu ihrem Eindruck befragt, etwa nach der Übersichtlichkeit, der Verständlichkeit, nach Spaßfaktor und Sympathiewert.
Im Mittelpunkt des Fullscreen Designs stehen bildschirmfüllende Fotos oder Videos. Über sie werden verschiedene Themen meist mithilfe von Slider-Technologien zentral auf der Startseite präsentiert. Dabei gleiten die Bilder zur Seite – entweder automatisch in einem bestimmten Zeitintervall oder manuell durch einen Klick auf die Pfeile am rechten und linken Bildrand. Hauptzweck dieser Designvariante ist die Emotionalisierung.
Im Test gelang dies auch. Neben Emotionen weckt dieses Design Vertrauen, die Nutzer empfinden es als übersichtlich. Allerdings entsteht durch die großen Bilder leicht eine als werblich empfundene Anmutung.
Wenig Aufmerksamkeit erzielen hingegen Ghost-Buttons. Das sind schlicht gestaltete Buttons, die meist nur aus einem dünnen Rahmen und dem darin stehenden Text bestehen. Auf knallige Farben oder Ähnliches wird verzichtet. Gegenüber den bewegten Bildern fallen die Ghost-Buttons in der Seitenmitte stark ab: Such-, Warenkorb- und Login-Funktionen oben rechts werden überhaupt nicht mehr wahrgenommen. Das zeigt: Auf bewegtem Hintergrund stößt die Wirksamkeit von Ghost-Buttons mit ihrem schlichten Design an ihre Grenzen.
Die horizontale Hauptnavigation ist leicht zu finden. Die Sliding-Pfeile an den Bildrändern hingegen entdeckte keiner der Probanden auf Anhieb. Offenbar ist den Nutzern die Platzierung der Hauptnavigation am Seitenkopf vertraut, Sliding-Elemente sind es hingegen nicht. Insgesamt konnten nur 50 Prozent der Tester die zwei gestellten Aufgaben zur Informationssuche auf der Seite lösen.
Card Design für viele aktuelle Themen
Card Design lenkt die Aufmerksamkeit auf den Header und die erste Kartenreihe. (Dunkelgrün: sehr hohe Aufmerksamkeit, hellgrün: geringe Aufmerksamkeit, grau: fast keine/ gar keine Aufmerksamkeit)
(Quelle: Siegfried Vögele Institut)
Das Card Design eignet sich besonders für aktuelle, häufig wechselnde Inhalte. Jedes Thema wird auf einer eigenen Karte dargestellt, die Themen stehen gleichberechtigt nebeneinander. Da keine der Karten besonders hervorgehoben ist, vermissen die Nutzer im ersten Augenblick eine schnelle Angebotsübersicht, sie empfinden die Seite als unstrukturiert und unübersichtlich. Dennoch konnten 60 Prozent der Tester die gestellte Aufgaben im zweiten Kontakt mit der Website lösen.
Im Zentrum der Aufmerksamkeit steht neben dem Header – bestehend aus Kopfbild mit Headline, Hauptnavigation und Logo – die oberste Card-Reihe. Die Probanden betrachten sie von links nach rechts, dann springt das Auge in die zweite Card-Reihe, die ebenfalls von links nach rechts angeschaut wird, allerdings mit abnehmendem Interesse. Den unteren Seitenteil nahmen die Tester gar nicht wahr.
Durch die Farbwahl – viel Weiß, kombiniert mit Blau- und Grüntönen – empfinden die Nutzer die Seite als seriös und kompetent, aber auch als konservativ, distanziert und langweilig. Vor allem das Fehlen animierter Inhalte sorgt für einen geringen Spaßfaktor. Offenbar erwarten Website-Besucher heute Animationen und Videos. Prinzipiell lassen sich Bewegtbildinhalte auf den Karten unterbringen, für die Testseite haben die Studienautoren aber darauf verzichtet.
Onepage Design gut geeignet für Storytelling
Onepage Design ist vielen Nutzern vertraut. Schlüsselbegriffe sind im Fließtext aber schwer zu finden. (Dunkelgrün: sehr hohe Aufmerksamkeit, hellgrün: geringe Aufmerksamkeit, grau: fast keine/ gar keine Aufmerksamkeit)
(Quelle: Siegfried Vögele Institut)
Das Onepage Design ist eine derzeit weitverbreitete Designvariante. Dabei wird die gesamte Information auf einer Webseite untereinander dargestellt, horizontale Trenner dienen zur Abgrenzung der einzelnen Themen. Das Design eignet sich besonders gut für Storytelling, bei dem sich ein roter Faden von oben nach unten durch die ganze Seite zieht.
Die Tester empfinden die Seite als sehr übersichtlich, freuen sich über einen schnellen Angebotsüberblick und die leichte Bedienbarkeit. Dass sie dafür über die ganze Seite scrollen müssen, scheint sie nicht zu stören. Dennoch nimmt das Interesse nach unten hin immer weiter ab, die beiden letzten Blöcke finden überhaupt keine Beachtung mehr. Auch sind nur 55 Prozent der Nutzer in der Lage, die beiden gestellten Aufgaben zu lösen. Offenbar sind die Schlüsselbegriffe im Fließtext relativ schwer zu finden.
Die Hauptaufmerksamkeit bleibt im oberen direkt sichtbaren Teil der Seite. Im Zentrum der Wahrnehmung steht die animierte Grafik, obwohl sie ohne Bilder auskommt: Bewegung, Farbe und die große Schrift ziehen die Aufmerksamkeit an. Insgesamt erzielt diese Designvariante die längste Verweildauer, die Probanden empfinden sie als innovativ, modern und seriös. Die bunten Farben gehen zulasten des Vertrauens, fördern aber die Sympathie und damit den Spaßfaktor.
Material Design reduziert Komplexität
Material Design ist übersichtlich. Dennoch wurden das Burger-Menü oben links und der Scroll-Pfeil übersehen. (Dunkelgrün: sehr hohe Aufmerksamkeit, hellgrün: geringe Aufmerksamkeit, grau: fast keine/ gar keine Aufmerksamkeit)
(Quelle: Siegfried Vögele Institut)
Das Material Design geht auf Google zurück, viele Google-Produkte sind so gestaltet. Es lehnt sich an das Flat-Design mit seinen klaren Farben, Formen und Schriften sowie einfachen Icons und Grafiken an. Beim Material Design entstehen zusätzlich Tiefeneffekte. Weitere Kennzeichen sind sogenannte „Inflection Points“, also Punkte, von denen eine Bewegung ausgeht, wenn der Nutzer darauf klickt. Sie sollen Aufmerksamkeit erzeugen.
Auch diese Variante empfinden die Tester als sehr übersichtlich, allerdings betrachten viele lediglich den oberen Seitenteil und erwarten darunter nichts mehr. Daran ändert auch der Pfeil am unteren Bildschirmrand nichts. Die sichtbaren Inhalte werden schnell erfasst und verstanden. Die Aufmerksamkeit liegt vor allem auf den drei blauen Kästen in der Mitte der Seite. Damit eignet sich dieses Design gut, um komplexe Inhalte strukturiert darzustellen.
Das in dieser Variante eingesetzte Burger-Menü oben links geht jedoch völlig unter, nur ein Tester entdeckte es. Das zeigt: Die drei kleinen Striche als Symbol für das Navigationsmenü sind noch nicht im Bewusstsein der Nutzer angekommen. Zumindest am stationären PC scheint niemand damit zu rechnen, das Icon gehört wohl in die Smartphone-Welt. Da die meisten Probanden die Navigation nicht fanden, konnten nur 42,5 Prozent von ihnen die gestellten Aufgaben lösen. Auch die Sympathiewerte und der Spaßfaktor sind nur mäßig, ebenso die Bewertungen der Seite als „innovativ, modern und aktuell“.
Fazit
Viele Nutzer haben zumindest am stationären PC Elemente wie Pfeile, die zum Sliden oder zum Scrollen animieren sollen, offenbar noch nicht verinnerlicht. Das Gleiche gilt für Burger-Menüs. Allerdings ist hierbei das Alter der Zielgruppe zu berücksichtigen: Je jünger die Nutzer, desto größer ist die Wahrscheinlichkeit, dass sie aufgrund ihrer intensiven Smartphone-Nutzung die vom Mobile-Design geprägten Elemente erkennen. Animierte Bilder oder Schriften sowie Videos gehören für die meisten Nutzer mittlerweile zu den unverzichtbaren Inhalten einer Website. Sie ziehen immer große Aufmerksamkeit auf sich. Der durchdachte Einsatz hochwertiger Bewegtbildinhalte lohnt sicher in jedem Fall. Die Kernbotschaft sollte dabei schnell und klar erfassbar sein.
Gerade bei einem Website-Relaunch ist die Frage nach der Usability und dem Design wichtig. Daneben gibt es beim Website-Relaunch 9 essentielle Fragen, die sich jeder im Vorfeld stellen sollte, zum Beispiel wie die typischen Customer Journeys der Website-Besucher aussehen.
