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.

PhpStorm > CSV-Darstellung > CSV in HTML umwandeln

Da ich in letzter Zeit immer mal wieder mit CSV-Dateien herumhantierten musste und es mich immer gestört hat, dass dieses Format so schlecht zu lesen ist, habe ich mir ein kleines PHP-Skript geschrieben das dieses Problem löst:

View Code PHP
$read = fopen($argv[1], 'r');
$separator = empty($argv[2])?';':$argv[2];
$tmpPath = sys_get_temp_dir().'/csv2.html';
$write = fopen($tmpPath, 'w');
fwrite($write, '<html><head><title>csv2html result</title></head><body><table><thead><tr>');
$row = fgetcsv($read, 2048, $separator);
foreach($row as $key => $value)
{
	fwrite($write, '<th>'.$value.'</th>');
}
fwrite($write, '</tr></thead><tbody>');
while(($row = fgetcsv($read, 2048, $separator)) !== false)
{
	fwrite($write, '<tr>');
	foreach($row as $key => $value)
	{
		fwrite($write, '<td>'.$value.'</td>');
	}
	fwrite($write, '</tr>');
}
fwrite($write, '</tbody></table></body></html>');
fclose($read);
fclose($write);
 
switch(true)
{
	case stristr(PHP_OS, 'DAR'): exec('/usr/bin/open -a "/Applications/Google Chrome.app" \'file:///'.$tmpPath.'\''); break;
	case stristr(PHP_OS, 'WIN'): exec('start "" "file:///'.$tmpPath.'"'); break;
	case stristr(PHP_OS, 'LINUX'): exec('x-www-browser "file:///'.$tmpPath.'"'); break;
	default: echo 'Cannot open html file: Unknown OS.';
}

Dieses Skript wandelt die angegebene CSV-Datei in HTML um und öffnet das HTML-Dokument anschließend im Chrome.
Jetzt habe ich natürlich keine Lust das Skript jedes mal über die Konsole aufzurufen. Deshalb habe ich den Skript-Aufruf in meine Entwicklungsumgebung PhpStorm integriert (siehe Bild: Preferences -> External Tools):

PhpStorm Einstellungen csv2html

Danach lässt sich das Skript über das Datei-Kontextmenü von PhpStorm aufrufen (siehe Bild). Wenn man dann eine CSV-Datei auswählt, öffnet sich im Chrome eine HTML-Ansicht der CSV-Daten.

external-tools-csv2html

Hinweis: Man kann dem Skript als zweiten Parameter auch den Separator übergeben. Falls jemand also nicht mit dem hier definierten Standard-Separator arbeitet (Semikolon), muss der Skript-Aufruf entsprechend erweitert werden.

Unix Timestamp Online-Konverter

Auf dieser Seite lassen sich Unix-Timestamps kinderleicht in ein für Menschen lesbares Format umwandeln.

Timestamp in lesbares Datum konvertieren

Der Unix-Timestamp (Unix-Zeitstempel) entspricht der Anzahl an Sekunden seit dem 01.01.1970 um 0:00 Uhr. Timestamps werden vor allem im Unix-Umfeld (unter anderem auch Linux) eingesetzt um z.B. das Erstellungs- und Bearbeitungsdatum einer Datei in einem einheitlichen Format speichern zu können. Außerdem ist es wesentlich einfacher mit Timestamps zu rechnen als mit formatierten Datumsangaben. Wenn man beispielsweise auf den aktuellen Timestamp plus 60 rechnet, erhält man die Uhrzeit um genau eine Minute später.