„Hamburger-Menü“, Hover Effects und andere Trends beim Webdesign
Inhaltsverzeichnis
Auch wenn die Bezeichnung „Hamburger-Menü“ eher an eine Bestellung bei einer Fast-Food-Kette erinnert, gehört sie zur Fachsprache der Webdesigner. Von einem „Hamburger-Menü“ spricht ein Webdesigner immer dann, wenn Steuerelemente bei Apps und Websites von einer Kante des Displays in die Anzeige gezogen werden. Im englischen Sprachraum werden solche Elemente Off-Canvas-Flyouts genannt. Die deutsche Bezeichnung wurde gewählt, weil mehrere funktionelle Schichten ähnlich dem Hamburger zum Essen übereinander liegen. Der Vorteil beim „Hamburger-Menü“ liegt darin, dass die Menüs beim Betrachten der Inhalte einer Website nicht stören.
Hover Effects werden beim Webdesign immer beliebter
Der Begriff Hover kommt aus dem Englischen und wird dort im Sinne von „schweben“ verwendet. Bei der Hover Effects im Zusammenhang mit dem Webdesign handelt es sich um Elemente einer Website, die erst dann sichtbar werden, wenn bestimmte Bereiche mit dem Mouse-Pfeil überfahren werden. Der einfachste Fall von Hover Effects sind Änderungen der Hintergrundfarben, wenn beispielsweise einzelne Positionen in den Menüleisten von WordPress mit dem Mouse-Pfeil berührt werden. Besonders gern verwenden die fachkundige Webdesigner Hover Effects, um zusätzliche Informationen einzublenden. Das klassische Beispiel sind Mitarbeitervorstellungen. Dort werden im sofort sichtbaren Bereich einer Website Fotos mit den Grundsatzinformationen platziert. Fährt der Besucher der Website mit dem Mouse-Pfeil über das Bild, blendet die Website automatisch die Tätigkeitsschwerpunkte, Qualifikationen oder Zuständigkeiten der einzelnen Mitarbeiter ein. Diese Hover Effects verschwinden von selbst, sobald der Mouse-Pfeil einen definierten Bereich des Bilds wieder verlässt. Da dem Besucher mit den Hover Effects zusätzliche Interaktionen wie Klicks erspart werden, lässt sich so die Usability einer Website verbessern.
Beim klugen Webdesign nur einzelne Elemente animieren
Wenn sich große Teile einer Website bewegen, dann irritiert das den Besucher, da dessen Augen immer nur einen Bereich einer Website fokussieren können. Deshalb sollte ein Webdesign, sofern es optimiert wurde, das wichtigste Element durch eine animierte Darstellung in den Fokus stellen. Das gilt insbesondere für den Bereich, der beim Aufruf einer Website ohne Scrollen auf dem Display sichtbar wird. Wie das funktioniert, lässt sich am besten am Beispiel eines Onlineshops erklären. Bietet jemand Bekleidung an, könnte ein Farbwechsel signalisieren, dass ein T-Shirt nicht nur in einer Farbe bestellt werden kann. Auch die verschiedenen Ausstattungsvarianten von Fahrzeugen könnten bereits im Header einer Website in den Fokus gerückt werden. Allerdings darf der Wechsel der Anzeige nicht zu schnell erfolgen, damit Besucher die Möglichkeit haben, die wichtigsten Informationen zu erfassen. Daran sollten auch die Betreiber von Websites achten, die den Kopfbereich ihrer Website mit wechselnden Headerbildern in Form eines Sliders interessant machen möchten.
Animierte Hintergründe sind beim Webdesign kein Tabu
Alles, was sich bewegt, erregt die Aufmerksamkeit des Menschen. Dieses Wissen fließt beim modernen Webdesign selbstverständlich mit ein. Um eine Bindung der Aufmerksamkeit und damit eine verlängerte Verweildauer auf einer Website zu erzielen, setzen viele Webdesigner animierte Hintergründe ein. Allerdings ist hierbei zu beachten, dass wechselnde Hintergründe auch die Aufmerksamkeit von den Hauptinhalten ablenken können. Bevorzugt werden deshalb sanfte Wechsel der Anzeigen verwendet. Als ideale Lösung gilt es derzeit, nur einzelne Abschnitte des Hintergrunds zu animieren oder dort lediglich zwischen verschiedenen Schattierungen zu wechseln. Das gilt für den Hintergrund der Header ebenso wie für den Hintergrund der kompletten Website.
Ladezeiten mit gekonntem Webdesign optimal überbrücken
Wird eine Website aufgerufen und es tut sich ewig nichts, dann tendieren die potentiellen Besucher dazu, einen Fehler zu vermuten. Das bedeutet in der Konsequenz, dass sie sich der nächsten in den Suchergebnissen angezeigten Websites zuwenden. Wer sich beim Webdesign die Mühe macht, seinen Besuchern animierte Grafiken während der Ladezeit der eigentlichen Inhalte anzuzeigen, vermeidet derartige Verluste beim Traffic. Im einfachsten Fall reichen sich bewegende Pfeile aus, wie sie auch von den Browsern genutzt werden. Alternativ bieten sich Kreise mit Punkten an, von denen der Ladefortschritt angezeigt wird. Eine gute Lösung wäre auch ein kurzer Begrüßungstext, der darauf hinweist, dass der Besucher gleich auf die Inhalte der Website weitergeleitet wird. Allerdings sollte bei einem solchen Webdesign darauf geachtet werden, dass das Design dieser Grafiken zur Gestaltung der eigentlichen Website passt. Vom Einspielen von Sounds raten die Agenturen für Webdesign an dieser Stelle jedoch ab.