Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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:
[email protected]@soultank.ch
Halle 4 / Stand C26
38
75H U
76H U
[email protected]@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
[email protected]@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