14.3    Interaktive Elemente 

Im Folgenden werfen wir einen Blick auf einzelne interaktive animierte Elemente und besprechen deren Besonderheiten.

14.3.1    Bildergalerie 

Die Lightbox ist die »Mutter« aller Bildergalerien. Einfach anzuwenden, flexibel, und responsiv: lokeshdhakar.com/projects/lightbox2. Als Alternative bietet sich die Fancybox an: fancybox.net.

Abbildung 14.15    Das Lightbox-Plug-in für Bildergalerien

Bilder sagen mehr als tausend Worte, daher werden diese gerne auch auf Webseiten eingesetzt. Um Details auf einem Foto wahrzunehmen, muss es auf dem Bildschirm entsprechend groß dargestellt werden, was viel Platz beansprucht. Spätestens bei mehreren Bildern ist dies ungünstig, weil kaum noch andere Inhalte zu erkennen sind. So hat sich das Prinzip der Thumbnails durchgesetzt, das sind kleine Vorschaubilder, die beim Anklicken ein großes Foto anzeigen. Während früher dadurch häufig eine neue Seite mit dem großen Bild geladen wurde, öffnen sich diese durch entsprechende Plug-ins direkt über den Vorschaubildern.

Der Hintergrund der Seite wird dabei meistens leicht abgedunkelt, sodass die großen Bilder im Mittelpunkt stehen und nicht durch die Gestaltung »drum herum« beeinflusst werden. Die Bildergalerie-Plug-ins haben meistens schon ausreichende Funktionen wie Schließen-, Vor- und Zurück-Buttons, und die neueren Versionen sind meistens auch schon responsiv.

Abbildung 14.16    Beim Klick auf das Fahrrad vergrößert es sich und verdeckt die Beschreibung, linusbike.com. Netter Effekt, das Vergrößern- (+) 1 und Verkleinern-Icon (–) 2 könnten zwar etwas markanter bzw. auffälliger sein, aber inzwischen ist es fast intuitiv erwartbar, dass sich bei Onlineshops die Produktbilder vergrößern lassen.

14.3.2    Tabs 

Die Arbeit mit Tabs, im Deutschen oft auch Reiter genannt, ist aus der analogen Büroablage bekannt und hat sich im Webdesign in verschiedenen Bereichen etabliert. Auch in den Browsern werden mehrere Seiten in Form von Tabs angezeigt.

Eine klassische Anwendung ist der Einsatz von Tabs in der Navigation. Wie aus Abbildung 14.17 hervorgeht, ist der aktive Menüpunkt in der Hintergrundfarbe des Inhaltsbereichs eingefärbt. Die anderen Menüpunkte haben eine dunklere Hintergrundfarbe und wirken somit optisch, als würden sie hinter dem Inhaltsbereich liegen. Das ist eine einfache und effektive Wirkungsweise. So ist der aktive Punkt sowohl klar hervorgehoben als auch seine Verbindung zum Inhalt offensichtlich.

Diese Tab-Navigation war früher häufig im Einsatz, wird inzwischen aber immer seltener verwendet. Vermutlich hat dies einerseits mit Gestaltungstrends zu tun, und Tabs sind aktuell nicht »trendy«. Andererseits lassen sich Tab-Navigationen für responsive Layouts schlecht umsetzen bzw. beibehalten. Auf kleineren Bildschirmen stehen die Navigationspunkte häufig untereinander und sind selten zusammen mit dem Inhalt sichtbar, sodass der »Gleiche-Hintergrund-Effekt« nicht mehr gegeben ist.

Abbildung 14.17    Bei chocri.de wurde die Navigation in Form von Tabs umgesetzt.

Ein anderer spannender Einsatzzweck von Tabs liegt im Inhaltsbereich. Hier stellt er eine Art Navigation innerhalb einer Seite dar – man könnte es fast als iFrame bezeichnen (funktional, nicht technisch), aber der Begriff ist eher negativ besetzt. Tabs im Inhalt haben den Vorteil, dass eventuell benötigte Inhalte nicht erst nachgeladen oder auf einer anderen Seite angezeigt werden, sondern sich hinter mehreren Tabs »verstecken« und erst bei Bedarf angezeigt werden.

Abbildung 14.18    Shops setzen Tabs gerne ein, um Inhalte kompakt darstellen zu können, häufig bei den Produktbeschreibungen. intersport.de dagegen nutzt Tabs nicht nur in der Hauptnavigation, sondern auch im Fenster.

In der Profildarstellung im Business-Netzwerk XING (siehe Abbildung 14.19) wird der Nutzen von Inhalts-Tabs deutlich. Anstatt alle Inhalte auf einer ewig langen Seite untereinander oder auf unterschiedlichen Seiten anzuzeigen, werden die einzelnen Inhalte erst bei Bedarf angezeigt. Im oberen Bereich ist die Tab-Navigation, und darunter befinden sich die jeweiligen Inhalte. Überall da, wo viele Informationen auf einem begrenzten Raum angezeigt werden sollen oder müssen, bieten sich Tabs an. Wichtig ist dabei, dass die Gestaltung der Tab-Überschriften eindeutig gestaltet ist und der Anwender weiß, dass er hier klicken kann. Im Beispiel des XING-Profils wirken die einzelnen Tab-Punkte wie eine klassische horizontale Navigation. Zusammen mit dem dezent grau eingefärbten Hintergrund ist die Bedeutung der Punkte für den Benutzer klar.

Abbildung 14.19    Die Profildarstellung wurde bei xing.com mit Tabs umgesetzt.

Der Tab-Effekt wird meistens mit Animationen umgesetzt. Die Inhalte kommen dabei entweder seitlich »hereingeflogen«, oder sie werden sanft aus- und eingeblendet. Dies verbessert die Wahrnehmung von neuen Inhalten gegenüber einem ruckartigen Wechsel, und der Betrachter merkt auch eher, dass etwas passiert und was genau.

Bei einem Wechsel auf eine andere Unterseite verschwindet ja auch die komplette Seite, und die neuen Inhalte werden geladen und nach einem kurzen Moment angezeigt.

Nach dem Gesetz der Gleichzeitigkeit (siehe Kapitel 6, »Gestaltungsgrundlagen«) nimmt der Anwender Objekte, die sich gleichzeitig bewegen oder verändern, als zusammengehörig wahr. Bei Tabs zeigen also die Inhalte, die sich gleichzeitig aus- und einblenden, welchen Bereich die Tabs umfassen. Bei einem ruckartigen Wechsel besteht die Gefahr, dass der Anwender den Wechsel nicht richtig mitbekommt oder nicht merkt, welche Inhalte verändert wurden.

Für den Anwender können Tabs auch die User Experience deutlich erhöhen. Inhalte werden schneller angezeigt (als wenn sie erst auf einer neuen Seite geladen werden müssten), man kann schneller zwischen den Tabs navigieren. So lassen sich beispielsweise verschiedene Produkte und Preise schnell vergleichen, und man gewinnt einen besseren Überblick, als wenn die Informationen in einer Liste untereinanderstehen würden.

Tabs und die Suchmaschine | Mit Tabs lassen sich mehr Informationen auf der Seite präsentieren, als man dies wohl ohne Tabs machen würde. Dies kann natürlich auch clever genutzt werden, um in Tabs suchmaschinenoptimierte Texte zu »verstecken«, die eben vor allem für Suchmaschinen und weniger für die Leser gedacht sind. So weit, so pfiffig, der Schuss kann aber auch schnell nach hinten losgehen. Angenommen, ein Leser kommt aufgrund seiner Suche nach einem bestimmten Schlüsselwort über die Suchmaschinen auf die Seite. Dieses Schlüsselwort befindet sich aber im letzten von sechs Tabs, dann wird er lange nach dem Inhalt suchen können. Vermutlich wird er kaum so hartnäckig sein – bleibt also nur zu hoffen, dass ihn die anderen Inhalte schon glücklich gemacht haben.

14.3.3    Accordion 

Recht ähnlich wie bei den Tabs verhält es sich mit Accordions (im Deutschen Akkordeon, der Name leitet sich von dem Musikinstrument ab, das auseinandergezogen und zusammengeschoben wird). Auch hier können viele Informationen zuerst verdeckt und nur bei Bedarf angezeigt werden. Die einzelnen Accordion-Listen sind üblicherweise untereinander angeordnet und werden einzeln nach einem Klick eingeblendet.

Typischerweise sind die einzelnen Textblöcke im Accordion ausgeblendet, und höchstens das erste ist zu Beginn sichtbar. So lassen sich größere Informationsblöcke auf einem begrenzten Raum einsetzen. Ein Einsatzbeispiel für Accordions sind die FAQs. Häufig werden hier nur die Fragen angezeigt und die Antworten erst einmal nicht. So kann der Anwender die für ihn relevanten Fragen viel schneller finden, weil er nicht noch alle Textantworten überfliegen muss. Beim Klick auf eine Frage öffnet sich die dazu passende Antwort.

Abbildung 14.20    Typisches Accordion bei FAQs. Bei mozilla.org ist es recht individuell gestaltet.

Ähnlich wie die Tabs sind Accordions meistens animiert. Die Textblöcke werden ein- und ausgeblendet bzw. herein- und herausgefahren. Ein ruckartiger Wechsel sähe nicht nur »unschön« aus, sondern würde auch mehr verwirren.

Accordions sind wie die Tabs ein gutes Mittel, um nicht gleich alle Inhalte zu einem bestimmten Thema oder Bereich anzeigen zu müssen. Während bei den Tabs die einzelnen Oberthemen nebeneinanderstehen, sind sie im Accordion untereinander angeordnet und können daher länger sein. Für längere Texte, wie etwa ausformulierte Fragen, kommen daher eigentlich nur Accordions infrage und keine Tabs. Bei Übersichten, z. B. über das Leistungsspektrum einer Agentur, können Tabs hilfreicher sein. Kurze Stichpunkte als Tab-Überschrift und dazu längere Textblöcke, eventuell noch mit Bildern, stehen so immer an der gleichen Stelle. Eine Galerie der schönsten Accordions finden Sie unter accordiongallery.com.

14.3.4    Content-Slider 

Slider (auch gerne Carousels genannt) sind ein beliebtes Mittel, ähnlich Tabs und Accordion, um bestimmte Inhalte nicht gleichzeitig anzuzeigen, sondern erst nach und nach verfügbar zu machen. Häufig rotieren Slider automatisch. Im Inhaltsbereich ist es aber besser, dass erst auf einen Klick des Benutzers die nächsten Inhalte sichtbar werden.

Wichtig ist, dass durch Thumbnails oder Texte ersichtlich ist, welche weiteren Inhalte den Anwender erwarten. Denn nur wenige Anwender klicken auf Pfeile, um weitere Inhalte angezeigt zu bekommen, von denen sie gar nicht wissen, was genau sie da erwartet und ob es für sie interessant ist. Das kann man natürlich grundsätzlich von jeder einzelnen Webseite sagen, dass man nicht genau weiß, ob hilfreiche Informationen auf den Nutzer warten. Aber Anwender scrollen lieber weiter, als sich durch allzu lange Slider durchzuklicken.

Abbildung 14.21    Der Content-Slider bei amazon.de dient mehr dem zwanglosen Entdecken.

Abbildung 14.22    Der Content-Slider bei iquadart.com erklärt den Projektablauf in seinen einzelnen Schritten. Gut gemeint, aber klickt das wirklich einer von 1 bis 6 durch!?

Content-Slider sind ähnlich wie Tabs gut, wenn eindeutig ist, was sich hinter den einzelnen Slides verbirgt, sodass der Anwender sich diese auch gezielt anschauen kann und sich nicht auf gut Glück durch eine Pfeilnavigation durchklicken muss.

14.3.5    Header-Slideshow 

Eine Besonderheit des Sliders sind die Header-Slider, die bis vor zwei, drei Jahren auf keiner neuen Webseite fehlen durften, deren Einsatz aber zum Glück wieder rückgängig ist. Selbstrotierende Header-Slider sind eine Unsitte und in den wenigsten Webprojekten sinnvoll. Sie sind nutzlos, weil kaum ein Anwender sich den oberen Bereich der Startseite in Ruhe anschaut und wartet, bis die einzelnen Slides durchgefahren sind. Sie sind nutzlos, weil kaum ein Anwender die Slider selbst weiterklickt. Vor allem, wenn er nicht weiß, was ihn in den nächsten Slides erwartet. Er wird sich eher über die Navigation und die anderen Inhalte der Webseite anders orientieren.

Abbildung 14.23    Wer soll da noch folgen? Alle zwei Sekunden fliegt ein neues Bild mit Spruch hinein (julie-lavergne.com).

Anstelle eines Sliders sollte zu Beginn der Startseite lieber die Hauptaussage der Webseite erfolgen. Dies setzt eben Schwerpunktbildung voraus – was ja nicht zwangsläufig bedeutet, dass alle anderen Inhalte unwichtig sind, sondern im Folgenden auch passend präsentiert werden können.

Vermutlich war es lange Zeit auch einfach trendy, einen Slider auf der Startseite zu haben. Animationen und Effekte ziehen die Aufmerksamkeit auch so schon auf sich. Zwangsläufig effektiv sind sie deswegen aber nicht. Der einzige sinnvolle Einsatz eines Header-Sliders, der mir spontan einfallen würde, wäre auf Fotografen-Portfolios. Dort kommt er ja auch regelmäßig zum Einsatz. Nette Bilder sliden gemütlich durch. Zusammen mit Thumbnails, sodass man auch gezielt einzelne Fotografien ansteuern kann, wäre es dann perfekt.

14.3.6    Modalboxen 

Eine Modalbox (oder auch Modal Window genannt) ist eine Dialogbox, die sich ähnlich wie die Lightbox-Bildergalerie (siehe Abschnitt 14.3.1, »Bildergalerie«) über die Webseite »legt«. In diesem Dialogfenster werden dann aber nicht nur Bildinhalte angezeigt, sondern es wird auch interagiert. Dies ist vergleichbar mit den Modalboxen im Betriebssystem.

Während Popups wegen ihres »Missbrauchs« zu Werbezwecken negativ belastet sind, vereinfachen Modalboxen die Interaktion zwischen Anwender und Webseite – wenn sie gut eingesetzt sind. Modalboxen machen vor allem dann Sinn, wenn sich der Anwender ihnen vollständig widmen soll und die anderen Inhalte für den Moment unwichtig sind. Dies können Fehlermeldungen oder Warnhinweise sein (z. B. bei einem unvollständig ausgefüllten Formularfeld). Dies kann eine Bestätigung sein (z. B. einer Anmeldung oder Buchung). Dies kann aber auch eine wichtige Information sein (z. B. eine Änderung des Datenschutzes für registrierte Benutzer).

Abbildung 14.24    Und auf einmal ist der Inhalt weg. Nervt so unglaublich und wird so gerne eingesetzt: Ein Modalfenster legt sich über den kompletten Inhalt und zwingt zu einer Interaktion. Jetzt heißt es den »Schließen«-Link suchen, so wie bei brit.co.

Ein Modalfenster verdunkelt oder hellt den eigentlichen Webseiteninhalt (wie in Abbildung 14.25) auf und legt ein kleines »Fenster« darüber. In diesem Dialogfenster muss der Anwender entweder ein Formular ausfüllen oder einen Button/Link anklicken – und wenn es der Schließen-Button ist. Vorher kommt er nicht zu den eigentlichen Inhalten zurück. Bei einem Dialogfenster wie einem Login ist das angenehm und erhöht die User Experience, da der Anwender nicht auf eine neue Seite geleitet wird, die erst geladen werden muss, sondern auf der aktuellen Seite bleibt, und das Dialogfenster wird nur angezeigt bzw. nachgeladen.

Abbildung 14.25    Einloggen und neuen Account anlegen, das geht bei loudr.fm in einem Modalfenster, sehr praktisch, so muss keine neue Seite geöffnet werden.

Störend sind Dialogfenster, die nicht zwingend im aktuellen Benutzungsprozess notwendig sind. Inzwischen gibt es einige Webseiten, die ihre Newsletter in dieser Form sehr aktiv bewerben – und zwar gleich auf der Startseite. Bevor der Anwender überhaupt anfangen kann, sich zu orientieren, erwartet ihn ein Newsletter-Dialogfenster. Der Anwender muss an diesem Dialog »vorbei«. Auch wenn er kein Interesse an einem Newsletter hat, muss er das Fenster »wegklicken«. Das bedeutet, er wird abgelenkt, muss den Schließen-Button suchen und … sich ärgern. Sicher, im günstigsten Fall hat man einen neuen Newsletter-Abonnenten, aber ich würde wetten, dass auf einen neuen Abonnenten viele genervte Anwender kommen.

14.3.7    Tooltip 

Tooltips sind eine gute Methode, um bei Bedarf zu einem Element noch weitere Informationen zu liefern. Ein Tooltip ist dabei so etwas wie eine kleine Dialogbox, die sich direkt auf oder neben dem Element öffnet, auf das es sich bezieht. Ein Tooltip öffnet sich erst beim Mouseover oder bei Klick auf ein Element.

Abbildung 14.26    Auch so lässt sich ein Dialogfenster einsetzen: als bildschirmfüllende Suche bei conduitstudio.com.

Abbildung 14.27    Die aufklappbaren 1 Tooltips bei paperandpaint.dk liefern weitere Informationen 2 zu den Produkten.

Tooltips können zu einer detaillierten Erklärung oder zur Hilfestellung eingesetzt werden. Dabei kann man zwischen zwei Arten unterscheiden. Zunächst gibt es Tooltips, die offensichtlich sind und die der Anwender bewusst anwählen kann. In Abbildung 14.27 wird dies deutlich. Häufig sind die Tooltips mit einem Pluszeichen und in einer Art Kreisform gestaltet. Damit wird signalisiert: »Hier gibt es mehr zu erfahren.« Der Anwender kann bei Bedarf zu einzelnen Bereichen genauere Informationen erhalten. Dies hat auch den Vorteil, dass die Informationen nicht kontinuierlich und gleichzeitig eingeblendet sein müssen, sondern erst auf Wunsch angezeigt werden. Der Betrachter wird also nicht durch zu viel Text »erschlagen«, das Produktbild kann so besser wirken.

Abbildung 14.28    So können Tooltips auch eingesetzt werden: Bei twitter.com werden zu den Avataren beim Mouseover ausführlichere Infos angezeigt.

Und dann gibt es noch die Tooltips, die eher überraschend erscheinen, die der Anwender also nicht bewusst anwählt. Sie sind oft kleine Hilfestellungen, die den Anwender beim Ausfüllen von Formularfeldern unterstützen. Sie tragen zu einer höheren User Experience bei. Ungünstig ist es allerdings, wenn nicht klar ersichtlich ist, dass es zu den einzelnen Aufzählungspunkten jeweils noch einen ergänzenden Tooltip gibt. Mehr durch Zufall beim »Überfahren« mit der Maus bemerkt es der Anwender – oder eben nicht. Dann hat es seinen Zweck verfehlt. Ein kleines Icon als Hilfestellung kann da schon Wunder wirken. Ein kleines Fragezeichen-Icon, das direkt neben den einzelnen Punkten erscheint, würde dem Anwender z. B. deutlich zeigen, dass es hier noch weitere Informationen gibt.

14.3.8    Weitere Animationen und Effekte 

Neben den hier vorgestellten Animationen und Effekten gibt es noch unzählige weitere »kleinere«, die regelmäßig auf Webseiten zum Einsatz kommen. Die Scrolleffekte, die seit einigen Jahren häufig zum Einsatz kommen, sind dafür exemplarisch. Im Kapitel 13, »Webdesign-Stile und -Trends«, werden diese ausführlich vorgestellt und erläutert.

Inspirationen mit animierten Webseiten finden Sie unter siteinspire.com/websites?categories=184 und patterntap.com. Eine umfangreiche Sammlung von jQuery-Plug-ins steht auf unheap.com zur Verfügung.