De l'UX sur les formulaires

Mise en place rapide et facile d'une expérience utilisateur agréable sur les formulaires à l'aide du BsFormHelper

Introduction

Cet article va présenter la toute dernière fonctionnalité de notre BsFormHelper (fraîchement mis à jour) qui permet de mettre en place un effet très intéressant d'un point de vue de l'expérience utilisateur. Cet effet, qui se produit à la validation d'un formulaire (submit) est mis en place notamment grâce à bootstrap et font awesome.

L'effet fonctionne sur tous les navigateurs, mais rendra mieux à partir de IE9.


Le BsFormHelper

Le BsFormHelper est un Helper pour le framework CakePHP qui permet de créer facilement des formulaires mis en forme avec Bootstrap. Nous l'avons développé pour que son utilisation et sa syntaxe soient les plus proches possibles de l'utilisation du Helper de base de CakePHP : Form.

Ainsi, son utilisation revient principalement à remplacer $this->Form par $this->BsForm.

Ce Helper est disponible au sein d'un plugin que nous avons développé : Le plugin BsHelpers, à retrouver sur Github.

Nous venons de mettre à jour le plugin BsHelpers avec notamment la fonctionnalité liée à l'UX que nous allons vous présenter dans cet article.


L'effet recherché et l'UX associé

Il arrive que quand un utilisateur clique sur le bouton de validation d'un formulaire (submit), rien ne se passe... En réalité, il se passe quelque chose (upload d'un fichier, traitement long, etc.) mais l'utilisateur ne le visualise pas clairement. Il voit sa page qui "tourne" sans forcément savoir pourquoi. Il peut alors arriver que l'utilisateur clique à nouveau sur le bouton de validation, une fois, voir plus. Cela peut entrainer des traitements supplémentaires avec de potentiels problèmes derrières (entrées dupliquées, redirection vers une erreur, etc.).

Nous avons donc cherché à mettre en place une solution efficace qui permettrait d'éviter ces problèmes et d'informer en même temps l'utilisateur sur le fait qu'il doit simplement patienter.

Le but est donc :

  • Empêcher l'utilisateur de valider à nouveau le formulaire
  • Lui faire comprendre simplement que des traitements sont en cours et qu'il doit patienter

Pour mettre en place cet effet, nous allons nous donc nous appuyer sur Bootstrap et sur Font Awesome, la police d'icône.

En effet, nous allons utiliser l'attribut "disabled" pour le bouton submit de notre formulaire et les icônes "spin" de Font Awesome

Nous plaçons donc un icône à côté de notre submit. Voilà un aperçu HTML :


<input  class="btn btn-success" type="submit" value="Action du formulaire"/>
<i class="fa fa-spinner fa-spin form-submit-wait text-success"></i>

Les classes btn-* et text-* correspondent pour que les couleurs soient les mêmes. Un peu de CSS également pour gérer notamment le positionnement et surtout "cacher" l'icône :


.form-submit-wait {
   font-size: 20px;
   margin-top: 15px;
   margin-left: 15px;
   display: none;
}

Et un peu de Javascript pour lancer l'effet : (Ici l'id du formulaire est UserAddForm)


<script>
$("#UserAddForm").submit(function(){
   $("#UserAddForm input[type='submit']").prop("disabled" , true);
   $("#UserAddForm .form-submit-wait").show();
});
</script>

De cette façon, dès qu'on essaiera de soumettre le formulaire. Le bouton submit se désactivera et le loader apparaîtra. En désactivant le bouton, on empêche l'utilisateur de cliquer à nouveau et donc de générer de potentielles erreurs. Le loader quand à lui est très utile pour faire comprendre à l'utilisateur que quelque chose se passe et qu'il doit simplement patienter.

Maintenant, voyons voir comment intégrer ça efficacement dans le BsFormHelper pour pouvoir mettre cet effet sur chacun de nos formulaires, sans avoir à le coder à chaque fois.


L'intégration dans le BsFormHelper

Cette fonctionnalité est liée au bouton submit. Nous allons donc ajouter cette option dans la fonctionnalité submit du BsFormHelper :


//----- [ux] option
$scriptUX = true;

if (isset($options['ux']) && $options['ux'] == false) {
	$scriptUX = false;
}

if ($scriptUX) {
	$out .= '<i class="fa fa-spinner fa-spin form-submit-wait text-' . $type . '"></i>';
	$idForm = '#' . Inflector::camelize($this->_modelForm . ' ' . $this->_actionForm . ' Form');
	$out .= '<script>';
	$out .= '$("' . $idForm . '").submit(function(){';
	$out .= '$("' . $idForm . ' input[type=\'submit\']").prop("disabled" , true);';
	$out .= '$("' . $idForm . ' .form-submit-wait").show();';
	$out .= '});';
	$out .= '</script>';
}

Par défaut, on décide que cette fonctionnalité sera mise en place pour tous nos formulaires. C'est pour ça qu'on définir $scriptUX à true. Si l'on souhaite ne pas l'activer il suffit d'indiquer l'option 'ux' à false dans le paramètres options de la fonction.

Ensuite, on va successivement :

  • Ajouter l'icône à la suite de l'input de type submit.
  • Recréer l'id du formulaire grâce aux attributs du BsFormHelper et de la fonction camelize de CakePHP.
  • Ajouter la balise script content l'effet souhaité.

Nous avons mis ici simplement le code de la fonction submit dédié à cette partie UX. Pour voir le reste, nous vous invitons à consulter le fichier complet du BsFormHelper sur Github.


L'effet en images

Avant le clic / Après le clic :

UX bouton formulaireUX bouton formulaire