Entrée de temps (durée) dans la webapp - avantages / inconvénients de divers modèles

Question

Pour concevoir un moyen d'entrer des durées dans un site Web, il existe différentes propositions ci-dessous. Quels sont les avantages/inconvénients d'un point de vue UX pour les utilisations avec la souris et le toucher.

Les cases jaunes indiquent l'élément d'entrée. La flèche vers le bas ouvre une liste de sélection.

Information additionnelle:

• Les durées seront généralement inférieures à deux heures, mais aussi élevées que 4
• Les secondes ne sont généralement pas spécifiées, nous pouvons probablement nous en débarrasser complètement, mais je les mets ci-dessous pour des illustrations
• Les entrées "courantes" seraient des intervalles de 10/15 minutes, par exemple 30 minutes, 40 minutes, 45 minutes, 60 minutes, etc.
• La durée est obligatoire - ils ne peuvent pas entrer 0:00:00

Quelles options d'interface utilisateur supplémentaires avez-vous vues/utilisées ou envisagées?

Option 1. Cette option permettrait à l'utilisateur de taper du texte et d'analyser les deux-points, les espaces et non numériques comme séparateurs

Option 2. Autoriser l'utilisateur à saisir l'heure, la minute et la seconde dans trois champs distincts

Option n ° 3. Similaire à # 2, mais affiche visuellement les trois champs comme un seul champ. Le ":" devient probablement un texte gris plus clair

Option n ° 4. Similaire au n ° 3, mais utilisez des indicateurs explicites d'heure, de minute et de seconde pour chaque champ.

Option n ° 5. Similaire au n ° 2, mais nous autorisons la sélection dans une liste déroulante des heures "communes" pour chaque champ (par exemple, heures = 1,2,3,4, minutes = 0,10,15,20,30,40,45,50, 60)

Option n ° 6. Similaire au n ° 1, mais nous autorisons la sélection dans une liste déroulante des temps totaux "communs" (par exemple, "0:10:00", "0:20:00", "1:00:00", "1:30:00 "), etc

EDIT: Voici une autre option. Le curseur tactile n'apparaît que sur mobile.

Answer 1

Sur Android plateforme, nous avons Nice time setter:

Il permet de régler l'heure immédiatement sans menus déroulants. C'est bon pour votre plage de temps étroite. La définition de la valeur par défaut intelligente et de la limite inférieure fournira une bonne interaction avec les utilisateurs sans erreur.

Le curseur de réglage de l'heure n'est pas une bonne idée:

1. Il est difficile de définir des valeurs discrètes avec un curseur, en particulier sur un petit écran. Cela pourrait conduire à un "saut" et à une interaction longue, car le tick cible est plutôt petit, vous avez 24 ticks de 10 min pour une durée de 4 heures (240 min) (ici fonctionne loi de Fitts ):
   
   
2. Comme vous l'avez souligné, les valeurs définies ont une distribution non uniforme. La partie gauche de l'échelle (moins de 2h) est donc très utilisée, tandis que la partie droite est rarement utilisée, ce qui n'est pas efficace. Cela conduit à des décisions complexes, comme:
   
   Ensuite, les réglages de temps supérieurs à 2h seraient une tâche trop compliquée.