Die 10 "Totsünden beim Usability"

Dezember 28th, 2009 | Tags: , ,
Anzeige

Wirklich sehr empfehlenswert finde ich den Artikel 10 Usability Crimes You Really Shouldn’t Commit. Der Autor Chris Spooner schreibt dort kurz und knapp, welche 10 Dinge unbedingt beachtet werden sollten, wenn man etwas von Usability hält.

Hier die kurze Zusammenfassung, was beachtet werden sollte:

  • “Crime 1: Form labels that aren’t associated to form input fields
    Beim Bau eines Formulars sollte unbedingt darauf geachtet werden die HTML “Labels” zu verwenden. Damit hilft man den Benutzern dabei, sich besser im Formular bewegen zu können und macht dieses benutzbarer.

    <label for="IdDesElementes">Klick hier zum auswählen</label>
    <input type="radio" id="IdDesElementes" />
  • “Crime 2: A logo that doesn’t link to the homepage”
    Mitlerweile erwartet der Benutzer, dass, wenn er auf ein Logo im Kopf einer Seite klickt, dieses zur Startseite führt.

    <h1>
      <a href="startseite.html"><img src="logo.png" alt="..."></a>
    </h1>
  • “Crime 3: Not specifying a visited link state”
    Dem Benutzer sollte gezeigt werden, welchen Link er bereits angeklickt hat.

    a:visitet {
       color: #BB272F
    }
  • “Crime 4: Not indicating an active form field”
    Ähnlich wie bei Punkt 3 sollte dem Benutzer gezeigt werden, in welchem Eingabefeld (in Formularen) die Maus gerade ist. Dabei sollte die Tap-Reihenfolge nicht vergessen werden.

    textarea:focus {
       boarder: 1px solid #BB272F
    }
  • “Crime 5: An image without an alt description”
    Das sollte man natürlich nicht nur wegen Usability unterlassen. Es gibt immernoch Benutzer die Bilder daktiviert haben, mit Textbrowsern unterwegs sind oder spezielle Programme für Bilder nutzen. Außerdem nimmt das SEO einem das sehr übel.

    <img src="image.png" alt="Beschreibung des Bildes" />
  • “Crime 6: A background image without a background color”
    Wie schon bei 5. beschrieben, gibt es einige, die (Hintergrund-)Bilder deaktiviert haben, darum sollte darauf geachtet werden, dass bei der Verwendung von Hintergundbilder auch eine Hintergrundfarbe gewählt wird, die es trotz fehlenden Bild den Benutzer erlaubt, den vorhandenenText zu lesen.
  • “Crime 7: Using long boring passages of content”
    Wer liest schon gerne lange Texte? Darum sollten diese mit Bildern aufgelockert und möglichst kurz gehalten werden.
  • “Crime 8: Underlining stuff that isn’t a link”
    Beliebte Sache um Leute in die Irre zu jagen. Text zu unterstreichen; am besten noch mit der gleichen Farbe wie die Linkfarbe. Und jeder denkt, das ist nen Link.
  • “Crime 9: Telling people to click here”
    Ein beliebter Effekt von “klicke hier” ist auch die Sache mit Adobe Acrobat. Viele Webseiten schreiben “Um diese PDF zu öffnen, benötigen Sie Acrobat Reader. Klicke hier.” Dabei kommt dann auch das raus: Bei der google Suche nach “hier klicken” steht ganz oben der Acrobat Reader. Dem Benutzer sollte immer gesagt werden, warum er wo klicken sollte.
  • “Crime 10: Using justified text”
    Blocktext ist besser zu lesen als Fransentext. Das ist doch Jedem klar, oder?

Ausführlich gibt es den Artikel im Original auf line25.com.

Weiter lesen


  1. FussLhain
    Dezember 28th, 2009 at 15:09

    schöne zusammenfassung! sollte gleich nen iso standard werden! :P

  2. Dezember 29th, 2009 at 23:01

    Ich würde noch auf die Wichtigkeit der Navigation hinweisen. Standardmäßig ist diese links platziert. Außerdem sollten die Punkte verständlich formuliert sein, also schwer verständliche Fachbegriffe und Anglizismen vermeiden etc.

Kommentieren