7 Tipps für eine verbesserte User Experience und Usability deiner Web-Anwendung

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.

View Code HTML5
<label>
    <input type="checkbox" name="agb" value="1"/> Ich akzeptiere die AGB.
</label>

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?:
Google Mail Icons
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.

Bewertung in Google Suchergebnissen einfügen

Wer auf seiner Seite Bewertungen zu Produkten, Artikel, oder ähnliches verwendet, möchte die Bewertung eventuell auch in den Google Suchergebnissen anzeigen lassen.
Dafür baut man auf der entsprechenden Seite einfach folgenden Code-Snippet ein:

<span xmlns:rm="http://rdf.data-vocabulary.org/#" typeof="rm:Review">
	<span property="rm:rating" content="88"></span>
	<span property="rm:best" content="100"></span>
	<span property="rm:itemreviewed" content="Traumelf"></span>
	<span property="rm:dtreviewed" content="2014-09-17"></span>
	<span property="rm:reviewer" content="Browsergames Guide Redaktion"></span>
	<span property="rm:summary" content=""></span>
</span>

Die einzelnen Parameter sollten natürlich mit den gewünschten Werten befüllt werden. Weitere Informationen zu den Eigenschaften findet ihr in der Google Webmaster-Dokumentation.

Google hat freundlicherweise auch ein Tool zur Verfügung gestellt, mit dem sich das Snippet testen lässt.

Wenn alles richtig gemacht wurde, sollte das Ergebnis in etwa so aussehen:
Traumelf Google Bewertung in Suchergebnissen

Sobald Google die Seite dann das nächste mal indexiert, erscheint die Bewertung dann auch in den echten Suchergebnissen.

IE10 Internet Explorer: X-Button im Input-Field entfernen

Über einen einfachen CSS-Befehl lässt sich der Clear-Button (das „X“-Symbol) bzw. der Löschen-Button in den Eingabefeldern vom Internet Explorer entfernen:

input::-ms-clear { display: none; }
Ältere Artikel »