Form layout
Introduction
Cette section décrit comment mettre en place des compositions d'écran avancées sur les formulaires.
Fonctionnement
Système de grille
Le front de la plateforme utilise le framework Tailwind CSS ce qui nous permet de nous baser sur son système de grille pour la disposition de nos blocs.
Grille pour les blocs
Les différents champs de votre formulaire avancé peuvent être scindés en plusieurs blocs.
Cette séparation permet de les regrouper par catégories (informations générales, coût, dates, options ...) afin d'améliorer la visibilité de l'écran.
Une fois la bonne répartition des champs et le nommage des blocs définis, nous pouvons les arranger de différentes manières selon l'ergonomie qui est la plus adaptée :
- Cas simple avec 2 à 3 blocs scindés en colonnes à la verticale pour optimiser l'espace et les garder en vue côte à côte.
- Autre variante de 2 à 3 blocs scindés sur plusieurs lignes à l'horizontale si ces derniers possèdent beaucoup de champ, et avoir un déroulement par phase.
- Pour les cas avancés avec plus de blocs, il est possible de combiner les affichages verticale et horizontale pour un rendu sur-mesure.
Utilitaire technique pour la disposition des blocs
Option de rendu du bloc
- Les blocs des formulaires possèdent un titre visible par défaut, mais il peut être enlevé pour avoir un rendu plus compact.
- Si au contraire vous souhaitez mettre plus d'informations, vous pouvez mettre un sous-titre comme aide pour décrire par exemple comment renseigner au mieux les champs demandés.
- Enfin, si les informations pour détailler le processus de saisie du bloc sont plus conséquentes, nous vous conseillons d'utiliser l'option lien de documentation qui vous permet via un bouton de rediriger vos utilisateurs vers une page de documentation dédiée.
Grille pour les champs
Les champs à l'intérieur des blocs sont, eux aussi, soumis au système de grille.
Par défaut, un champ utilise l'entièreté de la ligne où il se trouve, mais il est facilement possible d'ajuster cela en spécifiant un nombre de colonnes.
Ainsi, vous pouvez obtenir des rendus allant de 2 à 12 champs sur la même ligne.
Titre, sous-titre et division
En plus de renseigner des champs de saisie à l'intérieur des blocs, nous disposons de composants supplémentaires pour structurer la hiérarchie de vos à l'intérieur d'un bloc, à savoir :
Le composant Titre
- Cela vous permet d'afficher un titre en amont d'un groupe de champs dans un bloc.
- Tout comme le bloc, ce dernier peut avoir un sous-titre pour donner plus de détail.
- Il est aussi possible de renseigner une couleur pour les mettre en avant
Avec une telle configuration, nous pouvons obtenir par un exemple un bloc Client contenant une séparation des champs regroupée par les titres Client principal et Client secondaire avec chacun leur champ de saisie (Prénom, Nom, Téléphone ...).
Le composant Division
- Celui-ci permet d'ajouter un trait de délimitation visuel entre vos groupes de champ.
- Nous le conseillons lorsque à l'intérieur d'un bloc dans lequel certaines données peuvent être recloisonné, par exemple :
- Un bloc Configuration d'email avec d'une part des champs SMTP et de l'autre des champs de type API.
Gestion des onglets
Pour les écrans avancés avec beaucoup d'éléments ou s'il y a plusieurs catégories de champ qui n'ont pas de sens d'être visibles au même endroit, nous pouvons scinder le formulaire en plusieurs onglets.
Par exemple, si un modèle de votre base possède plusieurs collections d'éléments ayant eux-mêmes plusieurs champs, il est judicieux de regrouper ces derniers avec leur propre onglet afin d'augmenter le focus de l'utilisateur lors de sa saisie.
Un autre usage des onglets est la possibilité de mettre des données de visualisation.
Par exemple, avoir directement suivi des paiements sur la fiche d'édition d'un prospect peut vous permettre d'ajuster son email en direct afin de lui renvoyer sa facture sur la bonne adresse.
En tête et pied de page
Comme toutes les pages de la plateforme, l'écran de formulaire dispose des encarts en tête et pied de page pour ajouter toutes les informations complémentaires pouvant faciliter la saisie de vos utilisateurs, par exemple :
- Indicateur de suivis en tête de page
- Documentation à porter de main en pied de page
Surcharge
Cette partie détail les comportements surchargeable des formulaires avancés.
Surcharge des blocs
Dans le cas où l'affichage standard de la grille des champs dans un bloc n'est pas pertinent, nous avons la possibilité de complétement surcharger le bloc afin d'y mettre un composant personnalisé qui répondra mieux à votre besoin.
Par exemple :
- Un utilitaire de planning horaire hebdomadaire pour des commerciaux
- Un calculateur avancé de chiffrage de travaux
- Un éditeur de text enrichi
Surcharge des champs
Notre plateforme apporte son lot de composants de saisie déjà prêts à l'emploi, mais il est tout à fait possible d'en rajouter de nouveau pour votre projet.
Notre approche sur-mesure s'étend jusqu'à la brique unitaire du simple champ de saisie, nous permettant d'avoir une expérience utilisateur adaptée à vos besoins.
Ce niveau de détail implique aussi toutes les règles de validation qui peuvent graviter autour de vos nouveaux composants.
Cela permet ainsi de capitaliser sur nos échanges, nous permettant ainsi de réutiliser ces briques sur d'autres interfaces dans le même projet.