Web Usability Tipps

Wir möchten Ihnen hier ein paar Fallbeispiele aus der Praxis demonstrieren, wie Sie ganz benutzerfreundlich Ihre Benutzer freundlich stimmen. Diese Tipps sollen lediglich als Appetizer dienen, die Ihnen Hunger auf die Verbesserung der Usability Ihrer Website bzw. Web-Applikation machen sollen. Guten Appetit!

Wenn Sie die Maus über eines der Bilder bewegen, wird es automatisch vergrößert dargestellt.

Menschen erwarten normalerweise Feedback, wenn Sie mit einem Computer interagieren. Man erwartet vom Computer ein ähnliches Verhalten, wie im Umgang mit anderen Menschen.

Wie ist das bei Web-Formularen? Ich habe schon oft erlebt, dass ich speziell im Positiv-Fall (alles richtig ausgefüllt) überhaupt keine Rückmeldung bekommen habe. Im Negativ-Fall füllt der  Anwender ein komplettes Formular aus und bekommt meist nach dem Absenden eine Rückmeldung. Dabei wird ihm dann mitgeteilt, was er alles vergessen bzw. falsch ausgefüllt hat.

Dies kann man verbessern durch ein Echtzeit-Feedback. Der Benutzer bekommt unmittelbar das Feedback, ob seine Eingabe korrekt ist oder noch verbessert werden soll.

Das Kontaktformular von der web4humans Website dient uns hier als Beispiel. Sobald der Benutzer eine Eingabe gemacht hat und das Feld wieder verlässt, bekommt er eine Rückmeldung (siehe Beispiel 1).

Als Resultat bleibt dem Benutzer der Frust erspart, mit dem er konfrontiert wäre, wenn sich erst nach dem Absenden der Daten herausstellt, was er alles falsch gemacht hat. Ausserdem muss die Seite nicht neu geladen werden, was in einer besseren Performance resultiert. Dies trägt aus unserer Sicht zu einem positiven Nutzungserlebnis bei.

Beispiel 1: Echtzeit-Feedback

Es gibt Menschen, für die ist es beispielsweise schwierig, eine E-Mail-Adresse von einer URL zu unterscheiden. Das kommt in den besten Familien vor! Zum anderen ist es auch eine Angewohnheit von vielen Nutzern, Hilfetexte nicht zu lesen (z. B. den Tooltip, der über das title-Tag definiert werden kann). Was tun?

Eine pragmatische Lösung: Man füllt das Eingabefeld mit einem Default-Wert, der als Hilfetext dient. Sobald man in das Feld klickt (oder es anderweitig Fokus erhält), verschwindet der Hilfetext. Damit ist der Weg frei für die Eingabe und der User weiss, welche Information in welcher Form gewünscht ist.

Wenn der Hilfetext auch noch farblich als Hilfetext erkennbar wäre (z. B. durch eine andere Schriftfarbe), dann wär die Sache perfekt. Als Beispiel dient wieder das Kontaktformular (siehe Beispiel 2).

Beispiel 2: Unterstützung via Default-Werte

Sehr oft gibt es Formulare, bei denen der Button für das Absenden der Daten standardmäßig aktiviert ist. Dadurch können Fehlermeldungen entstehen (wie bereits oben erwähnt).

Das Ziel soll aber sein, dem User Fehlermeldungen generell zu ersparen. Zumindest da, wo es möglich ist. Viele Benutzer nehmen diese persönlich und denken sich oft unbewusst "Ich bin doch selbst dafür zu doof." Das können wir dem Benutzer ersparen.

Eine einfache Lösung: Der Button wird nur aktiviert, wenn alles korrekt ausgefüllt ist. Dadurch werden ungeliebte Fehlermeldungen vermieden und der User ist happy! Als Beispiel dient wieder das Kontaktformular. Der Button "Nachricht senden" wird nur aktiviert, wenn alle nötigen Infos korrekt eingeben wurden (siehe Beispiel 3).

Beispiel 3: Button wird erst aktiv, wenn alles korrekt ist.