- Les visites de sites depuis mobile sont en constante augmentation ! Et il faut reconnaitre que sur nos smartphones, on a tendance à préférer scroller plutôt que d’avoir à cliquer sur des boutons trop petits.
- Des études montrent à présent que 66% de l’attention de l’utilisateur est passée « below the fold », en-dessous de la ligne de flottaison, c’est-à-dire en-dessous de la partie directement visible lorsque l’on arrive sur le site (source : Chartbeat)
- Le scroll permet un storytelling bien plus efficace et immersif que la navigation par page. L’utilisateur est guidé dans sa progression, plutôt que d’être mis devant une barre de navigation où il devra lui-même déterminer son parcours.
Voici une sélection de 13 sites aux webdesigns impressionnants qui utilisent le scroll pour offrir à leurs utilisateurs une expérience riche et inédite … et qui devraient vous donner des idées.
1. Nasa Prospect
Nasa Prospect est l’histoire interactive de deux prospecteurs venus de la Terre : Nicolas et Ema, qui cherchent à rassembler les derniers vestiges de l’humanité. Réalisé par des étudiants d’une université américaine, le site, rempli d’effets de parallaxe, nous fait vivre une véritable aventure interactive, rythmée par des musiques d’ambiance qui évoluent au fur et à mesure du scroll.
2. The Boat
Sans doute l’une des utilisations les plus créatives et novatrices du scroll ! On pourrait presque caractériser The Boat de roman interactif. Les mouvements et les angles de vue des animations offrent une expérience immersive rare, à découvrir ! Personnes souffrant de mal de mer s’abstenir (… sérieusement).
3. Inception Explained
Si comme moi vous avez l’impression de ne pas avoir tout compris dans le film Inception, ce site revient sur les différentes séquences du film et explique étape par étape ce qui arrive aux personnages. Les animations et le scroll permettent une navigation fluide et ultra-agréable.
[btn titre= »formation webdesign » lien= »//fr.tuto.com/tuto/webdesigner.htm » target= »_tab »]Formez-vous au webdesign ![/btn]
4. Time Wasting
Cette infographie animée réalisée par Atlassian présente une série de statistiques amusantes sur les différentes façons dont on perd du temps au travail. Une alternative très agréable aux infographies statiques. Et un point bonus pour le timer à la fin du site qui vous annonce combien de temps vous avez perdu en parcourant l’infographie.
5. Space Needle
Le site de la fameuse Space Needle de Seattle mise tout sur l’altitude ! En scrollant pour atteindre le haut de la tour, vous aurez l’occasion de découvrir de beaux points de vue et quelques informations sur Seattle.
6. Bounty Bev
Avec leur background en forme de route, Bounty Bev donne à leurs visiteurs l’impression de faire un road trip découverte de la marque. Ici, pas d’animation complexe. Tout est fait avec grâce à l’image de fond qui guide l’utilisateur jusqu’en bas du site et un usage malin de l’espace entre les sections. Simple et efficace.
7. Hiroshima
Décidément, encore une belle production du groupe audiovisuel australien SBS (The Boat). Hiroshima raconte l’histoire d’une survivante de la bombe de 1945. Un bel exemple de site long-scroll sobre et élégant. La navigation est rythmée par l’apparition d’illustrations en tout genre qui accompagnent le récit.
8. Lexington Avenue
Ce site pour un groupement d’immeuble de Manhattan illustre bien comment utiliser le scroll de manière élégante et originale à la fois. Le contenu est simple et bien amené, et les 2-3 animations dans la deuxième moitié du site amènent juste la petite touche d’originalité nécessaire.
9. Bowhead
Tails and Whales a su tirer partie du scroll pour présenter Bowhead d’une façon innovante et extrêmement pratique. Leur sac à dos pour surfeur s’anime dans une ambiance sous-marine au fur et mesure du scroll pour dévoiler tous les avantages qu’il propose.
10. Smart USA
Le site Smart US a misé sur les animations, la vidéo et l’interactivité pour présenter son modèle électrique. Le résultat ? Une vision plus « vivante » du véhicule, qui aide l’utilisateur à s’imaginer en train de l’utiliser au quotidien.
[btn titre= »tuto webdesign » lien= »//fr.tuto.com/recherche?&q=webdesign&o=1″ target= »_tab »]Formez-vous au webdesign ![/btn]
Vous avez aimé cet article ?
- Partagez-le avec votre entourage et votre réseau :)
- Découvrez régulièrement des tips pratiques & ressources essentielles en vous abonnant à la newsletter !
(8273)