Usability Im Web 2.0

Usability im Web 2.0 Multimediatreff XXI Web 2008: Konzeption & Praxis 29. September 2007

Stefan Nitzsche

Web-Entwickler

Engagement:

Webkrauts

German Chapter der Usability Professionals Associaton e.V.

Inhalt

Vorstellung

Inhalt

Wer nutzt/braucht das Web 2.0?

Neue Technologien, neue Probleme

Veränderte Anforderungen an Usability im Web 2.0

Veränderung von Heuristiken und Konventionen

Entwicklung von Usability-Evaluation

Expertenmeinungen unter der Lupe

Exkurs: Usability in Social Networks

Exkurs: Zugänglichkeit im Web 2.0

Zielgruppendefinition

Gemeinschaft aller Web 2.0-Benutzer

Konsum: ≈ 90 %

Gelegentliche Teilnahme: ≈ 10 %

Aktive Teilnahme: < 1 %

0,16 % aktive Teilnahme bei YouTube

Ausnahme: Wikipedia (5 % aller Seitenbesuche dienen dem Editieren)

Voraussetzungen

Breitband-Internet-Anschluss

Surfverhalten: „always on“ oder zumindest von Zeit und Traffic unabhängige Benutzung

PC mit neuster Browsergeneration

Entwicklung (USA)

2005: 2 % des US-Datenverkehrs

2007: 12 % des US-Datenverkehrs

Jedes vierte Unternehmen lädt Konsumenten ein, zur Erklärung, Unterstützung, Bewerbung oder Erweiterung ihrer Produkte beizutragen.

Mehr als die Hälfte aller Unternehmen haben bereits Blogs oder Wikis eingerichtet oder zum Einsatz inner- und außerhalb des Unternehmens geplant.

Internetnutzer in Deutschland (2007)

40,8 Millionen Deutsche im Netz

57 % der weiblichen Bevölkerung ist online

Bei den 50- bis 59-Jährigen beider Geschlechter sind 64,2 % online

4,9 Millionen zwischen 14 und 19 Jahre

5,1 Millionen über 60 Jahre

Hype

3 % besuchen gelegentlich virtuelle Welten (z.B. Second Life)

Bekanntheit: 73 % haben schon einmal davon gehört

Inhalt

Vorstellung

Inhalt

Neue Technologien, neue Probleme (1)

Web 1.0: Der Seiten-Gedanke

Sammlung von Dokumenten

Visuelle Darstellung von Daten in einem Fenster

1:1-Beziehung zwischen Seite und URL

Jede Seite gibt es, vollständig geladen, nur in einem einzigen Zustand

Neue Technologien, neue Probleme (2)

Web 2.0: Der Anwendungsgedanke

Aus Dokumenten werden Anwendungen

Komplexere Anwendungen erfordern komplexere Schnittstellen

Webanwendungen basieren auf Seiten, die ihren Zustand (vermeintlich) ändern können

Inhalt

Vorstellung

Inhalt

Erlernbarkeit von User Interfaces (UI)

Aufforderung (Elemente aus anderen Bereichen)

Training (Status-/Fehlermeldung, Tooltips)

Schnittstellen (direkte Interaktion mit Daten)

Reize (Ton/Bewegung/Farbe/Kontrast/Transparenz)

Inhalt

Vorstellung

Inhalt

Veränderung von Heuristiken (1)

Sichtbarkeit des Systemstatus

Ein System muss den Benutzer jederzeit angemessen darüber informieren, was passiert.

Web 1.0: Der Browser ist das System

Web 2.0: Die Anwendung ist das System

Übereinstimmung zwischen System und Wirklichkeit

Ein System muss die Sprache des Benutzers sprechen. Informationen müssen in natürlicher und logischer Reihenfolge dargestellt werden.

Web 1.0: Liste

Web 2.0: Tag Cloud

Beispiel: Tag Cloud

Nutzerkontrolle und -freiheit

Benutzer benötigen einen „Notausgang“, um einen ungewünschten Zustand ohne Dialog zu verlassen. Die Browser Buttons müssen unterstützt werden.

Web 1.0: Browser Buttons naturgemäß mit Funktion

Web: 2.0: Browser Buttons bleiben ohne Anpassung ohne Funktion

Konsistenz und Standards

Benutzer brauchen sich nicht fragen, ob verschiedene Wörter, Situationen oder Aktionen dasselbe meinen. Plattformkonventionen müssen befolgt werden.

Web 1.0: simple Struktur, einfache Benutzererwartung

Web 2.0: komplexe Anwendungen, kaum Standards

Fehlervorbeugung

Auftreten von Problemen verhindern ist viel besser als gute Fehlermeldungen.

Web 1.0 = Web 2.0

Erkennen anstatt Erinnern

Objekte, Aktionen und Optionen müssen sichtbar und intuitiv benutzbar sein.

Strategien/Abläufe brauchen nicht im Gedächtnis behalten werden.

Instruktionen für den Systemgebrauch müssen intuitiv auffindbar sein.

Web 1.0 = Web 2.0

Flexibilität und Effizienz

Alternativen können unbemerkt von neuen und unerfahrenen Benutzern die Interaktion für Expertennutzer beschleunigen.

Web 2.0: Hier kann AJAX ein echter Mehrwert sein (Vorschläge: Google Suggest, Tastaturkürzel: Google Mail)

Ästhetisches und minimalistisches Design

Dialoge dürfen keine Informationen beinhalten, die irrelevant sind oder selten benötigt werden. Irrelevante Informationen konkurrieren direkt mit relevanten Informationen.

Web 1.0: Hier wird die Regel bereits häufig ernst genommen.

Web 2.0: Hier ist das Design oft sehr überladen, vollgestopft mit kleinen Icons, Bildchen, Tag Clouds, Blogrolls, etc. (Enthusiasmus-Phase).

Benutzern muss geholfen werden, Fehler zu erkennen, zu diagnostizieren, und sich davon wieder zu „erholen“

Fehlermeldungen müssen in einfacher Sprache formuliert sein, das Problem exakt beschreiben und eine konstruktive Lösung vorschlagen.

Web 2.0: Hier können Technologien wie z.B. Echtzeit-Validierung von Benutzereingaben oder Tooltips eingesetzt werden.

Hilfe und Dokumentation

Oft ist es notwendig, Hilfe oder Dokumentation anzubieten. Diese Informationen müssen leicht zu durchsuchen sein, und konkrete Schritte aufzählen, die zur Problemlösung beitragen.

Web 1.0 = Web 2.0

Neue Heuristiken (1)

Niemals die Navigation per AJAX aufbauen

„ Polling“ führt zu Performance-problemen und erhöhtem Datenverkehr

Lesezeichen/Deep Links zulassen

Ansprechbarkeit signalisieren, aber während Prozessen Aktionen verhindern

Nicht zu schnell, aber auch nicht zu langsam

Zuviel Code verlangsamt selbst moderne Browser

Graceful Degradation (Best Practice bei geringem AJAX-Einsatz)

Progressive Enhancement (Best Practice bei aufwändigem AJAX-Einsatz)

Den Benutzer nicht durch unaufgeforderte Aktualisierungen überraschen

Echtzeit-Validierung und Vorschläge immer mit Zeitverzögerung einblenden

Jeder AJAX-Einsatz muss dem Benutzer einen Mehrwert bringen

Zur Zeit beherrscht kein Mobile Device XMLHttpRequest, Alternativen frühzeitig einplanen und implementieren

Veränderung von Konventionen (1)

Die Link-Konvention

Links sollen unterstrichen werden. Eigentlich. In Webanwendungen sind Links Möglichkeiten zur Interaktion, oft aber nicht zum Aufruf von Seiten des gleichen Angebots oder zu Seiten außerhalb des Angebots.

Müssen sie also unterstrichen werden?

Web 1.0: Die Konventionen zur Positionierung von Elementen sind etabliert und kommen häufig aus Offline-Medien.

Web 2.0: Konventionen, wenn man sie denn jetzt schon als solche bezeichnen kann, kommen eher aus dem Bereich Software.

Gestaltung von User Interfaces (UI), die vermeintlich das Beste aus Software und Webseiten vereinen verhindern oft, dass Kernfunktionalitäten entdeckt werden.

Beispiel: Versteckte Funktionalität (ZDFmediathek)

Neue Konventionen (1)

Keine Metaphern mixen

Seiten-Gedanke/Anwendungsgedanke

Web 1.0/Web 2.0

Bisher weiß man nicht genau, ob man z.B. Drag & Drop als Interaktions-strategie in Oberflächen empfehlen soll, oder nicht.

Bei Betriebssystemen (homogenes UI)

sind Design-Konventionen vorgeschrieben/ empfohlen

besitzt alles ein gemeinsames Look & Feel

im Web (heterogenes UI) fehlen diese Konventionen.

Inhalt

Vorstellung

Inhalt

Entwicklung von Usability Evaluation (1)

These: Probandentests werden zunehmen!

Qualität von Heuristiken und Konventionen ist noch nicht optimal

Bei komplexen Anwendungen ist der Probandentest unter Umständen wirtschaftlicher

Entwicklung von Usability Evaluation (2)

These: Eye Tracking wird zunehmen!

Veränderungen müssen wahrgenommen werden

Durch Anwendungscharakter fühlen sich die Nutzer nicht zu einer Orientierungsaktion veranlasst

Kognitiver Aufwand wird vermieden

Frustration entsteht, wenn der Benutzer keine Veränderungen bemerkt

Inhalt

Vorstellung

Inhalt

„ Der Hype um Web 2.0 verleitet Internet-Firmen dazu, die Grundregeln guten Designs zu ignorieren“

„ Unternehmen laufen Gefahr, die Nützlichkeit von Websites für die Mehrheit der Nutzer zu vermindern, denn eine Optimierung auf kollaborative Web-2.0-Funktionen bringt nur einer Minderheit einen Vorteil.“

Inhalt

Vorstellung

Inhalt

Exkurs: Usability in Social Networks (1) (Registrierungsprozess)

Für die Registrierung unbedingt benötigte Daten (Pflichtfelder):

Vorname, Name

E-Mailadresse (zur Aktivierung und Korrespondenz)

Benutzername

Passwort (und Wiederholung)

Captcha

AGB/Datenschutz bestätigen

Features des Formulars:

Benutzername wird vorgeschlagen, basierend auf E-Mail-Adresse, sowie Vorname und Name (AJAX)

Passwort und Wiederholung werden in Echtzeit auf identische Schreibweise überprüft (AJAX)

Captcha sollte aus wenigen, großen Buchstaben bestehen, die nicht zu sehr verfremdet sind, sowie über eine alternative Audio-Ausgabe, um fehlsichtigen Personen den Zugang zu erleichtern

Rückmeldung bei invaliden Eingaben:

Ein korrekt wiedergegebenes Captcha kann beim zweiten Mal ausgeblendet werden

Fehler müssen serverseitig (Fallback bei deaktiviertem JavaScript), zusätzlich aber in Echtzeit (AJAX) abgefangen werden

Rich Error Messages: freundliche, nicht zu grelle, aber dennoch auffällige Fehlermeldungen in direkter Nachbarschaft zur invaliden Eingabe, die den Fehler benennen und gleichzeitig Lösungsvorschläge machen