Startseite » Insight » Wie du mit Mouseover-Effekten die User Experience deiner Website verbesserst …

Wie du mit Mouseover-Effekten die User Ex­pe­ri­ence deiner Web­site ver­bes­serst ...

autor: Shantu A. Bhattacharjee
13.01.2023
Teilen auf :

… und sie gleichzeitig im Page Ranking aufwertest. – So klappt dein SEO.

Der Mouseover ähnelt einer ersten Berührung, einem ersten Blick oder einer Geste, die viel über das Gegenüber verrät. Er ist an Texte, Bilder, Symbole, Hintergründe und Stile gebunden und bietet die ordnende Möglichkeit einer gezielten UX.

Zudem verleiht ein Mouseover als Webdesign-Effekt einer Website Leben und den Usern ein attraktives und interaktives Erlebnis. Nahezu jeder Content kann beim Mouseover die Farbe, die Aufteilung, die Geschwindigkeit oder die Message wechseln. Mouseover-Effekte teilen Bilder, verschieben sie und/oder öffnen eine neue Ebene.

Dieser Web-Effekt, der auch gerne mal ‚Roll-over‘ oder ‚Hover-Effekt‘ genannt wird, ist durch seine Vielseitigkeit sicherlich zu einer der optisch bekanntesten Gestaltungstechniken geworden, die dem professionellem Webdesign zur Verfügung stehen, um Besucher zu überraschen und der Website eine höhere Wertigkeit zu geben.

Themenübersicht

  • Klickbare Mouseover
  • Coding-Beispiele für klickbare Mouseover:
  • Circle Mouseover
  • Pop-out Mouseover
  • Snazzy Mouseover
  • Menü-Mouseover
  • Zoom-in/Zoom-out Mouseover
  • Schnelle Mouseover-Diashow
  • Split Image Mouseover
  • Arty Mouseover

Klickbare Mouseover

Der Mouseover unterstützt die Usability, denn nicht immer wissen User, was genau sie bei einem Webobjekt tun müssen: klicken, ziehen, öffnen oder nur anschauen? – Hier signalisiert der Mouseover die Anwendung: Bitte klicken! Hinter einem Bild kommen so noch weitere Informationen zum Vorschein. Wenn die Mouse über ein Bild fährt, kann das ein kleines Ruckeln, einen starken Farbeffekt oder anderes provozieren. Das bedeutet: ‚Hallo, die Mouse befindet sich aktuell hier und das Bild ist anklickbar.‘

Lineart Illustration eines häckchen– Magenta Pink
Coding-Beispiele für klickbare Mouseover:

Circle Mouseover

Buttons sind im Webdesign häufig ein Zeichen, dass User sie anklicken können, um dahinter weitergehende Informationen preiszugeben, die es gilt zu entdecken. Bei diesem Webdesign-Effekt schwingen sie weit auf, zirkeln zur Seite weg, schieben sich aus dem Hintergrund nach vorn und bieten viele weitere Möglichkeiten, um Besucher zu interessieren, interaktiv zu beschäftigen und so die Bounce Rate zu senken.

Hier ein rundes Beispiel für einen Circle Mouseover:

Pop-out Mouseover

Sämtliche Bilder, Illustrationen oder Symbole liegen verschwommen und geheimnisvoll im Dunkel der Website. User können nun mit einem Pop-out Mouseover die einzelnen Bilder erhellen und ihnen so weitere Informationen entlocken.

Hier ein Beispiel für ein Pop-out Mouseover:

Snazzy Mouseover

Wenn bei dieser Form des Mouseovers die Mouse über ein Feld oder eine Illustration fährt, werden Informationen in Form eines Beschriftungstextes auf dem Bild freigegeben, über das sie sich gerade bewegt oder auf das sie sich konzentriert. Wer ist die Person? Wo liegt der Ort? Was soll das Bild bedeuten? – Viele Details, die im Zusammenhang mit der Grafik stehen, werden erklärt, ein Kontrast herausgearbeitet, eben ganz und gar snazzy.

Hier einige Beispiele für Snazzy Mouseover:

Menü-Mouseover

Namen können viel über Menschen verraten: überwiegend das Geschlecht und etwaige Alter. Doch manchmal benötigen User eben Fakten, Hintergrundinformationen oder auch Ansichten. Diese werden mit diesem sehr anregenden Webdesign-Effekt sichtbar.

Hier ein einziges, aber cooles Beispiel für einen Menü-Mouseover:

Zoom-in/Zoom-out Mouseover

Wer kennt es nicht: Die Bilder auf der Website sind viel zu klein oder so überfüllt, dass User sie gerne näher vor Augen hätten. Ein Klick und sie helfen dem gesuchten Objekt per Mouseover und einem Zoom auf die Sprünge. Das ist behutsam und wirkt. So wird beispielsweise das interessante T-Shirt eines Fashionlabels größer und deren Details erkennbarer oder das Wimmelbild vom Freibad wird nach einem freien Platz durch eine Lupe abgesucht.

Beispiele fürs Zooming im Mouseover:

Schnelle Mouseover-Diashow

Mit diesem Mouseover-Effekt setzen User eine superschnelle Diashow in Gang und zeigen das aktuelle Bild an. Außerdem können weitergehende Informationen, etwa in Form von Schriften, eingebettet werden.

Anschnallen und festhalten, es folgt ein zackiger Mouseover!

Split Image Mouseover

Von einem Bild ins nächste zu springen ist mit dem Split Image Mouseover möglich. Dabei spielt es keine Rolle, ob von einem großen Bild in Dutzende kleinere oder umgekehrt. Diese Variante bringt es gut auf den Punkt, wenn sich Bilder in viele verschiedene Bilder aufteilen: Das Kleine steckt im Großen. Dieser Mouseover ist etwas für Künstler oder Unternehmen, die einen kleinen Umfang an Produkten anbieten.

Hier ein Beispiel für einen Split Image Mouseover:

Arty Mouseover

Niemand sagt, dass ein Mouseover nicht einfach nur sehr verspielt und auch ein wenig arty sein kann: wie etwa bei Sland & Slide, Slanted Blinds, Show Border u. Ä., deren Mouseover-Effekte-Verspieltheit an frühere analoge Schnitt-Tricks erinnert und dahinter informative Ebenen für User bereithält. Überall dort, wo sich die Mouse bewegt, verändert sich was.

Coole Beispiele für Arty Mouseover:

Klick den Button

Du willst ein paar schicke neue Features, um deine Website kreativer zu gestalten und die User Experience zu verbessern?

Klick doch mal auf den Button!

Unsere Webentwickler können es kaum erwarten, dich glücklich zu machen.  Tel. +49 30 40045775

Hier findest du themenverwandte Artikel:

insights

insights