Bouton pour "Jouer, mais depuis le début" pour un UX de scrubber
Considérez une chronologie de style de montage vidéo typique:
Il y a le bouton Play habituel: une flèche droite.
Il y a le bouton Pause habituel: deux barres.
-------------- ----------- > ||
Cependant, je veux avoir un bouton "Jouer, mais depuis le début" .
Lorsque vous voulez "jouer, mais depuis le début", vous devez: amener le curseur au début, avant de frapper le jeu. C'est ennuyeux. Ce serait mieux s'il y avait un bouton "jouer, mais depuis le début".
Quel devrait être le symbole?
Aidez-moi à sortir d'un gang!
Lame idée de non-designer ...
--- (
Est-ce que cela fait réfléchir quelqu'un? Ce n'est pas vraiment très bon: celui de gauche suggère probablement "faire le tour dans un certain sens" Il est difficile d'exprimer "revenir au début frickin 'puis jouer"!
Complication: la plupart des éditeurs ont en outre un concept "Lecture, mais plein écran", encore un autre bouton lié à la lecture.
Bonus: S'il y a un clavier, la barre d'espace bascule généralement Play/Pause. Existe-t-il un bon clavier UX pour "Jouer depuis le début"?
Je suis d'accord avec beaucoup de gens ici qu'il est peut-être préférable de s'en tenir aux icônes qui sont si courantes pour les lecteurs multimédias.
Cependant, je comprends le problème que vous essayez de résoudre. Mélanger les deux icônes pourrait être une bonne solution. Mais comme toujours; tester c'est savoir!
Ma tentative pour un mix possible:
Et pour souligner que ça commence depuis le début ...
Ajoutez une ligne:
Ou utilisez un alignement différent:
En effet, vous n'avez besoin que de ceci:
v1
Je suggérerais que le bouton de lecture reste le même qu'il a toujours - un triangle pour commencer puis une pause une fois que la lecture commence. Mais, une fois que la lecture a a commencé, un nouveau bouton apparaît comme ceci:
Le cercle encapsulant le triangle de jeu facilement reconnaissable pointe dans une direction intuitive: dans le sens inverse des aiguilles d'une montre, ce qui implique que nous remontons dans le temps. Le bouton dans son ensemble signifie toujours - jouer mais nous utilisons la flèche pour déduire une signification différente.
v2
Comme suggéré par JoeBlow dans les commentaires ci-dessous, voici une deuxième version utilisant une forme en demi-cercle pour "sauter" au début:
J'aime l'idée ici, mais comme cela a été remarqué, il pourrait sembler un peu étrange de centrer l'icône verticalement. Mais étant donné le contexte correct, je pense que c'est assez clair ce qu'il représente selon l'exemple suivant:
v3
Voici un autre exemple qui s'inspire d'un effort précédent ...
... mais n'a pas été bien reçu:
L'évolution de la version précédente vers celle-ci ressemble beaucoup à l'un des exemples de Crissov dans sa réponse, ce qui ajoute encore du poids à la représentation de ce design.
v4
Voici un dernier exemple qui place les contrôles sur la timeline. C'est un peu plus amusant qu'autre chose, mais les icônes circulent avec la chronologie, interrompent la chronologie ou la redirigent. C'est tout à fait un écart par rapport aux conventions normales, mais une expérience de pensée agréable néanmoins.
Exemple d'utilisation
KRyan dans les commentaires a demandé un scénario d'utilisation alors voici un exemple simulé avec YouTube.
Voici à quoi ressemble l'interface vidéo avant la lecture d'une vidéo:
Une fois que la vidéo commence à lire le bouton Lecture, nous voyons ci-dessus les modifications apportées à un bouton de pause. Je propose qu'un bouton supplémentaire (une fois que la lecture commence) puisse glisser, vous permettant de revenir au début. Comme ça:
La CEI 60417 est une norme pour les symboles à apposer sur les appareils électriques (téléviseurs, magnétoscopes, machines à laver, IRM, etc.) et ISO 7000 les recueille. Chacun coûte environ 100 dollars, mais il y a un aperçu PDF gratuit . C'est le plus proche que j'ai pu trouver qui normaliserait les contrôles de lecture courants comme jouer ▶ ️, pause ⏸, jouer/pause ⏯, stop ⏹, avance rapide ⏩, rembobinage ⏪, sauter/suivant ⏭, précédent ⏮, enregistrer ⏺. Il couvre tout cela et plus encore.
La norme propose même deux variantes pour de nombreuses icônes de contrôle des médias. Hélas, les symboles en usage réel sont plutôt un mélange des deux, par exemple l'équivalent de lecture dans la norme # 5107A/B: Exécution normale; Vitesse normale est soit une flèche avec un triangle équilatéral creux comme tête ⇾ soit un triangle isocèle rempli ►, alors que généralement un triangle équilatéral rempli ▶ est utilisé (tous pointant vers la droite).
ou 
De même, le symbole ↪️ # 5125 Récapitulez a deux variantes A/B:
et 
Ils suivent tous les deux l'exemple de # 5862 Précédent; Jouez la partie précédente, ce qui est très différent de ⏭ # 5861 Suivant; Jouez la partie suivante:
contre. 
Ceux-ci viennent tous les deux dans une seule variante, mais sont basés sur les différentes variantes Normal run. Normes - allez comprendre.
Je ne recommande évidemment pas de suivre les normes aveuglément, surtout quand elles ont évidemment été adaptées avec un peu de liberté par l'industrie. (Cependant, d'autres parties des normes sont suivies servilement dans leurs domaines respectifs.) De plus, comme je l'ai montré, les symboles standard ne semblent pas toujours cohérents.
Ma véritable suggestion serait d'utiliser un symbole # 5459 Ejecter ⏏ tourné d'un quart de cercle dans le sens des aiguilles d'une montre, rempli ou creux selon le schéma visuel. Raisonnement: la barre verticale à gauche indique alors un repère antérieur, qui est le début de la piste en cours par défaut. Il existe un IEC symbole # 5471 image par image, général avec deux lignes fines. Notez que la variante la plus familière de ⏸ # 5111B Pause; Interruption est tout aussi creux que les triangles (ou le carré Stop).
⤵︎ 
≈ 
≠ 
PS: Le symbole standard ISO/IEC 9995-7 pour touche Accueil est ⇱.
Normes associées
Je n'ai pas examiné ces éléments en détail, mais je les ai fournis pour référence:
- ISO/CEI 18035 Symboles et fonctions d'icônes pour contrôler les applications logicielles multimédias Celui-ci semble très approprié, dans la section 6 il spécifie:
- Commandes multimédias dynamiques ( Lecture, Arrêt, Pause, Lecture, Lecture en arrière, Lecture en avant, Lecture en arrière, Avance rapide, Rembobinage, Avance, Recul, Enregistrement)
- Attributs des contrôles multimédias dynamiques ( Boucle, Régler le volume, Muet, Haut-parleur activé)
- Commandes de navigation ( Aller à… début, état précédent/segment de présentation visité/objet multimédia, segment de présentation suivant dans l'application/objet multimédia dans l'objet multimédia composite, fin/sortie)
- Contrôles supplémentaires ( Menu principal, Éjecter, Aide, Instantané, Enregistrer)
- ISO 14915-2 Ergonomie des logiciels pour les interfaces utilisateurs multimédias - Partie 2: Navigation et contrôle multimédia Cette norme concerne davantage les concepts que les symboles.
Plus générales:
- ISO/CEI 11581-1, -6 Interfaces et symboles du système utilisateur - Symboles et fonctions des icônes - Partie 1: Icônes - Général Pas sur le contrôle multimédia, cette norme traite des icônes courantes pour le bureau et les génériques applications, par exemple Ouvrir, enregistrer, imprimer, gras.
- ISO 14915-1 Ergonomie des logiciels pour les interfaces utilisateurs multimédias - Partie 1: Principes et cadre de conception
- ISO 9241-12, -13, -16 Exigences ergonomiques pour le travail de bureau avec terminaux d'affichage visuel (VDT)
- Partie 12: Présentation des informations
- Partie 13: Guide d'utilisation
- Partie 16: Dialogues de manipulation directe
Exemples de produits réels
vous pouvez utiliser un bouton de redémarrage/réinitialisation, voici un exemple de YouTube, le bouton le plus à gauche 
Traditionnellement, le "bouton précédent" est utilisé. 1 clic revient au début du clip, et un double clic va au début du clip précédent. La tenue pourrait également revenir en arrière.
Que diriez-vous de cela .. Il montre 00:00, ce qui signifie le début du clip. Cet IMO est probablement plus facile à comprendre pour un utilisateur général .. sans utiliser de symboles de boucle, etc.
Modifié sur la base des commentaires de Crissov.
Tant de bonnes idées ici ... Je pense que les plus intuitives intègrent le concept du scrubber/timeline combiné avec le bouton play. Voici mon point de vue:
EDIT: Une version raffinée ...
Ceci est un exercice fascinant. Grande question.
Jouez .. jouez de "où la tête est maintenant". Nous sommes toujours dans le concept d'édition.
Vous devez utiliser l'icône qui doit basculer entre pause et lecture, quelque chose comme 
Cependant, je veux avoir un bouton "Jouer, mais depuis le début".
Essayez cette icône pour redémarrer simplement depuis le début. 
Essayez .. Laissez le concept d'édition (ainsi, des choses pourraient arriver comme "les widgets disparaissent de l'écran" "nous allons en plein écran" ou autre), et jouons du début à la fin; à la fin, probablement revenir à modifier le concept.
Si quelque chose a été modifié, il suffit de cocher une case Check this to save on Play. Si l'utilisateur ne le sélectionne pas, les modifications seront perdues.
Comme il s'agit d'une prise sur le contrôle de saut en arrière qui est un contrôle de lecture multimédia standard. Vous pouvez incorporer une icône de divulgation progressive dans cette icône de retour en arrière. Lorsqu'elles sont tenues, les options supplémentaires apparaissent.
Exemple:
- Lorsque un seul clic l'action principale initierait un saut normal pour commencer et resterait en pause si elle était actuellement en pause.
- Lorsque appuyez/cliquez et maintenez enfoncé , un menu d'options supplémentaires apparaîtra qui inclurait votre option de retour en arrière et de lecture. Vous survolez ensuite et relâchez l'option de votre choix ou appuyez sur si l'écran tactile.
État de repos:
Lorsqu'il est maintenu enfoncé:
Inspiration
Cette petite flèche dans le coin peut être vue dans des programmes comme Photoshop/Illustrator. Je l'ai également vu dans Apple Xcode sur le bouton Exécuter l'application, lorsque Test, Profil et Analyse sont également affichés comme options. Comme Exécuter est l'action prédominante dans Xcode, cela a la principale importance, les 3 autres actions sont moins courantes mais toujours accessibles lorsque vous cliquez dessus et les maintenez enfoncées.
Dans les produits qui lisent plusieurs éléments (vidéos, chansons, etc.), vous avez souvent des boutons de saut, avec des icônes comme celles-ci:
En théorie, ceux-ci sont utilisés pour naviguer entre les éléments.
En pratique, sauter en arrière signifie plus souvent "aller au début de l'élément actuel, et si nous y sommes déjà, aller à la place au début de l'élément précédent". Vous pouvez supprimer la partie "si nous sommes déjà là" et l'utiliser pour "aller au début".
Après avoir lu certains des commentaires et des réponses et réalisé que vous vouliez que ce bouton passe au début et commence à jouer même en pause, j'ai réalisé que vous essayez peut-être d'inventer un contrôle qui n'est pas nécessairement nécessaire à la majorité des utilisateurs (hypothèse) et que ajouter plus d'éléments à l'interface utilisateur et potentiellement provoquer de la confusion et de l'encombrement.
D'après mon expérience lorsque vous êtes actuellement en pause et que vous utilisez un contrôle de saut, le média ne commencera pas automatiquement à jouer après le saut.
Une autre idée consiste donc à offrir une option dans une zone de paramètres de votre interface utilisateur pour activer/désactiver la lecture automatique. Par conséquent, les utilisateurs qui pourraient bénéficier de la lecture automatique après avoir sauté la fonction peuvent l'activer, et les utilisateurs qui veulent un saut classique et NE PAS jouer automatiquement peuvent la désactiver. Et tout le monde peut utiliser un média standard jouant l'interface utilisateur sans un tout nouveau contrôle qui pourrait causer de la confusion à certains utilisateurs s'il n'est pas reconnaissable.
Exemple (dans les paramètres):
Rejoindre le brainstorming ... Je pense que cela devrait être davantage un commentaire de certaines des idées précédentes. Emprunt à la notation musicale et à l'idée générale du début d'une partition:
Ou, plus correct peut-être mais moins reconnaissable (Da capo):
[ Éditer [
Ou même avec la "vraie" barre de notes?
À mon avis, le second fonctionne le mieux et se connecte le mieux aux idées précédentes.
Pour répondre à la question UX du clavier, HOME est souvent utilisé pour aller au début d'un clip multimédia. Montrez alors que ce serait HOME SPACE de passer au début et de jouer.
Je pense que mon idée peut vous donner une vue un peu différente de ce bouton.
Fondamentalement, mon idée est très similaire à la v1 de la version de Chris Spittles, mais le bouton devrait contenir la barre de progression (par exemple, lorsque vous êtes à environ 50% de la progression, le bouton devrait ressembler à la v2, mais lorsque vous atteignez 90-95 % de progression, il devrait ressembler à V1.
Bien sûr, lorsque vous lisez la vidéo, la barre de progression "autour" du bouton de rembobinage et de lecture doit également être modifiée pour imiter l'état actuel de la barre de progression. Lorsque l'utilisateur remarque le bouton pour la première fois, il/elle peut être un peu confus mais quand il/elle voit le bouton plus tard, avec une partie du cercle autour du bouton de lecture, il devrait être très clair quelle est la fonction de le bouton. De plus, nous obtenons un joli bouton "répéter" à la fin de la vidéo :)
La partie "visuelle" (tous les crédits appartiennent à Chris Spittles):
50% de la lecture:
95% de la lecture:
Je suggérerais ce qui précède ou quelque chose de similaire à:
| ->
"Commencez par le début et jouez." Ou:
Edit: Je me rends compte que cela pourrait être interprété d'une manière que vous pourriez ne pas vouloir.
Mise à jour: J'ai fait une recherche d'image sur "icône de lecture depuis le début" et j'ai vu certains des échantillons de cette page, mais aussi un exemple utilisant une barre comme celle-ci:
Ici, le bouton Lecture peut basculer entre lecture et pause, tandis que le premier bouton sera toujours lu depuis le début.
Ces exemples proviennent d'un ensemble d'icônes appelé Diagona Icons Copyright (C) 2007 Yusuke Kamiyamane, mais j'ai modifié le bouton "lecture à partir du début" pour l'adapter à cet exemple.
L'icône doit représenter visuellement l'action ou les actions exécutées lorsque vous cliquez dessus.
Dans ce cas, l'action est:
- Retour (au début)
- Jouer (ou continuer à jouer)
L'icône ci-dessous est la représentation la plus claire de ces deux actions dans l'ordre.
Cela montre "retour" menant directement au "jeu", et rien après le jeu. D'autres icônes qui ne montrent pas la connexion et la séquence peuvent être interprétées comme représentant une action différente - par exemple "jouer puis répéter".
Vous devez tester cela avec vos utilisateurs. Vous découvrirez peut-être qu'ils trouvent les boutons de lecture supplémentaires déroutants, et préfèrent cliquer sur lecture, puis sur le bouton de retour au début, car c'est à cela qu'ils sont habitués lorsqu'ils utilisent une télécommande de télévision.
Pourquoi n'allez-vous pas simplement à l'essentiel? Ce que vous voulez existe depuis les magnétophones et a été utilisé par la plupart des lecteurs vidéo depuis les années 70 (et même des appareils audio comme Walkman plus tard): boutons d'arrêt et de pause/arrêt. Le bouton Stop vous renvoie au début, le bouton pause/still vous maintient en place. Pas besoin de créer des icônes, de nouvelles opportunités, quoi que ce soit, c'est une technologie vieille d'au moins 40 ans
De cette façon, vous n'avez besoin que d'un bouton de lecture normal et, le cas échéant, mettez simplement en surbrillance le bouton "pause" pour indiquer la position. Bonne conception éprouvée de la vieille école.
Avez-vous envisagé un bouton textuel "Lire depuis le début"?
Chacune des propositions ici vaut la peine de tester les utilisateurs et de collecter des analyses pour. Si aucun ne se révèle suffisamment reconnaissable, un bouton textuel pourrait être la meilleure solution.
[►
Crochet d'ouverture [ pour le début, ► pour jouer.
Il y a aussi un Home bouton sur la plupart des claviers qui fait ce que vous attendez.
Je propose d'avoir trois symboles. Si d'autres symboles d'action apparaissent dans les boutons, placez ces trois symboles dans un seul bouton, un bouton (un cercle ou un rectangle (carré)).
- Une ligne verticale et une flèche gauche (comme on le voit dans, réponse de Kevin , réponse de Samuel Kelemen )
- Une virgule
- Une flèche droite
Cela peut entasser un peu les choses, ce qui pourrait être contrecarré en utilisant des symboles plus petits. Cependant, ces inconvénients seraient contrebalancés par l'avantage de la clarté du sens. L'utilisation de ces symboles est un peu comme réponse de l'idéogramme mais conçue pour les personnes qui savent lire et écrire des paragraphes, pas la notation musicale.
Que diriez-vous d'avoir un panneau "signets", avec un moyen de définir un signet particulier par défaut, puis d'avoir un bouton "lire un signet" sur le contrôle du scrubber? S'il y a un signet par défaut au début de la pièce et qu'aucun autre signet n'est défini, "play bookmark" serait rejoué depuis le début. Si, cependant, un autre signet est défini comme valeur par défaut, "lire le signet" serait lu à partir de là.
Pour répondre à votre question bonus:
Sur Youtube, vous pouvez frapper 0 et passer au début de la vidéo. S'il ne joue pas déjà, mais s'est arrêté à un autre moment, il vous suffit de gifler Espace . Les raccourcis "réguliers" ne fonctionnent pas de manière fiable à chaque fois car parfois le navigateur se concentre sur la barre de suivi ou vous avez cliqué sur la page, et le joueur n'obtient pas ces touches, donc appuyer sur Espace peut faire une "page vers le bas" "faites défiler à la place. Appuyez donc sur [~ # ~] k [~ # ~] pour lire/mettre en pause à la place.
Dans les lecteurs multimédias, si vous avez des touches supplémentaires sur votre clavier comme Play/Pause, Stop, Next, Previous, comme ceci par exemple:
… Vous pouvez appuyer sur Stop puis sur Play .
Si vous ne disposez pas de ces touches supplémentaires, les lecteurs multimédias comprennent généralement que le fait d'appuyer sur la touche Accueil revient à "commencer".
C'est donc généralement un travail à 2 touches si vous êtes en pause, sauf si vous jouez déjà.