In dieser Artikelserie dreht sich alles um die Anwenderfreundlichkeit von Benutzerschnittstellen für Web-Anwendungen. Teil 1 beleuchtet den theoretischen Hintergrund. In Teil 2 geht es um das Setzen von Schwerpunkten und das Lenken der Aufmerksamkeit, während Teil 3 Methoden für mehr Komfort im Besuchererlebnis thematisiert. Im vierten und letzten Teil dieser Serie geht es um Interaktivität, Rückmeldungen und essentielle Funktionen.
Vorgestellte Techniken in diesem Beitrag:
- Laufzeitindikatoren – lassen Sie die Nutzer wissen, was passiert
- So gestalten Sie Schaltflächen interaktiv
- Nützliche Informationen für neue, noch leere Profile
- Machen Sie die besonderen Funktionen publik
- Absolut unerlässlich – Rückgangig machen
- Nützliches Extra-Bonbon: Wiederherstellen
- Bestätigungsmeldungen
Niemand liebt es, zu warten. Warten heißt, nichts zu tun. Dummerweise hat jede Anwendung Funktionen, deren Ausführung Zeit bedarf – sei es zum Laden eines großen Dokuments oder sei es, um die Ergebnisse einer Suchanfrage zu recherchieren. Aber diese Wartezeit können Sie erheblich dadurch verkürzen, dass Sie einen Ladeindikator einblenden. Wann immer ein Ladevorgang stattfindet, blenden Sie einen Laufzeitbalken oder eine andere Animation ein.
Dropbox blendet einen Laufzeitbalken ein, um Anwender zu informieren, wie weit das Hochladen ihrer Dateien bereits fortgeschritten ist. Für Anwendungen dieser Art sind Laufzeitbalken unerlässlich, damit die Anwender abschätzen können, wie lange ein Vorgang noch dauern wird.
Wartezeit mit unterhaltsamen Zusatz-Infos verkürzen
Forschungsergebnisse zeigen, dass Anwender die Wartezeit kürzer empfinden, wenn beim Warten etwas auf dem Bildschirm passiert (Quelle). Laufzeitbalken sind prima für kurze Wartezeiten. Was tun Sie aber, wenn ein Ladevorgang eine Minute oder mehr in Anspruch nimmt? Während Sie die Ladezeit selbst nicht beeinflussen können – vorausgesetzt, dass Sie alles menschenmögliche getan haben, um den Vorgang entsprechend kurz zu halten – können Sie sehr wohl etwas an dem Warte-Erlebnis der Benutzer Ihrer Anwendung tun.
Viele Anwendungen blenden während langer Wartezeit wertvolle Tipps und Hinweise ein. Wenn die Anwender schon nicht produktiv sein können, so können sie wenigstens etwas Neues lernen.
Die Reaktions- bezieungsweise Interaktionsfähigkeit von Schaltlfächen hängt nicht allein von der Architektur des Backends ab. Die Art und Weise, wie Ihre Benutzerschnittstelle reagiert spielt eine ebenso große Rolle. Eines der meist genutzten Bedienelemente einer jeden grafischen Benutzeroberfläche sind Schaltflächen. In Desktop-Anwendungen haben Schaltflächen unterschiedliche Stati. Die Gebräuchlichste ist die Standardeinstellung, der Button in der Grundeinstellung sozusagen, und der aktive Status, wenn die Schaltfläche gedrückt ist.
Der Unterschied zwischen den Stati “aktiv” und “Standard” ist
bei den WordPress-Schaltflächen gut erkennbar.
Der “Search Button” von WordPress sieht im aktiven Zustand exakt so aus, als sei er gedrückt worden. Das gibt den Anwendern eine direkte und gut erkennbare Rückmeldung darüber, ob ihr Klick erfolgreich war. Ebenso, wie bei Desktop-Anwendungen üblich, sollten Sie die Benutzeroberfläche und Ihre Web-Anwendungen mit solchen zusätzlichen Informationen und Rückmeldungen für die Anwender versehen. Dazu gehören neben den verschiedenenen Stati auch Beschriftungen von Schaltflächen wie bei OtherInbox oder Tipps und Hilfe-Nachrichten wie bei Campaign Monitor.
Gut gelöst: Die Icons im Hauptmenü von OtherInbox sind zum besseren Verständnis beschriftet.
Wenn ein Anwender Ihre Web-App zum ersten Mal lädt, wird mit größter Wahrscheinlichkeit noch nicht viel auf dem Bildschirm erscheinen, da es noch keine Anwenderdaten gibt. Es gibt also nichts anzuzeigen. Nutzen Sie diesen leeren Zustand, um den Anwender die ersten Schritte mit Ihrer App zu erklären. Um das Ganze noch effizienter und benutzerfreundlicher zu machen, können Sie in diese Meldung einen Link oder eine Schaltfläche integrieren, die direkt zu einer bestimmten Aktion führt, wie das Beispiel von Campaign Monitor anhand der folgenden Abbildung zeigt.
Compaign Monitor bietet beim ersten Login eine umfassende Hilfenachricht und eine
prominent platzierte Schaltfläche zum Erstellen der ersten Kampagne.
Die Nutzer Ihrer Anwendungen werden die App nicht in- und auswendig kennen. Es wäre also hilfreich, bestimmte Funktionen oder Befehle innerhalb der Anwendung vorzustellen. Schon allein deshalb, weil Web-Apps wesentlich häufiger aktualisiert werden als Desktop-Programme, können die Benutzer nicht alle Tricks und Kniffe sowie die wichtigen Neuerungen kennen. Informieren Sie die Anwender über Änderungen und neue Funktionen durch Meldeboxen oder über Links zu Produkt-Tour und Hilfeseiten.
Tipp: Fügen Sie solche Links an prominenten Stellen ein, ohne dabei jedoch von anderen wichtigen Funktionen oder Bedienelementen abzulenken. Außerdem sollte man diese Nachricht nach dem Lesen schließen oder bei Bedarf deren Anzeige ganz abschalten können.
Yammer zeigt eine erläuternde Nachricht unter dem Haupteingabefeld an. Per Klick auf das
Kreuz, lässt sich diese Meldung nach dem Lesen ausblenden.
Eine Funktion, auf die Computernutzer sich inzwischen voll und ganz verlassen, ist die Möglichkeit, Aktionen per Tastenkürzel oder Symbol rückgängig zu machen. Sie haben versehentlich ein Diagramm verändert, an dem Sie gerade arbeiten? Kein Problem: Ein Klick auf Strg + Z beziehungsweise CMD + Z bringt das Diagramm beziehungsweise das gerade aktive Dokument wieder in den vorherigen Zustand.
Die Rückgängig-Funktion ist ein entscheidendes Werkzeug für “gutmütige” Anwendungen. Sie sollten auch Ihre Web-Apps gutmütig gestalten. Nutzen Sie dazu entweder die universellen Tastaturkürzel oder blenden Sie eine entsprechende Nachricht ein, wie im folgenden Beispiel.
Sobald eine Nachricht gelöscht wird, blendet Gmail eine
Meldung ein, mit der Sie den Vorgang rückgängig machen können.
Löschaktionen können bei Writeboard bis zu zwei Monate nach dem Löschdatum rückgängig gemacht werden.
Menschen ändern manchmal ihre Meinung. Beim Löschen von kritischen Daten sollten Sie unbedingt zusätzliche Vorsichtsmaßnahmen einbauen, wenn es etwa um das Löschen von kompletten Projekt-Dateien in einer webbasierten Projektmanagement-Anwendung geht. Wenn Benutzer ein Projekt löschen, könnten Sie es, statt die Datei direkt auf ewig zu eliminieren, für einen bestimmten Zeitraum zwischenlagern.
Falls die Anwender später ihre Meinung ändern und das Projekt doch gerne zurück hätten, können Sie die Datei wiederherstellen. Die paar extra Megabytes zahlen sich auf jeden Fall aus, wenn Sie Ihren Kunden mit diesem zusätzlichen Komfort glücklich machen und ihm oder ihr jede Menge Ärger durch versehentlich oder vorschnell gelöschte Daten ersparen.
Wann immer Sie in Ihrer Anwendung “destruktive” Vorgänge wie das Löschen von Dateien oder kompletten Ordnern erlauben, sollten Sie vor diesem Schritt warnen. Blenden Sie zu dem Zweck eine Bestätigungsmeldung ein, um die Anwender vor unbeabsichtigten Löschaktionen zu schützen und sicherzustellen, dass eine bestimmte Handlung wirklich beabsichtigt ist.
Das ist vor allem dann wichtig, wenn die Löschen-Schaltfläche sehr nah neben anderen häufig verwendeten Schaltflächen positioniert ist. Falls Grobmotoriker versehentlich auf die Löschen-Schaltfläche klicken, sollten sie die Gelegenheit haben, die Folgen dieses Missgeschick wirksam zu unterbinden. Gehen Sie aber sparsam mit solchen Bestätigungsmeldungen um, damit die Anwender nicht unnötig viel zu klicken und Ihre Anwendung dadurch unnötig langwierig und benutzerunfreundlich wird.
Fazit
Kennen Sie die japanische Philosophie beziehungsweise Management-Methode Kaizen? Ziel der Methode ist die kontinuierliche Verbesserung durch kleine, aufeinander aufbauende Schritte. Benutzerschnittstellen-Entwicklung für Web-Anwendungen muss nicht von Anfang an perfekt sein, denn Sie haben die Möglichkeit, die Anwendung kontinuierlich zu verbessern und zu aktualisieren. Entwickeln Sie Ihre Anwendungen nach der Methode des Kaizens oder einer Art App-Evolution. Erlauben Sie sich, Ihren Code graduell zu verbessern und im wahrsten Sinne des Wortes weiter zu entwickeln.
Die “alte” Methode, Software auf CD-ROMs zu vertreiben, birgt einen gewaltigen Nachteil. Sobald die CDs gebrannt und an den Handel ausgeliefert waren, konnten Sie nichts mehr ändern – bis zum nächsten Update. Natürlich gibt es Patches zum Herunterladen und die ganze hinlänglich bekannte Palette der Bug Fixes. Aber den Ärger, den haben die Anwender, die das Patch oder Hotfix erst herunterladen und installieren müssen.
Bei Web-Anwendungen können Sie die Aktualisierung selbst vornehmen und die Benutzer Ihrer App kommen ohne eigenes Zutun in den Genuss einer verbesserten Anwendung. Der neue Ansatz der Software als Dienstleistung macht das möglich.
Noch einmal zum besseren Einprägen: Ihre Anwendung nicht sofort 100-prozentig sein. Falls etwas nicht so gut funktioniert, wie gedacht, können Sie es ändern. Das ist der Kaizen-Ansatz im Interface-Design: kontinuierliche, kleine, graduelle Verbesserungen. Versperren Sie sich Ihre Kreavitivät nicht durch die Angst, etwas perfekt machen zu müssen. Erlauben Sie sich aus Fehlern zu lernen und die Anwendererlebnisse für weitere Verbesserungen in Ihre Entwicklung einzubeziehen. Lebenslanges Lernen und kontinuierlicher Fortschritt sind die Devise.
(mm), ™
