Identification of the main pain points regarding the UX and proposal of solutions about how to solve those.

1. LeFiveBackoffice
Formulaires: Optimisation de l’UX et de l’UI

2. Structures
Colonnes, tailles, positions, ordre des items…

3. 1: Largeur des formulaires
Afin d’éviter la dissolution visuelle, due au fait que l’œil doit parcourir l’écran sur toute
sa largeur sans avoir de constante en terme d’alignement de l’information (voir
schéma), il faut restreindre la largeur du formulaire.
C’est d’autant plus important dans le cas d’une édition ou de vérification d’informations
du formulaire où la tache doit être effectuée rapidement.
En offrant des points d’ancrages visuels, moins nombreux et constants, l’œil et le
cerveau requièrent moins d’effort pour accomplir la tache demandée.
2: Nombre de colonnes
Pour les mêmes raisons, on préfèrera un nombre minimum de colonnes(ici à 3
colonnes en full width c’est dur). L’idéal serait bien sur une seule colonne, mais comme
ici le nombre de champs est parfois conséquent, un compromis a 2 colonnes
principales devrait déjà améliorer la fixation visuelle et donc la complétion et la
recherche d’informations.
1 2
4 5
7 8
10 11
12
3
6
9
1 2 3
4 5
5 6
7
8
9
10
Step 1
Step 2

4. 3: alignement des labels et contenus
Sur le schéma précédent, je montrais juste le passage
d’un champ à un autre, cependant, l’ordre de lecture
(haut/bas et gauche/droite), ainsi que la combinaison
label/champ induit une fixation visuelle encore plus
complexe. Par conséquent, on se rend compte que c’est
assez fastidieux en l’état.
Ce comportement, est conforté par des études via de
l’eye tracking sur différents types de formulaires. Les
formulaires ayant des composantes assez classiques, en
général, on peut capitaliser sur ces études.
1
2 3
4
5 6
7
8 9
10
11
12
13
14 15
16
17 18
19
20
21
22 23
24
26 27
28
25
Fixation visuelle: Détail du step 2 (slide précédent)

5. 5: Ordre des champs
Les champs doivent être organisés de manière logique et pour les données les plus
spécifiques selon la hiérarchie inhérente à ces items.
Ex:
• « Date de début » devrait être suivie de « Date de fin »: Suite logique
• « Type de sport » devrait être suivie de « Niveau du match »: Famille sport
• « Type de réservation » devrait être suivie de « Catégorie de réservation »: Famille résa
4: Largeur des champs
La largeur des champs indique implicitement la quantité d’information qu’on attend de
l’utilisateur.
Pour les informations de taille fixe (ex: date, N° de téléphone, horaire…) on doit donc
avoir une largeur qui reflète le nombre de caractères inhérents à cette information,
afin de visuellement orienter l’utilisateur.
10 caractères 5 caractères 3 caractères
10 caractères
10 caractères

6. Contenus
Placeholder, champs optionnels, couleurs…

7. 1: Placeholders
Afin de ne pas alourdir l’interface et de faciliter l’accès à l’information, il est important
d’épurer les placeholder dans les champs évidents.
Les placeholder doivent donc être utilisés seulement lorsqu’une action attendue peut
être ambigu ou complexe.
Screenshot #1: dans le cas d’un prénom, nom, numéro de téléphone ou email,
l’utilisateur sait ce qu’on attend de lui en terme d’input.
Screenshot #2 : par ailleurs, si il est « croppé » le place holder, risque de ne pas aider
l’utilisateur. Il faut donc reformuler les textes de ces derniers dans ce genre de cas
(quand les placeholders sont utiles).
2: Couleurs, contrastes & utilisations
1 personne sur 12 souffre d’un certains degrés de perception de la couleur, également
appelée dyschromatopsie.
Les couleurs sont alors perçues dans une teinte de gris, un peu comme si on passait
l’interface en noir et blanc. Les contrastes doivent donc être importants afin de
contourner la problématique (cf: problèmes avec de contraste avec les background
images).
Par ailleurs, dans le BO, les champs obligatoires sont signifiés par un petit astérisque
rouge. Il serait donc préférable, d’augmenter la taille du symbole « * » de sorte à ce qu’il
soit forcément visible.
De plus, si les utilisateurs sur mobile, sont dans des conditions lumineuses diverses (ex:
extérieur, plein soleil),

8. 3: Background images
Dans le cadre de formulaires, il est important de ne pas surcharger l’interface avec des
éléments qui ne sont pas inhérents au tâches que l’utilisateur doit compléter.
En effet, le cerveau aune capacité d’analyse qui connait ses limites. Inconsciemment, il
analyse tout ce qu’il voit et les éléments de branding peuvent venir contrarier la
rapidité ainsi que l’efficience avec laquelle un utilisateur va s’aquitter d’une nouvelle
tâche. On doit donc dans l’interface apporter le focus sur l’action qu’on attend de
l’utilisateur.
Si on ne fait prend pas garde à cela, on risque d’entrainer une surcharge cognitive.

9. Composantsd’UI
&utilisations
Cta, menu déroulant, combos box, boutons radios, check boxes…

10. Champs de saisie textuels
Dans un contexte de type: Nom/Prénom
(type de saisie évidente)
Dans un contexte Nom de l’académie
(type de saisie moins évidente)
Checkboxs et boutons radio
!!! : Aligner les labels et items par la gauche
Multiples sélections possibles
On Off
Icônes mieux contrasté, remplie/ vide,
Menu déroulants
!!! : Maximum de 4 choix possibles
Dans un contexte avec 1 seul choix
possible
Dans un contexte avec
plusieurs choix possibles.
Possibilité d’afficher/masquer
les sélections
!!! : Au-delà de 4 items seulement
Date picker & Quantity picker
Mieux contrastées, plus grosse et
donc plus utilisables (visibles par
défaut)
!!! : placer côte à côte : date de début, date de fin
Une seule sélection possible
Combo box
1: Composants UI d’input

11. Usage: actions de niveau 3
Ajout d’une typologie au sein d’un formulaire, consultation d’informations
dans une liste, annulation d’une édition. Déjà existant dans « liste des grilles
tarifaires ». Ici j’ai juste ajouter un icône pour souligner l’action d’une
addition de « nouvel utilisateur » ou de réduction du formulaire. Largeur en
fonction du cas d’utilisation (ex: largeur d’un champ pour l’ajout d’un
champ, largeur adapté au contenu pour une annulation)
Actions de niveau 3
Types de CTA et usage
Usage: actions de niveau 2
Actions ayant un impact sur la validation, le changement d’une
information au sein d’une étape d’un formulaire à étape multiples, d’une
liste. Validation d’un process à une seule étape. Ajout d’icones dans le
but de différencier les potentielles multiples actions et de connoter leur
fonctionnalité. Sa largeur est toujours liée a son contenu.
Actions de niveau 2
Actions de niveau 1
Usage: actions de niveau 1
Il doit être utilisé uniquement comme une validation finale, une résultante, appliquant les différents inputs ajouté au sein de plusieurs steps d’un même process (ex:
step final d’une création de réservation, d’une création d’académie ) Pas d’icônes nécessaire comme son usage est restreint à ces cas.
Il doit obligatoirement faire la largeur des deux colonnes d’un formulaire afin de bien signifier qu’il applique tout les changement contenus dans les deux colonnes.

12. Propositions

13. Création d’une réservation à travers le planning 1/2

14. Création d’une réservation à travers le planning 2/2

15. Création d’une réservation via bouton 1/2

16. Création d’une réservation via bouton 2/2

17. Récap résa

18. Détail d’une réservation onglet « Détails » : Récapitulatif

19. Détail d’une réservation onglet « Détails » : modification

20. Détail d’une réservation onglet « Détails » : Annulation

21. Détail d’une réservation onglet « Détails » : Participant existant

22. Détail d’une réservation onglet « Détails » : Nouveau participant

23. Détail d’une réservation onglet « Détails » : Journal

24. Création d’une académie: combo boxes enfants et entraineurs fermées

25. Création d’une académie: combo boxes enfants et entraineurs ouvertes

26. Détails d’une académie, onglet « détail »: combo boxes enfants et entraineurs fermées

27. Détails d’une académie, onglet « détails »: combo boxes enfants et entraineurs ouvertes

28. Détails d’une académie, onglet « sessions »

29. Merci!