Web 2.0 und Usability
Benutzerfreundliche Web-2.0-Anwendungen

Allgemein

Wer Ajax und Rich-Internet-Anwendungen (RIA) einsetzt, muss sich verstärkt Gedanken über die Benutzbarkeit machen, um die User nicht zu überfordern.

Ärgerliches Interfacing

Web 2.0 und Usability

Es ist ein geschäftsschädigendes Ärgernis: Wer bei E-Plus ein neues Handy bestellen möchte, sieht vor sich einen ansprechend gestalteten Shop mit einer Reihe von Auswahlkriterien zur Linken und einer Menge hübsch animiert eingeblendeter Mobiltelefone in der Mitte. Schränkt man die Anzeige mit Hilfe der Kriterien ein, werden die unpassenden Handys ebenso sanft wieder ausgeblendet. Live und in Farbe, ohne den gewohnten Klick auf einen Submit-Button oder den vermuteten Reload der Inhaltsseite.

So weit, so gut. Das Interface funktioniert so lange gut, bis der Anwender sich dafür entschieden hat, sich die Details eines Handys anzeigen zu lassen. Kehrt er von dieser Auswahl zurück, sind alle vorgenommenen Einstellungen verloren.

Schönes neues Web. Ajax und Rich Internet Applications (RIAs) auf Flash-Basis installieren eine Datenschicht zwischen Browser und Server. So kann der User in vordefinierten Grenzen mit seiner Web-Anwendung arbeiten, ohne dass diese auch nur ein einziges Mal mit dem Server in Verbindung tritt. Er kann Texte bearbeiten, Suchergebnisse live filtern, Objekte auf der Seite verschieben oder Formulare vom Programm ausfüllen lassen ? und das alles in der Arbeitsgeschwindigkeit einer Desktop-Software.

So erfreulich dieser technische Fortschritt ist, so ärgerlich ist häufig das Interfacing. Die Mensch-Maschine-Schnittstelle ist nur selten in der Lage, dem Benutzer einfach zu erklären, wie sie funktioniert. Dabei sind gerade Flash und Ajax durchaus in der Lage, die Benutzung von Datenbankabfragen einfacher zu machen.


Die Problemstellung

Web 2.0 und Usability

Auf den ersten Blick könnte man meinen, Usability-Probleme bei RIAs sind die gleichen wie bei normalen Webseiten. Das gilt auch für Icons. Sie müssen ebenso selbsterklärend funktionieren, und wenn sie das nicht tun, verzichtet man besser darauf oder beschreibt die Funktionalität zusätzlich mit Text.

Aber das Problem der Web-2.0-Usability ist subtiler. Die dynamischen und schnellen Anwendungen stehen im krassen Widerspruch zu gelerntem User-Verhalten: »Der Ottonormalverbraucher, der das Web seit ein paar Jahren nutzt, fühlt sich wohl mit dem Seiten-basierten Ansatz und dessen beschränkter Interaktivität, so klobig sie auch auf Gestalter wirken mag«, erläutert die britische Webdesignerin Donna Maurer.

Die Tatsache, dass eine Seite inhaltliche Veränderungen durchführt, ohne dass der Benutzer einen Link oder Button geklickt hat, zerstört das gelernte Surfverhalten, bei dem sich der Anwender daran gewöhnt hat, eine gewisse Zeit zu warten, bis ihm der Webserver das Ergebnis seiner Auswahl präsentiert. Er vertraut der Statusanzeige im Fuß des Browserfensters, die ihm signalisiert, dass gerade ein Datenaustausch stattfindet.

Möglicherweise glaubt der Benutzer gar nicht, dass er Seitenteile einfach verschieben oder bearbeiten kann. Zehn Jahre lang haben Webdesigner gepredigt, dass so etwas eigentlich nicht geht, und nun hat die Szene einen harten Weg vor sich, den User vom Gegenteil zu überzeugen.

Im Folgenden erhalten Sie einen kurzen Überblick über einige der wichtigsten neuen Möglichkeiten, wobei das Problempotenzial hinsichtlich der Benutzerführung analysiert und gute sowie schlechte Beispiele präsentiert werden.


Formular-Automatik

Web 2.0 und Usability

Ajax-Seiten enthalten Content, den der User zu Beginn nicht sieht. Erst bei bestimmten Verhaltensweisen des Anwenders wird der Content angezeigt. So können Registrierungsformulare zum Beispiel Hinweise darauf liefern, ob eine Benutzereingabe zulässig ist oder nicht. Das gilt vor allem für fest definierte Formatierungen, wie etwa die fünfstellige Postleitzahl oder die E-Mail-Adresse mit einem @ in deren Mitte.

Das gelernte Verhalten für solche Formulare sieht vor, dass derartige Eingabeprüfungen erst stattfinden, wenn der Benutzer sich zum Abschicken des Formulars entschlossen hat. In der Regel mündet die Eingabekritik dann in einer Fehlermeldung, die im Kopf oder Fuß der Seite erscheint. Hier zeigen Ansätze wie Ajax ihr geballtes Potenzial. Sie können bereits reagieren, wenn der User per Maus oder Tabulator-Taste zum nächsten Formularfeld wechselt. Die Fehlermeldung kann direkt neben dem jeweiligen Eingabefeld angezeigt werden.

Der Online-Shop von Gap präsentiert den Fehler direkt bei der fälschlicherweise geklickten Checkbox und zieht somit die gesamte Aufmerksamkeit des Users in den Bann. Prof. Myriam Yom von der Universität Göttingen spricht in diesem Zusammenhang vom Gesetz der Nähe: »Die Augen des Users verweilen für einen Moment beim geklickten Element. Unmittelbares Feedback muss also in der Nähe dieser Stelle gegeben werden.«

Um den Fehlercharakter zu unterstreichen, nutzt Gap ein optisch dominantes Rot auf einer sonst hauptsächlich weiß gehaltenen Seite.

Auch AOL schafft in seinem Webmail-Client die klare optische Hervorhebung, indem der normale Content mit einem Grauschleier optisch verdrängt wird. Doch das Gesetz der Nähe wird signifikant verletzt: Die Fehlermeldung erscheint zentriert auf dem Bildschirm, obwohl der betreffende Button in der Kopfleiste zu finden ist. Ein interessantes Hilfsmittel setzt Last.FM bei der Suche nach einem Benutzernamen ein. Ein kleiner Button direkt am Formularfeld erlaubt die Prüfung dieses einzelnen Elements. Die Prüfung könnte natürlich auch ohne Button erfolgen, doch hilft die Schaltfläche dem User, dabei die Kontrolle zu behalten und seine Aufmerksamkeit zu fokussieren.


Autocomplete

Web 2.0 und Usability

Eine sehr elaborierte Variante der Formularprüfung nennt sich Autocomplete oder Type ahead. Hierbei wird der Feldinhalt nach jedem eingegebenen Zeichen erneut geprüft. Das Formular liefert eine Liste der erlaubten Feldinhalte zurück, die mit der jeweiligen Buchstabenkombination beginnen. Suchmaschinen wie zum Beispiel Google ermöglichen so die Einschränkung der Trefferhäufigkeit, ohne dass die Suche vom Benutzer ausgelöst werden muss. Shops wie Quelle nutzen die Funktion vor allem, um die Eingaben zu standardisieren und somit Suchfehler zum Beispiel durch falsch geschriebene Begriffe zu minimieren.

Die Funktionalität ist den Benutzern aus der Adresszeile des Browsers bekannt. Insofern muss vermutlich nicht viel erklärt werden. Doch gibt es einen signifikanten Unterschied zwischen der Google-Umsetzung und der von Quelle. Will der User einen der vorgeschlagenen Begriffe auswählen, genügt bei Google, wie auch zum Beispiel im Internet Explorer das Drücken der Pfeiltaste nach unten bis zum gewünschten Begriff, und dann löst die Eingabetaste die Suche aus.

Bei Quelle hingegen muss der User die Hände von der Tastatur nehmen, seine Maus greifen und den gewünschten Begriff anklicken. Das ist paradox: Autocomplete ist eine Funktion, die die Arbeit mit Formularen erleichtern und beschleunigen soll. Stattdessen macht Quelle die Eingabe komplizierter.

Einzelne Interface-Elemente

An letzterem Beispiel sieht man, wie fein der Usability-Grad der Benutzerführung sein kann. Häufig steckt der Teufel im Detail. Klassische Interface-Elemente wie Buttons zeichnen sich dadurch aus, dass sie eine hohe wahrgenommene Aufforderung ausstrahlen. Der User weiß intuitiv
: Hier kann ich klicken. Was der Button aber oftmals nicht aussagt, ist, was genau nach einem Klick passieren wird. Manchmal ist der Button einfach zu klein, um die benötigte Information zu tragen. Das ist zum Beispiel beim Musikdienst Odeo.com der Fall. Hier gibt es bei Podcasts einen Button Subscribe. Klar, dass es hier um das Abonnement eines RSS-Feeds geht. Hier gibt es aber zwei signifikant unterschiedliche Möglichkeiten. Zum einen könnte der RSS-Feed direkt an einen RSS-Reader auf dem Client-Rechner übergeben werden (so kennt man das), zum anderen könnte Odeo selbst einen Web-RSS-Reader anbieten, wie Google und andere.

Letzteres ist der Fall. Das Abonnement wird nur in den Personalisierungsbereich My Audio geschrieben. Doch Odeo hat das Problem offensichtlich erkannt. Ein unübersehbarer Tooltipp direkt beim Button zeigt an, was der Klick auf die Schaltfläche konkret ausgelöst hat.
Ganz anders beim Social-Bookmarking-Tool Yigg. Der große Button auf der linken Seite jedes Eintrags beeinflusst offensichtlich die Userbewertung. Bei einem Klick erhöht sich der Wert, beim nächsten verringert er sich wieder. Yigg versäumt es, dem unerfahrenen Benutzer einen Hinweis zu geben wie: »Du hast dem Eintrag einen Pluspunkt gegeben/entzogen«


Drag and Drop

Web 2.0 und Usability

Eine der spannendsten technischen Neuerungen von Ajax und RIA ist die Möglichkeit, Inhalte auf einer Seite beliebig zu verschieben. Auch Drag and Drop trifft auf gelerntes Verhalten. Elemente, die zum Beispiel als Desktop-Fenster erkenntlich sind, legen die Verschiebbarkeit von Fenstern zumindest nahe. In Perfektion zu sehen ist das am Beispiel Youos.com.

Wird auf gelernte Metaphern verzichtet, fällt es dem Benutzer schwer, die Funktion zu identifizieren. Der Webmail-Client von AOL erlaubt das Verschieben von Mails in bestimmte Ordner, aber nicht in alle. Eine Begründung dafür gibt das System nicht.

Alternativ zum klassischen Fensterln bietet sich auch eine signifikante Veränderung des Mauszeigers an, wenn die Greiffläche des beweglichen Elements berührt wird. Der passende Mauszeiger wäre zum Beispiel das mit Pfeilspitzen ausgerüstete Kreuz, wie es bei Yahoo oder Windows Live zum Einsatz kommt.

In jedem Fall ist zu empfehlen, den Originalzustand eingeblendet zu lassen, bis der Benutzer sich für eine neue Position des Elements entschieden hat.

Inline-Scrolling und -Scaling

Die Möglichkeit, ganze Seitenteile zu verschieben, ist meist leichter darzustellen als die Option, Elemente per Mausbewegung zu verändern. Weebly nutzt für das Vergrößern und Verkleinern von Bildern die klassische Ecke rechts unten, die durch eine schräg schraffierte Darstellung hervorgehoben wird. Google Maps verwendet für eine ähnliche Funktion gleich zwei redundante Elemente, eine Kombination aus Plus- und Minus-Symbol oder einen Schieberegler.

Einen sehr sehenswerten Umgang mit diesem Thema zeigt die Detaildarstellung von bestimmten Modeartikeln auf Otto.de. In einem kleinen Flash-Film können die Kleidungsstücke gezoomt und der Bildausschnitt verschoben werden. Für das Zoomen benutzt Otto naheliegenderweise eine Lupe. Für das so genannte Panning, also die Verschiebung des Ausschnitts, gibt es rechts eine kleine Gesamtansicht, die mit einem roten Rechteck den eben angezeigten, vergrößerten Bereich markiert. Die Verschiebbarkeit des Rechtecks wird mit besagtem Pfeilspitzenkreuz symbolisiert.


Inline-Editing

Web 2.0 und Usability

Das Hinzufügen und Ändern von Inhalten ist für viele Websites ein wesentliches Funktionsmerkmal, gerade im Hinblick auf User-generierten Content. Die Vorzeigeanwendung Flickr weist bei den meisten Elementen mit einem kurzen edit auf die Bearbeitbarkeit hin, doch fehlt eine solche Option für die Veränderbarkeit des Titels. Auch der Austausch des Mauszeigers in ein Textmarker-Symbol reicht nicht. Dass der einfache Klick auf den Text eine Bearbeitungsmaske aufruft, ist kaum zu antizipieren.

Auch Protopage liefert zu wenig Feedback. Der Dienst erlaubt das Markieren von Nachrichten als gelesen, zeigt diesen Markierungsstatus aber nirgends an. Stattdessen wird die Nachricht nur noch mit der Titelzeile angezeigt, was auch eine Fehlfunktion des Buttons indizieren könnte.

Solcherart wird Misstrauen in Web-Anwendungen geschürt. Geradezu fatal wirkt sich eine Erfahrung aus, die der Benutzer beim Färben von Text auf Weebly macht. Er soll dazu ein Rechteck in einem Farbspektrum verschieben. Das funktioniert aber nur im rechten Teil der Farbpalette und der Text reagiert farblich nicht. Außerdem fehlt die Möglichkeit, den Farbfächer per Mausklick wieder zu schließen.

Teil-Aktualisierung und Live-Filter

Besonders genau müssen Webdesigner arbeiten, die Funktionen in ihre Site einbauen, mit denen Teile der Seite verändert werden, ohne dass der User diese direkt bearbeitet. Ein Beispiel ist das Umschalten zwischen Kartenansicht und Hybrid-Darstellung mit Straßennamen bei Google-Maps. Bei stark vergrößerter Darstellung der Karte kann der Mausklick auf den passenden Button völlig wirkungslos bleiben.

Ein gutes Beispiel bietet Musiclens. Der Equalizer, mit dem der Benutzer seine Geschmackspräferenzen definiert, hat eine grafische Entsprechung in Form eines Präferenzen-Gebirges auf der linken Seite. Der aktuell bewegte Bereich verändert deutlich sichtbar seine Farbe. Problematisch bei diesem Ansatz ist aber, dass sich die Musikauswahl im Fuß der Seite gleichzeitig verändert. Die schöne Grafik kann dem User die Aufmerksamkeit rauben, die er zur Beobachtung der Content-Veränderung dringend benötigt.

Der Karriereberater des Handelsblatts macht das besser. Er verzögert die neue Sortierung der Trefferanzeige durch eine Sanduhr. Doch auch diese Anwendung hat leider zwei Mängel. Die Auswahl einer Branche reagiert so empfindlich, dass sich die Checkboxen verschieben, während man gerade klicken möchte. Gleichzeitig zieht ein blinkendes Werbebanner auf der rechten Seite möglichst viel Aufmerksamkeit auf sich und lenkt den Benutzer ab.

Ein gelungenes Schieberegler-Interface zeigt der Spielehändler Sqoops. Software-Schachteln, die nicht zur veränderten Auswahl passen, werden sanft in den Hintergrund geschickt, und von dort holt sich die Anwendung auch neue, passende Elemente.


Fazit

Web 2.0 und Usability

Bei der Optimierung der Usability von Web-2.0-Anwendungen geht es um drei Faktoren. Der Benutzer muss die Funktionalität einer Anwendung und die von Interface-Elementen klar erkennen können. Zweitens braucht der Benutzer ein wenig Zeit, um seine Konzentration der veränderten Darstellung zu widmen. Im Zweifel sollten Sie sogar eine bewusste Verzögerung einprogrammieren. Und drittens muss die Benutzung ein klares, deutlich sichtbares Feedback abliefern. Merke: Aufmerksamkeit wird vor allem durch Farbe, Kontrast, Bewegung und das Gesetz der Nähe definiert.

Eine der großen Herausforderungen für die Gestalter liegt hier in der Abkehr vom Seitenparadigma. Bevor einzelne Anwendungen mit allen denkbaren Funktionen gespickt werden, sollten sich die Designer ein klares Bild davon verschaffen, wann User den Back-Button benutzen, wann sie Bookmarks setzen wollen, wie die Anwendungen in Suchmaschinen sichtbar werden und wie sie die User-Interaktion in der Applikation messen wollen, um zum Beispiel Optimierungen punktgenau anzusetzen oder Werbeeinnahmen zu erzeugen. Hier hat die Einheit Seite heute noch klaren Vorrang.