Fünf Fettnäpfchen auf Kosten der Web-Usability

Webseiten (und digitale Produkte) am Puls der Zeit designen. Modern sein. Im Jahr 2022 bedeutet das häufig, Designtrends zu folgen und sich den Aesthetic-Usability-Effekt zunutze zu machen.

Trotz aller kreativer Freiheit im Design gibt es Fettnäpfchen, die sich vermeiden lassen, um die Usability einer Webseite zu erhöhen. Fünf davon möchte ich Dir vorstellen und Möglichkeiten aufzeigen, wie Du sie geschmeidig umgehen kannst.

Fettnäpfchen #1: Übermaß an Pop-ups und Overlays

Cookie-Einwilligungen, Newsletter-Anmeldungen, Codes für Rabatt-Aktionen, Chatbots. Das ist zumeist das Erste, das einem nach dem Aufrufen einer Webseite begegnet. 

Bevor die Webseite dem Nutzer gegenüber kommunizieren kann welche Informationen und Möglichkeiten sie bietet, wird der nonverbale Dialog durch überdeckende Rechtecke mit viel Text und Bebilderung – auch bekannt als Modal-Windows – unterbrochen.

Aufpoppende Overlays werden von mir sofort weggeklickt. Sie hindern mich daran, meine Aufgabe oder Frage zu lösen, für die ich überhaupt die Webseite aufgesucht habe.

Learning

Es geht um das Look and Feel. Beim Designen von digitalen Produkten geht es nicht nur um das Aussehen – auch das richtige Timing spielt eine Rolle.

Um die Interaktion zwischen Nutzer und Webseite nicht schon in den ersten Sekunden im Keim zu ersticken, können Cookie-Einwilligungen dezent am Bildschirmrand angezeigt werden. Newsletter-Anmeldungen und Rabattaktionen sollen erst zu geeigneten Zeitpunkten geschaltet werden, wenn der Nutzer sein Ziel (fast) erreicht hat.

Fettnäpfchen #2: Unklare Bedeutung von Icons

Icons ohne Label lassen einen oft mit einem Gefühl von Unsicherheit zurück. Was bedeutet das Icon? Was wird passieren, wenn man es anklickt?

Universelle Icons, wie das X zum Schließen von Fenstern, das Play- und Pause-Symbol, oder das Mülleimer-Icon, haben sich für ihre spezifischen Anwendungsfälle etabliert.

Icons ohne eindeutigen Kontext, die über unterschiedliche Interfaces hinweg inkonsistent verwendet werden, führen zu multiplen Interpretationsmöglichkeiten und zu Verwirrung seitens des Nutzers.

Learning

Ein beigefügtes Label am Icon bietet dem Nutzer einen Hinweis, der die Erwartungskonformität erhöht und das Gefühl von Unsicherheit eliminieren kann. Auch bei universellen Icons können Beschriftungen Nutzergruppen, wie meine 66-jährige Omi, dabei unterstützen, die Webseite „einfacher“ zu bedienen.

Fettnäpfchen #3: Hamburger-Menü auf Desktop-Devices

Platz als der limitierende Faktor führt auf mobilen Endgeräten zu einer Priorisierung auf Inhalte anstelle von Navigationselementen. Daher versteckt sich das Navigationsmenü hinter dem Hamburger-Menü-Icon, sodass es dennoch zugänglich bleibt.

Die Aufmerksamkeit des Nutzers ist das höchste Gut. Auf Desktop-Geräten führt der beschriebene Umstand dazu, dass das Menü aus dem Blickfeld des Nutzers gerät. Ein schnelles „Scannen“ der verschiedenen Navigationsmöglichkeiten ist dem Nutzer nicht mehr möglich. Durch den extra-Klick auf das Icon verlangsamt sich die Navigation und der Nutzer braucht mehr Zeit, um sein Ziel zu erreichen.

Learning

Design für den Nutzer, den Kontext und das Medium. Zunächst würde ich kein Mobile-Design für Desktop-Anwendungen verwenden. Wenn doch, dann wohl bedacht und gut begründet.

Es ist prinzipiell kein kategorisches Verbot, aber dennoch ein Mahnmal, stellvertretend für UI-Elemente, die ursprünglich für das Mobile-Design gemacht sind und im Desktop-Design wiederverwendet werden.

Fettnäpfchen #4: Kleine Texte und niedrige Kontraste

Die Wahrnehmung von relevanten Interaktionselementen und Informationen werden dem Nutzer durch die Verwendung von kleinen Texte in Kombination mit zu geringen Kontrasten erschwert.

Besonders Nutzer mit Seheinschränkungen die keine technische Unterstützung zur Angleichung der Kontraste nutzen, können dadurch in der Informationswahrnehmung und der Bedienung der Webseite beeinträchtigt werden.

Durch die Alterung des Auges erreichen im Alter von 60 Jahren nur noch etwa 35 Prozent des Lichts die Retina im Vergleich zum 20. Lebensjahr. Dadurch wirkt die wahrgenommene Umgebung dunkler, ungesättigter und kontrastärmer. Früher oder später profitieren wir also alle von gut gewählten Kontrasten.

Aber auch kontextuelle Bedingungen des Nutzers sind nicht immer ideal: Der Bildschirm ist klein, die Helligkeit des Geräts zu niedrig, die Spiegelung des Sonnenlichts auf dem Gerät ungünstig.

Learning

Gut gewählte Schriftgrößen und Kontraste auf Webseiten sind wichtig; sowohl für Nutzer mit Seheinschränkung als auch für jeden anderen Nutzer.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

WebAIM.org

Guidelines schön und gut, doch auf Kontrast zu achten ist einfacher gesagt als getan.

Online Kontrast-Checker für Texte basierend auf den Web Content Accessibility Guidelines (WCAG) oder auch WAVE als ganzheitliches Accessibility-Tool können dabei unterstützen, Designempfehlungen einzuhalten und die Usability von Webseiten zu erhöhen.

Fettnäpfchen #5: Kognitiv belastende Eingabemöglichkeiten

Essen bestellen, online shoppen, Überweisungen tätigen; Zahlen- und Ziffernreihen ohne Punkt und Komma. Für den reibungslosen und frustfreien Ablauf sollten Online-Formulare den Nutzer bei der Dateneingabe unterstützen.

Psychologische Prinzipien wie das Chunking können dabei behilflich sein. Menschen können sich gut fünf ± zwei einzelne Elemente merken. Die Kapazität des Kurzzeitgedächtnisses kann „erweitert“ werden, indem die einzelnen Elemente in zusammenhängende Gruppen, sogenannte Chunks, aufgeteilt und optisch (mit Leerzeichen) voneinander getrennt dargestellt werden. 

Copy-Pastieren von Daten in Eingabefelder sollte dem Nutzer immer möglich sein. Das Ablehnen der Eingabe aufgrund von (vermeintlich) fehlerhafter Formatierung bereitet Ärgernisse und stellt hinsichtlich der Usability ein Problem dar.

Learning

Chunking und automatische Formatierung der Nutzereingabe in Online-Formularen sollten von der Webseite übernommen werden. Das Hinzufügen oder Trimmen von Leerzeichen, Klammern, Bindestrichen und weiteren Sonderzeichen ist eine Kleinigkeit, die dem Nutzer die Benutzung vereinfachen.

Fazit

Während des gedanklichen Wegs durch das Internet wird deutlich: Es sind oftmals die kleinen Dinge, die in Summe große Auswirkungen haben. Beim Kreieren von Webseiten und digitalen Produkten sollten wir uns dessen bewusst sein und unsere Aufmerksamkeit auch auf Details richten. 

If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.

Alan Cooper (Software Designer und Programmierer)

Stellen wir uns eine Webseite als einen Diener vor: Er setzt den Nutzer mit seinen Bedürfnissen und Zielen an erste Stelle und unterstützt ihn. Er ist höflich, aufmerksam und zuvorkommend – aber nicht aufdringlich. Oft ein schmaler Grat. Was dabei hilft: den Kontext und seinen Nutzer kennen und seine Webseite und Produkte testen!

Als Designer und Entwickler, die diese Diener entwickeln, sollte es unser Ziel sein, eine Symbiose aus Nutzer und Webseite/Produkt zu schaffen. Ganz nach dem Motto: “We serve the user.”