Le défilement est un élément clé de la conception de tout site Web, qui dépasse la simple page de destination. Quiconque pense que le parchemin est mort doit sortir de 2005!
Les actions de défilement déplacent les utilisateurs verticalement ou horizontalement dans le contenu et constituent un modèle d'utilisateur généralement accepté. Le parchemin est bien vivant grâce à de nombreuses techniques de conception intéressantes et à un virage vers l’accès à des sites Web complets sur des écrans plus petits. Nous allons jeter un coup d'oeil!
6 façons d'utiliser les actions de défilement
Une action de défilement n'est pas simplement une astuce astucieuse pour la conception de votre site Web. Il doit faire quelque chose et amener les utilisateurs à s’engager dans un contenu spécifique ou à effectuer une action donnée. À moins que ces critères ne soient remplis, les actions de défilement ne sont que des astuces stupides.
Il existe différentes manières d'impliquer les utilisateurs avec le défilement:
- Faites défiler verticalement: C'est le modèle le plus intuitif où les utilisateurs se déplacent de haut en bas de la page. Même sans beaucoup d'autres informations, les utilisateurs essaieront de faire défiler s'ils ont un intérêt quelconque dans la conception ou le contenu.
- Faites défiler horizontalement: Bien que ce schéma devienne de plus en plus courant grâce à la prolifération de curseurs d’image, la plupart des utilisateurs ont toujours besoin d’un repère de défilement horizontal, tel qu’une flèche ou une instruction. Ensuite, vous devez décider si le défilement horizontal est une action à sens unique ou à double sens.
- Utilisez des calques: La superposition d'objets permet aux utilisateurs de voir les motifs et les mouvements (pensez aux principes de Material Design). En empilant des éléments sur un arrière-plan et au premier plan, vous pouvez encourager le défilement.
- Dites aux utilisateurs de faire défiler: Il n'y a rien de mal avec une icône ou une petite photocopie qui indique aux utilisateurs où et comment faire défiler. Inclure l'élément juste au-dessus de l'endroit où l'écran? et les utilisateurs devraient faire défiler pour voir plus.
- Utilisez click to scroll: Si vous utilisez une icône ou un élément pour encourager le défilement, activez-le également en un clic. (Les utilisateurs ne peuvent presque pas s'empêcher de cliquer sur des éléments qui ressemblent à des boutons.) L'utilisation d'un clic pour faire défiler les actions fournira une agréable surprise en permettant aux utilisateurs d'accéder au contenu suivant.
- Faites défiler partout: Aucune règle ne dit que le défilement doit être de haut en bas ou de gauche à droite. Il peut se déplacer de plusieurs façons. Envisagez les motifs ronds, diagonaux ou autres, dans la mesure où ils sont faciles à comprendre pour les utilisateurs en relation avec le contenu et favorisent l’engagement.
10 exemples de tueurs pour Inspiration
Maintenant que vous avez une idée de la façon de concevoir des actions de défilement, laissez-vous inspirer par quelques exemples de grand design. Pour tirer le meilleur parti de tous les exemples ci-dessous, assurez-vous de cliquer sur les sites Web et de jouer pour tirer le meilleur parti de chaque expérience interactive.
Vous remarquerez que chaque projet aborde le défilement légèrement différemment. Certains sont plus intuitifs que d’autres, mais offrent tous une base intéressante pour commencer. Prendre plaisir!
IMS Productions
IMS Productions utilise le défilement vertical pour présenter efficacement des histoires un? Écran? à la fois. Chaque parchemin amène les utilisateurs vers un nouveau profil qui remplit l'écran et offre une mini expérience en soi. Notez les lignes verticales subtiles et les flèches qui incitent tous les utilisateurs à faire défiler le design du site.
Amour instantané
Instant Love combine des actions de défilement et du son pour une expérience musicale amusante. Chaque action de défilement présente une nouvelle chanson à écouter, accompagnée des informations sur la piste et l’artiste. Les actions de défilement sont utilisées comme un jeu pour encourager l'engagement et l'interaction pendant une période prolongée.
Smart USA
Smart USA utilise beaucoup de techniques de défilement géniales, notamment une vue à 360 degrés, pour aider à vendre des voitures. Ce type de fonction de défilement peut être utile pour le commerce électronique et les ventes de produits, car les utilisateurs peuvent explorer les produits plus en détail qu'avec les images seules.
Havaianas
Havaianas utilise le défilement horizontal pour présenter les produits. Ce qui est bien avec ce modèle, c'est que chaque diapositive du défilement comprend un appel à l'action et une barre de progression en bas. Lorsque les panneaux défilent automatiquement, les utilisateurs peuvent à tout moment prendre le contrôle pour afficher uniquement le contenu recherché.
Exagérer
Playup est une aventure animée composée de pièces en mouvement qui changent d’une carte à l’autre. Il y a beaucoup d'activités de défilement, mais les mouvements sont rapides et attrayants, en particulier avec les choix de couleurs plus audacieux. De plus, les utilisateurs peuvent faire défiler l'écran vers le haut ou vers le bas et il y a toujours un repère visuel à droite qui vous permet de savoir quelles actions sont disponibles.
Pharrell Williams
Pharrell Williams est l’un des sites de défilement les plus amusants que vous trouverez. Il bouge dans toutes les directions, rebondit, se déplace et change de forme devant vos yeux. Et chaque élément de la conception est dirigé par des actions de défilement. Une fois que les utilisateurs ont cliqué sur les cartes de la page d'accueil, les pages intérieures tirent également profit du défilement continu avec un mouvement de parallaxe pour conserver la même ambiance.
Tubélectrique
Tubelectric ne ressemble pas à un modèle comportant de nombreux effets de défilement, mais utilise une simple superposition et une animation pour mettre en valeur le produit. Il y a des plaisirs inattendus dans la conception de chaque coup de souris pour un site Web qui aurait pu avoir un design plat.
Le plus haut site web du monde
Le site Web le plus élevé au monde est un exemple stupide de défilement extrême. Il continue à faire défiler plus de 11 miles. S'amuser!
Rocket Lab
Rocket Lab utilise un défilement vertical plus traditionnel sous la vidéo de la page complète pour présenter des informations. Ce qui est particulièrement bien, c'est la microcopie -? Roulons? - Dire aux utilisateurs de continuer à faire défiler pour plus.
Sliders
Les curseurs utilisent une action de défilement de parallaxe pour présenter le restaurant et les éléments de menu. La conception générale est assez simple et les actions de défilement ne sont pas compliquées, mais tout se déroule facilement. Ceci est un excellent exemple de la façon de mélanger des actions d'interface utilisateur cool avec des images stellaires.
Conclusion
Le défilement se présente sous différentes formes.Espérons que ces exemples vous inciteront à créer quelque chose avec un motif de défilement intéressant ou nouveau pour aider à engager une nouvelle base d'utilisateurs.
Rappelez-vous, comme pour tout ce qui est nouveau. Testez-le. Regardez les analyses. Apportez les modifications nécessaires pour vous assurer que vos modèles de défilement et de conception expérimentaux fonctionnent correctement et servent bien les utilisateurs.