1

09. März 2007

Human Human Human Human centredcentredcentredcentred Focus Focus Focus Focus –––– forforforfor a a a a brilliantbrilliantbrilliantbrilliant FutureFutureFutureFuture

Usability-Fallen bei Rich Internet Applications

Referat Orbit-iEX 2008

2H U

RIA und UsabilityRIA und Usability

AnnaLeiterin E-Commerce

Unsere Usabilityproblemesind gelöst.

Weil wir neu AJAX einsetzen ist unsere Seite benutzungsfreundlich!

2

3H U

ReferentenReferenten

Adrian Heydecker

� M A UZH

� Usability-Consultant soultank AG

Marcel B. F. Uhr

� Dr. sc. techn. ETH, Eur. Erg.

� Inhaber & CEO soultank AG

4H U

ProgrammProgramm

� Definitionen

� Nutzer

� Usability-Fallen

� Gegenmassnahmen

� Fazit

3

5H U

ProgrammProgramm

� Definitionen

� Nutzer

� Usability-Fallen

� Gegenmassnahmen

� Fazit

6H U

Rich Internet Applications

4

7H U

Definition RIADefinition RIA

KonvergenzKonvergenz

Rich Internet Application

8H U

Definition RIADefinition RIA

“Rich Internet applications (RIA) are web applications that have the features and functionality of traditional desktop applications. RIAstypically transfer the processing necessary for the user interface to

the web client but keep the bulk of the data [...] back on the application server.”

Englische AusgabeStand: 11.04.2008

5

9H U

Abgrenzung RIAAbgrenzung RIA

� Technologieunabhängig� Nicht nur AJAX

� Frameworkunabhängig� Adobe Flex

� OpenLaszlo

� GoogleWeb Toolkit

� …

� RIA ≠ Web 2.0� Aber RIA oft als Teil des Web 2.0 gesehen

10H U

RichnessRichness--SpektrumSpektrum: Technologien: Technologien

HTML „aufpeppen“

Eigenständige Applikation

AJAX

DHTML

Flash

Silverlight

Java Applet

Java Web Start

6

11H U

RichnessRichness--SpektrumSpektrum: Interaktionselemente: Interaktionselemente

HTML „aufpeppen“

Eigenständige Applikation

12H U

BeispieleBeispiele

Die Weissen Seitenwww.weisseseiten.ch

Photoshop Expresswww.photoshop.com/express

7

13H U

Usability

14H U

Definition UsabilityDefinition Usability

Mensch Interaktion System

QualitQualitäät der Interaktiont der Interaktion

8

15H U

Definition UsabilityDefinition Usability

"Die Usability eines Produktes ist das Ausmass, in dem es von einem bestimmten Benutzer verwendet werden

kann, um bestimmte Ziele in einem bestimmten Umfeld (Kontext) effektiv, effizient und zufriedenstellend zu

erreichen."

ISO 9241-110

16H U

Definition UsabilityDefinition Usability

ISO 9241-110

Benutzer

System

Aufgabe

Umfeld (Kontext)

Fokus nicht nur auf den Benutzer gerichtet, sondern auf die Erreichung der Ziele der gestellten Aufgabe

9

17H U

Definition UsabilityDefinition Usability

� Effektivität� Die Genauigkeit und Vollständigkeit, mit der Benutzer ein bestimmtes

Arbeitsergebnis erreichen

� Effizienz� Der im Verhältnis zur Genauigkeit und Vollständigkeit eingesetzte

Aufwand, mit dem Benutzer ein bestimmtes Ziel erreichen

� Zufriedenheit� Beeinträchtigungsfreiheit und Akzeptanz der Nutzung

ISO 9241-110

18H U

Die Usability-Toolbox

10

19H U

Die Die UsabilityUsability--ToolboxToolbox

� Aufgabenangemessenheit

� Selbstbeschreibungsfähigkeit

� Steuerbarkeit

� Erwartungskonformität

� Fehlertoleranz

� Individualisierbarkeit

� Lernförderlichkeit

ISO 9241-110

20H U

ProgrammProgramm

� Definitionen

� Nutzer

� Usability-Fallen

� Gegenmassnahmen

� Fazit

11

21H U

Im Kopf eines Nutzers

22H U

Interaktion mit InterfaceInteraktion mit Interface--ElementenElementen

Wahrnehmung Interface-Elemente

Abgleich mit Vorwissen Aufbau von

Erwartungen

Abgleich mit Handlungszielen

Entscheid für ein Element

Ausführen der Aktion

Wahrnehmung des Resultats

Evaluation des Resultats

Planung von nächsten Schritten

12

23H U

Mentale ModelleMentale Modelle

� Bügel umklammern� Splint ziehen� Werfen-> Explosion

� Bügel drücken

-> Flamme

� Bügel loslassen

� Rumpf aufschrauben

-> Aschenbecher

24H U

NutzertopologieNutzertopologie

Verschiedene Nutzertypen

13

25H U

ProfiProfi

PeterStudent der Informatik

Kennt Unterschied von Kennt Unterschied von Kennt Unterschied von Kennt Unterschied von RIAsRIAsRIAsRIAs und und und und WebseitenWebseitenWebseitenWebseiten

• Kennt alle Web-Technologien • Nutzt Browser-Extensions• Hat einen RSS-Reader• Schreibt ein Blog• Probiert jede RIA aus

26H U

FortgeschritteneFortgeschrittene

MariaKaufmännische Angestellte

Kennt Unterschied von Webseiten Kennt Unterschied von Webseiten Kennt Unterschied von Webseiten Kennt Unterschied von Webseiten zu zu zu zu OfflineOfflineOfflineOffline----ApplikationenApplikationenApplikationenApplikationen

• Klickt meist nur 1x auf Links• Gibt URLs direkt ein• Nutzt Bookmarks• Kennt Backbutton• Kennt Browser-Ladeanzeige• Hat sich D‘n‘D abgewöhnt

14

27H U

AnfAnfäängernger

KlausLaborant im Ruhestand

Kann Web nicht von Offline Kann Web nicht von Offline Kann Web nicht von Offline Kann Web nicht von Offline unterscheidenunterscheidenunterscheidenunterscheiden

• Doppelklickt auf Links• Gibt URLs in Google ein• Das Internet ist das blaue „e“• Kämpft sich irgendwie durch

28H U

Verteilung Web-Wissen

15

29H U

ProgrammProgramm

� Definitionen

� Nutzer

� Usability-Fallen

� Gegenmassnahmen

� Fazit

30H U

Steuerbarkeit

16

31H U

GedankenexperimentGedankenexperiment

� Wir surfen im Netz und suchen die Orbit-iEX-Seite

� Wir filmen die Surfsequenz

� Wir erstellen eine DVD� Mit Kapitelmarken

� Mit DVD-Menü

� Frage: Wie würde Ihr Menü aussehen?

32H U

Die Suche im WebKapitelauswahl

Kapitel 1

Die SucheingabeKapitel 2

Die Trefferliste

Kapitel 3

Der Messe-Seite

◄ Zurück zum Hauptmenü Film starten ►

17

33H U

Bedienung im Web Bedienung im Web äähnelt einer DVDhnelt einer DVD

Auf Ihrer Fernbedienung

Im Webbrowser

34H U

BeispieleBeispiele

Olatwww.olat.uzh.ch

18

35H U

Erwartungskonformität

36H U

Steuerbarkeit in einer RIASteuerbarkeit in einer RIA

-> Steuerung in einer RIA erwartungskonform gestalten

19

37H U

Erwartungen an die SteuerbarkeitErwartungen an die Steuerbarkeit

HTML „aufpeppen“

Eigenständige Applikation

Wenn etwas aussieht wie eine Webseite ….

… dann sollte es auch genauso bedienbar sein!

OLAT

-> Seitenwechsel modellieren

38H U

Modellierung von SeitenwechselnModellierung von Seitenwechseln

� Vorteile� Backbutton funktioniert

� Öffnen in neuem Tab funktioniert

� Bookmarks funktionieren

� URL kann weitergegeben werden

� Suchmaschinenfreundlich

� Nachteile� Backbutton ist keine „Undo-Funktion“

� Modellierung eher für „HTML aufpeppen“ als für „eigenständige Applikation“ geeignet

� Benötigt Knowhow und Ressourcen

20

39H U

Experiment 1 zum SeitenwechselExperiment 1 zum Seitenwechsel

� Experiment� Google Maps aufrufen. »

� Einen Ort suchen (z.B. Luzern, Schweiz)

� Karte verschieben

� Eine anderen Ort suchen (z.B. Zug, Schweiz)

� Kartentyp ändern (z.B. Satellit)

� Backbutton benutzen

� Resultat� Wir sind wieder in Luzern

40H U

Experiment 2 zum SeitenwechselExperiment 2 zum Seitenwechsel

� Experiment� map.search.ch aufrufen. »

� Einen Ort suchen (z.B. Luzern)

� Karte verschieben

� Eine anderen Ort suchen (z.B. Zug)

� Kartentyp ändern (z.B. Karte)

� Backbutton benutzen

� Resultat� Wir sind immer noch in Zug

� Nur die letzte Veränderung (Kartentyp) wurde wiederhergestellt

21

41H U

Vergleich der WebapplikationenVergleich der Webapplikationen

� Google Maps� Neue Suche in Google Maps entspricht dem Laden einer neuen Seite

� Verschieben und Kartentyp entspricht dem Scrollen und ist nicht per Backbutton erreichbar

� map.search.ch� Wechsel des Kartentyp in map.search.ch entspricht dem Laden einer

neuen Seite

42H U

FolgerungenFolgerungen

� Modellierung� Seitenwechsel müssen in RIAs bewusst modelliert werden

� „Faulheit“� Wenn man nichts unternimmt, dann gibt es keine

Navigationsmöglichkeiten mit dem Browser

� Konventionen� Existieren selbst für Standardinteraktionen wie „Kartensuche“ noch nicht

� Nutzererwartungen� Am besten über Usability-Tests bestimmen und in Modellierung

einpflegen

22

43H U

Aufgabenangemessenheit

44H U

23

45H U

46H U

24

47H U

Die Die FeaturitisFeaturitis--KurveKurve

Quelle: Kathy Sierra www.shmula.com/

48H U

Die Die FeaturitisFeaturitis--KurveKurve

25

49H U

BeispieleBeispiele

Immo Searchhttp://immo.search.ch

50H U

26

51H U

Wege zur Kur von Wege zur Kur von „„FeaturitisFeaturitis““

� Ebene Applikation� Features weglassen (braucht Mut)

� Ebene Nutzer� Wichtige und häufige Aufgaben identifizieren

� Aufgaben unterscheiden nach Nutzergruppen

� Die wichtigsten Aufgaben prominent in GUI platzieren

� Ebene Interface� Gruppieren von ähnlichen Aufgaben (sog. Chunking)

� Weniger Menü-Items, dafür mehr Menüebenen

� 7 ± 2 -Regel beachten

52H U

Selbstbeschreibungsfähigkeit

27

53H U

SelbstbeschreibungsfSelbstbeschreibungsfäähigkeithigkeit

Quelle: Steven Krug (2000): Don´t make me think

54H U

BeispieleBeispiele

Virtueller Postschalterwww.post.ch/de/uk-virtueller-postschalter.htm

28

55H U

SelbstbeschreibungsfSelbstbeschreibungsfäähigkeithigkeit

Verschicken

Shop

Empfangen

Infodesk

InternetInternet--CornerCorner

56H U

FeedbacksFeedbacks

� Fragen im Web 1.0� Muss ich warten?

� Wie lange wird es noch dauern?

� Habe ich das Formular abgeschickt?

� Wo im Formular ist der Fehler?

� Fragen im Web 2.0� Hat sich auf der Seite überhaupt etwas

verändert?

� Habe ich eine Aktion ausgelöst?

� Wo sind meine Daten?

29

57H U

Lernförderlichkeit

58H U

BeispieleBeispiele

Knorr Rezeptdatenbankwww.knorr.ch

Virtueller Postschalterwww.post.ch/de/uk-virtueller-postschalter.htm

30

59H U

Methode Methode „„HolzhammerHolzhammer““

60H U

Weitere Fallen

31

61H U

Weitere Weitere UsabilityUsability--ProblemeProbleme von von RIAsRIAs

� Bedienelemente� Kein Klick, Einfachklick oder Doppelklick

� Rechtsklick – Kontextmenü Browser

� Mittelklick – Tabbed Browsing

� Scrollen mit Mausrad

� Schriftgrössen zu klein / nicht einstellbar

� Technik� Internetverbindung stockt, keine frischen Daten

� Session timeout

� Konflikte mit Tastaturshortcuts und Mausgesten

62H U

Fallen im EntwicklungsprozessFallen im Entwicklungsprozess

� Zeit- und Geldnot

� Modularisierung� Verwendung vorgefertigte GUI Komponenten

� Mischung mit Code von Drittherstellern

� Verwendung von Frameworks und deren Defaults

� Programmierer = Gestalter� Unkenntnis von Designprinzipien

� Unkenntnis der Nutzer

� Fokus auf Funktionaliät

� Fokus auf Technik / Machbarkeit

� Verwendung von unausgereifter Technik (AJAX, …)

32

63H U

ProgrammProgramm

� Definitionen

� Nutzer

� Usability-Fallen

� Gegenmassnahmen

� Fazit

64H U

Nutzerperspektive einnehmen

33

65H U

User User CenteredCentered DevelopmentDevelopment

Projekt-Definition

Konzeption Planung Herstellung Betrieb

Usability-Testing

Benutzerbefragung

Benutzer- und Aufgabenanalyse

Usability-Prototyping

Expert Review

66H U

BenutzerBenutzer-- und Aufgabenanalyseund Aufgabenanalyse

34

67H U

UsabilityUsability--PrototypingPrototyping

68H U

UsabilityUsability--TestingTesting

35

69H U

UsabilityUsability--TestingTesting

70H U

ProgrammProgramm

� Definitionen

� Nutzer

� Usability-Fallen

� Gegenmassnahmen

� Fazit

36

71H U

Fazit: RIA und UsabilityFazit: RIA und Usability

AnnaLeiterin E-Commerce

Unsere Usabilityproblemesind gelöst.

Weil wir neu AJAX einsetzen ist unsere Seite benutzungsfreundlich!

72H U

Zwei Wege fZwei Wege füühren zum Zielhren zum Ziel

HTML „aufpeppen“

Eigenständige Applikation

Wenn etwas aussieht wie eine Webseite ….

… dann sollte es auch genauso bedienbar sein!

Lassen Sie Ihre Nutzer den Browser vergessen!

37

73H U

Kenne Deinen Nutzer!

09. März 2007

Human Human Human Human centredcentredcentredcentred Focus Focus Focus Focus –––– forforforfor a a a a brilliantbrilliantbrilliantbrilliant FutureFutureFutureFuture

Danke für die Aufmerksamkeit

Fragen und Anregungen an:

adrian.heydecker@soultank.chmarcel.uhr@soultank.ch

Halle 4 / Stand C26

38

75H U

76H U

adrian.heydecker@soultank.chadrian.heydecker@soultank.ch

� Adrian Heydecker

� M A UZH

� Usability-Consultant bei soultank AG

� Studium Uni Zürich� Kommunikationswissenschaft

� Informatik

� Assistent Uni Zürich� Medienpsychologie

� Nutzung und Wirkung Onlinemedien

� Hypertextforschung

� Dozent Hochschule Luzern� Usability & User Experience

39

77H U

marcel.uhr@soultank.chmarcel.uhr@soultank.ch

� Marcel B. F. Uhr

� Dr. sc. techn. ETH, Eur. Erg.

� Inhaber & CEO soultank AG

� Studium ETH Zürich� Biologie

� Ergonomie

� Doktorat ETH Zürich� Fahrsimulation

� Zertifizierung� Europa Ergonom / CREE

� Dozent an versch. Hochschulen� Software-Ergonomie & Usability

78H U

www.soultank.chwww.soultank.ch

� Unternehmen� Seit 1996 im Bereich Usability und

Ergonomie tätig

� 2000 Gründung soultank AG in Zug

� Hochqualifizierte Spezialisten

� Betrieb eines Usability-Labors in Zug

� Filiale in Bern seit Mai 2007

� Europaweit tätig

� Tätigkeitsfeld� Usability & Ergonomie

� Simulation & Training

� Innovation & Technologie