Commit d07a1861 authored by Hendrik Kahlen's avatar Hendrik Kahlen
Browse files

die häufigsten Usab.Fehler aktualisiert

parent 35c98a93
......@@ -6,38 +6,37 @@ category: usability
author: Hendrik Kahlen
---
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.
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.
### Falsches Design
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>
<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>
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, 6</sup>
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>
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, 7</sup>
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>
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>
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>
### Navigation
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>
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>
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>
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.
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, 9</sup>
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>
### Formulare
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.
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.
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.
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>
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.
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>
### Fazit
[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.
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.
<hr id="sources">
......@@ -70,11 +69,9 @@ Wir hoffen der Artikel hat Ihnen ebenso gefallen wie uns und Sie konnten einige
<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
[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>
[Usability-Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
[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/>
[Kontrast zum Hintergrund]: <https://www.usertesting.com/blog/2014/12/02/color-ux-conversion-rates/#attachment_18931>
[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/>
......@@ -82,3 +79,4 @@ Wir hoffen der Artikel hat Ihnen ebenso gefallen wie uns und Sie konnten einige
[eResult]: <http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/nutzergerechte-formulargestaltung/>
[Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
[Konventionen]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/konventionen/>
[usability.ch]: <http://www.usability.ch/news/die-10-gravierendsten-fehler-beim-anwendungsdesign.html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment