1. SMART CLIENTS
Interaktionsparadigmen im Nutzungskontext
Webbrowser

2. Autoren & Firma
• Jan Groenefeld (User Interface Designer)
• Markus Kühner (User Interface Designer)
• Christian Kaspari (User Interface Designer)
• Dieter Wallach (User Interface Designer)
ERGOSIGN GmbH
Stuhlsatzenhausweg 69
66123 Saarbrücken
www.ergosign.de

3. Gliederung
• Thematische Einführung
• Usability Problemstellungen und
theoretische Lösungsansätze
• Praxisbeispiele
• Fazit

4. Buzzwords & ‘Trendsetter’
• Web2.0
• RIA
• Smart Client
• AJAX

5. Das ‘neue’ Web
Aber
Mehr
Discoverability Probleme
Interaktion (’Direct
Manipulation’)
‘Versteckte’
User Generated
Interaktionsmöglichkeiten
Content (’Read/Write-
Accessibility Probleme
Internet’, ’Social
Networking’)
Keine Gewährleistung von
Funktionsvielfalt
Barrierefreiheit, Web Standards
Höher, Schneller, Weiter Komplexer, Schwieriger

6. Das ‘neue’ Web
Aktuelle Entwicklung
• Verwendung verkaufsfördernder
Buzzwords
• Konzentration auf Marketing und Technik
• Bedürfnisse des Benutzers werden
vernachlässigt (Featuritis)
Überforderung des Benutzers durch
Funktionsvielfalt?

7. Webanwender 1.0
Einfachheit der
Webangebot
Hyperlinkphilosophie
vs.
Funktionsvielfalt und Applikation
Komplexität
Webanwender 2.0

8. Usability
Problemstellung
Lösen des ‘Applikation in
Applikation’-Problems?

9. ‘Applikation in Applikation’- Problematik
Erzeugung eines applikationsartigen Kontexts
Application
Window
Splash Screen
http://us.ajax13.com/en/ajaxtunes/index.jsp
Close Dialog

10. ‘Applikation in Applikation’- Problematik
Umgang mit ‘Zustandslosigkeit’
Upload
Reload

11. ‘Applikation in Applikation’- Problematik
Spezialfall: History-Buttons / Bookmarks
Löschen der History
Löschen privater Daten
http://www.mtv.de/overdrive/index.php
Undo-Funktion?
Ungewolltes
Verlassen der
Website!
Page Model
http://codinginparadise.org/projects/dhtml_history/testDhtmlHistory.html#4

12. Optimierungspotential
ausgewählter
Interaktionsparadigmen
Drag & Drop Edit in Place

13. Heranführen des Benutzers an
Funktionsvielfalt und Komplexität
Erfahrungsdefizit und mangelnde Discoverability
• Tutorials & Demonstrationen (z.B. Flash)
beim ersten Besuch der Website
• ‘Percieved Affordance’ von Controls
• Nachahmung physikalischer Mechanismen
• Cursor States
• Kontextsensitiv eingeblendete Controls
• mit gleichzeitigem Hinweis auf direkte Manipulation

14. Drag & Drop
Lösungsansätze
• Gripflächen
• Optisches ‘Herausheben’
aus dem Content. z.B.
durch Schlagschatten.
• farbliche ‘Aktivierung’
sowohl des Elements als
auch von evt. Zielflächen
http://www.mtv.de/overdrive/index.php

15. Edit in Place
Inkonsistente Darstellung
Discoverability
http://www.millstream.com.au/upload/code/tablekit/
http://24ways.org/examples/edit-in-place-with-ajax/
http://www.epointment.com/downloads/eeip/

16. Edit in Place
Lösungsansätze
• Kontextsensitiv eingeblendete Controls
• Tooltipp
• Cursor State
• Blinkender Cursor

17. Potential-Analyse am Beispiel von
www.mtvoverdrive.de
Inkonsequenter Einsatz von Drag&Drop

18. MTV Overdrive
Wireframe
Dragable Areas

19. MTV Overdrive ‘First Visit Tutorial’

20. Fazit
• Gezielter Einsatz neuer Interaktionskonzepte
• Frühzeitige Klassifizierung