Curseur Minimum Maximum - Meilleures pratiques d'utilisation
Je développe une application mobile iOS pour ralentir/accélérer les vidéos. Après quelques recherches et intuitions, j'ai décidé de choisir un Slider comme composant d'interface utilisateur responsable pour le changement de vitesse vidéo. La plage de vitesse vidéo est entre 16x plus lente et 16x plus rapide que la vitesse d'origine.
Naturellement, le côté le plus à gauche du Slider devrait être le plus lent et le côté le plus à droite devrait être le plus rapide.
J'ai remarqué quelque chose d'intéressant lors de l'utilisation du curseur standard d'iOS: lorsque le pouce part du côté le plus à gauche (valeur minimale) et que la valeur maximale est à l'extrême droite, cela donne une connotation "mauvaise" au côté gauche , et une connotation positive sur le côté droit. De plus, c'était un peu déroutant que je sois sur la partie ralentie ou accélérée.
Exemple: 
J'ai alors décidé de changer un peu les choses et de placer l'origine du curseur au centre. Le centre signifie "vitesse d'origine". Faire glisser vers la gauche se concentrera uniquement sur le ralentissement, tandis que faire glisser la droite se concentrera sur l'accélération. Même exemple ci-dessus avec la nouvelle version:
J'ai l'impression qu'il manque toujours de convivialité. Peut-être en ajoutant des indicateurs à côté de l'origine centrale? J'aimerais entendre vos pensées et vos idées. Merci d'avoir lu!
Je pense que votre interface utilisateur est assez claire et ne causera aucun malentendu avec l'utilisateur. Vous pouvez le rendre plus esthétique, en réduisant le nombre d'éléments dans l'interface utilisateur. Cette interface utilisateur peut être plus claire et suffisamment claire. Avec cette interface utilisateur, le numéro ne sera visible que lorsque vous appuyez sur le bouton ou que vous enfoncez le bouton. 
EDIT: Scrap la boîte de saisie, @vinay a raison. Cela rendrait le tout plus complexe. Donc, cela finira par ressembler à ceci: 
OK, avant de partager ce que je pense que vous devriez faire, je pense qu'il est préférable de vous rappeler qu'il y a deux types d'utilisateurs que vous rencontrerez quand vous créez un outil comme celui-ci: ceux qui voudront entrer une valeur exacte et ceux qui veulent juste ralentir/accélérer la vidéo le plus rapidement possible. Vous devez vous rappeler d'essayer de répondre aux demandes de ces deux types d'utilisateurs.
Pour répondre aux premiers, vous feriez ce que vous avez fait (c'est-à-dire un curseur, mais avec un léger ajustement: vous ajoutez une zone de saisie. N'UTILISEZ PAS LA BOÎTE D'ENTRÉE ): 
(Je sais, l'entrée indique 0,0x alors qu'elle est en fait 7,24x plus lente). Personnellement, je ne garantis pas cette méthode en raison des méthodes expliquées ci-dessous.
Maintenant, pour ces derniers (ceux qui veulent simplement accélérer ou ralentir la vidéo le plus rapidement possible), vous pouvez ajouter des boutons d'action qui font passer le curseur à la position correspondante:
Voici quelques exemples d'outils/logiciels qui utilisent cette méthode:
- D'abord VLC (v2.2.4):
- Et l'autre étant YouTube (PC). En fait, YouTube n'a aucune méthode permettant à un utilisateur d'entrer la valeur qu'il souhaite. Il place juste un tas de valeurs par défaut et cela fonctionne
Et une autre chose, veuillez faire face à la tortue vers la droite (vérifiez l'image ci-dessus des boutons + curseur + exemple d'entrée). Étant donné que la vidéo continue d'avancer , je pense que la tortue devrait faire face au droit de (espérons-le) communiquer inconsciemment à l'utilisateur que vous ralentissez la vidéo et non pas de rembobinage. Je sais que cela semble petit, mais je pense que cela devrait être ainsi. Bien sûr, cela dépend de vous.
J'ai également supprimé le "7.24x Slower", car un utilisateur sera en mesure de comprendre que si une vidéo se déplace en dessous de la vitesse 1.0x, elle se déplace à une vitesse plus lente. Mais là encore, ce raisonnement est contesté par l'exemple YouTube ci-dessus (il utilise le mot "Normal" au lieu de 1.0x/1x, ce qui pourrait suggérer que les utilisateurs ne l'ont pas compris pendant les tests). À la fin de la journée, encore une fois, tout dépend de vous.
Je pense que le principal problème est d'utiliser une barre de défilement dans une interface tactile.
Les barres de défilement et sont d'excellentes entrées pour la souris mais terribles pour le toucher. La ligne horizontale peut être le mouvement de pouce commun le plus gênant possible lorsque vous tenez un téléphone. Essayez de tracer une ligne horizontale avec votre pouce sur votre téléphone. Pour faire des lignes horizontales, la plupart des utilisateurs doivent changer physiquement leur prise sur l'appareil. De plus, vous ne pouvez pas voir ce que vous touchez.
(Édition - J'ai oublié d'inclure ce point) Les barres de défilement et les curseurs ont très peu de précision au toucher. Si l'entrée n'est que de quelques points par pouce, un curseur est facile à utiliser. La plage pour cette application est d'au moins 32 et la question montre une précision décimale. Taper et maintenir sont beaucoup plus faciles à faire que de contrôler un curseur. (Fin de l'édition)
Vous devez utiliser des boutons. Ils doivent être conçus et positionnés de manière à être facilement reconnaissables et utilisables. L'utilisateur peut appuyer sur les boutons ou les maintenir enfoncés.
Lorsqu'un utilisateur touche un écran pour interagir, l'utilisateur couvre l'écran. Les boutons doivent donc être en dessous ou à côté de tout ce que l'utilisateur doit voir lors de l'utilisation des boutons. Les utilisateurs doivent pouvoir faire défiler la carte dans une position accessible (déplacer la carte de haut en bas). Si les boutons sont statiques, placez-les en bas pour les atteindre facilement avec les pouces.
(Modifier - mettre à jour la conception) Comme l'a souligné mc01, il faudrait trop de temps et d'efforts à l'utilisateur pour appuyer ou maintenir les modifications importantes. J'ai ajouté des boutons pour accélérer et faciliter le changement de numéro.
(Fin de l'édition)
(Édition - mise à jour du design) Mise à jour du design pour afficher un affichage de lecteur vidéo ajouté à la carte.
(Fin de l'édition)
Peut-être que vous insistez pour utiliser trop ces deux icônes (je les aime d'ailleurs).
L'interface utilisateur iOS utilise l'extrême gauche comme point d'origine et plus vous vous déplacez vers la droite, plus vous augmentez la valeur.
Étant donné que la plupart des utilisateurs connaissent la mise en page par le haut, ils peuvent être confus lorsque vous utilisez votre version car vous utilisez le milieu comme origine.
Je pense que si vous ajoutez "Vitesse d'origine" au milieu sur la même hauteur que les deux autres étiquettes, il sera plus clair d'où les utilisateurs modifient.
Pensez également à ajouter une option qui permet à l'utilisateur de réinitialiser la valeur à "Vitesse d'origine" car je pense qu'il peut être difficile de toucher le milieu du premier coup.
FYR, voici quelques-unes des meilleures pratiques ux liées à la vidéo fournies par le groupe Neilsen Norman.
https://www.nngroup.com/articles/video-usability/
Et à mon humble avis et d'après mes observations, les sélections youtube pour la vitesse ont été déroutantes pour les utilisateurs. Les utilisateurs pensent généralement que les valeurs supérieures au niveau NORMAL augmentent la vitesse et les valeurs inférieures au niveau NORMAL diminuent. Cela, comme vous pouvez le voir sur l'image fournie, nécessite un peu plus d'attention de la part de l'utilisateur pour se rendre compte que cela fonctionne dans l'autre sens. Je vous suggère donc d'aller de l'avant avec le curseur ayant les valeurs auxquelles l'utilisateur peut facilement fixer la vitesse. En outre, vous pouvez utiliser le clic/toucher sur la valeur NORMALE pour permettre à l'utilisateur de réinitialiser la vitesse à la normale.
Voici comment je le concevrais: 
Et je ne donnerais pas une zone de saisie ici, ce serait juste un effort supplémentaire pour l'utilisateur de comprendre la plage dans laquelle la valeur doit être entrée , cela ne ferait que compliquer les choses.
Je pense que vous avez raison lorsque vous placez l'Origine au centre. Fondamentalement, vous définissez une valeur de base à partir de laquelle vous pouvez monter et/ou descendre .
Cependant, la ligne de base est simplement symbolique, car vous pouvez dire que c'est 1 (Et ... 1 quoi?), 0 Ou normal, comme d'autres réponses le disent. Il ne s'agit donc pas d'une mesure réelle, mais d'une référence pour les grandeurs relatives.
Sur cette base, l'important est le public que vous ciblez. Par exemple, pour un utilisateur commun (comme je le serais), sachant que la vidéo sera 3 fois plus rapide ou plus lente sera sûrement suffisant .
Cependant, pour les utilisateurs plus sophistiqués , cela va être déroutant. Quelle est la ligne de base? 24FPS? 30 FPS? tout FPS que le lecteur vidéo identifie? Et en plus de cela, nous devons ajouter des magnitudes fractionnaires:
7.8x * (x FPS) = ????? .
Le problème est clair: l'utilisateur saura sûrement de quelle vitesse il a besoin, car il y est habitué . Mais le faire de cette façon signifie ajouter un grand niveau de friction.
Ensuite, encore une fois: si votre application est destinée aux utilisateurs ordinaires , l'utilisation des grandeurs par rapport à une ligne de base symbolique peut ne pas être un problème (cependant, vous devez tester il). Pour utilisateurs spécialisés , ce n'est pas une bonne idée, car ce sera très imprécis et l'utilisateur devra souscrire des comptes.
Pour tout cela, je pense que ma recommandation serait que vous définissiez d'abord qui est votre base d'utilisateurs (je suppose que vous l'avez déjà fait, bien sûr!) Et puis appliquez la meilleure option, celle des utilisateurs communs ou des utilisateurs plus sophistiqués.
En ce qui concerne le choix des utilisateurs communs, vous devez également réfléchir à la manière de représenter la direction. Si 0 n'a pas de sens en tant que référence et que vous utilisez 1, cela apportera d'autres considérations au tableau, voir ci-dessous:
Dans le premier cas, la ligne de base est 1. Donc, 2x devrait être ... la moitié du temps? Les mathématiques rapides me disent que
1*-2x= -1.
Aussi ... comment traduisez-vous -2x à 0.5 dans l'esprit des utilisateurs? C'est vraiment contre-intuitif (et encore moins quelque chose comme -7.8x. Je dépenserais heures à essayer de comprendre quelle vitesse est-ce!)
Vous pouvez donc voir le deuxième cas: il commence à partir de 1 En charge, au milieu de l'écran. Mais la ligne commence à 0, Puis 0.1, 0.2, 0.3 Et ainsi de suite. C'est une méthode très claire: 0 is no speed, 0.1 is 1/10 a, 0.2 is 2/10 Et ainsi de suite. Mais bon, avoir 1/16 Serait vraiment déroutant, sans parler de 0,5 n'est pas la valeur négative de 2x qui serait son homologue dans une droite numérique. Cependant, si vous êtes d'accord pour passer de 0 à 1 puis à 2, ce serait parfait ... mais je suppose que vous devez aller à 16x plutôt qu'à 2x. Vous pouvez utiliser une échelle logarithmique pour plus rapide que la ligne de base mesures, mais encore une fois: vous devrez tester cela.
Arriver à une solution
En résumé, la plupart des représentations sont inexactes ou déroutantes . Ensuite, une proposition qui pourrait résoudre tous ces conflits de visualisation de l'information pour les utilisateurs communs et spécialisés serait l'utilisation d'échelles absolues de fréquence d'images par seconde (FPS).
De cette façon, votre application pourrait lire le FPS de la source vidéo et définir la ligne de base à partir de là, puis elle pourrait offrir différentes valeurs FPS. À mon avis, mieux que d'utiliser un curseur est d'utiliser une série de valeurs prédéfinies, mais si vous voulez utiliser un curseur, pas de problème, cela fonctionnerait aussi. Bien sûr, c'est dans le cas où les utilisateurs peuvent télécharger des vidéos , sinon vous pouvez ajouter artificiellement la ligne de base avec la fréquence d'images utilisée par votre application . Voir les exemples ci-dessous:
Fonderie: 
Photoshop: 
Mixeur: 
Première: 
Protools + Vidéo 
Comme je l'ai dit dans mes commentaires, je ne sais pas si ce curseur n'a que des valeurs positives (ou des valeurs plus grandes) que vous interprétez comme "lent" et "rapide" ou s'il a des valeurs négatives (7 fois plus lentes) et des valeurs positives (7 fois plus vite).
Cas 1 (le curseur n'a que des valeurs positives/plus grandes): Dans ce cas, je ne vois aucune raison d'avoir le libellé "plus lent" (7.24x plus lent). C'est en fait l'élément qui donne une connotation négative aux petites valeurs. De plus, dans cette situation, seule la plage sélectionnée sur la piste doit être remplie et la valeur par défaut doit être 0.
Cas 2 (le curseur a des valeurs négatives et positives (ou des valeurs plus petites et plus grandes) - 7.24x plus lent et 7.24x plus rapide): Dans ce cas, la piste doit être remplie à partir du centre, montrant que la valeur par défaut est située au milieu .