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:
| # | Desktop | Mobile |
|---|---|---|
| Pfeil nach unten | Ok | Ok |
| Animierte Pfeile nach unten | Gut | Gut |
| Animierte Scrollbewegung – Mausscroll | Super | Ok |
| Animierte Wischbewegung – Mobiltelefon | Naja | Super |
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.