Documentation de présentation du panneau d'administration

Introduction

Cette documentation explique la structure et le comportement de l'interface du panneau d'administration de haut en bas. Elle est conçue pour les utilisateurs techniques et non techniques, afin que vous puissiez comprendre :

• ce que fait chaque zone de l'interface,
• pourquoi elle existe d'un point de vue de l'expérience utilisateur (UX),
• comment les utilisateurs doivent interagir avec pour les opérations quotidiennes.

Le panneau utilise un modèle de mise en page cohérent pour tous les modules (catégories, appareils, récompenses et sections similaires), ce qui réduit le temps d'apprentissage et rend la navigation prévisible.

Disposition globale

Le panneau d'administration utilise deux zones globales persistantes :

1. Barre latérale (Sidebar) pour naviguer entre les modules.
2. En-tête (Header) pour la recherche globale, les actions du compte et les contrôles rapides du système.

Ces deux zones restent visibles sur toutes les pages afin que les utilisateurs puissent passer d'une section à l'autre sans perdre le contexte.

En-tête (Header)

Barre de recherche globale

L'en-tête comprend une barre de recherche globale qui permet aux utilisateurs de trouver rapidement des menus et des pages.

Objectif (UX) :

• réduit la profondeur de clic,
• aide les utilisateurs avancés à naviguer plus rapidement,
• améliore la découvrabilité des pages moins fréquemment utilisées.

Section de profil (En haut à droite)

La zone de profil affiche :

• le nom de l'utilisateur,
• l'image de profil,
• le rôle.

Elle propose également un menu déroulant qui inclut la fonction Déconnexion (Logout).

Objectif (UX) :

• confirme qui est connecté,
• met en évidence le rôle pour les flux de travail sensibles aux autorisations,
• garde les actions de compte/session dans un endroit prévisible.

Contrôles d'en-tête supplémentaires

Selon l'environnement/la configuration, l'en-tête peut également inclure :

• une bascule plein écran,
• des icônes de thème/paramètres.

Objectif (UX) :

• le plein écran favorise la concentration lors de tâches avec beaucoup de données,
• le thème et les paramètres améliorent l'utilisabilité et la personnalisation.

Barre latérale (Sidebar)

La barre latérale est toujours visible et contient les entrées de navigation des modules tels que les catégories, les appareils, les récompenses et d'autres zones d'administration.

Comportement

• sélectionner un élément permet de basculer vers son module/sa page,
• l'état actif du menu indique l'emplacement actuel,
• le regroupement permet de garder ensemble les fonctionnalités liées.

Objectif (UX) :

• crée une structure de navigation stable,
• évite la désorientation lors du passage d'un module à l'autre,
• prend en charge une architecture d'information évolutive à mesure que les modules se développent.

Structure de la page

Chaque page de contenu suit le même modèle pour maintenir un comportement utilisateur cohérent.

1) Barre d'action supérieure

Contient :

• Les contrôles Précédent (Back), Actualiser (Refresh) et Suivant (Forward),
• un grand Titre de page (Page Title),
• un Fil d'Ariane (Breadcrumbs) sur le côté droit et un Menu d'actions rapides (Quick Action Menu).

Objectif (UX) :

• précédent/suivant prend en charge les flux d'historique de navigation,
• actualiser prend en charge la revalidation instantanée des données,
• le titre et le fil d'Ariane répondent ensemble à « où suis-je ? » et « comment suis-je arrivé ici ? »,
• les actions rapides réduisent le temps de réalisation des opérations courantes.

2) Section Résumé

Une courte description de la page explique ce que cette page permet de gérer.

Objectif (UX) :

• fournit un contexte immédiat avant qu'aucune action ne soit entreprise,
• réduit les erreurs de l'utilisateur dans les modules d'apparence similaire.

3) Section Bascule + Description

Contient :

• un contrôle de bascule (toggle),
• un texte à proximité décrivant ce que son activation/désactivation modifie.

Utilisation typique : activer/désactiver un comportement de module ou un paramètre.

Objectif (UX) :

• garde les contrôles d'état explicites,
• associe le contrôle et l'explication pour réduire l'ambiguïté,
• aide à prendre des décisions de configuration plus sûres.

4) Comportement de l'éditeur de description

L'éditeur de description prend en charge deux modes d'édition contrôlés par des boutons près de la barre d'outils de l'éditeur :

• Bouton Agrandir/Réduire (Maximize/Minimize) : lorsqu'on clique dessus après avoir sélectionné l'éditeur, il agrandit l'éditeur vers un mode de style plein écran plus large pour faciliter la rédaction et la révision de longs contenus.
• Cliquer à nouveau pour réduire : cliquer à nouveau sur le même bouton permet de quitter le mode élargi et de ramener l'éditeur à sa taille/son état intégré précédent.
• Bouton de bascule gauche (à côté d'agrandir/réduire) : fait passer l'éditeur dans un mode de saisie normal de style zone de texte (textarea) où les outils de personnalisation de texte riche sont masqués.

Dans le mode zone de texte (textarea), les barres d'outils de formatage ne sont pas visibles. Cela est utile lorsque les utilisateurs souhaitent éditer directement la source.

Prise en charge du HTML brut

Dans le mode zone de texte simple centré sur la source, les utilisateurs peuvent copier et coller du HTML brut. Cela permet de rendre des blocs de contenu préconçus sans avoir à les reconstruire manuellement dans les contrôles de l'éditeur riche.

Objectif (UX) :

• l'édition en plein écran améliore la concentration et réduit l'encombrement visuel,
• le mode style source activable/désactivable prend en charge les utilisateurs avancés et les flux de migration,
• le collage de HTML brut accélère la réutilisation de la documentation et la publication basée sur des modèles.

5) Saisie et éditeur d'image

Dans l'ensemble du panneau d'administration, chaque champ de saisie d'image utilise la même expérience d'éditeur d'image illustrée ci-dessus. Vous n'êtes pas limité au simple choix d'un fichier — vous pouvez ouvrir un éditeur dédié pour ajuster l'image avant qu'elle ne soit enregistrée avec le formulaire.

Où cela s'applique-t-il

Tout contrôle qui affiche un aperçu d'image pour un téléchargement (miniatures de programme, images de catégorie, images principales de modal de session, icônes rendues à partir de fichiers et éléments similaires) suit le même modèle : télécharger ou remplacer le fichier → ouvrir éventuellement l'éditeur depuis l'aperçu → enregistrer le formulaire parent (Créer / Mettre à jour / Enregistrer, selon l'écran).

Comment ouvrir l'éditeur

• Cliquez sur l'image d'aperçu (la miniature ou l'aperçu pour ce champ). Cela ouvre l'éditeur d'image afin que vous puissiez travailler sur la ressource en contexte sans avoir besoin d'un menu « Modifier l'image » distinct ailleurs.
• Si le champ est vide, utilisez d'abord Choisir un fichier (Choose file) / glisser-déposer ; après avoir joint un fichier, un aperçu apparaît et cliquer sur cet aperçu ouvre l'éditeur de la même manière.

Ce que vous pouvez faire dans l'éditeur

Utilisez les outils affichés dans l'interface de l'éditeur (votre capture d'écran reflète le produit en direct). En général, vous pouvez :

• Recadrer et cadrer l'image afin que le contenu important soit centré pour les cartes, les images principales et les miniatures de liste.
• Ajuster la luminosité, le contraste ou d'autres contrôles si l'éditeur les propose (les contrôles exacts dépendent de la version).
• Convertir en WebP lorsque le produit offre cette option : le WebP réduit généralement la taille du fichier par rapport au PNG/JPEG à qualité visuelle similaire, ce qui permet des chargements plus rapides sur mobile et sur le web. Après la conversion, confirmez ou appliquez (le libellé peut varier) dans l'éditeur, puis enregistrez le modal ou la page pour que le serveur stocke la ressource finale.

Flux de travail recommandé (étape par étape)

1. Ouvrez le formulaire de création ou de modification (programme, catégorie, modal de session, etc.).
2. Téléchargez une image ou conservez l'image existante.
3. Cliquez sur l'aperçu pour ouvrir l'éditeur d'image.
4. Recadrez ou ajustez jusqu'à ce que l'aperçu corresponde à la façon dont il doit apparaître dans l'application.
5. Si vous souhaitez un fichier plus léger pour la production, convertissez-le en WebP et confirmez dans l'éditeur.
6. Fermez l'éditeur (Enregistrer / Terminer / X selon l'interface), puis soumettez le formulaire parent avec Créer (Create) ou Mettre à jour (Update) (ou équivalent).

Si vous ignorez l'étape 6, les modifications ne sont conservées qu'en mémoire jusqu'à ce que l'enregistrement soit sauvegardé.

WebP : quand cela aide-t-il

• Images principales (Hero) et grandes bannières : le gain le plus important en termes d'octets économisés et de vitesse perçue.
• Nombreuses petites miniatures : toujours utile si vous avez une grande liste de programmes ou de catégories.
• Ressources déjà optimisées : si la source est déjà un petit WebP, une nouvelle conversion peut n'apporter que peu d'avantages ; concentrez-vous plutôt sur la composition.

Si un canal en aval exige un format spécifique (par exemple, uniquement du JPEG strict), suivez les règles de publication de votre équipe ; l'option WebP de l'éditeur est prévue pour les cas courants où le WebP est pris en charge dans l'application web.

Si quelque chose semble incorrect après l'enregistrement

• Faites un rafraîchissement forcé (hard refresh) de l'application web (le cache peut afficher une ancienne URL d'image).
• Rouvrez l'enregistrement dans l'administration et confirmez que l'aperçu correspond à ce que vous avez exporté depuis l'éditeur.
• Confirmez que vous avez cliqué sur Mettre à jour (Update) sur le formulaire après avoir fermé l'éditeur.

Objectif (UX) :

• un modèle unique et cohérent pour tous les champs d'image (icônes, bannières, éléments de galerie, etc.),
• l'aperçu est le principal moyen d'action : cliquer sur l'aperçu → modifier, ce qui correspond à la façon dont les gens pensent déjà à « changer cette image »,
• la prise en charge du WebP permet de maintenir les médias optimisés sans avoir besoin d'outils de bureau externes pour chaque téléchargement.

Gestion des tables et des données

Le tableau de données (data table) est l'espace de travail principal pour les enregistrements.

Contrôles au-dessus du tableau

• Sélecteur d'enregistrements par page (liste déroulante) : contrôle la taille de la page.
• Champ de recherche : filtre les enregistrements.
• Bouton Ajouter un nouveau (Add New) : ouvre le flux de création d'enregistrement.

Objectif (UX) :

• le contrôle de la taille de page prend en charge à la fois les analyses rapides et la révision dense,
• la recherche réduit l'effort de navigation manuelle,
• « Ajouter un nouveau » permet de garder l'action de création bien visible et prévisible.

Structure du tableau

Le tableau comprend :

• des en-têtes de colonne pour la signification des champs,
• des enregistrements basés sur des lignes pour chaque entité.

Chaque ligne comprend des contrôles d'action :

• Modifier (Edit),
• Supprimer (Delete),
• Bascule de statut (Status Toggle).

Aperçu de traduction de ligne (SimpleLocalize)

Dans chaque ligne de texte, le bouton d'icône de type lien à gauche agit comme un bouton d'Aperçu (Preview) pour SimpleLocalize.

Lorsqu'on clique dessus, il ouvre l'aperçu de l'élément de traduction concerné afin que les utilisateurs puissent vérifier le contenu dans toutes les langues prises en charge depuis la vue du tableau de bord SimpleLocalize.

Cela aide les équipes à valider :

• l'exhaustivité de la traduction par langue,
• la cohérence des termes dans les différentes langues,
• l'apparence du texte avant la publication finale.

Objectif (UX) :

• fournit une assurance qualité (QA) rapide de la traduction sans quitter le contexte de la ligne,
• réduit les erreurs de traduction dans les publications multilingues,
• accélère la révision en connectant les lignes d'administration directement à l'aperçu de localisation.

Actions et contrôles

Modifier (Edit)

Met à jour les données d'un enregistrement existant.

Objectif (UX) :

• permet la correction et la maintenance sans duplication.

Supprimer (Delete)

Supprime un enregistrement du système (généralement avec une confirmation dans les modèles d'interface utilisateur standards).

Objectif (UX) :

• permet le nettoyage des entrées non valides ou obsolètes.

Bascule de statut (Comportement critique)

La bascule de statut active/désactive un enregistrement.

Lorsqu'il est désactivé :

• l'enregistrement est masqué dans l'interface principale de l'APPLICATION WEB (WEB APP),
• l'enregistrement reste gérable dans le panneau d'administration.

Cela est utile pour :

• un contrôle temporaire de la visibilité,
• un comportement de publication/dépublication programmée,
• des tests opérationnels sûrs avant l'exposition au public.

Objectif (UX) :

• offre un contrôle fin de la visibilité,
• évite la suppression permanente pour les modifications réversibles.

Pagination et navigation

Sous le tableau, l'interface fournit :

Pied de tableau / Aperçu

Affiche des informations de synthèse telles que :

• le nombre total d'enregistrements,
• la page en cours,
• la plage d'éléments visibles en cours.

Objectif (UX) :

• garde les utilisateurs conscients de la taille et de l'étendue du jeu de données,
• confirme que les actions de filtrage/pagination ont bien été prises en compte.

Contrôles de pagination

Permet de se déplacer parmi les enregistrements en utilisant :

• Première page (First page),
• Page précédente (Previous page),
• Pages numérotées (1, 2, 3...),
• Page suivante (Next page),
• Dernière page (Last page).

Objectif (UX) :

• permet une traversée rapide pour les petits et les grands jeux de données,
• équilibre la vitesse (première/dernière) et la précision (pages numérotées).

Flux utilisateur de bout en bout (Recommandé)

1. Utilisez la Barre latérale (Sidebar) pour ouvrir un module.
2. Confirmez l'emplacement avec le Titre de la page + le Fil d'Ariane.
3. Lisez le Résumé pour connaître la portée/le contexte.
4. Utilisez la Recherche / Enregistrements par page pour réduire les données.
5. Effectuez les actions au niveau de la ligne (Modifier/Supprimer/Statut).
6. Passez en revue le Pied de page + Pagination pour continuer la navigation.

Cette séquence permet de garder les opérations claires, vérifiables et efficaces sur tous les modules.