Interaktivität: Die interessanten Momente einfangen

2. August 2010 von Jared M. Spool

Vor ein paar Jahren hatte sich die Organisation AIGA vorgenommen, die führenden Künstler im Bereich der digitalen Grafik und ihre Werke mit einer Website zu würdigen. Diese Seite namens Gain war wirklich die erste ihrer Art: Ein digitales Magazin, das es sich zum Ziel gesetzt hatte, die Geschichten der führenden Personen aus der Welt des digitalen Designs auf interaktive Art und Weise zu erzählen.

In der ersten Ausgabe drehte sich alles um die großartigen Werke von Hugh Dubberly, einem Vorreiter in Sachen digitales Design. Der Autor David Brown verfasste eine wunderbare Hommage an den Künstler und auf der Website wurden einige Beispielarbeiten ausgestellt.

Nun ging der Artikel über eine Bildschirmseite hinaus und die Macher der Gain-Website wollten natürlich, dass die Nutzer den gesamten Artikel lesen. Also brauchte der Beitrag einen Scroll-Balken. Die Betreiber einer so stylishen Seite ließen es sich nicht nehmen, dafür eine eigene Scroll-Leiste zu entwickeln und verzichteten auf das Standardinstrumentarium.

Abb.: Die Ersteller der Gain-Website fanden es sinnvoll, einen eigenen, stylishen Scroll-Balken zu implementieren.

Es stellte sich leider heraus, dass sie das mit der Interaktion nicht ganz hinbekommen hatten. Ein Klick auf einen der Pfeile oben oder unten bewegte den Text nur pixelweise, um eine komplette Zeile zu sehen, waren also mehrere Klicks nötig. Beim Ziehen des viereckigen „Fahrstuhl“-Elements wurde der Content nicht sanft gescrollt, wie wir es kennen, sondern sprang unvermittelt, weshalb es schwer war, die richtige Textstelle wiederzufinden. Und ein Klick auf den Bereich zwischen Pfeil und „Fahrstuhl“, der den Inhalt normalerweise um eine Seite weiterbewegt, hatte gar keinen Effekt.

Für die Leser war das ärgerlich. Nutzer, die mehr über die herausragenden Arbeiten Hugh Dubberlys erfahren wollten, wurden dauernd vom Content abgelenkt, weil sie sich auf den Scroll-Balken konzentrieren mussten. Kein guter Weg, um digitales Design anzupreisen.

Die Scroll-Leiste neu erfinden

Die Gain-Website war in Flash umgesetzt und die Gain-Macher waren weder die ersten noch die letzten die versucht haben, das Nutzerverhalten in Sachen Scroll-Leiste umzukrempeln. Andere Flash-Designs sind noch verrückter: Da werden Bewegungen umgekehrt, Elemente unsichtbar gemacht usw. Das ist nicht die Schuld von Flash, sondern der Mangel an Kenntnis darüber, dass Scroll-Balken komplizierte Gebilde sind.

Wenn man darüber nachdenkt, gibt es heute höchstens ein halbes Dutzend verbreitete Varianten von Scroll-Leisten, Varianten, die einst irgendwo eingebaut wurden und heute überall genutzt werden. Das heißt, dass höchstens eine Handvoll Leute auf dem Planeten wirklich weiß, wie eine Scroll-Leiste implementiert wird. Das ist keine einfache Sache. Scroll-Balken sind, wie gesagt, kompliziert.

Interaktionen sollen unsichtbar bleiben

Wir brauchen Elemente wie Scroll-Balken, um Seiten interaktiv zu machen. Wir wollen, dass diese Elemente so funktionieren, wie wir es gewohnt sind, damit wir uns auf die wichtigen Bestandteile der Seite konzentrieren können. Die Leute sollen sich am Artikel erfreuen und sich nicht darüber den Kopf zerbrechen müssen, wie sie nach unten scrollen. Unsere Manipulationen müssen unsichtbar bleiben. Wenn die richtige Bedienung im Mittelpunkt steht, hält das den Nutzer davon ab, das zu tun, wofür er auf die Seite gekommen ist.

Das Raster der interessanten Momente

Die Netflix-Website gehörte zu den Vorreitern in Sachen ausgeklügelte Interaktion und zu den ersten, die AJAX-Technologien in großem Stil nutzte. Die Netflix-Leute waren führend darin, „natürliche“ interaktive Elemente zu realisieren und tolle Nutzererlebnisse zu ermöglichen. Es fing ganz einfach mit ihrem Filmbewertungs-Tool an: Ein Klick auf ein Sternchen aktualisierte die Server-Datenbank und machte die Aktualisierung durch einen Farbwechsel kenntlich. Doch diese einfache Interaktion erforderte mehrere wichtige, zeitlich aufeinander abgestimmte Schritte, um korrekt zu funktionieren.

Vor einiger Zeit hat uns Bill Scott – ehemaliger Netflix-Mitarbeiter – eine Technik gezeigt, mit der all diese kleinen Interaktionen festgehalten werden können. Er nennt sie „Raster der interessanten Momente“. Dieses Raster zeichnet alles auf, was während und mit einer Interaktion passiert. „Die Entwickler fanden das wirklich toll“, sagte Bill uns, „denn sie mussten nur einen Blick darauf werfen und brauchten sich nicht zu fragen, ob die Konzeptionierer oder Designer etwas vergessen hatten“.

Das Raster ist eine große Matrix, die die Ereignisse, die an der Oberfläche auftreten, und die Design-Elemente, die damit zu tun haben, enthält. Sehen wir uns das am Beispiel eines Drag-and-Drop-Elements an. In diesem Fall sind scheinbar diese Ereignisse relevant: Seite laden, Mausbewegung, Maus über dem Objekt, Mausklick, Einleiten des Ziehens, festgehaltene Maus bewegt sich vom Objekt weg, Neueingabe des gezogenen Objekts. Die Design-Elemente – Bill Scott nennt sie Aktoren – sind diese: die Seite, das angeklickte Objekt, ein möglicher automatisierter Hinweis der Anwendung und der Cursor.

Tatsächlich aber hält Bill bei einem gängigen Drag-and-Drop 16 Ereignisse und sechs Aktoren fest. Auf das Raster übertragen haben wir volle 96 interessante Momente. Ein solcher Moment tritt zum Beispiel ein, wenn das Ziehen eines geeigneten Objekts beginnt und alle verfügbaren Ziele, in denen das Objekt abgelegt werden kann, hervorgehoben werden. In sein Raster würde Bill in der Zeile „Ziehen beginnt“ also dieses Ereignis eintragen. Zudem würde er in die gleiche Zeile schreiben, dass der Cursor die schemenhafte Gestalt des aufgenommenen Objekts annimmt.

Stillstandzeiten verkürzen

Die Eleganz dieses Interessante-Momente-Gitters kann am besten mit Bills Worten aufgezeigt werden. „Ursprünglich“, erklärt er uns, „habe ich mit unzähligen Statusdiagrammen versucht, einzelne Sachen wie eine Drag-and-Drop-Aktion abzubilden. Und all die Möglichkeiten und Eventualitäten bei der Umsetzung erschlagen einen schließlich. Nach jedem Meeting hatte ich mir vorgenommen, all die Möglichkeiten und Nuancen, die gerade Thema waren, zu dokumentieren. Doch es hat nicht lange gedauert, bis 20 oder 30 Seiten mit Notizen vor mir lagen. Und ich habe schnell gemerkt, dass das kein geeigneter Weg zu einer Lösung ist. Wir mussten eine andere Methode finden. Schließlich ist mir aufgefallen, dass eine Interaktion aus vielen kleinen Ereignissen besteht und dass immer diese Objekte und Elemente involviert sind. Indem ich diese in einem einfachen, übersichtlichen Raster abbildete, konnte ich alles wie durch ein Mikroskop betrachten, die Nuancen schnell erkennen und die Stillstandzeiten zwischen Iterationen tatsächlich verkürzen.“

Kommunikation und Nutzererlebnisse verbessern

Bill nutzt sein Raster, um Interaktionen zu verfeinern. Wenn die Entwickler die ersten Prototypen implementieren, probieren Bill und sein Konzeptions-Team sie aus. Wenn etwas nicht auf natürliche Weise funktioniert – also so, wie man es erwarten würde – muss im Raster nur eine einfache Änderung vorgenommen werden, das ist alles. Die Entwickler sehen die Änderung, implementieren die modifizierte Interaktion und liefern eine neue Iteration.

So wird das Gitter zu einem Instrument, das Konzeptionierer und Entwickler auf die gleiche Seite zieht und das auf einfache, elegante Weise die Kommunikation im Team und die Nutzererlebnisse verbessert.

Dieser Artikel wurde im Original am 6. Juli 2010 unter dem Titel „Capturing the Interesting Moments“ von Jared M. Spool veröffentlicht. Jared M. Spool gehört zu den führenden Usability-Experten unserer Zeit. Seine Website erreichen Sie unter http://www.uie.com. Weitere Artikel von Jared M. Spool finden Sie im Usability-Special von //SEIBERT/MEDIA.


Eine Antwort hinterlassen





//SEIBERT/MEDIA besteht aus den vier Kompetenzfeldern Consulting, Design, Technologies und Systems und gehört zu den erfahrenen und professionellen Multimedia-Agenturen in Deutschland. Wir entwickeln seit 1996 mit heute über 65 Mitarbeitern Intranets, Extranet-Systeme, Web-Portale aber auch klassische Internet-Seiten. Seit 2005 konzipiert unsere Designabteilung hochwertige Unternehmensauftritte und kommunikative Konzepte. Beratungen im Bereich Online-Marketing und Usability runden das Leistungsportfolio ab.

Zu unseren teils weltweit agierenden Kunden gehören u.a. Accor, Allianz, Atlas MTT, BAD, Deutsche Klinik für Diagnostik, Deutsche Post, Hitachi, Honda Motor, Hotel InterContinental, Institut Fresenius, Kabel Deutschland, Lufthansa, SAP, SGS AG, STA Travel, StepStone sowie viele andere große und kleine interessante Unternehmen.