Was hat es eigentlich mit der optimalen Gliederung einer Website auf sich? Ohne eine durchdachte Struktur kann eine Website nicht die gewünschte Wirkung entfalten. Die Wirkung einer Website ist ausschlaggebend für den Erfolg. Es geht dabei nicht nur um die Funktionalität, sondern auch um den optischen Aspekt. Eine zielgruppenorientierte Gestaltung wird mit passendem Content, einer guten Navigation, Textlinks, internen Verlinkungen, passenden Titeln, Buttons und vielem mehr erreicht. Doch, wenn viele dieser Bereiche keine Hover-Effekte aufweisen, heben sie sich nicht voneinander ab und wirken regelrecht „platt“. Viele interessante Inhalte gehen bei der Betrachtung unter und der Nutzer kann die gesuchten Informationen nicht ausfindig machen. Wenn Sie einen Button sehen, auf diesen Klicken und dabei keine weitere Aktion erhalten, hat er seinen Einsatz verfehlt. Ähnlich ist es auch mit Textstellen, die ohne Schattierungen oder anderen Abhebungen schnell übersehen werden.
Das Ziel eines Hover-Effekts
Bewegung und Abhebung ist das Ziel eines Hover-Effekts, da dieser Effekt das Verhalten eines Website-Elements beschreibt, sobald der Cursor über ihm „schwebt“. Auf diese Weise wird einem statischen Element auf der Website mehr „Leben“ eingehaucht und eine Handlung visualisiert. Der Fokus wird unterbewusst auf den Inhalt gelenkt und beispielsweise mit einem Farbwechsel auf die Verknüpfung eines anderen Weblinks aufmerksam gemacht. Ein anderes Wort für den Hover-Effekt ist der Mouseover-Effekt, zu Deutsch „Maus über“. Das Bezeichnet die Interaktion mit der PC-Maus über ein bestimmtes Element, wie eine Verlinkung, einen Text oder eine Grafik zu fahren und dabei Veränderungen feststellen zu können, die zum Handeln anregen. Die Veränderung wird mit Effekten deutlich, z.B. die eines unterstrichenden Textes.
Auch Animationseffekte sind Teil der Hover-Effekte. Denn auch diese lenken die Aufmerksamkeit des Benutzers auf die wichtigen Details und geben den Weg vor. Zudem verwandeln sie abstrakte flache Bildschirme in eine lebendige Welt, die zur Steigerung der Benutzerfreundlichkeit beiträgt. Dabei vermitteln Animationen dem Benutzer ein besseres Verständnis dafür, was gesehen wird, gleichzeitig erklärt und zeigt diese Darstellungsform wie dieses verwendet werden kann und sollte. Das geschieht schon mit kleinen Schattierungen, Ein- und Ausblendungen oder dezentem Blinken, die eine unaufdringliche und selbsterklärende Hilfe suggerieren. Auch praktisch nutzbar bei Ladezeiten, da individuelle Animationen mit einer Handlung oder Bewegung ansprechender sind als der typische Kreis als Ladebalken.
Die Vorteile der Hover-Effekte
- Aufmerksamkeit erregen
- Verdeutlichung der Aktionsmöglichkeiten
- Unterhaltsame Informationsquelle mit interessantem Bedienfeld
- Attraktive & Interaktive Unternehmenswebsite
- Hohe Benutzerfreundlichkeit
- Klickzahl- und Kundensteigerung
Erstellt und individuell gestaltet werden können die gewünschten Effekte mit der Unterstützung von CSS. So steuern Sie die Aktionsbefehle. Gezielt wird festgelegt, welche Eigenschaft geändert wird, wie lang die Dauer der Animation anhält und ob diese Variationen in der Geschwindigkeit haben soll. Zudem zählen auch ein fließender oder stufenweisender Übergang, Bildgrößenverhältnisse und Deckfarbenänderungen zu der Vielzahl an Programmiermöglichkeiten dazu. Es ist möglich, sehr kreativ zu werden und ausgefallene Möglichkeiten, die dem Kunden in Erinnerung bleiben, einzubringen. Wichtig dabei ist, dass es zum Gesamtbild der Website passt und die Usability unterstützt.
Ein paar Beispiele dafür sind:
- Eine Sprechblase erscheinen zu lassen, sobald man mit der PC-Maus über eine Grafik fährt
- Farbveränderungen im Logo
- Mit der PC-Maus über ein Foto fahren, das daraufhin farbig erscheint und mit Text ergänzt wird oder sich von scharf zu unscharf verändert
Bei einer Interaktion können sogar mehrere Effekte gleichzeitig angewendet werden: Im Hintergrund einen farbigen Streifen auftauchen lassen, den Schlagschatten reduzieren, die Schrift aufhellen und versetzen.
Bei der Erstellung einer interaktiven Website, die auf Ihre Ziele abgestimmt ist, unterstützen wir Sie gerne. Haben Sie noch weitere Fragen zu den Hover-Effekten? Nutzen Sie gerne unsere Kontaktmöglichkeiten. Über unsere Telefonnummer erreichen Sie außerdem schnell einen kompetenten Mitarbeiter, der Ihnen weiterhelfen kann.
