Mouseover

Beim Mouseover Effekt wird das Verhalten beschrieben, das ein Website-Element zeigt, wenn man mit der Maus über ihm „schwebt“. Der Effekt wird auch Hover Effekt genannt und soll die Möglichkeit bieten, einem statischen Element eine gewisse Dynamik zu verleihen und ein Feedback zu visualisieren.

Allgemeine Informationen zum Thema

In den Anfängen der Website-Programmierung benötigte man für einen Transitionseffekt noch das betreffende Element bzw. den entsprechenden Button in verschiedenen Zuständen. Heute dagegen wird dieser Effekt innerhalb des CSS definiert.

Einem ähnlichen Prinzip wie dem Mouseover Effekt folgt der sogenannte Tooltip. Fährt man mit der Maus über ein Element, das den Tooltip anwendet, wird zusätzlich ein Informationstext eingeblendet.

Mouseover Effekt, Hover Effekt und Tooltip folgen einem ähnlichen Prinzip. Sie ermöglichen eine Vielzahl von Effekten, um ein Element hervorzuheben, während die Ladezeiten kurz bleiben und das betroffene Element nicht doppelt geladen werden muss.

Einsatz des Mouseover Effekts

Ein häufiges Problem bei rein statischen Webseiten ist die Tatsache, dass die Aufmerksamkeit schnell verloren geht. Viele User wünschen sich beim Besuch einer Seite Abwechslung, wenn sie sich Bilder oder andere Elemente ansehen. Letztlich geht es darum, den Besuch einer Website mit einem Erlebnis zu verbinden. Das können statische Seiten nur in eingeschränkter Form sein.

Mit dem Mouseover Effekt kann man Websites dynamischer gestalten, der Besucher findet Abwechslung und Anregung, wenn Tooltips und ähnliche Effekte eingesetzt werden. Zudem lässt sich die Übersichtlichkeit einer Seite mit Effekten verbessern. Beispielsweise, um den Fokus des Betrachters auf bestimmte Elemente zu lenken. Mit einem entsprechenden Design wirkt die Seite also frischer, kreativer und aussagekräftiger.

Bei der Gestaltung des Mouseover Effekts kommt es allerdings darauf an, eine gewisse Stimmigkeit herzustellen und den Besucher der Website nicht zu verwirren oder zu überfordern. So sollte man vermeiden, zu viele Effekte parallel zueinander anzuwenden, da dies zu einer Reizüberflutung führen kann, was die Besucher dann abschreckt.

Besonders Online-Shops nutzen den Mouseover Effekt häufig. So wird etwa beim Drüberfahren mit der Maus ein Produkt größer angezeigt oder mit einem zusätzlichen Informationstext versehen. Auch hier ist jedoch die Ausgewogenheit zwischen bewegten und statischen Elementen zu bedenken.

Der Mouseover Effekt auf mobilen Geräten

Für mobile Geräte bedeutet der Mouseover Effekt eine besondere Herausforderung. Der Grund liegt in der Bedienbarkeit von Tablets oder anderen mobilen Geräten. Während zu Beginn von Websites eine Tastatur nötig war, um Befehle umzusetzen, kam später die Maus hinzu, die die Tastatur bei vielen Kommandos ablöste.

Doch auch die Maus blieb nicht lange allein. Mit der sogenannten Mehrfingergestenerkennung lösten die Finger von Nutzern mobiler Geräte die Maus ab. Das führte beim Mouseover Effekt zu Problemen. Denn die Maus funktioniert mit einem Cursor, der über die Objekte bewegt werden muss. Ist er an der richtigen Stelle, beginnt der Mouseover Effekt. Doch mit den Fingern tippt man direkt auf die gewünschte Stelle, das Fahren mit dem Cursor über die einzelnen Elemente entfällt, das Display erkennt die Bewegung dementsprechend nicht.

Die Gerätehersteller haben versucht, das Problem zu lösen, etwa mit dem Sony Floating Touch oder dem Apple Patent für Touch und Hover Panels. Was die Technik erschwerte, waren zudem Geräte, die sowohl die klassische Mouse-Bedienung als auch Touch-Displays unterstützten.

Wiederbelebung von Animationen durch den Mouseover Effekt

Animationen galten früher als Spielereien, die aufdringlich sind und den Aufenthalt bei einer Website stören. Das lag im Wesentlichen an dem werbenden Effekt, mit dem man Animationen früher verbunden hat. Auch heute gibt es noch Websites, die mit dem „Gimmick“ von Animationen arbeiten, diese werden aber von den meisten Nutzern eher als Show empfunden, die wenig Sinn hat oder keinen Nutzen bringt.

Doch mit dem Entstehen des Mouseover Effekts hat sich das Image von Animationen – nichts anderes ist der Mouseover Effekt ja – geändert. Da dieser Effekt weniger zu „Unterhaltungszwecken“, sondern für Bedienungs- und Navigationshilfen eingesetzt wird, ist er in der Gunst der Nutzer gestiegen.

jQuery und andere JavaScript-Frameworks trugen zu einer starken Verbreitung von Animationen wie den Mouseover Effekt bei, und die Erstellung von Animationen wurde dadurch leichter, sodass mehr Nutzer von der Möglichkeit Gebrauch machen.

Zwei Arten der Animation bietet etwa CSS3 an: Transitions und Animations. Mit diesen lassen sich folgende Eigenschaften festlegen:

• Die Festlegung, welche CSS-Eigenschaften animiert werden sollen
• Die Dauer der Animation
• Die Geschwindigkeit der Animation (also zum Beispiel, ob sie linear sein soll oder zuerst schneller, dann wieder langsamer etc.)
• Die Festlegung, wann die Animation ausgeführt werden soll

Der Unterschied der beiden Animations-Arten besteht darin, ob sie sich wiederholen (loopen) lassen und in welchem Umfang sich die Veränderungen einstellen lassen.

Bedeutung für das Online-Marketing

Der Mouseover Effekt wirkt sich auf das Befinden von Websitenbesuchern spürbar aus. Da derart gestaltete Animationen nicht mehr den Charakter einer „Spielerei“ haben, sondern einen Mehrwert für die Funktionalität bieten, werden sie auch gut angenommen.

So werden Vergrößerungen von Produktfotos oder zusätzliche vergrößerte Produktinformationen als Vorteil gewertet, was dem Mouseover Effekt größeres Gewicht verleiht.

Allerdings sollte der Mouseover Effekt nicht zu umfangreich angewendet werden, da er statt einer besseren Übersichtlichkeit einen gegenteiligen Effekt haben kann.

Weblinks

• Was ist der Hover-Effekt?
• Interaktive Schaltflächen mit Mouseover-Effekten für POP-UPs in PDF-Dateien
• Mouseover Effekt