2015-11-15-die-haeufigsten-und-schlimmsten-usability-fehler.markdown 10 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
Usability-Fehler findet man zahlreich auf beinahe jeder Webseite, mit größeren und kleineren Auswirkungen. Wir wollen in diesem Artikel 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 Ihrer Seite nicht durch Usability-Fehler gestört oder gar abgeschreckt werden.
9

10
### Falsches Desing
11
Eine der wohl 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 eines eines großen Unternehmens erwartet man schließlich auch ein schlichtes und seriöses design und kein "flippiges Start-up"-Design. 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
12

13
Auch ist es möglich, dass Hintergründe und andere Designelemente so gewählt sind, dass Sie 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. Vergewissern Sie sich also, dass Sie ihre Schriftart, Schriftfarbe und den Hintergrund richtig gewählt haben.<sup>1</sup><sup>6</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
14

15
Zudem sind viele Webseiten nicht Responsive sind. Man stelle sich vor, auf dem Smartphone oder einem anderen Browser sind Bedienelemente nicht mehr zu erreichen, weil sie außerhalb des Bildbereichs liegen. Würden Sie noch weiter auf dieser Webseite verweilen?. Achten Sie also darauf, dass Ihr Design für die gängigsten Endgeräte und Browser funktioniert. Ein Auflistung von mehreren guten Beispielen finden Sie auf [designmodo.com].<sup>1</sup><sup>7</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
16

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

19
### Navigation
20
Ein weiterer häufiger Fehler laut [welovecontent.de] ist der einer schlechten Navigation, in Dergestalt, dass es zu viele Unterpunkte gibt, Navigationselemente alle auf einmal angezeigt werden und/oder die Navigation sich über den gesamten Bildschirm oder mindestens die Hälfte erstreckt, um nur mal ein paar mögliche Fehler zu nennen. Nun was genau ist aber jetzt so schlimm daran? 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 Schachtelung ist also hilfreich<sup>1</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
21

22
Ein weiteres schlechtes Beispiel bieten 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 man den ganzen Mühseligen Weg mit der Maus erneut fahren – das ist nicht Usability-Komform. Achten Sie also darauf, dass ihre Seiten 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 empfehlen wir folgende Seite zur [richtigen Nutzung von Navigation].<sup>5</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
23 24 25

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/ist.

26
Einige 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</sup> <sup>9</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
27

28
### Formulare
Hendrik Kahlen's avatar
Hendrik Kahlen committed
29 30 31 32
Haben Sie schonmal Angaben in einem Formular machen müssen, die auf Sie nicht zutreffen, aber erforderlich waren um z.B. der Bestellung/Anmeldung voranzukommen? Falls ja, dann haben Sie schonmal einen Eindruck davon was man bei Formularen alles falsch machen 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.

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 erschwerenden Fehlern zählt auch, wenn Nutzer nicht die Möglichkeit haben ihre Informationen vor dem Abschluss nochmals zu überprüfen oder gar zu ändern, denn niemand möchte etwas falsches abschicken. Weiterer schwerer Fehler ist es, wenn Nutzer keine Ahnung haben in welchem Abschnitt des Formulars Sie sich gerade befinden. Dies insbesondere bei Formularen kritisch, die sich über mehrere Seiten erstrecken. Auch wird häufig vergessen, adäquate Fehlermeldungen zu geben und diese auch rechtzeitig, also am besten live. Die Überprüfung, ob ein Passwort oder eine E-Mail der Norm entspricht sollte bereits beim Verlassen des entsprechenden Feldes aufmerksam gemacht werden. Diese sollten 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</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
34

35 36

### Fazit
Hendrik Kahlen's avatar
Hendrik Kahlen committed
37 38 39 40
[Diese kleine Gliederung] soll Ihnen einen genaueren Überblick geben wie Formulare aufgebaut sein sollten, zusammen mit anderen kleinen Tipps.

Wir hoffen der Artikel hat Ihnen ebenso gefallen wie uns und Sie konnten einige grundlegende Tipps bzgl. Usability-Fehlern mitnehmen. Wenn wir jetzt Ihr Interesse geweckt haben, empfehlen wir den [Testmethoden], um sich optimal gegen Usability-Fehler zu schützen oder [Konventionen], um einen größeren Überblick über Usability-Komforme Webseiten zu erhalten.

41 42 43 44 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
#### Quellen

<hr id="sources">

<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 73 74 75 76 77 78 79 80 81


[Diese kleine Gliederung]: <http://jendryschik.dew/geblog/2015/01/07/usability-und-barrierefreiheit-von-formularen/>
[richtigen Nutzung von Navigation]: <http://www.smooster.com/de/blog/6-webdesign-beispiele-wie-du-deine-navigation-zum-kreativen-highlight-werden-laesst>
[welovecontent.de]: <http://www.welovecontent.de/conversion-optimierung/die-haeufigsten-usability-fehler-bei-websites/>
[Kontrast zum Hintergrund]: <https://www.usertesting.com/blog/2014/12/02/color-ux-conversion-rates/>
[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/>
82 83
[Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
[Konventionen]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/konventionen/>