2015-11-15-die-haeufigsten-und-schlimmsten-usability-fehler.markdown 10.5 KB
Newer Older
Hendrik Kahlen's avatar
Hendrik Kahlen committed
1 2 3
---
layout: post
title:  "Die häufigsten und schlimmsten Usability-Fehler"
4
subtitle: Es gibt viele Usability-Fettnäpfchen die vermieden werden sollten
Hendrik Kahlen's avatar
Hendrik Kahlen committed
5 6 7
category: usability
author: Hendrik Kahlen
---
8

9
Usability-Fehler treten mit größeren und kleineren Auswirkungen auf zahlreichen Webseiten auf.In diesem Artikel sollen bei der Veranschaulichung der wichtigsten Usability-Fehler unter anderem Fragen beantworten wie: „Warum ist der Usability-Fehler so schlimm?“, „Welche weiteren Auswirkungen hat dieser Fehler?“ und „Wie kann der Fehler vermieden werden?“. Ziel dabei ist es insgesamt ein klareres Verständnis für Usability-Fehler und deren Vermeidung zu schaffen, sodass Besucher einer Webseite nicht durch Usability-Fehler gestört oder gar abgeschreckt werden.
10

11
### Falsches Design
12 13
<img style="float: right; width: 20%;" src="http://www.welovecontent.de/wp-content/uploads/screenshot-usability-design.jpg" alt ="car leasing example"/>
Einer der am häufigsten gemachten Fehler ist der eines falschen Designs. Dieses muss nicht etwa schillernd, blinkend und/oder bunt sein, es reicht aus, wenn das gewählte Design nicht zum Content passt und damit den Besucher verwirrt. Als Besucher der Webseite einer Auto-Leasing Firma würde man auch nicht ein Design wie im Bild rechts erwarten. Ist dies nicht so, sorgt dies für Verwirrung aufgrund des Kontrasts zu den Erwartungen. Ebenso wichtig ist es dabei, dass sich das gewählte Design über die gesamte Webseite erstreckt, ein Bruch auf Unterseiten verwirrt den Nutzer ebenfalls.<sup>1</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
14

15
Auch ist es möglich, dass Hintergründe und andere Designelemente so gewählt sind, dass Sie die Informationsaufnahme stören. Ein Beispiel dafür sind Texte die kaum einen [Kontrast zum Hintergrund] bieten. Zu bemerken sei an dieser Stelle aber, dass es für gewisse Zwecke durchaus sinnvoll ist den Kontrast niedrig zu halten, z.B. wenn man die Aufmerksamkeit auf einen anderen Bereich legen möchte. Um diesen Fehler zu vermeiden sollte man sich vergewissern, dass Schriftart, Schriftfarbe und der Hintergrund richtig gewählt sind. Dies ist z.B. mit den [Usability-Testmethoden] möglich.<sup>1, 6</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
16

17
Zudem sind viele Webseiten nicht Responsive. Man stelle sich vor, auf dem Smartphone oder einem anderen Browser sind Bedienelemente nicht mehr zu erreichen, weil sie außerhalb des Bildbereichs liegen. Wer würde da noch weiter auf dieser Webseite verweilen?. Es sollte also auch hier darauf geachtet werden, dass das Design der Webseite für die gängigsten Endgeräte und Browser funktioniert. Ein Auflistung von mehreren guten Beispielen finden Sie auf [designmodo.com].<sup>1, 7</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
18

19
Natürlich gibt es noch mehr Fehler hinsichtlich falschen Design-Entscheidungen, aber dies würde den Rahmen des Artikels sprengen. Für weitere Informationen wird die Auflistung auf [bypeople.com] empfohlen, die nicht nur schlechte, sondern auch gleich gute Beispiele liefert.<sup>8</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
20

21
### Navigation
22
Ein weiterer häufiger Fehler ist der einer schlechten Navigation, in Dergestalt, dass es zu viele Unterpunkte gibt, Navigationselemente alle auf einmal angezeigt werden und die Navigation sich über den gesamten Bildschirm (oder min. die Hälfte) erstreckt - um nur mal ein paar mögliche Fehler zu nennen. Die meisten Nutzer haben meist nur ein kleines Navigationsbedürfnis und möchten sich zu deren Erfüllung nicht durch die gesamten Elemente ohne Selektion quälen - eine übersichtliche Schachtelung ist also sehr hilfreich.<sup>1</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
23

24 25 26 27
Ein weiteres schlechtes Beispiel bieten die bereits angesprochenen vielen Unterpunkte in einer Navigation. Es gibt Navigation, bei denen Unterpunkte erst auftauchen, wenn man den darüberliegenden Punkt mit der Maus überflogen (hoover) hat. Rutscht man dann irgendwann ab, muss der ganze Mühselige Weg mit der Maus erneut abgefahren werden – das ist nicht Usability-Komform. 
Ganz wichtig ist hierbei auch, dass der Nutzer (z.B. in Form von Breadcrumbs) immer genau weiß, auf welchen Unterseiten er sich befindet, wenn er dorthin navigiert wurde. 
Es sollte dementsprechend darauf geachtet werden, dass die Webseiten nicht zu tief verschachtelt sind und gewählte Bedienelemente nicht störend auf den Nutzer einwirken oder ihn gar überfordern. 
Für eine breitere Übersicht und ein noch besseres Verständnis in Form einiger Beispiele mit weiteren Erklärungen, wie Navigationselemente attraktiv und Usability-Komform gestaltet werden können findet sich auf [swimbi.com] oder auch auf [smooster].<sup>5, 9</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
28

29
### Formulare
30
Wer schonmal Angaben in einem Formular machen musste, die auf ihn nicht zutreffen, aber erforderlich waren um z.B. der Bestellung/Anmeldung voranzukommen, der hat einen Eindruck davon was bei Formularen alles falsch gemacht werden kann. Ein häufiger Fehler wurde nun eben schon angesprochen, zu viele Pflichtfelder oder gar das Verlangen von Informationen, die auf Benutzer/Käufer nicht zutreffen.
Hendrik Kahlen's avatar
Hendrik Kahlen committed
31 32
Formulare auszufüllen ist im allgemeinen schon Mühsam, da eine Mitarbeit vom Nutzer gefordert ist, alle Punkte, die hierbei den Ablauf erschweren oder behindern, können im schlimmsten Fall dazu führen, dass der Besuch/Kauf abgebrochen wird. Besser also, fragliche Felder als optional deutlich zu kennzeichnen.

33
Zu den erschwerenden Fehlern bei Formularen zählt auch, wenn Nutzer nicht die Möglichkeit haben ihre Informationen vor dem Abschluss nochmals zu überprüfen oder gar zu ändern. Man möchte nunmehr keine falschen Angaben machen (z.B. um auch die Lieferung an die richtige Adresse zu versenden) und über mehrere Seiten hinweg bleiben Formular-Inhalte schwerlich im Gedächtnis des Nutzers hängen. Daraus folgt auch ein weitere Fehler, nämlich, wenn Nutzer keine Ahnung haben in welchem Abschnitt des Formulars Sie sich gerade befinden, bzw. wie viele noch folgen. Ohne zu wissen, wie lange das ausfüllen noch dauert, kann es passieren, dass Nutzer das Formular einfach abbrechen.
Hendrik Kahlen's avatar
Hendrik Kahlen committed
34

35
Auch wird häufig vergessen eine adäquate Fehlermeldungen zu geben und diese auch rechtzeitig, also am besten im Moment des Fehlers anzuzeigen. Die Überprüfung, ob ein Passwort oder eine E-Mail der Norm entspricht sollte bereits beim Verlassen des entsprechenden Feldes geschehen und auf etwaige Fehler aufmerksam gemacht werden. Diese Fehlernachrichten sollten vor allem aber auch wahrnehmbar für den Nutzer platziert werden, also nicht erst am Ende der Seite. [eResult] hat dazu eine ganz gute Auswertung herausgearbeitet.<sup>3, 4</sup>
36 37

### Fazit
Hendrik Kahlen's avatar
Hendrik Kahlen committed
38

39
Es wurden nun einige Usability Fehler angesprochen, wenngleich es noch viele mehr gibt. Eine genauere Auflistung vieler Usability-Vergehen findet sich auf [usability.ch]. Die hier dargestellten Fehler sollten aber ein gewisses Bewusstsein und Verständnis für die Schwere der Usability-Missachtung hervorbringen und einige grundlegende Tipps bzgl. Usability-Fehlern geben. Für weitere Informationen wird die Fehler vermieden werden können, gibt es noch die Artikel zu [Testmethoden], um sich optimal gegen Usability-Fehler zu schützen oder [Konventionen], um einen größeren Überblick über Usability-Komforme Webseiten zu erhalten.
Hendrik Kahlen's avatar
Hendrik Kahlen committed
40

41 42
<hr id="sources">

Hendrik Kahlen's avatar
Hendrik Kahlen committed
43 44
#### Quellen

45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
<small>
                <sup>1</sup> Marlis Reisenauer (2015). [Die häufigsten Usability-Fehler bei Websites](http://www.welovecontent.de/conversion-optimierung/die-haeufigsten-usability-fehler-bei-websites/). Abgerufen: 15.11.2015.
            </small><br>
            <small>
                <sup>2</sup> Olaf Brandt (2013). [Die 7 häufigsten Fehler bei der Gesaltung von Formularen](http://www.shopbetreiber-blog.de/2013/05/10/die-7-haufigsten-fehler-bei-der-gestaltung-von-website-formularen/). Abgerufen: 15.11.2015.
            </small><br>
            <small>
                <sup>3</sup> Thorsten Wilhelm, Carsten Rehmann (eResult GmbH).[Nutzergerechte Formulargestaltung](http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/nutzergerechte-formulargestaltung/). Abgerufen: 15.11.2015.
            </small><br>
            <small>
                <sup>4</sup> Michael Jendryschik (2015). [Grobkonzept: Usability und Barrierefreiheit im Kontext von Web-Formularen](http://jendryschik.de/weblog/2015/01/07/usability-und-barrierefreiheit-von-formularen/). Abgerufen: 15.11.2015.
            </small><br>
            <small>
                            <sup>5</sup> Sebastion Meier (2015).[6 Webdesign Beispiel wie du deine navigiation zum kreativen Highlight werden lässt](http://www.smooster.com/de/blog/6-webdesign-beispiele-wie-du-deine-navigation-zum-kreativen-highlight-werden-laesst). Abgerufen: 15.11.2015.
                        </small><br>
                        <small>
                            <sup>6</sup> Hannah Alvarez (2014).[A Guide to Color, UX, and Conversion Rates](https://www.usertesting.com/blog/2014/12/02/color-ux-conversion-rates/). Abgerufen: 15.11.2015.
                        </small><br>
                        <small>
                            <sup>7</sup> Adrian (2015).[Responsive Web Design: 50 Examples and Best Practices](http://designmodo.com/responsive-design-examples/). Abgerufen: 15.11.2015.
                        </small><br>
                        <small>
                            <sup>8</sup> (2014).[Worst web designs ever, from popular brands](http://www.bypeople.com/great-websites-with-ugly-design/). Abgerufen: 15.11.2015.
                        </small><br>
                        <small>
                            <sup>9</sup> Dmitry Molchanov (2014).[22 Principles Of Good Website Navigation and Usability](http://swimbi.com/blog/22-principles-of-good-web-navigation-and-maximum-usability/), Abgerufen 15.11.2015
Hendrik Kahlen's avatar
Hendrik Kahlen committed
71

72
[Usability-Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
73
[welovecontent.de]: <http://www.welovecontent.de/conversion-optimierung/die-haeufigsten-usability-fehler-bei-websites/>
74
[Kontrast zum Hintergrund]: <https://www.usertesting.com/blog/2014/12/02/color-ux-conversion-rates/#attachment_18931>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
75 76 77 78 79
[designmodo.com]: <http://designmodo.com/responsive-design-examples/>
[bypeople.com]: <http://www.bypeople.com/great-websites-with-ugly-design/>
[swimbi.com]: <http://swimbi.com/blog/22-principles-of-good-web-navigation-and-maximum-usability/>
[smooster]: <http://www.smooster.com/de/blog/6-webdesign-beispiele-wie-du-deine-navigation-zum-kreativen-highlight-werden-laesst>
[eResult]: <http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/nutzergerechte-formulargestaltung/>
80 81
[Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
[Konventionen]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/konventionen/>
82
[usability.ch]: <http://www.usability.ch/news/die-10-gravierendsten-fehler-beim-anwendungsdesign.html>