UX Fehler

5 UX Fehler, die man vermeiden sollte

Rathes Sachchithananthan — 28.Jan.2017
in Featured,Web

Auch wenn man nach aktuellen Trends und Muster im UX arbeitet, kann man viele Fehler machen, die zu einer schlechten UX führen. Welche Fehler das sind und wie du solche UX Fehler vermeidest zeige ich dir hier. 

Als Webdesigner versuche ich täglich beste User Experience zu erzeugen und die Benutzer dabei zu helfen ihre Ziele zu erreichen. Während ich bei meinen eigenen Projekten die Zügel immer selbst in der Hand habe, sehe ich bei der Zusammenarbeit mit anderen Freelancern und Agenturen, dass diese bei dem Versuch aktuellen Trends zu folgen oft vermeidbare Fehler begehen.

Es ist nicht falsch Trends zu folgen und sich an bestimmten Gestaltungspattern zu orientieren. Nein, ich finde diesen Ansatz sogar besser als Weblayouts zu entwickeln, die überhaupt keiner Struktur und Idee folgen. Aber meiner Meinung nach solltest du immer das Ziel vor Augen haben, während du etwas entwickelst oder gestaltest.

Ich selbst habe auch schon oft mich selbst dabei erwischt wie ich etwas gestalterisch Geiles gebaut habe, dafür aber Usability und UX geopfert habe. Wie konnte mir — der auch auf theoretischer Ebene den Fokus auf Usability legt — das passieren? Ganz einfach, ich hatte mir erhofft, dass durch einen WOW-Effekt der User zu einer Handlung bewegt wird. Aber irgendwann durfte ich dann bei den Analysen einsehen, dass ich den Benutzer einfach nur verunsichert habe und der Einzige, der beim Layout den WOW-Effekt empfindet, ich selbst bin. Das ist halt die harte Tour wie man aus Fehlern lernt. Ich möchte dir den Weg ein wenig erleichtern, in dem ich die 5 Fehler aufzeige, die regelmäßig von Designern gemacht werden und so die UX komplett zerstört werden.

UX Fehler #1: Fixierte Header

Immer wieder sieht man große, fixierte Header. Komplette Navigationselemente, die einen beachtlichen Teil des Viewports einnehmen. Doch sind diese so sinnvoll wie man es glaubt. Immerhin machen das viele und die Höhe der Header scheinen kein Limit zu haben.

Fixierte Header an sich haben ihre Daseinsberechtigung, doch man sollte diese mit Bedacht gestalten. Es gibt sehr viele Aspekte, die dabei beachtet werden müssen.

Höhe des Headers

Wenn man schon der Meinung ist, dass man einen fixierten Header braucht, dann sollte man zumindest sich bewusst entscheiden wie die Maße dieses Headers sind. Ein Header, der immer fixiert oben zu sehen ist, blockiert einen Teil deines Viewports. Was passiert dadurch? Das Bedürfnis des User schnell und komfortabel durch deine Webseite zu surfen wird stark beeinträchtigt. Auch wenn du eigentlich mit der fixierten Navigation gerade dieses Bedürfnis zu erfüllen versuchst.

Wähle also den Inhalt des Headers mit bedacht und sieh zu, dass dieser nicht zu viel vom Viewport einnimmt.

Fixierte Header und Mobile

Ein sehr häufiger Fehler ist, dass man bei der Ausarbeitung eines Headers die User vernachlässigt, die mit einem Mobilgerät surfen.

Ich habe ja generell ein Problem mit Designern, die es nicht schaffen bei Gestalten eines User Interfaces oder einer Webseite auch an die Mobile-User zu denken. Da wird einfach ein 1920 x 1080 Canvas im Photoshop geöffnet und einfach drauflosgestaltet.

Abgesehen davon scheitern aber auch viele gute Designer daran, dass sie das Thema „Fixed Header“ bei mobilen Seiten einfach nicht gut angehen. Gerade die Mobilegeräte haben ein noch kleineren Viewport. Dort einfach mal 80px oder sogar 100px an Höhe nur für einen Header zu opfern, ist nicht gerade die geilste Idee. Meistens ist auf dem Header dann nur eine kleine Version des Logos und ein Hamburger-Icon zu sehen. Und dafür dann den Viewport eingrenzen?

Eine gute Alternative ist es einen solchen Header ganz normal im Viewport verschwinden zu lassen und erst dann fixiert erscheinen zu lassen, wenn der User in Richtung dieses Elements scrollt. Dann signalisiert er nämlich, dass er genau zu diesem Header will.

Generell fixierte Elemente und Mobile

Wenn ich schon dabei bin: Nicht nur ein fixierter Header ist meist nervig. Auch ein von links oder rechts reinragender Button oder ein unten fixiertes Scroll-To-Top Element fördern meist nicht die Benutzerfreundlichkeit. Das ist so als würdest du während einer Zugfahrt die schöne Aussicht genießen wollen, aber am Fenster klebt ein fetter Fleck an Vogelscheiße. Du bekommst den einfach nicht weg und hast den einfach immer Bild.

UX Fehler #2: Mangelnder Kontrast

Ich weiß nicht, wann, warum und wie dieser Trend aufgekommen ist, aber in letzter Zeit findet man immer häufiger Webseiten mit sehr niedrigem Kontrast. Schriftfarbe dunkelgrau auf Hintergrundfarbe hellgrau ist mittlerweile keine Seltenheit mehr. Und jedes Mal frage ich mich: Wer soll das bitte lesen können?

UX Fehler: Mangelnder Kontrast
Eine der harmloseren Variante

Geringe Kontraste sind nicht immer schlecht. Man kann diese sehr gut nutzen, um die Aufmerksamkeit des Benutzers auf bestimmte Dinge zu lenken. Doch es ist einfach sehr wichtig, dass man dabei nicht Usability nicht vergisst. Inhalte, die der Benutzer kaum bis gar nicht lesen kann, braucht man auf der Webseite gar nicht platzieren.

Denke bei der Farbwahl immer daran, ob der Benutzer deiner Seite später deinen Text lesen kann. Dabei solltest du auch bedenken, dass es anders als du nicht unbedingt vor einem 27“ Retina Display sitzt, sondern auf einem kleinere Gerät mit schwächerer Auflösung.

UX Fehler #3: Schriftstärken von Light bis Thin

Dieser Fehler geht in der Regel mit dem vorigen Hand in Hand. Designer, die gerne auf geringe Kontraste setzen, tendieren auch sehr schnell dazu sehr dünne Schriften zu benutzen. Ich glaube hier war es Apple, die diesen Trend ins Leben gerufen haben, aber auch die haben mittlerweile optimiert.

Dünne Schriften sehen elegant und trendy aus. Aber trotzdem können genau diese Schriften auch der Grund für eine schlechte Usability sein. Das oberste Ziel von Text ist, dass er leserlich ist. Wie bereits oben erwähnt, kann Text, der nicht lesbar ist, auch komplett verschwinden.

Dünne Schriften funktionieren sehr gut bei Überschriften, den dort hat man die Möglichkeit die Lesbarkeit über die Größe der Schrift zu steuern, bei ganz normalem Fließtext ist das aber schwieriger. Eine dünne Schrift wie Myriad Pro Thin in 16px Schriftgröße zerstört die Augen deiner User.

Außerdem solltest du darauf achten, dass nicht alles in dünner Schrift gestaltet ist. Ein guter Design-Kollege hat mal die dünne Schrift mit einem scharfen Gewürz verglichen. Setzt du es gut dosiert ein, dann verbesserst du des Look & Feel deiner Webseite, übertreibst du es, dann verbrennst du dich daran.

UX Fehler #4: Überflüssige Slider

Einer der Themen, die persönlich überhaupt nicht haben kann und fast immer zu Diskussionen mit Design-Agenturen führen, mit denen ich arbeite, sind Slider.

Slider gibt es schon ewig im Web und können auch sehr effektiv sein. Aber wenn du diese nicht sauber entwickelst oder vorher nicht sauber planst und gestaltest, dann resultiert das in der Regel in ein Disaster.

Disaster für den User, weil er nicht versteht wie er den Slider benutzen soll, und ein Disaster für dich, weil du dem User wegen dem Slider nicht den Content zeigen kannst, der dir wichtig ist.

Wenn du einen Slider in deine Webseite einbaust, dann habe auch einen Mehrwert für den User, den du durch diesen Slider erreichst. Die Aufgabe eines Sliders ist wie fast jedes Element auf einer Webseite den User bei dem Erreichen seiner Ziele behilflich zu sein.

Oft höre ich von Designern aber immer das Argument „Es soll die Seite beleben“ und als Resultat wird dann ein Slider eingebaut, der alle 5 Sekunden ein neues Bild anzeigt. Ein solches Element ist vollkommen überflüssig. Ganz unerklärlichen Designern baue ich dann immer ein Skript, das zeigt, was die User mit dem Slider anfangen können. Das Resultat ist immer dasselbe: Der Nutzer scrollt sofort dran vorbei oder schließt die Seite noch bevor sie die Stelle erreicht haben. Solche sinnlosen Bilder-Slider sind in der Regel genauso nervig wie Werbe-Gifs.

Was auch gerne gemacht wird, sind Hintergrund-Slideshows am Anfang der Seite: „Herzlich Willkommen auf unserer Seite“ als Titel und dahinter laufen 5-6 Bilder als Karussell. Ein solcher Block hat einfach keinen Sinn. Abgesehen davon, dass ein „Herzlich Willkommen auf unserer Seite“ auch recht überflüssig ist, reicht an dieser Stelle doch einfach ein ansprechendes Bild. Tut auch dem Pagespeed der Seite gut.

Anzahl der Slide-Elemente

Wenn du einen sinnvollen Verwendungszweck für deinen Slider hast, bist du auf jeden Fall schon Mal besser als die meisten anderen. Nun solltest du sicherstellen, dass der User mit deinem Slider auch was anfangen kann.

Ein Punkt ist die Anzahl der Slide-Elemente. Hier gibt es keine feste Regel, du solltest das für deine Seite Austesten und eigene Erfahrung sammeln. Wenn dir diese Möglichkeit aus welchem Grund auch immer nicht zur Verfügung steht, dann wähle eine Zahl zwischen 3-5 Elementen.

Mit mehr als 5 Elementen wird der User mit hoher Wahrscheinlichkeit nicht interagieren, denn ein User ist in der Regel kein Geduldiger. Ausnahme sind Fälle, wo du es schaffst den User zu binden. Eine kleine Firmengeschichte als Slideshow kann auch 7-8 Elemente haben. Wenn der passende, packende Content dafür da ist.

Bei weniger als 3 Elementen solltest du dir Gedanken, ob ein Slider das passende an der Stelle ist. Ein Slider, der alle 5 Sekunden zwischen Bildern wechselt machen einen nur wahnsinnig. Außerdem kommt der User sich verarscht vor, wenn er feststellt, dass der Slider nur zwei Seiten zu bieten hat.

Gib dem User die Kontrolle über deinen Slider

Stelle sicher, dass der Inhalt, den du dem User zeigen willst, auch erreichbar ist. Was bringt es fünf super aufbereitete Slide-Elemente zu haben, wenn der User diese nicht erreichen kann, weil die Pfeile zum Sliden einfach zu klein sind (gerade in der mobilen Variante).

Außerdem solltest du dem User verschiedene Möglichkeiten geben wie er durch die Slides kommt. Neben den Pfeilen solltest du zum Beispiel dem User die Möglichkeit geben via Swipe oder durch Tap zum nächsten/vorigen Slide zu kommen. In den Desktop-Varianten ist es sinnvoll die Punkte, die als Indikator dafür stehen wie weit man im Slider ist, klickbar zu machen. So kann der User auch Slides überspringen. Je mehr Möglichkeiten du ihm gibst, desto mehr fühlt er sich als Herr der Seite und hat dadurch ein definitiv besseres Nutzer-Erlebnis.

UX Fehler #5: Manipuliertes Scrollen

Den schlimmsten UX Fehler habe ich mir fürs Ende aufbewahrt. Das Scrollen des Users manipulieren. Am besten so, dass das Bild nach links scrollt, wenn der User eigentlich nach oben will.

Der User hat keine Kontrolle mehr über die Seite und hat auch keinen Überblick mehr, was wann passieren wird. Das verwirrt den User und im schlimmsten Fall frustriert das ihn auch und er verlässt deine Seite.

Man kann auch hiermit viele schöne Sachen anstellen, aber noch viel schneller für Verwirrung sorgen. Das sogenannte Scroll-Hijacking solltest du nur benutzen, wenn du dir wirklich sicher bist, was du da machst und was du damit erreichen willst.

Wenn du die Technik zum Einsatz bringst, stell sicher, dass du den Spaß testest. Nicht nur du selbst, sondern bei echten Benutzern. Teste, ob die Usability dadurch beeinträchtigt wird oder nicht.

Dadurch dass der Benutzer durch Scroll-Hijacking verwirrt sein wird, ist es wichtig, dass du Maßnahmen einbaust, welche diese Verwirrung sehr schnell auflösen. Sorge dafür, dass der Benutzer sehr schnell versteht wie deine selbst implementierte Scroll-Technik abläuft.

Zusammenfassung

Das sind nur ein paar Fehler, die aber immer wieder auftreten. Es werden in Zukunft viele weitere Trends auftauchen, die wieder neue Fallen mit sich bringen. Daher ist es wichtig, dass du als Designer immer der User im Kopf hast. Ein gutes UX heißt, dass du den User dabei hilfst sein Bedürfnis zu erfüllen, weswegen er auf deiner Seite gelandet ist.

Rathes Sachchithananthan

Rathes Sachchithananthan

Hi, ich bin Rathes. Gründer dieses Blogs. Darüber hinaus habe ich Aheenam gegründet, eine Agentur für digitale Lösungen. Dort konzipiere und entwickle ich die digitale Weiterentwicklung meiner Kunden. Ich brenne für das Thema "Tamilen und Tamil Eelam" und bin ein Microsoft-Fanboy. Du findest mich auch auf diversen sozialen Netzwerken

Web und die Welt — Gott kann auch mal drin vorkommen

Ein Blog über das Web und die Welt. Wir schreiben über viele interessante Themen wie z.B. das Web, Tamil Eelam oder über Fotografie. Vielleicht ist auch was für dich dabei?