SMART CLIENTSInteraktionsparadigmen im Nutzungskontext

Webbrowser

Autoren & Firma

• Jan Groenefeld (User Interface Designer)

• Markus Kühner (User Interface Designer)

• Christian Kaspari (User Interface Designer)

• Dieter Wallach (User Interface Designer)

ERGOSIGN GmbHStuhlsatzenhausweg 6966123 Saarbrückenwww.ergosign.de

Gliederung

• Thematische Einführung

• Usability Problemstellungen und theoretische Lösungsansätze

• Praxisbeispiele

• Fazit

Buzzwords & ‘Trendsetter’

• Web2.0

• RIA

• Smart Client

• AJAX

Das ‘neue’ WebMehr

Interaktion (’Direct Manipulation’)

User Generated Content (’Read/Write-Internet’, ’Social Networking’)

Funktionsvielfalt

Höher, Schneller, Weiter

Aber Discoverability Probleme

‘Versteckte’ Interaktionsmöglichkeiten

Accessibility Probleme

Keine Gewährleistung von Barrierefreiheit, Web Standards

Komplexer, Schwieriger

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?

Einfachheit der Hyperlinkphilosophie

vs.

Funktionsvielfalt und Komplexität

Webanwender 1.0

Webanwender 2.0

Applikation

Webangebot

Usability Problemstellung

Lösen des ‘Applikation in Applikation’-Problems?

Application Window

‘Applikation in Applikation’- ProblematikErzeugung eines applikationsartigen Kontexts

Close Dialog

Splash Screen

http://us.ajax13.com/en/ajaxtunes/index.jsp

‘Applikation in Applikation’- ProblematikUmgang mit ‘Zustandslosigkeit’

ReloadUpload

‘Applikation in Applikation’- ProblematikSpezialfall: History-Buttons / Bookmarks

http://www.mtv.de/overdrive/index.php

http://codinginparadise.org/projects/dhtml_history/testDhtmlHistory.html#4

Undo-Funktion?

Ungewolltes Verlassen der Website!

Page Model

Löschen der History

Löschen privater Daten

Optimierungspotential ausgewählter

Interaktionsparadigmen

Drag & Drop Edit in Place

Heranführen des Benutzers an Funktionsvielfalt und Komplexität

• 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

Erfahrungsdefizit und mangelnde Discoverability

Drag & Drop

http://www.mtv.de/overdrive/index.php

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

Edit in Place

http://www.millstream.com.au/upload/code/tablekit/http://24ways.org/examples/edit-in-place-with-ajax/

http://www.epointment.com/downloads/eeip/

Inkonsistente Darstellung

Discoverability

Edit in Place

Lösungsansätze

• Kontextsensitiv eingeblendete Controls

• Tooltipp

• Cursor State

• Blinkender Cursor

Potential-Analyse am Beispiel von www.mtvoverdrive.de

Inkonsequenter Einsatz von Drag&Drop

MTV Overdrive

Wireframe

Dragable Areas

MTV Overdrive ‘First Visit Tutorial’

Fazit

• Gezielter Einsatz neuer Interaktionskonzepte

• Frühzeitige Klassifizierung