web-dev-qa-db-fra.com

Le placement du bouton de lecture vidéo est-il déroutant?

Je crée un blog avec des vidéos dans chaque article. Mais, je ne sais pas si l'icône de lecture triangulaire à l'intérieur d'un cercle à droite se présente comme la partie incontournable de la page ou pire si elle laisse l'impression qu'il n'y a même pas de vidéo à regarder. S'il s'agit d'un placement erroné, dites-moi comment améliorer cette fonction en termes d'UX. enter image description here

1
Furkanicus

D'un point de vue purement cognitif, vous devez vous demander:

  1. L'utilisateur peut-il comprendre qu'il s'agit d'une vidéo?
  2. L'utilisateur souhaite-t-il lire la vidéo?

Quant à 1 - le fait qu'il s'agisse d'une vidéo est implicite - il nécessite que les utilisateurs regardent l'icône de lecture, ce qui suggérera qu'il s'agit d'une vidéo. Mais il peut y avoir de nombreuses autres distractions à l'écran et l'œil peut manquer cette icône. Je dirais donc que ce n'est pas la meilleure façon de transmettre cela aux utilisateurs.

Quant à 2 - si l'utilisateur sait que c'est une vidéo et veut la lire, il n'aura aucun problème à comprendre que le bouton de lecture le fait.

Votre problème est donc avec 1, pas 2.

Une façon de rendre cela plus évident est de rendre le bouton de lecture plus visible, comme ici:

A screenshot showing an image with a being triangle in the centre and a big blue play button

Mais je dirais que la révision suivante fonctionnerait mieux (je ne pouvais pas supprimer l'ancien bouton de lecture, mais vous devriez):

The same image as above, but with a button saying 'play video' with green background

Fondamentalement:

  • Le vert (chaud) contraste avec la palette de couleurs (froide) de l'image pour attirer l'attention.
  • La légende est courte (rapide à lire) impliquant à la fois l'action (lecture) et le nom (vidéo) pour indiquer qu'il s'agit d'une vidéo.
  • Il est positionné le long de l'axe de balayage vertical de l'œil.
6
Izhaki

Telles ont été mes réactions en regardant l'image:

  1. "Hé, il y a quelque chose que je peux jouer" (quand j'ai vu "l'icône de jeu triangulaire à l'intérieur d'un cercle").
  2. "Non, attends, ça doit être autre chose. Peut-être un curseur?" parce que le placement de l'icône est assez déroutant pour moi. Les icônes "Lecture" sont généralement centrées au milieu de l'image (par exemple, Youtube, Vimeo) ou en bas à gauche (voir les messages vidéo sur http://www.nytimes.com/ ), tandis que ici c'est en bas à droite. Je m'attends généralement à ce qu'un contrôleur "Suivant" soit là. Et aussi, de quoi parle la petite flèche vers le bas?

D'après votre question, je n'ai pas le but initial du bouton, donc je fais quelques hypothèses ici:

  • Si le bouton est "En savoir plus", vous devez utiliser une solution plus standard (par exemple, un bouton centré avec du texte "En savoir plus").
  • Si vous souhaitez utiliser une icône vidéo pour classer la publication (par exemple, "Ceci est une publication vidéo"), vous devez utiliser une autre icône liée au film:

enter image description hereenter image description here

Mais depuis ces icônes ne sont pas standard , dans ce cas, je vous suggère vraiment d'utiliser une étiquette de texte (ou une combinaison d'icône + de texte).

  • Si vous souhaitez que les utilisateurs cliquent sur le bouton pour lire la vidéo, vous pouvez utiliser cette icône, mais je vous suggère de la placer au milieu de l'image ou en bas à gauche.
8
Eleonora Zucconi

En prenant en compte l'astuce de @ izhaki, j'ai changé le design pour celui de l'image ci-dessous. Pour lister les changements, j'ai

  • diminution de la taille de la police d'en-tête pour faire ressortir le bouton
  • ajouté "Lire la vidéo" comme suggéré

play video

3
Furkanicus