tirette.js ou comment changer la manière de saisir certains champs de formulaire

Rédigé le 01 janvier 2019

Une démo pour commencer

ou

Cliquez et maintenez le bouton appuyé sur la tirette (à droite du champ de saisie). Déplacez la tirette jusqu'à la valeur souhaitée. Relachez le bouton pour finaliser la saisie.

Présentation rapide

Dans certains parcours utilisateurs, on souhaite parfois éviter au maximum les allers-retours - fatiguants - entre la souris et le clavier (ou tactile et clavier virtuel). Ce composant permet donc à l'utilisateur de garder une perception de la vue principale sans avoir à passer sur un autre dispositif et donc sans perte totale de focus. Sur le plan moteur, la tirette (si elle est bien ajustée au niveau de la précision, voir ci-dessous) demandera moins d'efforts. Elle sera surtout efficace pour la saisie de "petits" nombres car nous sommes limités par la résolution de l'écran. Ce composant n'a donc pas vocation a être utilisé systèmatiquement pour la saisie de nombres ou la sélection de valeurs, mais peut malgré tout être utile dans bien des cas.

Télécharger

https://github.com/olco/tirette.js

Intégration

Après avoir intégré les fichiers 'tirette.css' et 'tirette.js' dans la page HTML, il suffit simplement d'ajouter class='tirette' en attribut des champs 'input' ou 'select' souhaités.

<input type="number" class="tirette">

Gestion de la précision via l'attribut 'accuracy'

Un attribut "accurarcy" a été implémenté pour permettre de gérer la précision de la tirette. Plus cet attribut est élevé plus il sera facile pour l'utilisateur de sélectionner la valeur choisie. Par exemple, si l'attribut 'accuracy' est positionné à 4, on utilisera 4 pixels pour une unité. S'il est à 10 on utilisera 10 pixels pour une unité, et ainsi de suite.

<input type="number" class="tirette" accuracy="4">

Il faut être vigilent à ne pas mettre une précision trop élevée car de facto, cela limite les possibilités de valeurs maximum. Par exemple, pour une précision à 10 pixels sur une diagonale maximum de 800px, la valeur maximum ne pourra pas dépasser 80 (Soit 800 divisé par 10). Selon les cas, cela peut convenir mais il faut bien avoir à l'esprit l'environnement dans lequel on souhaite executer le composant.

Exemple : Nombre avec une précision à 4 pixels pour une unité

Dans l'exemple ci-dessus, on a indiqué une précision à 4 pixels par unité. Cela veut dire qu'il faut 4 pixels pour incrémenter la valeur d'une unité. Cela permet de faciliter la précision de la saisie. En revanche, cela réduit les possibilités de valeur sur l'écran car le composant dépend de la résolution disponible.

Les attributs 'min' et 'max'

Je conseille l'utilisation d'input de type 'number' car il gère nativement les attributs 'min' et 'max'. Il est néanmoins possible de spécifier ces attributs pour d'autres types d'input (ex : type="text" ou 'select', voir ci-dessous).

<input type="number" class="tirette" min="10">

L'attribut 'min', s'il est spécifié, permet de définir la valeur de départ de la saisie. La tirette prendra directement cette valeur et l'incrémentera progressivement lors de son étirement.

<input type="number" class="tirette" max="50">

L'attribut 'max', s'il est spécifié, permet de définir la valeur de fin de la saisie. La tirette ne dépassera jamais cette valeur.

Exemple : Date de naissance

Ci-dessus un exemple de saisie de date avec des valeurs min et des valeurs max. La tirette ne peut pas dépasser la valeur max. Le calcul débute à partir de la valeur min (exemple pour l'année : 1900).

Exemple : Nombre avec minimum négatif

Il est tout à fait possible de spécifier un 'min' et un 'max' négatif. La seul obligation est d'avoir un 'min' inférieur au 'max'.

Les champs de sélection

L'intégration est aussi simple que pour un champ de type 'input'.

<select class="tirette">...</select>

Le principe fonctionne également avec les champs de type 'select'. Dans certains cas, ces champs ont de très nombreuses valeurs qu'il n'est pas toujours simple de parcourir par enchainement de clics. La sélection dans une liste telle qu'elle est proposée par défaut demandent à la fois de la concentration et de la précision. La tirette propose une alternative qui peut, dans certains cas, être plus confortable d'utilisation.

Supprimer une valeur renseignée

Pour cela, il suffit de double-cliquer sur la tirette.

Note : ce comportement n'est pas très intuitif (car il faut avoir lu la documentation pour connaître le comportement). Qui plus est, ça fonctionne plutôt mal sur tactile. Le mieux étant l'énemi du bien, on s'en contentera pour le moment.

TODO list