Usability und User Experience – Worte, die jeder in der Software-Entwicklung schon mal gehört haben sollte, aber nur die wenigsten verstehen die wahre Bedeutung dahinter. Mit diesen einfachen Tipps lässt sich die User Experience und die Usability deiner Web-Anwendung entscheidend verbessern – auch wenn du kein Experte auf dem Gebiet ist.
Tipp #1 – Sicherheitsabfrage vor dem Löschen
Es ist nur eine winzige Fingerbewegung, die aber schnell zum Ärgernis werden kann: Der Klick auf den Löschen-Button. Mit nur einem falschen Klick kann die Arbeit von Stunden, Tagen oder sogar Wochen zunichte gemacht werden. Deshalb: Immer eine Sicherheitsabfrage vor dem Löschen einrichten. Es mag vielleicht auf den ersten Blick nervig sein, aber im Ernstfall kann es einem richtig viel Ärger ersparen.
Tipp #2 – Elemente erst aktivieren, wenn man mit ihnen interagieren kann
Ein einfaches Beispiel: Ich habe ein Kontaktformular mit einem Eingabefeld für die E-Mail-Adresse und einer Textarea für meine Nachricht. Darunter ist ein Button zum Absenden des Formulars. Damit das Formular abgesendet werden kann, müssen beide Formularfelder korrekt ausgefüllt werden. Im Normalfall würde man dies einfach lösen, indem man nach dem Klick auf den Absenden-Button eine Fehlermeldung mit einem entsprechenden Hinweis ausgibt. Viel bessere wäre es aber, wenn der Button erst dann klickbar wird, wenn die Felder auch tatsächlich richtig ausgefüllt wurden. So merkt der Benutzer: „Ah, das Formular ist noch nicht vollständig ausgefüllt“, und er muss keine blöden Fehlermeldungen lesen.
Tipp #3 – Elemente deaktivieren, wenn man nicht mehr mit ihnen interagieren soll
Das Pondon aus Tipp #2: Deaktiviert den Absende-Button, sobald der Nutzer ihn betätigt hat. So weiß der Nutzer sofort, dass das Formular verschickt wurde und versendet es nicht aus Versehen ein zweites Mal.
Tipp #4 – Rückmeldung geben
„Hat er das jetzt gespeichert?“ – Diese (oder eine ähnliche) Frage habt ihr euch während der Arbeit am PC sicher auch schonmal gestellt. Ein kurzer Hinweis hätte gereicht und ihr hättet eure wertvolle Zeit nicht mit so einer unnötigen Frage vergeudet. Also: Wann immer der Nutzer etwas speichert, aktualisiert, löscht oder versendet, gebt ihm eine Rückmeldung, ob alles geklappt hat.
Tipp #5 – Mouse-over für klickbare Elemente
In einer Anwendung kann es schnell vorkommen, dass viele klickbare Elemente, die ähnlich aussehen, sehr nah beieinander stehen. Wenn der Nutzer dann mit seiner Maus über die Elemente fährt, hat er schnell Probleme damit zu erkennen, wo sich jetzt sein Mauszeiger befindet. Daher sollten klickbare Elemente sich bei Mouse-over immer hervorheben, um so das Auge bei der Suche des Zeigers zu unterstützen.
Tipp #6 – Labels in Formularen verwenden
Checkboxen und Radio-Buttons sind leider sehr klein und für manch einen ist es eine Qual sie mit dem genauso kleinen Mauszeiger zu treffen. Verbindet man sie jedoch mit einem Label, ist auch der dazugehörige Text klickbar und vergrößert so die Klickfläche.
Tipp #7 – Titel-Attribut für Icons
Ein Bild sagt mehr als tausend Worte – klingt romantisch, stimmt aber in der Software-Entwicklung nicht immer. Oft trifft man im Web auf Icons, bei denen nicht sofort ersichtlich ist, was sie eigentlich bedeuten sollen. Was zum Beispiel wollen uns dieses Icons sagen?:
Natürlich hat Google hier vorgesorgt und bei Mouse-over einen schicken Tooltip integriert, der den Button erklärt, aber so aufwendig muss es gar nicht sein. Es reicht, wenn dem Icon ein Title-Attribut mit einem kurzen, erklärenden Text hinzugefügt wird.
Sehr schöner Beitrag, freut mich wieder was von dir zu lesen.
Das einzige was in dieser Aufzählung fehlt:
Setze klare Kanten. Du hast bereits angesprochen, dass Hover und vor allem verständliche Icons wichtig sind, jedoch ist Hover mit anderen Pointer-Geräten als Maus schwer, beispielsweise dem Finger. Touch Bedienung ist allerdings ein wichtiger Faktor der heutigen Zeit.
Daher ist es wichtig, dass man klare Kanten setzt, damit bereits auf einem Screenshot der Applikation erkenntlich ist, was interaktiv ist und was nicht.
Hilfreich sind hier auch Layouts, welche sich an der Allgemeinheit orientieren. Findet ein Nutzer Muster wieder, welche er kennt, findet er sich allgemein schneller zurecht.
Hilfreich ist es, wenn man eine Applikation tatsächlich screenshoted und dann Freunde oder Kollegen fragt, wie sie auf einem Bild weitermachen würden. Dadurch lernt man teilweise sehr erstaunliche Dinge.
„Sicherheitsabfrage vor dem Löschen“ – Google empfiehlt das Gegenteil, erst löschen und dann per „Recovery“ eine Wiederherstellung anbieten.
@Lars:
Die Papierkorb-Methode ist natürlich eine noch bessere Alternative. Da ich in diesem Artikel aber möglichst einfach umzusetzende Tipps geben wollte, ist die Sicherheitsabfrage ein durchaus gangbarer Weg. Wenn man die Zeit und die Möglichkeiten hat, würde ich auch einen Papierkorb bevorzugen, ansonsten ist eine Sicherheitsabfrage besser als dem Nutzer gar keine Chance einzuräumen seinen Fehler zu korrigieren.