Neue Interfaces und Usability
Frühjahrsputz

Interface-Experiment

Neue Interfaces und Usability

In 15 Jahren Webdesign gab es eine Vielzahl von Experimenten, neue Benutzerschnittstellen zu entwerfen. Die meisten Versuche sind gescheitert. Nicht weil die technische Umsetzung schlecht war, sondern weil die Benutzer den Systemen nicht genug Zeit und Aufmerksamkeit einräumen wollten, um die Philosophie hinter der Benutzerführung zu erlernen. Und weil Metaphern aus der Realwelt ? etwa die dreidimensionale Bewegung im Online-Shop ? nicht ohne weiteres den angestrebten Mehrwert in der Bedienung liefern.

Gerade im Web ist das Interface-Experiment heikel, denn es gibt praktisch zu jedem Webshop und jeder Site eine Alternative von der Konkurrenz, die mit einem anderen Ansatz arbeitet. Wer besser navigiert, gewinnt.

Technische Weiterentwicklung

Potenzielles menschliches Versagen ist das Damoklesschwert schlechthin. Die technischen Probleme früherer Jahre sind weitgehend überwunden. Mit Java, Flash und Ajax haben sich mittlerweile drei Grundsysteme herauskristallisiert, die fast auf jedem Browser funktionieren, auf den meisten Plattformen ähnlich aussehen und fast jede erdenkliche Interaktion ermöglichen. Auch die Bandbreiten steigen und erlauben den schnellen Transfer komplexerer Anwendungen, ohne dass der Geduldsfaden des Anwenders reißt.

Java hat sich im Web für Einzelapplikationen etabliert, in denen der Benutzer länger verweilt. Flash und Ajax haben ihren festen Platz im Webdesign eingenommen. Ersteres hat nicht zuletzt durch Flash-Videos auf Youtube eine optimale Durchdringung der Browser-Landschaft erreicht, obwohl es sich immernoch um eine proprietäre Zusatzsoftware handelt. Ajax dagegen fußt auf offenen Standards und setzt nur einen halbwegs aktuellen Browser voraus.

Mit welcher Technik Sie Ihr neues Interface etablieren, steht Ihnen also frei. Limitiert sind Sie aber in der Form der Ausgestaltung. Zehn Jahre lang haben deutsche Onliner gelernt, dass Webseiten von Seite zu Seite gesteuert werden, dass Formularinhalte erst abgeschickt werden müssen, bevor der Server sie auswertet, und dass die Layouts auf Webseiten in den allermeisten Fällen starr und unbeweglich sind. Nun sorgen Ajax und Flash dafür, dass das alles nicht mehr gilt. Der Webdesigner erhält den umfassenden Lehrauftrag, die User behutsam an die neuen Möglichkeiten heranzuführen. Hinweise zur Benutzung von neuen Interfaces müssen in der heutigen Frühphase sicher deutlicher und direkter ausfallen, als das in fünf Jahren noch nötig sein wird.

Die folgenden sechs Beispiele mögen Ihnen Anregungen für die Weiterentwicklung der Website geben. Sie sollen Sie gleichzeitig aber auf die Usability-Probleme der Lösungen hinweisen.

Drag and Drop

Nehmen Sie sich Zeit für einen kurzen Ausflug auf die Website von Panic Goods. Im dortigen Shop setzen die Designer eine Metapher aus der Realwelt gekonnt mit neuen Techniken um: Der geneigte Käufer darf die von ihm gewählten Artikel mit der Maus sprichwörtlich in den Warenkorb ziehen und dort ablegen. Will er einen Artikel löschen, zieht er ihn wieder heraus und lässt ihn fallen, dann verpufft das ungewünschte Stück in einer Staubwolke.

Drag and Drop ist ein angenehmes Interface, wenn es dem Benutzer die Arbeit leichter macht. Dieser ist es gewohnt, in seinem Betriebssystem Dateien zu verschieben, Programme zu starten und Abfall im Müll zu entsorgen, indem er Drag and Drop benutzt. Ähnliches kann auch auf Webseiten funktionieren. Das schiere Öffnen eines einzelnen Menüpunkts ist hingegen per Mausklick leichter zu bewerkstelligen. Panic Goods zeigt den richtigen Weg auf, der bei einer umfassenden Veränderung der Benutzerführung zu gehen ist. Der Warenkorb ist mit einem überdeutlichen Hinweis ausgestattet, dass Artikel dorthin gezogen werden können. Der User probiert es, erlernt es und wird diese Funktion vielleicht beim nächsten Einkauf in einem anderen Shop bereits vermissen.

Klickfreie Navigation

Neue Interfaces und Usability

Eher ein Oeuvre der Netzkunst als ein realitätstaugliches Interface zeigt die Site Dontclick.it. Die komplette Website wird ohne Mausklick navigiert. Der Designer hat sich mitunter perfide Mechanismen ausgedacht, wie zum Beispiel ein Kontaktformular ohne Mausklick abgeschickt werden kann.

Anregungen für die eigene Site finden sich dort zuhauf. Doch noch wertvoller ist das Kunststück im Hinblick auf ein tieferes Verständnis für Benutzerführung. Kaum ein Onliner, der nicht massiv gegen die Versuchung zu klicken kämpfen muss. Nicht umsonst bestraft der Entwickler der Site den Klick mit einem glatten Rausschmiss. Hier erkennt der Designer, welche Kraft das Beharrungsvermögen gelernter Techniken hat. Wer einen neuen Interface-Ansatz etablieren möchte, muss gewaltige Hürden überwinden.

Das Fischauge

Eine praxisnähere Alternative zur klassischen Navigationsleiste ist das Fischauge. Es eignet sich vor allem, um große Listen flüssig zu scrollen und sich dabei innerhalb eines festgelegten und daher passend zu gestaltenden Layout-Bereichs zu bewegen. Das Prinzip des Fischauges ist recht simpel: Die Liste mit den Einträgen oder Navigations-Links ist zunächst stark verkleinert sichtbar. Berührt die Maus einen Menüpunkt, wird dieser auf gute Lesbarkeit hin vergrößert.

Besonders wichtig ist bei diesem Interface, dass auch die Umgebung des berührten Menüpunkts teilweise vergrößert wird. Dem User geht es nämlich nicht nur darum, den einzelnen Eintrag lesen und verstehen zu können. Er will sich außerdem ein Bild von der Sortierung des Gesamtsystems machen. Usability-Experten sprechen hier von einem mentalen Modell der Website, das sich der User vor seinem geistigen Auge anlegt, um Fehlnavigationen zu vermeiden. In einem Workshop im Anschluss an diesen Artikel erzeugen Sie ein solches Fischaugen-Interface auf Flash-Basis.

Slider-Navigation

In der Diskussion um Ajax und Web 2.0 nimmt das Thema Slider-Navigation eine wichtige Rolle ein. Das Modell sieht vor, dass der Benutzer anhand von Schiebereglern Parameter definiert, die dann die angezeigte Produktauswahl bestimmen. Die Anzahl potenzieller Spielarten für ein solches Interface sind grenzenlos. So kann der User den Preis, die Akkulebensdauer oder die Displaygröße als Kriterium anlegen oder auch die Farbe, die Lieferzeit und die Länge der Garantiefrist.

Slider-Interfaces müssen vor allem zwei Richtlinien beachten. Sie müssen zum einen von der allgemeinen Produktauswahl zur spezifischen vordringen. Ein Produkt, das ein spezifisches Merkmal erfüllt, muss auch dann sichtbar sein, wenn nicht nach diesem Merkmal selektiert wird. Unglücklich verfährt hier der Spieleanbieter Sqoops.de. Er blendet stets neue Produkte ein, weil dem Interface schlicht und ergreifend der Platz fehlt, in der neutralsten Auswahlstufe alle Produkte anzuzeigen. Somit ist es für den Suchenden sehr schwierig, ein spezifisches Spiel zu finden, wenn er dessen wichtigste Parameter nicht genau kennt.

Das zweite wichtige Paradigma für Slider-Navigation ist die Persistenz. Wer mit Slidern eine Auswahl fein austariert hat, möchte vermutlich im Folgenden die Details zu den drei oder vier Produkten vergleichen, die die Auswahl anbietet. Die Slider-Konfiguration darf unter keinen Umständen verloren gehen, sonst muss der Benutzer von vorn beginnen. Eine einfache Lösung könnte sein, die Details von Produkten in einem Popup-Fenster anzuzeigen.

Wie bereits bei Drag and Drop angedeutet, ist es auch beim Schieberegler heute unverzichtbar, deutliche Hinweise zur Funktionsweise anzubringen. Außerdem müssen die Datensätze vollständig standardisiert sein. Sonst passiert unter Umständen das Gleiche wie bei Shopwiki.com. Dort ist das zentrale Preissegment für Flatscreen-Fernseher (1000 bis 2000 Dollar) kaum durch den Slider anzusteuern. Der Grund: Durch einen Datenfehler gibt es einen Sony-Monitor, der 6,2 Millionen Dollar kostet. Dieser Ausreißer bestimmt natürlich die Bandbreite des Sliders.

Die Treemap

Neue Interfaces und Usability

Ein bereits klassisch zu nennendes Interface-System ist die Treemap. Es handelt sich um ein zweidimensionales Kästchensystem. Farbigkeit, Größe und Platzierung der Kästchen sollen Hinweise zu einer Gruppenzugehörigkeit und zu Hierarchien bieten. Diese Form des Clusterings ist sehr hilfreich, wenn es wenige dominante Produkteigenschaften gibt, die dem User eine schnelle Kaufentscheidung ermöglichen. So ließe sich ein Amazon-Katalog zunächst nach einem Autor durchsuchen und dann nach den Bewertungen, die User für die Bücher abgegeben haben. Gute Bücher grün, schlechte rot.

Dennoch erscheint das Prinzip der Treemap auf den ersten Blick eher spröde und unübersichtlich. Die Lernkurve beim User verläuft eher flach, da der Mehrwert gegenüber einer intelligenten, leicht erfassbaren Auflistung von Produkten mit variablen Sortierungskriterien äußerst gering ist.

Tagging

Neben den oben angedeuteten Methoden, deren Rubrizierung stets vom Site-Betreiber bestimmt wird, entwickelt sich auch im kommerziellen Segment das Tagging zu einem spannenden Navigationsmittel. Das amerikanische Spreadshirt-Vorbild Cafépress macht eigenen Angaben zufolge zehn Prozent mehr Umsatz, seitdem die User selbst die Produkte rubrizieren und mit Tags ausstatten dürfen. Dabei kommen Querverbindungen zustande, die auch der wacheste Produktmanager nicht erahnt hätte. Und es kommt noch besser: Inzwischen verkauft Cafépress Werbeplätze zu bestimmten Schlüsselbegriffen. Eine qualifiziertere Form des Targetings ist kaum denkbar, da die Zielgruppe selbst die Begriffe definiert.

Doch auch Tagging hat seine Grenzen. Wer sehr spezifische Produkte sucht, muss die Tags kennen, um diese zu finden. Hier funktioniert eine Rubrizierung nach klassischer Baumstruktur häufig einfacher und flüssiger. Tagging kann aber auf Dauer eine zweite Navigationsmethode für Websites werden, die die Volltextsuche ersetzt oder ergänzt.

Fazit

In den kommenden Monaten werden wir noch eine Reihe weiterer neuer Interface-Ideen bestaunen können. In den meisten steckt ein Körnchen neuer Wahrheit, in allen aber auch ein Funken Risiko. Klar ist: Es wird Zeit, sich in bestimmten Bereichen, vor allem bei der Produktauswahl, von der Seitenmetapher zu verabschieden und neue Wege einzuschlagen.

Der geneigte Designer sollte das als evolutionären Prozess begreifen und nicht die Site schlagartig runderneuern. Drag and Drop kann wunderbar mit dem klassischen In-den-Warenkorb-Knopf koexistieren. Tagging kann gänzlich unsichtbar die Leistungsfähigkeit der Site-weiten Suche verbessern und das Fischauge kann helfen, den optischen Eindruck einer Liste zu verbessern.