Incorporer un curseur de plage dans un formulaire: jQuery UI ou se dégrader en <select>?
Lors de l'incorporation d'un <input type="range"> curseur dans un formulaire (c'est-à-dire meilleur élément de formulaire pour indiquer le niveau d'exhaustivité d'une tâche? ), Firefox se dégrade pas si gracieusement en une zone de texte.
Puisque nous devons afficher les options du formulaire sémantiquement, comme dans l'exemple lié ci-dessus, la dégradation de Firefox ne fonctionnera pas ici.
Quelles sont les options pour une dégradation plus agréable? Parmi les deux solutions ci-dessous, quelle est la meilleure? ou existe-t-il de meilleures solutions?
- jQuery UI ( http://jqueryui.com/demos/slider/ )
- Polyfill de plage ( http://jsbin.com/atocep/32/edit ) qui convertira
selectentrées en plages pour les navigateurs prenant en charge<input type="range">
Pourquoi n'utilisez-vous pas la bibliothèque de vérification de compatibilité comme Modernizr
Ensuite, en fonction de votre détection, décidez de ce que vous chargez, afin que les nouveaux navigateurs obtiennent les goodies HTML5 et que tout le reste fonctionne avec jQuery UI.
Ça dépend! Si votre temps de chargement entier de la page dans le processus reste dans une seconde, je recommanderais d'implémenter des contrôles similaires de la page Web. Votre image de Firefox implémentant l'entrée de plage est vraiment mauvaise, et si elle peut être évitée, elle le devrait.
Jacob Nielsen, un gourou de l'utilisabilité, a écrit un article de Délai de réponse sur les applications et les applications Web en disant:
0,1 seconde: Limite pour les utilisateurs sentant qu'ils manipulent directement des objets dans l'interface utilisateur. Par exemple, il s'agit de la limite entre le moment où l'utilisateur sélectionne une colonne dans un tableau jusqu'à ce que cette colonne soit mise en surbrillance ou indique autrement qu'elle est sélectionnée. Idéalement, ce serait également le temps de réponse pour trier la colonne - si tel est le cas, les utilisateurs sentiront qu'ils trient la table.
1 seconde: Limite pour les utilisateurs qui sentent qu'ils naviguent librement dans l'espace de commande sans avoir à attendre indûment l'ordinateur. Un retard de 0,2 à 1,0 seconde signifie que les utilisateurs remarquent le retard et sentent donc que l'ordinateur "travaille" sur la commande, par opposition à ce que la commande soit un effet direct des actions des utilisateurs. Exemple: si le tri d'un tableau en fonction de la colonne sélectionnée ne peut pas être effectué en 0,1 seconde, il doit certainement être effectué en 1 seconde, ou les utilisateurs auront le sentiment que l'interface utilisateur est lente et perdra le sens du "flux" en effectuant leur tâche. Pour les retards de plus d'une seconde, indiquez à l'utilisateur que l'ordinateur travaille sur le problème, par exemple en changeant la forme du curseur.
10 secondes: Limite pour les utilisateurs gardant leur attention sur la tâche. Tout ce qui est plus lent que 10 secondes nécessite un indicateur de pourcentage terminé ainsi qu'un moyen clairement indiqué pour l'utilisateur d'interrompre l'opération. Supposons que les utilisateurs devront se réorienter lorsqu'ils reviendront dans l'interface utilisateur après un délai de plus de 10 secondes. Les retards de plus de 10 secondes ne sont acceptables que pendant les pauses naturelles dans le travail de l'utilisateur, par exemple lors des changements de tâches.
Bonne chance!