coastdigitalgroup/coastai-skills

Système d'Annuaire de Magasins

Objectif

Le système d'annuaire de magasins fournit une méthodologie pour concevoir des interfaces de découverte d'emplacements physiques (tels que des annuaires d'agences, des localisateurs de points de vente, des réseaux de concessionnaires ou des annuaires de cliniques médicales). Ce système définit la composition spatiale, l'adaptation responsive, la synchronisation des interactions et les garde-fous d'accessibilité nécessaires pour faire le pont entre les recherches numériques et les destinations physiques. Il garantit que les utilisateurs peuvent trouver des emplacements près de chez eux, évaluer les spécificités du magasin et s'y rendre sans surcharge cognitive, instabilité de mise en page ou obstacles d'accessibilité.

Cas d'Utilisation

• Réseaux de Vente au Détail & Concessionnaires : Guider les clients vers les vitrines physiques, les revendeurs partenaires ou les centres de service agréés.
• Santé & Cliniques : Aider les patients à trouver des services d'urgence à proximité, des hôpitaux ou des cabinets médicaux spécialisés.
• Institutions Financières : Afficher les réseaux de distributeurs automatiques et les agences avec des services spécifiques (ex. : drive-in, notaire public).
• Chaînes de Restauration & Alimentaires : Aider les clients à trouver des établissements à proximité, vérifier les horaires d'ouverture en temps réel et lancer des commandes à emporter/livraison.

Quand NE PAS Utiliser

• Entreprises à Emplacement Unique : Si une entreprise n'a qu'un ou deux bureaux physiques, une interface d'annuaire complète est excessive. Une simple page de contact avec une carte statique intégrée suffit (voir site-navigation-system ou les directives des pages de contact).
• Marques Purement Numériques/E-Commerce : Entreprises sans présence physique ni points de retrait physiques.
• Logistique Dynamique et Itinéraire : Les applications avancées de covoiturage ou de suivi de livraison en temps réel nécessitent un suivi GPS continu et un routage dynamique, qui relèvent de systèmes SIG/de transit en temps réel spécialisés.

Entrées

1. Inventaire des Métadonnées d'Emplacement : Ensembles de coordonnées (latitude/longitude), adresse physique, coordonnées (téléphone, email), horaires d'ouverture et caractéristiques ou services spécifiques (facettes).
2. Signal de Localisation Utilisateur : Disponibilité de l'API de géolocalisation, code postal saisi par l'utilisateur ou saisies de texte ville/département.
3. Capacités de la Plateforme Cartographique : Contraintes et paramètres de style personnalisés du fournisseur de carte sous-jacent (ex. : Google Maps API, Mapbox GL JS, Leaflet).
4. Objectifs Principaux de l'Utilisateur : Les utilisateurs cherchent-ils principalement à se rendre immédiatement sur place (besoin d'itinéraire et d'horaires), à contacter l'emplacement (besoin du téléphone) ou à vérifier le stock (besoin d'un lien vers l'inventaire) ?

Sorties

1. Plan de Disposition Spatiale : Spécifications de mise en page responsive (Proportions de vue partagée sur Desktop vs. Panneaux à onglets empilés sur Mobile).
2. Spécification de l'Anatomie : Conception détaillée de la Fiche d'Emplacement, de l'En-tête de Recherche/Filtre et des Marqueurs de Carte.
3. Carte d'Interaction et d'État : Comportement défini pour la synchronisation des clics sur les marqueurs, les états de survol, les indicateurs de chargement de la liste et la corrélation entre fiches et marqueurs.
4. Plan d'Accessibilité et de Navigation Clavier : Mécanismes de piège de focus définis pour les vues détaillées, annonces aria-live pour les lecteurs d'écran et chemins de navigation non visuels sur la carte.

Workflow

1. Établir la Composition Spatiale

Concevoir la relation spatiale entre la carte et la liste des emplacements :

• Disposition Desktop (Vue Partagée) : Utiliser une conception à écran partagé.
  • Volet Latéral (35% à 40% de largeur) : Placer à gauche (pour les langues LTR) pour en faire le point de départ de la hiérarchie de lecture. Il doit défiler indépendamment de la page principale, gardant la saisie de recherche et les listes d'emplacements accessibles.
  • Volet Carte (60% à 65% de largeur) : Définir comme un élément fixe et persistant sur la droite.
• Disposition Mobile (Onglets Bascule) : Puisque la carte et la liste ne peuvent pas tenir côte à côte sur des écrans étroits, implémenter une barre de basculement en haut ou en bas de l'écran :
  • Onglet "Vue Liste" : Affiche la saisie de recherche et la liste verticale de fiches. Recommandé comme onglet par défaut.
  • Onglet "Vue Carte" : Affiche la carte en plein écran.
  • Couche d'Action : S'assurer que les contrôles flottants (ex. : bouton "Rechercher cette zone" ou épingle de géolocalisation) se positionnent confortablement au-dessus de la carte sans masquer la navigation.

2. Définir l'Anatomie de la Fiche d'Emplacement

La fiche d'emplacement est l'unité d'information principale. Ordonner ses éléments par priorité de balayage cognitif :

+-------------------------------------------------------------+
|  [Étiquette Catégorie]                         [Distance: 0.8 mi] |
|  **Titre Emplacement / Nom de l'Agence**                    |
|  [Évaluation par Étoiles / Avis (Optionnel)]                |
|                                                             |
|  123 Rue de l'Adresse Physique, Ville, Code Postal          |
|  Indicateur d'État : [Ouvert Maintenant / Fermé] (Ferme à 20:00)|
|                                                             |
|  [Bouton : Itinéraire]  [Bouton : Appeler]  [Lien : Détails]|
+-------------------------------------------------------------+

• Niveau Primaire : Nom de l'emplacement et distance par rapport au centre recherché. La distance doit être calculée à la volée et très visible (en haut à droite).
• Niveau Secondaire : Adresse postale et état ouvert/fermé en temps réel (utiliser un code couleur associé à du texte, ex. : vert pour ouvert, rouge pour fermé).
• Niveau Tertiaire : Actions principales sous forme de boutons d'appel à l'action très tactiles (ex. : "Itinéraire", "Appeler", "Voir les Détails").

3. Concevoir la Recherche et le Filtrage par Facettes

Fournir des outils de requête et de filtrage très intuitifs dans la section d'en-tête du volet latéral :

• Champ de Recherche : Un champ combiné prenant en charge les codes postaux, les noms de villes et les adresses postales, avec un menu de saisie automatique.
• Déclencheur Ma Position : Un bouton de géolocalisation proéminent et accessible représenté par une icône standard de "réticule", correctement étiqueté pour les lecteurs d'écran (aria-label="Trouver les emplacements près de ma position actuelle").
• Filtre de Rayon : Un menu déroulant permettant aux utilisateurs d'affiner le rayon de recherche (ex. : 5, 10, 25, 50 miles).
• Menus Déroulants de Facettes : Filtres rapides pour les caractéristiques spécifiques au magasin (ex. : "Drive-in", "Accessible en Fauteuil Roulant", "24h/24"). Utiliser des badges sur les boutons de filtre pour afficher les comptes sélectionnés.

4. Implémenter la Synchronisation Interactive Bidirectionnelle

Les marqueurs de carte et les fiches liste doivent se comporter comme un système unifié. Établir des relations interactives claires :

• Survol/Focus sur Fiche Liste -> Marqueur Carte : Le survol ou la focalisation d'une fiche liste doit déclencher un changement d'état visuel sur son marqueur correspondant (ex. : agrandir, changer de couleur, ou mettre au premier plan à l'aide d'un ajustement de z-index).
• Clic sur Marqueur Carte -> Fiche Liste : Le clic sur un marqueur de carte doit :
  • Faire défiler automatiquement la liste du volet pour amener la fiche correspondante dans la vue.
  • Mettre en évidence la fiche avec une brève animation de transition (ex. : légère pulsation de fond).
  • Ouvrir une "Fenêtre d'Information" (Pop-up) sur la carte au-dessus du marqueur contenant le nom du magasin, la distance et un lien "Itinéraire".
• Rechercher-cette-Zone (Déplacement de Carte) : Fournir un bouton flottant "Rechercher cette zone" qui apparaît en haut au centre du volet carte uniquement lorsque l'utilisateur déplace ou zoome la carte loin du centre de recherche initial.

5. Établir l'Adaptation Mobile et la Gestion de la Carte

Gérer les interactions sur mobile pour éviter les frustrations :

• Évitement du Détournement de Défilement : Désactiver le zoom gestuel sur les cartes mobiles par défaut (nécessiter deux doigts pour faire glisser ou zoomer). Cela empêche les utilisateurs de rester "bloqués" dans la carte tout en essayant de faire défiler la page vers le bas.
• Contrôles Flottants : Placer les contrôles de zoom flottants (+ / -) et un bouton de géolocalisation dans le coin inférieur droit de la carte, stylisés avec une ombre à fort contraste et des cibles tactiles minimales de 44x44px.
• Superposition de Carrousel de Fiches : Sur la Vue Carte Mobile, fournir un carrousel horizontal de fiches glissable en bas de la fenêtre d'affichage montrant l'emplacement actif unique ou le plus proche, permettant d'unifier l'exploration de la carte et les détails.

Règles de Décision

• La Règle de "Recherche par Défaut" : Lorsque la page de l'annuaire se charge sans requête de recherche ou permission de géolocalisation :
  • Ne pas afficher une carte vide.
  • Par défaut, afficher les emplacements les plus proches basés sur la géolocalisation IP, ou afficher tous les emplacements triés par ordre alphabétique/par priorité.
• La Règle de Rétablissement "Aucun Résultat" : Si un utilisateur recherche dans une zone sans emplacement :
  • Dézoomer la carte pour afficher les emplacements disponibles les plus proches.
  • Afficher un message utile dans la liste du volet (ex. : "Aucun emplacement trouvé dans un rayon de 25 miles autour de [Requête]. Voici les emplacements les plus proches de vous :").
  • Fournir un lien "Voir tous les emplacements".
• Règle de Pop-up vs. Panneau de Détails :
  • Si l'emplacement a des métadonnées minimales (juste adresse et horaires), afficher toutes les informations dans la fenêtre contextuelle d'information du marqueur de carte.
  • Si l'emplacement a des métadonnées étendues (inventaire, liste d'équipe, photos), cliquer sur "Voir les Détails" doit faire glisser un panneau de détails en pleine profondeur dans le volet latéral, en piégeant le focus clavier à cet endroit et en offrant un bouton clair "Retour à la Liste".

Contraintes

• Accessibilité (Navigation Clavier) :
  • Les utilisateurs clavier doivent pouvoir naviguer dans l'ensemble du flux de recherche et la liste des emplacements sans utiliser directement la carte.
  • Les marqueurs de carte doivent être focusables au clavier (tabindex="0") ou représentés par une alternative de liste accessible.
  • Lorsque les résultats de recherche sont mis à jour, annoncer le changement aux lecteurs d'écran à l'aide d'un élément aria-live="polite" (ex. : "3 emplacements trouvés près de Seattle, WA").
• Taille des Cibles Tactiles : Tous les boutons, marqueurs de carte et contrôles de filtrage doivent répondre au WCAG 2.2 SC 2.5.8 (minimum 24x24px avec espacement environnant), avec les déclencheurs d'action principaux sur les fiches et les contrôles flottants dimensionnés à 44x44px pour le confort du pouce.
• Contraste Visuel : Les cartes à contraste élevé sont préférées. Les marqueurs standards et les étiquettes de marqueur actif doivent avoir un rapport de contraste d'au moins 3:1 par rapport au fond de la carte. Le texte à l'intérieur des fiches et des pop-ups doit répondre au WCAG AA (4,5:1).
• Prévention des Changements de Disposition : Réserver de l'espace vertical/horizontal pour les états de chargement en utilisant des fiches squelettes dans le volet latéral pendant les recherches actives, afin d'éviter le Cumulative Layout Shift (CLS).

Modèles d'Échec Courants

• Le Piège de Défilement Mobile : Les utilisateurs restent bloqués sur la page car le défilement sur leur écran mobile ne fait que faire glisser/zoomer la carte, les empêchant de faire défiler au-delà du composant carte.
• Synchronisation Bidirectionnelle Cassée : Cliquer sur un marqueur de carte ouvre une pop-up mais ne fait pas défiler ni ne met en évidence la fiche correspondante dans le volet latéral, forçant les utilisateurs à faire correspondre manuellement les noms.
• La "Carte Aveugle" (Exclusion Clavier) : Implémenter les marqueurs de carte comme des formes SVG ou des éléments canvas non focusables, rendant les emplacements physiques totalement inaccessibles aux utilisateurs de lecteurs d'écran et de navigation clavier uniquement.
• Imposse Vide sans Requête : Afficher un écran complètement vide et une carte silencieuse lors du chargement initial de la page, obligeant l'utilisateur à deviner qu'il doit d'abord effectuer une recherche.
• Déplacement de Carte Lent : Tenter de récupérer et d'afficher des centaines de marqueurs en temps réel à chaque petit déplacement de carte, provoquant un gel de l'interface. Implémenter un debounce (250–400ms) sur les changements de limites de la carte et regrouper les marqueurs proches.

Critères de Validation

• La disposition spatiale est définie pour le desktop (écran partagé avec volet latéral) et le mobile (onglets Liste/Carte basculables).
• La synchronisation bidirectionnelle est spécifiée (cliquer sur un marqueur met en évidence/fait défiler la fiche ; survoler/focaliser une fiche met en évidence le marqueur).
• Le zoom gestuel mobile est désactivé par défaut (défilement à deux doigts requis) pour éviter le détournement de défilement mobile.
• Les états de chargement (squelettes) sont conçus pour éviter les changements de disposition (CLS) lors des mises à jour de requêtes de recherche.
• Une alternative accessible est définie : les utilisateurs clavier peuvent parcourir tous les emplacements, lire leurs détails et obtenir un itinéraire sans avoir besoin d'une souris pour survoler les éléments du canevas de la carte.
• Les lecteurs d'écran reçoivent une annonce descriptive et polie aria-live lorsque les résultats de recherche sont mis à jour.
• Les cibles tactiles pour tous les éléments interactifs des fiches, marqueurs et boutons de zoom répondent au moins au minimum WCAG 2.2 de 24x24px (44x44px préféré pour les principaux CTA).
• Le contraste du texte à l'intérieur des fiches d'emplacement et des pop-ups cartographiques répond au WCAG AA (4,5:1).
• Des flux de repli clairs sont conçus pour les recherches sans résultats et les refus d'autorisation de localisation.