Blog · Tutorial

Responsive Scroll-Icon Animation

Kleines Element, Große Wirkung oder wie sieht eigentlich Usability aus

Tags: AnimationCSS3ResponsiveTutorial

Es gibt Viele Elemente auf einer einfachen Website. Den User richtig durch die einzelnen Seiten oder besser durch die angezeigte Seite zu führen – das bedeutet für mich Usability. In der heutigen Zeit kommen sehr viele Variablen, die der Webdesigner zu beachten hat dazu. Um dieses Problem sichtbar zu machen habe ich mir ein kleines Element herausgepickt und eine einfache Umsetzung erstellt.

Bei Webseiten mit bildschirmfüllenden Hintergrundbild, wie auch diese Seite nutzt, symbolisiert ein Scroll-Icon den User das es noch mehr Inhalt zum entdecken gibt. Je nachdem wie "Responsive" die Seite umgesetzt ist, gibt es auch in den kleineren oder mobilen Version ein bildschirmfüllendes Hintergrundbild. Also haben wir jetzt die Herausforderung dem User mitzuteilen das er nach unten scrollen soll.

Wie symbolisiert man dem User dass er nach unten Scrollen soll?

Es gibt natürlich unzählige Möglichkeiten den User zum hinunter scrollen zu animieren - folgende Überlegungen waren meine Ausgangsbasis:

#DesktopMobile
Pfeil nach untenOkOk
Animierte Pfeile nach untenGutGut
Animierte Scrollbewegung – MausscrollSuperOk
Animierte Wischbewegung – MobiltelefonNajaSuper

Responsive Umsetzung

 

See the Pen CSS Only Responsive Scroll-Icon Animation by Christoph Zeller (@zellerchris) on CodePen.

Fazit

Ich hoffe dieses Usability Beispiel inspiriert den einen oder anderen. Natürlich könnt ihr den Quellcode für eure eigenen Projekte verwenden. Über einen Link, würde ich mich sehr freuen.

Was mich interessieren würde, welche Elemente deiner Website brauchen eine Optimierung? Schreib einen Kommentar oder kontaktiere uns.

Share:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Name *