2015-11-15-die-haeufigsten-und-schlimmsten-usability-fehler.markdown 10.9 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

Hendrik Kahlen's avatar
Hendrik Kahlen committed
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 werden wie: „Warum ist der Usability-Fehler so schlimm?“, „Welche weiteren Auswirkungen hat dieser Fehler?“ und „Wie kann der Fehler vermieden werden?“. <!--more--> Ziel dabei ist es insgesamt ein klareres Verständnis für Usability-Fehler und deren Tragweite zu schaffen. Auch soll mit Verweis auf den [Usability-Testmethoden] Artikel so der Einstieg gegeben werden, sodass Besucher einer Webseite nicht durch Usability-Fehler gestört oder gar abgeschreckt werden.
10

11
### Falsches Design
12
Einer der häufigsten Fehler ist der eines falschen Designs. Dieses muss nicht etwa schillernd, blinkend oder bunt sein, es reicht aus, wenn das gewählte Design nicht zum Content passt und damit den Besucher verwirrt. Als Besucher einer vertrauenswürdigen Auto-Leasing-Webseite würde man auch nicht ein ein überladendes Design wie auf [lingscars.com]{:target="_blank"} erwarten. Dies ist nicht nur kontraproduktiv (z.B. zur Autorität der Webseite), es sorgt auch für Verwirrung aufgrund der konträren Erwartungen an die gewählte Webseite - das leasing eines Autos wäre so sehr unwahrscheinlich. 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
13

Hendrik Kahlen's avatar
Hendrik Kahlen committed
14
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]{:target="_blank"} 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
15

16
Zudem sind viele Webseiten nicht Responsive. Man stelle sich vor, auf dem Smartphone oder einem anderen Browser sind Bedienelemente nicht mehr erreichbar, 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 bzgl. Responsive Design findet sich auf [designmodo.com]{:target="_blank"}.<sup>1, 7</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
17

Hendrik Kahlen's avatar
Hendrik Kahlen committed
18
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]{:target="_blank"} empfohlen, die nicht nur schlechte, sondern auch gleich gute Beispiele liefert.<sup>8</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
19

20
### Navigation
21
Ein weiterer häufiger Fehler ist der einer schlechten Navigation, in der Gestalt, 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. 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>
22

23
Gleichzeitig sind zu viele Unterpunkte in einer Navigation ebenfalls kritisch, da der Nutzer so in der Tiefe der Verschachtelung die Übersicht verlieren kann. Ganz wichtig ist in diesem Kontext 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 gibt zudem 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-Konform. Es sollte dementsprechend darauf geachtet werden, dass die Webseiten nicht zu tief und nicht zu flach verschachtelt sind und gewählte Bedienelemente nicht störend auf den Nutzer einwirken oder ihn gar überfordern.<sup>1</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
24

25
Dies waren nur ein paar mögliche Fehler im Navigations-Bereich, für eine breitere Übersicht auch in Form einiger Beispiele mit weiteren Erklärungen, wie Navigationselemente attraktiv und Usability-Konform gestaltet werden können [swimbi.com]{:target="_blank"} und [smooster.com]{:target="_blank"} empfholen.<sup>5, 9</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
26

27
### Formulare
28
Wer schonmal Angaben in einem Formular machen musste, die auf ihn nicht zutreffen, aber erforderlich waren um z.B. bei einer Bestellung oder 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 oder Käufer nicht zutreffen.
29
Formulare auszufüllen ist im Allgemeinen schon mühsamer für den Nutzer, da eine Mitarbeit seinerseits gefordert ist. Alle Punkte, die hierbei den Ablauf erschweren oder behindern, können im schlimmsten Fall dazu führen, dass der Besuch oder Kauf abgebrochen wird. Besser also, wenn fragliche Felder als optional deutlich gekennzeichnet sind.<sup>2, 3</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
30

31
Als erschwerender Fehler bei Formularen kommt hinzu, 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 den Formular-Prozess einfach abbrechen.<sup>4</sup>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
32

33
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. 
Hendrik Kahlen's avatar
Hendrik Kahlen committed
34
[eResult]{:target="_blank"} hat zu den hier aufgeführten Punkten eine ganz gute Auswertung herausgearbeitet.<sup>3, 4</sup>
35 36

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

38
Es wurden nun einige Usability Fehler angesprochen, wenngleich es noch viele mehr gibt. 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. Weitere Informationen wie die hier aufgeführten und weitere Fehler vermieden werden können, findet sich im Artikel zu [Testmethoden] und für weitere Usability-Informationen die [Konventionen]-Artikel, um einen größeren Überblick über Usability-Konforme Webseiten zu erhalten.
Hendrik Kahlen's avatar
Hendrik Kahlen committed
39

40 41
<hr id="sources">

42 43
#### Quellen

44 45 46 47 48 49 50
<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>
51
                <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.
52 53 54 55 56
            </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>
57
                            <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.
58 59
                        </small><br>
                        <small>
60
                            <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/#attachment_18931). Abgerufen: 15.11.2015.
61 62
                        </small><br>
                        <small>
63
                            <sup>7</sup> Adrian (2015). [Responsive Web Design: 50 Examples and Best Practices](http://designmodo.com/responsive-design-examples/). Abgerufen: 15.11.2015.
64 65
                        </small><br>
                        <small>
66
                            <sup>8</sup> (2014). [Worst web designs ever, from popular brands](http://www.bypeople.com/great-websites-with-ugly-design/). Abgerufen: 15.11.2015.
67 68
                        </small><br>
                        <small>
69
                            <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
70

71
[Usability-Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
72
[welovecontent.de]: <http://www.welovecontent.de/conversion-optimierung/die-haeufigsten-usability-fehler-bei-websites/>
73
[Kontrast zum Hintergrund]: <https://www.usertesting.com/blog/2014/12/02/color-ux-conversion-rates/#attachment_18931>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
74 75 76
[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/>
77
[smooster.com]: <http://www.smooster.com/de/blog/6-webdesign-beispiele-wie-du-deine-navigation-zum-kreativen-highlight-werden-laesst>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
78
[eResult]: <http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/nutzergerechte-formulargestaltung/>
79 80
[Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
[Konventionen]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/konventionen/>
81
[lingscars.com]: <http://www.lingscars.com/>