Usability – Neue Technik, alte Probleme
Dieser Fachartikel erschien im Leitfaden Online-Marketing
Wer Web 2.0-Funktionen einsetzt, muss sich verstärkt Gedanken über die Benutzbarkeit machen, um die User nicht zu überfordern.
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 dieser Kriterien ein, werden die unpassenden Handys live und in Farbe und ohne den gewohnten Klick auf einen „Submit“-Button oder den vermuteten Reload der Inhaltsseite sanft wieder ausgeblendet.
Soweit, so gut. Das angedachte Interface funktioniert so lange, bis man sich dafür entschieden hat, sich die Details eines Handys anzeigen zu lassen. Kehrt man von dieser Auswahl zurück, sind alle vorgenommenen Einstellungen verloren.
Schönes neues Web. AJAX und Rich Internet Applications, die sogenannten RIAs, auf Flash-Basis installieren eine Datenschicht zwischen Browser und Server. So kann der Nutzer 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 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
Auf den ersten Blick könnte man meinen, Usability-Probleme bei RIAs sind die gleichen, wie bei „normalen“ Websites. Aber das Problem der RIA-Usability ist subtiler. Die dynamischen und schnellen Anwendungen stehen im krassen Wider-spruch zu gelerntem Nutzerverhalten: „Der Otto Normalverbraucher, 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 Web-Designerin 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 User 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 Nutzer 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.
Die Stolperfallen
Im Folgenden finden Sie einen kurzen Überblick über einige der wichtigsten neuen Möglichkeiten. Das Problempotential hinsichtlich der Benutzerführung wird analysiert und anhand von guten und schlechten Beispielen veranschaulicht.
Automatische Formular-Erklärung
AJAX-Seiten enthalten Inhalte, die der Nutzer zu Beginn nicht sieht. Erst bei bestimmten Verhaltensweisen wird der Content angezeigt. So können Registrierungsformulare zum Beispiel Hinweise liefern, ob eine Eingabe des Nutzers 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 der Mitte.
Das gelernte Verhalten für solche Formulare sieht vor, dass derartige Eingabe-prüfungen erst statt finden, 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 Potential. Sie können bereits reagieren, wenn der Nutzer per Maus oder Tab-Taste zum nächsten Formularfeld wechselt. Die Fehlermeldung kann direkt neben dem entsprechenden Eingabefeld angezeigt werden.
Der Onlineshop von Gap (www.gap.com) präsentiert den Fehler direkt bei der fälschlicherweise geklickten Checkbox und zieht somit die gesamte Aufmerksamkeit des Users in den Bann. Professor 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 Inhalt 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 Nutzer dabei die Kontrolle zu behalten und seine Aufmerksamkeit zu fokussieren.
Autocomplete
Eine sehr elaborierte Variante der Formularprüfung nennt sich „Autocomplete“ oder „Type ahead“. Hierbei wird der Feldinhalt nach jedem eingegebenen Zeichen erneut geprüft und das Formular liefert eine Liste der „erlaubten“ Feldinhalte zurück, die mit der entsprechenden Buchstabenkombination beginnen. Suchmaschinen wie Google ermöglichen so die Einschränkung der Trefferhäufigkeit, ohne dass die Suche vom Benutzer ausgelöst werden muss. Shops wie der von 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. Doch gibt es zwei signifikante Unterschiede zwischen der Google-Umsetzung und der von Quelle. Will der Nutzer 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 Enter-Taste die Suche aus.
Bei Quelle hingegen muss der Nutzer 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 zum Beispiel Buttons, zeichnen sich dadurch aus, dass sie eine hohe „Aufforderung“ ausstrahlen. Der User weiß intuitiv: Hier wahr-genommene 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 Abonnieren 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, 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 „Tool-Tip“ 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 Nutzerbewertung. 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
Eine der spannendsten technischen Neuerungen von Ajax und RIAs 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 ist das am Beispiel Youos.com zu sehen.
Wird auf gelernte Metaphern verzichtet, fällt es dem Benutzer schwer, die Funktion zu identifizieren. Der Webmail-Client von AOL erlaubt das Verschieben von E-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 Inline-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 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 sogenannte 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 symbo-lisiert.
Inline-Editing
Das Hinzufügen und Ändern von Inhalten ist für viele Websites ein wesentliches Funktionsmerkmal, gerade im Hinblick auf nutzergenerierte Inhalte. Die Vorzeige-anwendung 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 gegen 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 entsprechenden Buttons indizieren könnte.
Auf diese Weise wird beim Nutzer 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. Zusätzlich 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 Site verändert werden, ohne dass der Nutzer diese direkt bearbeitet. Ein Beispiel ist die Umschaltung zwischen Kartenansicht und Hybrid-Darstellung mit Straßennamen bei Google-Maps. Bei stark vergrößerter Darstellung der Karte kann es passieren, dass der Mausklick auf den passenden Button völlig wirkungslos bleibt.
Ein gutes Beispiel bietet Musiclens. Der Equalizer, mit dem der Benutzer seine Geschmackspräferenzen definiert, hat eine grafische Entsprechung in Form eines Präferenzengebirges 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 Nutzer die Aufmerksamkeit rauben, die er zur Beobachtung der inhaltlichen 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 zwei Mängel. Bei der Auswahl einer Branche reagiert das System so empfindlich, dass sich die Checkboxen verschieben, während der Nutzer gerade klicken möchte. Gleichzeitig zieht ein blinkendes Werbebanner auf der rechten Seite möglichst viel Aufmerksamkeit auf sich.
Ein gelungenes Schieberegler-Interface zeigt der Spielehändler Sqoop. Software-Schachteln, die nicht zur veränderten Auswahl passen, werden sanft in den Hinter-grund geschickt und von dort holt sich die Anwendung auch neue, passende Elemente.
Fazit
Bei der Optimierung der Usability von Web 2.0-Anwendungen geht es um drei Faktoren. Erstens muss der Benutzer die Funktionalität einer Anwendung und von Interface-Elementen klar erkennen können. Zweitens braucht er ein wenig Zeit, um seine Konzentration der veränderten Darstellung zu widmen. Im Zweifel sollte man sogar eine „unnötige“ Verzögerung einprogrammieren. Und drittens muss die Benutzung ein klares, deutlich sichtbares Feedback abliefern. Denn: 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 Nutzer den Back-Button benutzen, wann sie Bookmarks setzen wollen, wie die Anwendungen in Suchmaschinen sichtbar werden und wie sie die Nutzerinteraktion in der Applikation messen wollen, um zum Beispiel Werbeeinnahmen zu erzeugen. Hier hat die Einheit „Seite“ heute noch klaren Vorrang.
Literatur
Bookmarking in AJAX-Anwendungen: www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
Besseres AJAX-Design: www.lukew.com/resources/articles/ajax_design.asp
Wer Web 2.0-Funktionen einsetzt, muss sich verstärkt Gedanken über die Benutzbarkeit machen, um die User nicht zu überfordern.
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 dieser Kriterien ein, werden die unpassenden Handys live und in Farbe und ohne den gewohnten Klick auf einen „Submit“-Button oder den vermuteten Reload der Inhaltsseite sanft wieder ausgeblendet.
Soweit, so gut. Das angedachte Interface funktioniert so lange, bis man sich dafür entschieden hat, sich die Details eines Handys anzeigen zu lassen. Kehrt man von dieser Auswahl zurück, sind alle vorgenommenen Einstellungen verloren.
Schönes neues Web. AJAX und Rich Internet Applications, die sogenannten RIAs, auf Flash-Basis installieren eine Datenschicht zwischen Browser und Server. So kann der Nutzer 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 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
Auf den ersten Blick könnte man meinen, Usability-Probleme bei RIAs sind die gleichen, wie bei „normalen“ Websites. Aber das Problem der RIA-Usability ist subtiler. Die dynamischen und schnellen Anwendungen stehen im krassen Wider-spruch zu gelerntem Nutzerverhalten: „Der Otto Normalverbraucher, 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 Web-Designerin 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 User 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 Nutzer 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.
Die Stolperfallen
Im Folgenden finden Sie einen kurzen Überblick über einige der wichtigsten neuen Möglichkeiten. Das Problempotential hinsichtlich der Benutzerführung wird analysiert und anhand von guten und schlechten Beispielen veranschaulicht.
Automatische Formular-Erklärung
AJAX-Seiten enthalten Inhalte, die der Nutzer zu Beginn nicht sieht. Erst bei bestimmten Verhaltensweisen wird der Content angezeigt. So können Registrierungsformulare zum Beispiel Hinweise liefern, ob eine Eingabe des Nutzers 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 der Mitte.
Das gelernte Verhalten für solche Formulare sieht vor, dass derartige Eingabe-prüfungen erst statt finden, 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 Potential. Sie können bereits reagieren, wenn der Nutzer per Maus oder Tab-Taste zum nächsten Formularfeld wechselt. Die Fehlermeldung kann direkt neben dem entsprechenden Eingabefeld angezeigt werden.
Der Onlineshop von Gap (www.gap.com) präsentiert den Fehler direkt bei der fälschlicherweise geklickten Checkbox und zieht somit die gesamte Aufmerksamkeit des Users in den Bann. Professor 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 Inhalt 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 Nutzer dabei die Kontrolle zu behalten und seine Aufmerksamkeit zu fokussieren.
Autocomplete
Eine sehr elaborierte Variante der Formularprüfung nennt sich „Autocomplete“ oder „Type ahead“. Hierbei wird der Feldinhalt nach jedem eingegebenen Zeichen erneut geprüft und das Formular liefert eine Liste der „erlaubten“ Feldinhalte zurück, die mit der entsprechenden Buchstabenkombination beginnen. Suchmaschinen wie Google ermöglichen so die Einschränkung der Trefferhäufigkeit, ohne dass die Suche vom Benutzer ausgelöst werden muss. Shops wie der von 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. Doch gibt es zwei signifikante Unterschiede zwischen der Google-Umsetzung und der von Quelle. Will der Nutzer 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 Enter-Taste die Suche aus.
Bei Quelle hingegen muss der Nutzer 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 zum Beispiel Buttons, zeichnen sich dadurch aus, dass sie eine hohe „Aufforderung“ ausstrahlen. Der User weiß intuitiv: Hier wahr-genommene 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 Abonnieren 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, 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 „Tool-Tip“ 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 Nutzerbewertung. 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
Eine der spannendsten technischen Neuerungen von Ajax und RIAs 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 ist das am Beispiel Youos.com zu sehen.
Wird auf gelernte Metaphern verzichtet, fällt es dem Benutzer schwer, die Funktion zu identifizieren. Der Webmail-Client von AOL erlaubt das Verschieben von E-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 Inline-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 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 sogenannte 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 symbo-lisiert.
Inline-Editing
Das Hinzufügen und Ändern von Inhalten ist für viele Websites ein wesentliches Funktionsmerkmal, gerade im Hinblick auf nutzergenerierte Inhalte. Die Vorzeige-anwendung 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 gegen 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 entsprechenden Buttons indizieren könnte.
Auf diese Weise wird beim Nutzer 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. Zusätzlich 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 Site verändert werden, ohne dass der Nutzer diese direkt bearbeitet. Ein Beispiel ist die Umschaltung zwischen Kartenansicht und Hybrid-Darstellung mit Straßennamen bei Google-Maps. Bei stark vergrößerter Darstellung der Karte kann es passieren, dass der Mausklick auf den passenden Button völlig wirkungslos bleibt.
Ein gutes Beispiel bietet Musiclens. Der Equalizer, mit dem der Benutzer seine Geschmackspräferenzen definiert, hat eine grafische Entsprechung in Form eines Präferenzengebirges 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 Nutzer die Aufmerksamkeit rauben, die er zur Beobachtung der inhaltlichen 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 zwei Mängel. Bei der Auswahl einer Branche reagiert das System so empfindlich, dass sich die Checkboxen verschieben, während der Nutzer gerade klicken möchte. Gleichzeitig zieht ein blinkendes Werbebanner auf der rechten Seite möglichst viel Aufmerksamkeit auf sich.
Ein gelungenes Schieberegler-Interface zeigt der Spielehändler Sqoop. Software-Schachteln, die nicht zur veränderten Auswahl passen, werden sanft in den Hinter-grund geschickt und von dort holt sich die Anwendung auch neue, passende Elemente.
Fazit
Bei der Optimierung der Usability von Web 2.0-Anwendungen geht es um drei Faktoren. Erstens muss der Benutzer die Funktionalität einer Anwendung und von Interface-Elementen klar erkennen können. Zweitens braucht er ein wenig Zeit, um seine Konzentration der veränderten Darstellung zu widmen. Im Zweifel sollte man sogar eine „unnötige“ Verzögerung einprogrammieren. Und drittens muss die Benutzung ein klares, deutlich sichtbares Feedback abliefern. Denn: 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 Nutzer den Back-Button benutzen, wann sie Bookmarks setzen wollen, wie die Anwendungen in Suchmaschinen sichtbar werden und wie sie die Nutzerinteraktion in der Applikation messen wollen, um zum Beispiel Werbeeinnahmen zu erzeugen. Hier hat die Einheit „Seite“ heute noch klaren Vorrang.
Literatur
Bookmarking in AJAX-Anwendungen: www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
Besseres AJAX-Design: www.lukew.com/resources/articles/ajax_design.asp