[Upload] - Choix du fichier usagers

Besoin utilisateur

En tant qu'utilisateur, je souhaite pouvoir sélectionner un fichier usager depuis mon ordinateur pour l'importer sur rdv-insertion.

Description

Parcours user :

L'utilisateur glisse et dépose un fichier à l'intérieur de la zone pointillée ou clique sur "Choisir un fichier", pour ouvrir son gestionnaire de fichier local. Il sélectionne son fichier et le valide dans le gestionnaire de fichier.
L'utilisateur peut ensuite "changer de fichier" s'il s'est trompé de fichier au moment de la sélection. En clic sur le CTA, le gestionnaire de fichier local s'ouvre de nouveau.
L'utilisateur peut revenir à l'étape "sélection de catégorie", en cliquant sur le CTA "Revenir à l'étape précédente" en bas de page à gauche.
Une fois un fichier sélectionné, l'utilisateur doit cliquer sur le CTA "Charger les données usagers" pour passer à l'étape suivante. Tant que l'utilisateur n'a pas choisi de fichier, ce CTA reste désactivé (état par défaut du CTA)

(En V2, l'utilisateur pourra cliquer sur la croix à côté du nom du fichier pour pouvoir le supprimer. La zone bleue pointillée s'affichera pour qu'il puisse charger un nouveau fichier. )

Sur cette page :

Un titre rappelant la fonctionnalité sur laquelle on se situe
En-dessous l'indicateur de l'organisation/département et la catégorie sélectionnée (si aucune catégorie a été sélectionné, afficher "sur aucune catégorie de suivi". Le texte de l'infobulle reste le même que pour la page "sélection de catégorie".
La phrase qui explique l'action attendue par l'utilisateur
Le texte apportant des indications, ici les formats compatibles pour charge un fichier.
Zone de téléchargement, en glissé/déposé ou chargement classic. Elle change d'état pour afficher le nom du fichier+son format, et le nombre d'usager, quand un fichier est sélectionné. Le CTA "changer de fichier s'affiche uniquement si un fichier est sélectionné. L'icone utilisé est la "file-text-line".
Le CTA pour revenir à l'étape précédente
Le CTA pour valider l'import des données du fichier sélectionné.

Accessibilité

Titre de page : "Charger un fichier usagers - [Nom de l'organisation] - CD [Nom du CD] - rdv-insertion
Taille de typo : La typo des textes est en 16px (Marianne), sauf pour les indications où on est en 14px.
Le contraste des couleurs qui se superposent a été testé et validé côté design.
Pouvoir agrandir les textes à 200%, sans que les textes disparaissent
Pouvoir naviguer au clavier avec les touches tab, shift+tab,...
Même sans style, toutes les informations restent disponibles et sont affichées dans le bon ordre. Les interactions sont possibles et compréhensibles.

Aperçu Maquette

Vision empty, par défaut : https://www.figma.com/design/I6oGJ4ZliyAhCIZ3Dkahym/02_Upload-de-fichiers-usagers?node-id=1074-37192&t=YnMBLOmtuaHxiX4Z-4

Vue avec un fichier chargé : https://www.figma.com/design/I6oGJ4ZliyAhCIZ3Dkahym/02_Upload-de-fichiers-usagers?node-id=1074-37459&t=YnMBLOmtuaHxiX4Z-4

@aminedhobb , voilà le ticket sur la page de sélection de fichier de la refonte de l'upload. J'avais un doute sur le placement des deux CTA principaux en faisant les maquettes de sélection de catégorie et de fichier.

Vu que ce sont des pages avec peu de contenus, la problématique est : Option A - Soit on place les CTA tout en bas de page sous forme de barre d'action, comme pour les étapes avec le tableau des usagers. C'est plus simple et plus harmonieux avec les autre étapes du parcours d'upload. Par contre les CTA seront moins visibles par les utilisateurs en cas d'usage de grands écrans. Option B - Soit on les place en hauteur variable en fonction du contenu de la page, mais uniquement pour les pages "sélection de catégorie" et "sélection de fichier". Comme ça le CTA est plus visible sur les grand écrans. Sur les étapes suivantes, il faudra tout de même garder les CTA au-dessus de la ligne de flottaison sous forme de barre d'action. Cela éviterai de les perdre en cas de fichier comportant plus de 50 usagers.

C'est l'option B que j'ai mis sur les maquettes. Tu me diras ce qui est plus simple pour toi côté dev ? On verra ensemble se qu'on fait entre l'option A et la B.

gip-inclusion / rdv-insertion