Mathias Schäfer (molily): JavaScript-Effekthascherei: Zurück in die DHTML-Vergangenheit

Eine kurze Polemik aus dem Effektewunderland

Haben wir denn nichts dazugelernt?

Momentan fühle ich mich beim Surfen wieder ins Jahr 2000 zurückgeworfen. Damals war ich an einen Pentium 133 gebunden und all jene Websites, die durch Opulenz zu überzeugen vermochten, waren gleichsam unbedienbar. Flash-Präsentationen und DHTML-Spielereien waren damit gestrichen – wenn ich schnell vorankommen wollte, deaktivierte ich diese fragwürdigen Features gleich.

Im Jahr 2006 gehören solche Zugangsschwierigkeiten der Vergangenheit an – so glaubt man zumindest! DHTML ist tot und wird nach und nach durch unaufdringliches, verantwortungsvolles JavaScript ersetzt. Zeitgemäßes DOM Scripting heißt im Gegensatz zu DHTML: JavaScript wird für nützliche Dinge eingesetzt, anstatt nur für Eindruck schindende, grelle und glitzernde Effekte. Und auch Flash-Autoren haben die Mentalität gewechselt.

Trotz zeitgemäßem Rechner ereilt mich der Eindruck im Jahr 2006 plötzlich wieder: Nach der segensbringenden AJAX-Revolution werden Webseiten mit an sich nützlichen interaktiven Features mehr und mehr mit »Effekten« zugeballert.

Fading like a Flower

Es taucht heutzutage nichts einfach auf dem Bildschirm auf, nein, es wird smooth eingefadet. Ein Container ist erst winzig und wächst dann gemächlich auf seine Endgröße heran. Wie putzig! Oder eine Box klappt ganz vorsichtig und geheimnisvoll auf, als fürchtete sie sich vor mir oder wolle mich nicht erschrecken. Herzallerliebst! Das Interface lebt und atmet, es bewegt sich ganz organisch. Durch Weichheit allerorten und Pastellfarben nimmt es auf mich Rücksicht. Es gibt nicht das Eine und das Andere, verschiedenes geht stets mit unzähligen Zwischenstufen ineinander über – πάντα ῥεῖ! Es überlagern sich nicht einfach Inhalte, wie grob wäre das, wenn ein Inhalt sich überheben würde und andere überdecken würde. Nein, die Ebenen leben symbiotisch miteinander und sind durch durch Haltransparenz stets miteinander verbunden. Wage ich es, den Fremdkörper namens Mauszeiger über eine Schaltfläche oder einen Link zu bewegen, so bekommt sie gleich Herzklopfen, pulsiert, errötet, blinkt oder hüpft und wackelt gar vor Freude. Aktiviere ich einen Link, so erscheint das Gewünschte nicht einfach innerhalb eines Augenblicks. Nein, ein Übergangseffekt und eine Bewegung illustriert mir diesen Wechsel. Da wird eine Website zum Erlebnis, ein echtes Wechselbad der Gefühle! Da kommt kindliche Freude zurück.

JavaScript-Effekte: 99% bad!

Fading, Sliding, Folding, Moving, Transition, Mutation – diese lahmen Effekte machen die Bedienung einer Website zur reinen Tortur. Diese Interaktivität hat nichts mehr mit notwendigem Feedback der Bedienoberfläche gemein, sondern mit dämlicher Angeberei. Es ist Webdesign und nicht Pimp my ride!

script.aculo.us, moo.fx, Thickbox2, Lightbox2 und wie sie alle heißen: Wunderbar, toll, Fortschritt, Zukunft! Aber es sind lahme Enten, die Inhalte nicht prompt zugänglich machen, sondern erst zum Ansehen bedeutungsloser Effekte zwingen, bevor ich sehe, was ich sehen will. Diese Effekte haben zumeist nur einen Effekt: Sie nerven.

In 99% der Fälle: Schmeißt die Effekte einfach heraus! Sie sind reine Spielerei und von modernem DOM Scripting Jahrzehnte entfernt, denn sie übertreffen mitunter übelste DHTML-»Effekte«. Kennt ihr noch die Scripte, bei denen irgendwelche Objekte ständig um den Mauszeiger kreisten? Da kräuseln sich jetzt noch meine Zehennägel. Zum Glück haben wir diese Ressourcenfresser verbannt. Aber das Gewichse mit dynamischen Farbverläufen und Transparenzen ist definitiv der neue Mausverfolger! Es zwingt jeden Rechner in die Knie, lenkt ab und hat den Charme einer Werbeunterbrechung, die nur sich selbst bewirbt.

Draggables, Droppables, Sortables, Selectables – nicht nur geschwollene Effekte werden aufgefahren, sondern auch ganze Interfacekonzepte erleben eine neue Renaissance. Zum Beispiel Drag & Drop. In meinem regulären Arbeiten mit dem Rechner kommt dieses UI pattern überhaupt nicht vor. Bei welchen Aufgaben ist das überhaupt nützlich? Und vor allem, wann die sinnvollste aller möglichen Lösungen? Seit es AJAX gibt, wird überall gedraggt und gedroppt, als wäre es die Revolution von Einfachheit und Komfort. Auch zu Drag’n’Drop ist in 99% der Fälle zu sagen: Just drop it!

Sie können Ihre Effekte jetzt ausschalten.

Verehrte Netizens, seien Sie ehrlich zu sich: Nutzen Sie den ganzen modernen Effektkram nur, weil er hip und Webzweinull ist? Haben Sie schlechte DHTML-Angewohnheiten wirklich hinter sich gelassen? Glauben Sie tatsächlich, dass Geblitze und Geblinke Ihr Webangebot attraktiver und Ihre Nutzer zufriedener macht?

Wie es sich für ordentliche Polemiken gehört, hat diese weder den Anspruch, sachlich, noch angemessen oder ausgewogen zu sein. Vielmehr steht nach den Regeln der Kunst die Rhetorik im Vordergrund.

Nachtrag

JavaScript gone wild on Gucci – Effektegewitter mit script.aculo.us

  1. Angeregt durch deinen Artikel habe ich mich mal ein wenig umgeschaut und gefunden, was mir gefallen könnte: Ein Lightbox1–Derivat mit dem Slideshow–Feature der Folgeversion, aber ohne Bloat. Gleich mal ausprobieren.

  2. OK, die Slidebox hat sich damit auch erledigt, weil hier sogar noch AJAX hinzukommt.

    Kennt jemand eine Möglichkeit, das ganze ein wenig „leichter verdaulich“ zu bekommen?

  3. Um es mit Dirks Worten zu sagen: Ganz großes Tennis! Diese augenscheinliche Seelenverwandtschaft ist beängstigend. Was soll ich noch sagen? Ich bin so frei und zitiere mich selbst:

    Derzeit erlebt JavaScript einen kleinen(?) Hype. Allerorts spricht man vom Web 2.0, das alles besser machen soll. Die konsequente Weiterentwicklung führt vermutlich zum Web 3.0, das uns an die guten alten DHTML-Zeiten erinnern wird. In weiterer Folge werden kollaborative Mausverfolgungen und Drag'n'Tag grassieren. Das ist dann das Web 4.01 transitional. Moment – hatten wir das nicht schon?

  4. Pinzipiell habe ich auch das Motto "Simple is best" auf meinen Fahnen stehen, aber ich finde den Artikel etwas zu drastisch. Viele Effekte machen es dem Nutzer angenehmer die Seite anzuschauen (Stichwork: joy-of-use), auch wenn es immer eine Gradwanderung zwischen zu viel, nervendem und zu wenig Effekt sein wird. Gerade die Drag'n Drop funktionalitäten sind (in den meißten Fällen) sehr praktisch: Es ist einfach nicht mehr an zeitgemäß, zehn mal einen Pfeil nach Oben zu suchen und zu clicken, um ein Produkt in der Shopliste ein wenig nach oben zu verschieben. Ein anderes gutes Beispiel ist das Auswählen des Zielordners in einer Combobox für eine zu verschiebende Mail; Per Drag and Drop kann das einfacher und effizienter geschehen. Ich glaube, dass man die "Effekt-hascherei" gut am Beispiel eines Mac's klar machen kann. Die Oberfläche ist unumstritten besser als die von Windows, da sie Effekte gezielt und effektiv einsetzt um die Haptik der Applikationen zu verbessern. Es gibt also keinen Grund AJAX und JS-Effekte zu verteufeln, so lange sie gut und nützlich eingesetzt sind.

  5. Nachtrag: Ich habe meine Bildergallerie z.B. nach dem oben Beschriebenen Motto gestalltet:

    -> Beispiel Gallerie 1

    -> Beispiel Gallerie 2

  6. Gib den Leuten Werkzeuge und sie werden sie missbrauchen. Daran sind nicht die Werkzeuge schuld, sondern die Leute. Ich benutze in meiner täglichen Arbeit ständig Drag&Drop und sehe es nicht ein, dass es sowas im Web nicht geben soll. Effekte helfen in vielen Fällen, die Dinge nachvollziehbar zu machen, die man am Bildschirm tut. Und wir haben im Jahr 2006 viel mehr Web-Anwendungen als noch 2000. Ich gebe Dir Recht: Für normale Websites zum Surfen braucht man eigentlich kaum Effekte. Aber wenn es um umfangreiche Bedienkonzete für Online-Apps geht: Immer her damit, man spart sich eine ganze Menge an Verwirrung beim User.

  7. Die Kritik ist zu polemisch, aber das muss sie sein, um rüberzukommen ... Ich verwende lightbox auch, weil ich das Prinzip des Overlay-Fensters gut finde, aber an der 2. Version stören mich eindeutig die Effekte. Einfach aufpoppen und gut ist ... Aber ich denke, das kann man leicht selbst anpassen.

  8. IMHO hinkt der Vergleich mit den alten DHTML-Zeiten. Man kann zwar unterstellen, dass zur Zeit allenthalben eingesetzte Scripts zu 80% nutzlos sind, so sind es die Funktionen die sie zur Verfügung stellen keinesfalls. Siehe Gerrits Kommentar. Drag&Drop, sortierbare Listen etc. sind ganz wunderbare Werkzeuge, nur müssen sie richtig eingesetzt werden. Ein tanzender Mauszeiger hingegen bleibt eben immer ein tanzender Mauszeiger.

    Und noch eine Verwechslung: eine Seite knallvoll mit JS, Einblendungen, Morphings etc. pp. ist noch lange kein Web 2.0. Da gehört dann doch etwas mehr dazu.

  9. Was bedeutet den eigentlich dies: πάντα ῥεῖ

    Für die ungebildeten Studienabbrecher ;-)

  10. Wieso wurden smooth und fade mit Sprachangabe ausgezeichnet, aber πάντα ῥεῖ nicht (ich weiß nicht, welche Sprache es ist)?

  11. Ich habe meine Bildergallerie z.B. nach dem oben Beschriebenen Motto gestalltet:

    und wenn du jetzt noch deine "Galerie" "gestaltest", hast du das Webdesign sogar orthographisch korrekt gemacht...

    SCNR!

  12. "panta rhei" ist griechisch für "alles fließt".

  13. Marc, Timo: Die Sprachauszeichnung wurde nachgetragen. Jetzt fließt wieder alles.

    Motine: »aber ich finde den Artikel etwas zu drastisch«. – Ich fasse das als Kompliment auf. ;)

  14. Wirklich eine Polemik. Aber ob Sätze wie "Aber das Gewichse mit dynamischen Farbverläufen und Transparenzen " wirklich zur Reputation von selfhtml beitragen wage ich zumindest zu bezweifeln. Diesen Ton möchte ich hier nicht lesen. Auch nicht in einer Polemik.

    In der Sache hat der Artikel recht.

  15. Thomas: Vielleicht hast du ein überhöhtes Bild von SELFHTML, jedenfalls konnte SELFHTML schon immer derb reden, wenn es die Situation erforderte. Soll ich eine wissenschaftlichere Ausdrucksweise wählen? Dabei ist die Sache doch leider gänzlich ordinär und profan.

    Nein, darüber habe ich lange gegrübelt: Der Begriff des Autoerotischen ist bei Pimp-my-Website mit JavaScript-Effekten genau angemessen. Der bereits angesprochene Joy of Use in allen Ehren, aber – da bleibe ich bei meiner Einschätzung – es ist oftmals lediglich der Seitenautor, der Freude beim Anblick der bunten und glitzernden Effekte empfindet. Joy of Use besteht nicht darin, Unterbrechungen und Wartezeiten mit Effekten einzuschieben, deren ästhetischer Wert im Übrigen in Zweifel steht. Die erste Einblend-/Aufklappanimation findet man noch niedlich, wenn man sie sich das zehnte Mal anschauen muss, weil Lightbox2 gerade das Web überflutet, dann ist der Joy of Use dahin.

    Ich geb’s zu, ich bin ein Troll: Der Artikel war absichtlich provokativ und gab meine Meinung nicht vollständig wieder. Aber es hat funktioniert, die gewünschten Reaktionen kamen und haben die Lücken prompt gefüllt. motines und Gerrits Kommentaren kann ich ohne weiteres beipflichten - diese sinnvollen Fälle erscheinen mir aber momentan als ein Bruchteil aller tatsächlichen Anwendungen.

  16. Ich finde diese Effekte hübsch. Das ist IMHO nicht zu vergleichen mit dem Geblitze und Geblinke aus 2000er Zeiten. Und klar, jetzt wo es neu ist wird damit mal experimentiert. Ich finds aber "schade" da so drüber herzuziehen! Aber yo, manchen wärs halt am liebsten ne website würd wie in der Konsole aussehen. Man kan nes nicht allen recht machen. Ich mags bunt und viele anderen auch. Wems net gefällt, der surfe auf eine andere Seite ;-)

  17. Sven, da missverstehst du etwas.

    Wenn alles so smooth laufen würde, wie es in der Theorie soll, fiele mir Herumanimiere nicht so auf die Nerven. Die tollste Animation ist für die Katz, wenn sie nicht flüssig abläuft, sondern jeden mir zur Verfügung stehenden Browser zum Ruckeln bringt, weil tausende Pixel über Halbtransparenz aus- oder eingeblendet werden. Niemand hat etwas gegen verspielte Sites. Aber genausowenig hat jemand Lust, auf einen 4-GHz-Prozessor upzugraden, weil der Browser solche Animationen naturgemäß nicht performant berechnen kann. Das fehlt nämlich noch: 3D-Hardware-gestützte JavaScript-Effekte!

  18. Mich stört an diesem Artikel der Ton "Es ist so, dass..." im Gegensatz zu dem angemessenen "Meiner Meinung nach...", da dies sicher ein sehr kontroverses Thema ist.
    Man sollte es mit den Effekten sicher nicht übertreiben, aber meiner Meinung nach tragen sie in vielen Fällen durchaus dazu bei, das Verhalten nachvollziehbarer zu gestalten.
    Im "echten" Leben springt nichts zack von A nach B, es bewegt sich dorthin. Die Sonne erscheint nicht puff am Himmel, sie geht langsam auf.

  19. Fawoo, dieser Ton ist Absicht und deine Reaktion einkalkuliert – so funktioniert Rhetorik. ;)

    Der Vergleich zwischen echtem Leben und virtuellen Benutzeroberflächen ist gerade das, was mir so stinkt. Rein technisch ist eine Information innerhalb eines Mausklicks verfügbar und kann dem Anwender kommuniziert werden. Das ist gegenüber nicht-digitalen Medien ein riesiger Fortschritt! Wenn ich einen Link oder eine Schaltfläche aktiviere, soll nicht mein System ruckeln, weil der Übergang opulent in Szene gesetzt wird. So kunstvoll diese Bitte-warten-Animation sein mag: Das ist Styling, nicht Design. Man fügt am falschen Ende wertlosen Schmuck hinzu.

    Für organische Interfaces sind die Mittel von JavaScript viel zu beschränkt und die Umgebungsbedingungen tun ihr übriges. JavaScript hat nicht die Möglichkeiten von Flash und mit HTML/CSS bekommt man keine ansehnlichen Vektoranimationen hin, bei dem der Anwender das Gefühl hat, das Interface würde prompt reagieren.

  20. Das Verhalten eines Elements ist für mich immer dann nachvollziehbar wenn es meinen Erwartungen entspricht. Deren Grundlage sind abertausende von mir bereits besuchte Websites. Auch als erfahrener Internetbenutzer müsste ich mir die Bedienung von Flash-Filmchen oder AJAX-Spielerein erst mühsam aneignen. Deshalb wähle ich, um meine ohnehin spärliche Freizeit zu schonen, im Zweifelsfall stets einfach eine andere Website.

  21. Das Problem sehe ich eigentlich nur da wo die Leute heute nicht mehr in der Lage sind Seiten zu erstellen die auch bei abgeschalteten/nicht-verfügbarem JS benutzbar bleiben.

    Wenn man sieht wie einige Seiten heute geschrieben werden, es ist wirklich ein Graus, da werden an jeder Stelle wild alle möglichen Scripts eingestellt und sei es nun zwischen head und body oder sogar gleich noch hinter das Ende der Seite, ist wirklich schlimm.

    Wenn man dann ohne aktiviertes JS nicht einen Link benutzen kann (vorrausgesetzt die Navigationselemente werden überhaupt angezeigt und sind nicht in irgendein Script eingebunden, das lediglich die Hintergrundfarbe beim hover ändert, aber nicht angezeigt wird ohne JS), ist das schon irgendwie ziemlich traurig.

    Man sieht schön geschriebene und gestaltet Seiten so selten, dabei kann man schönes Design und Funktionalität auch ohne JS und nur mit html und css erreichen.

  22. Selbstverständlich hatten Sites bisher auch ohne JavaScript zu funktionieren. Diesen Punkt hielt ich für einen Konsens unter Webworkern, der jedoch zunehmend torpediert wird.

    Doch selbst wenn JavaScript verfügbar ist, heißt das noch lange nicht, dass eine Anwendung browserübergreifend benutzbar ist. Ein Beispiel, das aufgrund seiner Zähigkeit mein Durchhaltevermögen übersteigt ist snap.com. Die Idee ist ja nett, doch was mit dem Internet Explorer noch flüssig und mit Firefox langsam läuft, ist mit Opera unbenutzbar – trotz überdurchschnittlich schneller Hardware.

    In den WCAG 2.0-Richtlinien findet sich im Abschnitt Interface components in the content must be operable leider kein Hinweis auf langsame Interfaces. Meines Erachtens wäre ein solcher dringend angebracht.

    »Sorgen Sie dafür, dass dynamischer Inhalt nicht zu Wartezeiten führt und bieten Sie die Möglichkeit der Deaktivierung an. [Priorität 1]«

  23. Mal einen solchen Tonfall von dir, Mathias, zu lesen zu bekommen, ist richtiggehend erfrischend :-)

    Gerrit:

    Es ist einfach nicht mehr an zeitgemäß, zehn mal einen Pfeil nach Oben zu suchen und zu clicken, um ein Produkt in der Shopliste ein wenig nach oben zu verschieben. Ein anderes gutes Beispiel ist das Auswählen des Zielordners in einer Combobox für eine zu verschiebende Mail; Per Drag and Drop kann das einfacher und effizienter geschehen.

    Was du beschreibst, würde ich als "administrative" Aufgaben bezeichnen wollen - dafür mögen solche Techniken sicher angebracht sein und ihre Berechtigung haben. Aber auf künstliche "Verlangsamung" der durchzuführenden Tätigkeiten - durch "Fading" und ähnlichen Käse - habe ich doch als Nutzer in so einem Falle wirklich keine Lust. Wenn ich einen Produktkatalog eines Shops zu verwalten habe, ist Zeit Geld; und auch beim Bearbeiten meiner privaten oder geschäftlichen Mail-Flut brauche ich keine weiteren Bremsen.

    Also Berechtigung dieser Techniken m.E. durchaus, ja - im richtigen Umfeld.

    Aber als "schaut mal, was ich alles kann"-Spielerei auf einer Webseite, die informieren will - bitte nein.

  24. Da ich nicht den Umfang dieser Seite sprengen möchte: http://endlich-rueckwaerts.de/blog/javascript-effekthascherei-auf-zu-neuen-ufern

  25. Ich glaube, ich habe ein Beispiel, wie man mit nur einer Website sowohl Benutzer, die JavaScript mögen, als auch solche, die JavaScript lieber ausschalten, bedienen kann, ohne daß sie es bemerken, solange sie nicht beides vergleichen:

    http://andis63.homeftp.net/~sue

    Das Knowhow habe ich, soweit möglich, aus selfhtml.org

  26. Schöne neue tolle Webwelt ;)

    AJAX ist für sich genommen ein durchaus tolles Konzept. Jedenfalls bis zu dem Punkt an dem es dem Benutzer hilfreich ist. Aber wer sich z.B. die neuen Webmail-Oberflächen antut wird ganz schnell feststellen, dass allein das Laden häufig länger dauert als das eigentliche Lesen der Mails. Es spricht nichts dagegen, wenn die Mail erst dann geladen wird, wenn sie auch wirklich gelesen werden soll. Aber warum muss das Ganze mit Skriptdateien jenseits der 1Megabytegrenze realisiert werden?

  27. lol wasne noob scheiße sollange mein browser alles anzeigt ists mir scheiß egal. ich hasse es wenn gewisse leute kein html können und der text zur seite rausgeht.

    und notfalls blockt man die scripte eben. Aber was ist jetzt so schlimm an einem bild dass sich zoomen lässt? oder ein bild dass sich bewegen lässt?

    Ok. auf schneeflocken scheiße kann ich verzichten. aber ist gibt da durchaus ein paar nette sachen. Sollange es der strukutrierung dient.

  28. Witziger Text…eben die typische "PC-Profi"-Meinung. Bei alledem sollte man vielleicht nicht vergessen, dass weit mehr Nutzer in die Kategorie "Oma Pfiffig" fallen und a) das Netz nicht technisch sehen b) bunt und Bewegung schön finden und/oder c) Mac-User sind.

    Wie schon in einem Beitrag schon erwähnt, macht OS X seit langem intensiven Gebrauch von Effekten, Skripten und Drag 'n' Drop. Komischerweise geben diese User viel Geld dafür aus, dass alles eben etwas schöner und organischer abläuft. Warum sollte ich also eine Webseite als angenehm empfinden, nur, weil sie darauf verzichtet. Und warum muß ich mein Webmail wie eine Windows-3.11-Anwendung bedienen, wenn AJAX mir etwas so intuitives ermöglicht, wie ich es von Apple Mail kenne.

    Du kannst ja gerne mal BMW und Mercedes schreiben, dass diese nervigen Felgen mit den Löchern total daneben sind, wo doch Vollstahlfelgen viel stabiler und geschmacksneutraler sind.

  29. @Daniel, lies dir nochmal meine Kommentare durch, anscheinend hast du den Punkt nicht verstanden. Es läuft eben nicht »organischer« ab und hässliche Felgen können mir egal sein, weil sie die Gebrauchstauglichkeit des Autos nicht schmälern.

  30. Ich bin durch Zufall auf diese Beiträge gestossen, weil ich nach Möglichkeiten gesucht habe, einen dezenten Effekt in meine Seite einzubauen. Ja, ich fühlte mich zunächst wirklich schlecht, nachdem ich diese "Polemik" geschluckt hatte und meine Kreativität fiel fast auf Nullpotential. Jedoch, warum singt jemand solch einen Gesang? Konstruktive Kritik ist gut und bringt alle weiter. Ich habe bis heute noch keine Polemik kennen gelernt, die das leistet. Letztlich ist Polemik auch nichts weiter als Effektehascherei; und sie belastet unnötig die "mentale Performance" desjenigen, der sie aufnehmen muss ;-) Ich schliesse mich darum der Meinung an, dass bei SELFHTML solche "Töne" unangebracht sind.

    mfg

    Michael Morawietz