Facit Digital: Top 10 UX Fails

Erfahrungen aus 10 Jahren User Experience Research

In den letzten 10 Jahren hat sich vor allem im digitalen Bereich einiges getan. Neue Trends sind aufgekommen, einige davon haben sich zu Standards entwickelt, andere dagegen sind schnell wieder von der Bildfläche verschwunden. Wir von Facit Digital haben in dieser Zeit viele spannende Projekte begleitet und gesehen, wie sich die Branche in Bezug auf Nutzerfreundlichkeit entwickelt hat. Unsere langjährige Erfahrung im Bereich UX Research möchten wir gerne zum diesjährigen 10. Jubiläum von Facit Digital mit Ihnen teilen. Lesen Sie hier unsere Top 10 UX Fails aus 10 Jahren Nutzerforschung.

UX Fail #1: Schau das an! Hör das an!

Das automatische Starten von Video und Audio gehört seit Jahren zu den größten Ärgernissen auf Websites – trotzdem mutet man es Nutzern immer noch zu.

Wo genau liegt das Problem?

  • Nutzer werden durch das automatische Abspielen bevormundet und an der Erreichung ihrer Ziele gehindert – wenn sie sich z.B. in Ruhe einen Text durchlesen wollen oder sich erst einmal einen Überblick verschaffen möchten, um den interessantesten Inhalt zur näheren Betrachtung zu finden (1st click, 1st read).
  • Videos im Autoplay lenken dabei unnötig ab; insbesondere dann, wenn sie den Rest der Website überlagern und damit Inhalte (zumindest vorübergehend) unzugänglich machen.
  • Noch schlimmer ist es, wenn nicht nur das Video automatisch abläuft, sondern Ton und/oder Musik gleichzeitig starten. Oder wenn man als Nutzer nicht erkennen kann wie lange das Video dauern wird; dh. wie lang man von der intendierten Nutzung der Website abgehalten wird.
  • Am allerschlimmsten ist es jedoch, wenn sich weder Video noch Ton stoppen lassen. So vergraulen Sie Ihre Nutzer.
  • Nicht zu vergessen: Nutzer wollen sich auch situationsbedingt nicht immer Videos anschauen, um etwa unterwegs nicht unnötig Datenvolumen zu verbrauchen.
  • Die Gewinner der automatisch ablaufenden Videos sind übrigens die Entwickler von Tools, die das automatische Ablaufen blockieren: Googlen Sie mal nach „autoplay video“: Quasi jedes zweite Ergebnis betrifft Möglichkeiten, um die störenden Videos abzuschalten – Nutzer wollen sich nicht länger bevormunden lassen. Apropos Google: Chrome wird plärrende Videos künftig zum Schweigen bringen: Ab Januar 2018 blockiert der Browser die Autoplay-Funktion.

Empfehlungen aus der Usability Forschung:

  • Lassen Sie Ihren Nutzern die Kontrolle und Entscheidung, welche Inhalte sie in welcher Reihenfolge nutzen wollen.
  • Lassen Sie Videos und Audios nicht automatisch ablaufen.
  • Geben Sie Nutzern jederzeit die Möglichkeit ein gestartetes Video zu stoppen.
  • Zeigen Sie die Dauer von Videos an.

So lieber nicht:

Fail MSN

UX Fail #2: Fast oder Slow Food Overview?

Hamburger Menüs haben sich auf mobilen Devices als hilfreiche Navigationselemente etabliert, auf Desktop verlangsamen sie Orientierung und Informationsaufnahme erheblich.

Wo genau liegt das Problem?

  • Auf großen Displays konkurrieren alle sichtbaren Inhalte (Texte, Bilder, etc.) um die Aufmerksamkeit der Nutzer. Ein Hamburger Menü kann in diesem Kontext aufgrund der geringen Größe leicht untergehen, die Auffindbarkeit des Menüs ist unnötig beeinträchtigt.
  • Zudem ist der Hauptvorteil der Desktop-Nutzung die im Vergleich zur mobilen Ansicht bessere Übersichtlichkeit: Nach dem Landen auf einer Website zeigen die sichtbaren Hauptkategorien eines Navigationsmenüs ohne einen weiteren Klick Hinweise auf die angebotenen Inhalte. Durch das Hamburger Menü ist dies nicht mehr möglich, denn erst nach einem Klick wird ein Überblick über die angebotenen Themen möglich. Durch den limitierten Platz auf mobilen Devices beschränkt sich die Übersicht normalerweise auch nur auf genau eine Navigationsebene.
  • Ebenso ist die Erreichbarkeit der Inhalte auf dem Desktop durch das Hamburger Menü unnötig eingeschränkt, da Nutzer sich durch die verschiedenen Ebenen klicken müssen, um ihr Ziel zu erreichen.

Empfehlungen aus der Usability Forschung:

  • Nutzen Sie die Stärken und Möglichkeiten von großen Displays. Sie haben Platz – also zeigen Sie, was Sie haben!
  • Erlauben Sie Ihren Nutzern, sich durch ein „offenes Hauptmenü“ einen direkten Überblick über die Inhalte zu verschaffen: Ohne Klick oder andere Aktion.
  • Zeigen Sie weitere Inhalte und Sub-Ebenen nach Klick oder Mouse-Over.

So lieber nicht:

Fail Yamaha

UX Fail #3: Wo bin ich hier?

Longpager sind „in“. Gerade für Websites mit viel Content stellen sie aber manchmal (zu!) hohe Anforderungen an eine gute Nutzerführung.

Wo genau liegt das Problem?

  • Hinter dem Longpager steht die Idee, den Nutzer wie „auf Schienen“ durch die Seite zu leiten, indem er scrollt.
  • Aus Unternehmenssicht ist dies interessant, weil sichergestellt werden kann, dass die Nutzer alle wichtigen Informationen auf einer Seite sehen.
  • Allerdings sind nicht alle Nutzer gleich. Sie nutzen Informationen gerne in einer Reihenfolge, die für sie Sinn macht.
  • Werden die Infos nach einer abweichenden Logik präsentiert, sind die Nutzer irritiert und können sich leicht auf einer Seite verlieren. Auf der Suche nach der richtigen Info springen sie zwischen verschiedenen Teilen der Seite hin und her und verlieren so leicht den Überblick.

Empfehlungen aus Sicht der Nutzerforschung:

  • Ein Navigationselement sollte zu jeder Zeit sichtbar und verwendbar sein.
  • Fügen Sie deutliche Anker- und Landepunkte ein, um der Seite eine klare Struktur zu geben.
  • Gestalten Sie Navigationselemente verständlich. Eine horizontale Anordnung der Items ist einfacher zu verstehen als eine vertikale.
  • Geben Sie dem Nutzer klares Feedback, was sich auf der Seite nach einem Klick geändert hat.

So lieber nicht:

Fail E wie einfach

UX Fail #4: Navigation auf gut Glück.

Split Buttons erscheinen als perfekte Lösung, umfangreiche Desktop-Navigationsmenüs auf mobile Devices zu transformieren. Für Nutzer machen sie die Navigation unvorhersehbar und zur reinen Glückssache.

Wo genau liegt das Problem?

  • Split Buttons werden meist auf mobilen Devices eingesetzt und sollen die Navigation durch umfangreiche Informationsarchitekturen ermöglichen.
  • Dabei versprechen sie, auf geringstem Raum zwei Fliegen mit einer Klappe zu schlagen: Zugang zu Übersichtsseiten einer Navigationsebene (per Klick auf die Kategorienbezeichnung) und Unterkategorien einer Navigationsebene (per Klick auf einen Pfeil neben der Kategorienbezeichnung).
  • Usability-Tests zeigen jedoch, dass diese Navigation viele Nutzer überfordert: Manche Nutzer klicken immer auf die Schrift; manche Nutzer klicken immer auf den Pfeil; manche mal auf die Schrift, mal auf den Pfeil- nicht wissend, dass es unterschiedliche Verlinkungen gibt.
  • Das Resultat ist, dass einige Inhalte schlichtweg unentdeckt bleiben und/oder die zufällig wirkende Navigation als Bug wahrgenommen wird.

Empfehlungen aus der Usability Forschung:

  • Prüfen Sie, ob es Alternativen zum Split Button gibt.
  • Gestalterisch die Zweiteilung verdeutlichen, durch bspw. zwei Buttons.
  • Mögliche Alternativen: Auf den Zugang zur Übersichtsseite der Subkategorie verzichten und nur Subkategorien anbieten.

So lieber nicht:

Fail Gerstaecker Mobile

UX Fail #5: Verborgene UX-Perlen.

Wenn wir von Nutzern hören: „Das ist ja eine tolle Funktion! Aber wie soll man da draufkommen?“, liegt es meist daran, dass Features hinter Wischgesten, Longpress oder Tastenkombinationen versteckt sind.

Wo genau liegt das Problem?

  • Innovative User Interfaces brechen gerne mit den Konventionen der Navigation.
  • Insbesondere auf mobilen Devices sind solche neuen Ansätze zu finden, da der Platz begrenzt ist und die Touch-Oberfläche neue Möglichkeiten bietet.
  • Dann wird die Navigation via Wischgesten oder per Longpress ermöglicht, was auf den ersten Blick auch komfortabel erscheinen mag.
  • Diese Navigationsformen sind jedoch bei Weitem nicht allen Nutzern bekannt – und häufig werden sie trotz jahrelanger Nutzung der Anwendung/Website nicht selbstständig gefunden.
  • Es ist schon ärgerlich, wenn aufwändig entwickelte Features und Funktionen nicht genutzt werden und stattdessen nur die konventionellen Alternativen genutzt werden. Sind selbige jedoch nicht implementiert, wird die Nutzung des digitalen Produkts eventuell nur sehr eingeschränkt oder gar nicht möglich.

Empfehlungen aus der Usability Forschung:

  • Nehmen Sie den digitalen Erfahrungshorizont Ihrer Zielgruppe ernst. Nicht jeder arbeitet in einer Online-Agentur oder beschäftigt sich täglich mit den neuesten digitalen Trends.
  • Testen Sie in UX Tests, ob die Vorteile der versteckten Funktionen und Features die Nachteile (Überforderung, missed content, etc.) überwiegen.
  • Prüfen Sie Möglichkeiten zur Kennzeichnung oder Hinweise auf die versteckten Features und Funktionen. Machen Sie darauf aufmerksam; z.B. durch ein kurzes Intro, Animationen.

So lieber nicht:

Fail Skype Mobile

UX Fail #6: Ich bin doch nicht blind.

Ob man es glaubt oder nicht – es gibt noch Leute, die Desktop-Websites nutzen. Für Phone konzipierte, textkarge und bildgewaltige Seiten einfach nur auf Desktop „groß zu ziehen“, trifft weder den Nutzungskontext noch einen ernst gemeinten Mobile-first-Ansatz.

Wo genau liegt das Problem?

  • In den letzten Jahren hat sich der sogenannte Mobile-first-Ansatz durchgesetzt. D.h. die Website wird zunächst für die mobile Ansicht entwickelt, das Design für große Devices erfolgt nachgelagert.
  • Vorteil: So ist gewährleistet, dass Websites mit allen Inhalten auch mobil genutzt werden können. Bilder, Texte etc. sind optimal auf kleine Devices abgestimmt.
  • Nachteil: Für viele Websites wird für die Desktop-Version einfach das vorhandene Design vergrößert. Dadurch kommt es zu sehr großen Bildern und Schriften.
  • Durch die Skalierung vom Hochformat des Phones auf das Querformat des Desktops nehmen bspw. Bilder der Homepage den gesamten Desktop-Bildschirm ein.
  • Konnten auf der mobilen Variante noch Texte unterhalb des Bühnenbilds im sichtbaren Bereich angezeigt werden, ist dies auf dem Desktop nicht mehr möglich.
  • Häufiger Nebeneffekt, den wir in Tests beobachten: Nutzer scrollen nicht, weil sie unterhalb des bildschirmfüllenden Bildes keine weiteren Informationen erwarten.
  • Die Übersicht ist dadurch auf dem großen Device kurioserweise häufig schlechter als auf dem kleinen Device.
  • Durch die Skalierung der Schrift ist auch diese nun sehr groß. Die resultierenden Zeilenumbrüche beeinträchtigen die Lesbarkeit unnötig.
  • Auch wenn der Trend für die mobile Nutzung von Websites weiter anhalten oder noch zunehmen wird, werden Websites nach wie vor auch auf großen Devices genutzt, für welche ebenfalls ein passendes Design erwartet wird.

Empfehlungen aus der Usability Forschung:

  • Passen Sie die Größe der einzelnen Inhalte auch auf die Desktop-Ansicht an.
  • Optimieren Sie Bilder für große Displays: Wählen Sie den passenden Bildausschnitt und skalieren Sie Bilder auf ein angemessenes Format, damit ggf. weitere wichtige Inhalte innerhalb des direkt sichtbaren Bereichs sind.
  • Nutzen Sie passende Schriftgrößen, Zeilenabstände und -umbrüche für die Desktopansicht und achten Sie auf die Lesbarkeit.

So lieber nicht:

Fail Aptawelt Desktop
Aptawelt Mobile

UX Fail #7: Zu viele Icons verderben den Brei.

Icons benötigen wenig Raum und können Nutzern helfen, angebotene Inhalte schneller aufzufinden. Aber nur, wenn sie gezielt und eindeutig eingesetzt werden.

Wo genau liegt das Problem?

  • Icons können die Auffindbarkeit von Inhalten wesentlich verbessern – allerdings nur, wenn sie eindeutig sind und ohne langes Nachdenken verstanden werden.
  • Im besten Fall sind die eingesetzten Icons von anderen Interfaces einschlägig bekannt (z.B. Lupe = Suchfunktion, Briefumschlag = E-Mail).
  • Ist dies nicht der Fall, sind spezielle Herausforderungen an Auswahl und Gestaltung zu berücksichtigen:
  • Das Symbol an sich muss erkannt werden. Selten sind Icons jedoch wirklich universell verständlich.
  • Nutzer müssen das Resultat nach einem Klick auf das erkannte Icon antizipieren können. Hierfür muss der Nutzer das Icon in Beziehung zum Inhalt setzen. Dies darf jedoch nicht allzu viel Zeit in Anspruch nehmen.
  • Dauert das Entschlüsseln der Icons zu lange, sind sie eher hinderlich und beeinträchtigen die User Experience.

Empfehlungen aus der Usability Forschung:

  • Um das Verständnis von Icons zu stärken, sollten sie immer mit einem Label versehen werden, und zwar bestenfalls per Bildunterschrift. Ein Hinweis nur per MouseOver erzwingt zusätzlichen Aufwand und ist nicht mit Touch Devices vereinbar.
  • Zudem gilt für den Einsatz von Icons: So viel wie nötig, so wenig möglich.

So lieber nicht:

Fail Michelin

UX Fail #8: Internet ist kein TV.

Klar, Videos sind nett anzusehen. Aber: Zu viele davon überfordern Online-Nutzer eher und versperren womöglich den Weg zu relevanten Inhalten.

Wo genau liegt das Problem?

  • Videos sind bei Nutzern aufgrund ihres lebendigen Charakters sehr beliebt. Durch ein 2-minütiges Video werden Infos einfacher und schneller vermittelt als durch mühsames Lesen eines langen Textes.
  • Dieses ständige „Sich-berieseln-lassen“ passt jedoch besser zum Fernsehen als zu Websites.
  • Die Nutzer fühlen sich erschlagen, wenn alle Infos ausschließlich in Video-Form angeboten werden.
  • In einigen Situationen ist ein Video nicht das geeignete Medium, z.B. wenn man sich umringt von Fremden in der U-Bahn über das neueste Tagesgeschehen informieren möchte, stört das laute Abspielen von Videos.
  • Für manche Inhalte sind Videos wie gemacht, für andere sind sie unpassend.
  • Während die einen Informationen in Video-Form besser verarbeiten, fällt anderen das Lesen von Texten leichter.

Empfehlungen aus der Usability Forschung:

  • Infos in Video- und Textform können sich abwechseln, um Vielfalt zu schaffen.
  • Lassen Sie dem Nutzer die Wahl und bieten die Infos als Video und Text an.

So lieber nicht:

Fail Cancer Treatment Center

UX Fail #9: Alles kann, nichts muss.

Seit der Kehrtwende zum Flat Design wird alles vermeintlich überflüssige (z. B. Schlagschatten von Buttons) weggelassen. Die Folge: Nutzer können nicht mehr intuitiv zwischen aktiven und passiven Elementen unterscheiden.

Wo genau liegt das Problem?

  • Durch die Reduktion des Designs heben sich Interaktionselemente nicht mehr vom Hintergrund ab und werden daher von Nutzern nicht als anklickbar wahrgenommen. Zudem sind Eingabefelder nicht eindeutig ersichtlich und Beschriftungen sind auf ein Minimum beschränkt. Alles sieht „flach“ aus.
  • Dort, wo der Skeuomorphismus Schalter aus der realen Welt bis ins kleinste Detail, inklusive Oberflächenstruktur und Lichtreflexen abbildete, stehen im Flatdesign nur farbige Flächen, wie bspw. ein blaues Rechteck auf weißem Grund mit einem Begriff in weißer Schrift.
  • Für Nutzer ist nicht ersichtlich, was anklickbar ist. In der Annahme, dass auf einer Website weitere Inhalte und Details verlinkt sein müssen, klicken Nutzer schlimmstenfalls auf alles: Auf jedes Icon, jedes Foto, jede Schrift, nur um irgendeinen Link zu finden.
  • Auch nicht als solche erkennbare Eingabefelder machen Nutzer ratlos – und resultieren nicht selten in Anrufen bei der Service-Hotline des Anbieters.

Empfehlungen aus der Usability Forschung:

  • Gehen Sie einen Schritt auf Ihre Nutzer zu und setzen auf das sogenannte „Almost Flat Design“.
  • Ergänzen Sie in diesem Sinne die minimalistische Gestaltung um wichtige Hinweise für die Nutzer, wie bspw. gezielt eingesetzte Schatten, Mikrointeraktionen oder Handlungsaufforderungen.
  • Googles Material Design bietet interessante Ansätze.

So lieber nicht:

Fail Alltours

UX Fail #10: Bring mich nach Hause!

Die Home-Navigation via Logo ist seit geraumer Zeit Standard bei UX-Konzepten. Dennoch ist sie bei Weitem nicht allen Nutzern bekannt – und der Rückweg zur Startseite entsprechend schwer.

Wo genau liegt das Problem?

  • Die Navigation zurück auf die Homepage einer Website kann über verschiedene Wege erfolgen, z.B. über die Breadcrumb, über einen „Home“-Link oder ein Haus-Icon.
  • Alle genannten Optionen haben den Vorteil, dass sie von sehr vielen anderen Websites bekannt sind und sich zudem von Nichtkennern durchaus erschließen lassen: die Breadcrumb zeigt die Navigationsstrecke an, Home und Haus werden als Weg nach Hause zur Homepage verstanden.
  • Bei dem Logo-Klick sieht es anders aus: Erstens weisen nicht alle Websites ein erkennbares Logo auf. Zweitens wird das Logo nicht immer an der gleichen Position auf der Website positioniert, obwohl es zahlreiche Studien gibt, die zeigen, dass Nutzer es in der linken oberen Ecke erwarten. Drittens zeigt ein Logo keinen Hinweis, dass ein Klick zur Homepage führt.
  • Die Nutzer, denen dieser Kniff nicht bekannt ist, finden im besten Fall per Zufall nach Hause, über Umwege (Browser back) – oder eben gar nicht.

Empfehlungen aus der Usability Forschung:

  • Behalten Sie konventionelle Alternativen („Home“/„Startseite“-Link, Haus-Icon, etc.) bei, damit auch Nichtkenner des Logo-Klicks nach Hause finden.
  • Geben Sie die Verantwortung nicht an die Nutzer ab, indem Sie sie mühsam via „Browser Back“ navigieren lassen. Der Weg ist möglicherweise zu lang; bei Formulareingaben, Filtersetzungen und Selektionen besteht zudem die Gefahr des Datenverlustes.

So lieber nicht:

Fail Zalando