Carrousel avec flèche vers le bas: a-t-il un but? Comment ça s'appelle?
J'ai remarqué que de nombreux sites Web qui ont des curseurs/carrousels comme arrière-plan pleine hauteur ont cette "icône de flèche vers le bas" centrée au milieu. Parfois, vous pouvez cliquer dessus.
Cette flèche a-t-elle un nom? Cela sert-il un but? Comment cela profite-t-il à l'utilisateur?
Cela s'appelle un bouton d'action fantôme , particulièrement utilisé au-dessus du pli pour les sites Web de taille normale. Étant donné que le pli supérieur remplit tout l'écran, les utilisateurs peuvent supposer qu'il n'y a plus rien à faire défiler vers le bas et à voir.
Ce bouton informe les utilisateurs qu'il y a plus de contenu sous le pli, afin qu'ils puissent faire défiler vers le bas et consommer.
Mise à jour
Se référant au commentaire de @ jacob - quelques sources utiles pour soutenir mon message:
Informez les utilisateurs que la plupart du contenu est en dessous du pli
Suggérez de faire défiler les éléments de conception afin que chaque utilisateur puisse voir rapidement comment fonctionne le site. Un repère visuel subtil, comme une flèche pointée hors écran ou une copie "défiler vers le bas", peut informer les utilisateurs que la plupart du contenu est disponible sous le pli.
Continuez à faire défiler s'il vous plaît ↓
Le danger d'utiliser le plein écran comme une forme d'introduction est que les utilisateurs peuvent ne pas réaliser qu'il y a plus à trouver en faisant défiler. Notre propre page d'accueil Envato nie cela avec une icône de "défilement", suggérant que vous devriez jeter un œil sous le pli.
Une autre étude de NNGroup; Pourquoi le pli de la page est toujours important :
Les deux études quantitatives produisent des estimations légèrement différentes de l'impact du pli sur l'expérience utilisateur. Mais les deux chiffres sont importants: nous ne parlons pas d'une différence de 5% ou d'une différence de 10% entre les informations au-dessus et en dessous du pli. La différence est de l'ordre de 66% à 102%. Si vous voulez un seul nombre comme notre meilleure estimation actuelle, prenons le milieu de cette plage: 84% est la différence moyenne dans la façon dont les utilisateurs traitent les informations au-dessus et en dessous du pli. Énorme. Croyez au pli. Il est là, et l'expérience utilisateur change radicalement à cet endroit.
Les utilisateurs ne font pas défiler pour le plaisir. Ils défilent dans un but. Donc, si parler du pli met l'accent sur ce qui est le premier sur la page, continuons la conversation.
Cette étude parle ici de quelques alternatives à examiner:
Cher concepteur de sites Web, arrêtons de briser la possibilité de faire défiler
Appellation
Cela s'appelle flèche de défilement , comme beaucoup l'ont noté avant moi. L'icône elle-même appelée chevron parfois et appelée flèche du clavier vers le bas dans - Conception matérielle .
Objectif
D'où une image plein écran et des barres de défilement cachées, par ex. sur les appareils Apple (ils n'apparaissent pas avant le défilement), certains utilisateurs peuvent penser qu'il n'y a pas de contenu sous l'image. L'icône signifie qu'il y en a. Énorme testé it cependant et il semble que la plupart des gens défileront de toute façon.
Avantages pour l'utilisateur
Le clic n'est probablement pas si précieux car le défilement est toujours moins cher que le clic (car vous n'avez pas besoin de viser l'icône à l'écran: la loi de Fitt).
Beaucoup diront que c'est une mauvaise pratique car si vous avez besoin d'expliquer votre conception, ce n'est pas cool et opteriez pour l'option trois dans l'image (contenu partiellement visible).
Un mot sur les carrousels
Dans votre exemple, je dirais que c'est une mauvaise pratique car:
- les carrousels eux-mêmes sont généralement considérés comme une mauvaise pratique (raisons: les utilisateurs ne cliquent pas de toute façon après la première diapositive, les points sont trop petits pour le curseur, etc.)
- même si vous utilisez un carrousel, il est généralement préférable d'utiliser des miniatures que des points (plus informatifs) et d'agrandir les flèches prev/next
- l'icône est trop similaire à d'autres icônes (diapositive précédente/suivante), donc une autre icône d'invitation à faire défiler (par exemple la souris) peut mieux fonctionner
Cet élément d'interface utilisateur est appelé Block Scroll.
Sur une conception d'une seule page divisée en blocs (blocs), la fonction de défilement des blocs affiche les blocs un écran à la fois pour améliorer le flux utilisateur et faire fonctionner la page de manière réactive. Chaque bloc est sensible à la hauteur de l'écran de l'utilisateur de sorte que l'utilisateur ne voit exactement qu'un bloc à la fois lors du défilement de la page.
Vous pouvez trouver deux démos du plugin par Dominik Gorecki.
Dans cette première démo , la page conserve la barre de défilement verticale - comparez le défilement de la page à l'aide de la molette de la souris à celui des boutons ⌃⌄ (ou clavier ↑↓ ) au lieu.
La deuxième démo masque complètement la barre de défilement du navigateur, rendant la navigation possible uniquement avec le défilement de bloc. Notez comment l'expérience utilisateur diffère.
Block Scroll est disponible en plugin jQuery .
D'après ce que je sais, on l'appelle une flèche de défilement vers le bas/flèche de défilement généralement utilisée pour faire défiler une page vers le bas sur notre fenêtre.
Et aussi d'après ce que j'ai observé, il est utilisé sur les pages Web où la page de destination a une div d'introduction qui occupe entièrement la hauteur de la fenêtre et n'a pas de barre de navigation ou d'en-tête et lorsque l'utilisateur clique sur la flèche, notre page Web commence à afficher l'en-tête et la barre de navigation comme une normale site.
Cela s'appelle un défilement vers le bas et permet à l'utilisateur de savoir qu'il y a plus de contenu sous le "pli" de la fenêtre du navigateur. En règle générale, lorsqu'il existe une unité de héros pleine largeur/hauteur, il n'est pas toujours évident pour l'utilisateur qu'il y a plus de contenu ci-dessous. C'est également un moyen rapide pour l'utilisateur de cliquer et d'accéder à la prochaine section de contenu.
Ces types de carrousels sont appelés carrousels verticaux et sont utilisés à différentes fins dans un site Web. Exemple1 peut être utilisé dans les carrousels de bannière de page de destination, Exemple2 peut être utilisé dans les barres latérales de l'application, Exemple peut être utilisé pour les vignettes d'images de la galerie.
De nos jours, les sites Web sont plus réactifs et adaptés aux mobiles. Même les ordinateurs portables et les ordinateurs de bureau ont été fabriqués avec des écrans tactiles. Les carrousels verticaux sont utilisés pour les sites Web qui sont principalement axés sur l'image, et l'utilisateur peut glisser ou glisser de haut en bas pour modifier les diapositives qui sont l'action la plus courante sur un appareil à écran tactile.
Le but de la flèche ici est de montrer à l'utilisateur qu'il s'agit d'un carrousel vertical et qu'il peut utiliser l'action de flèche ou de balayage ou même l'action de diapositive de haut en bas pour modifier les diapositives.