Système d'Interface de Recherche

Que fait Système d'Interface de Recherche ?

Objectif

Le Système d'Interface de Recherche fournit une méthodologie pour concevoir une expérience de découverte cohérente et haute performance. Alors que internal-search-optimization se concentre sur le côté « croissance » et logique, ce système définit les motifs de conception et l'ergonomie spatiale de l'interface utilisateur de recherche. Il garantit que les utilisateurs trouvent instantanément le point d'entrée de la recherche, interagissent sans effort (même sur mobile) et traitent les résultats de manière à minimiser la charge cognitive et à maximiser le « parfum de l'information ».

Cas d'utilisation

• Concevoir les points d'entrée de recherche dans les en-têtes globaux ou les barres d'outils persistantes.
• Créer l'expérience « Centre de commande » ou « Omnibox » pour les applications SaaS.
• Structurer la « Recherche visuelle » et les menus déroulants de saisie automatique pour le e-commerce.
• Concevoir des pages de résultats de recherche (SERP) à haute densité pour la documentation ou les catalogues.
• Implémenter des superpositions de « Recherche plein écran » pour les designs mobile-first.

Quand ne PAS utiliser

• Pages d'atterrissage statiques : Où le contenu est fixe et la découverte n'est pas un objectif principal.
• Micro-sites (<20 pages) : Où une navigation robuste et un fil d'Ariane suffisent pour la trouvabilité.
• Tableaux de bord purement relationnels : Où les données sont accessées exclusivement via des filtres et onglets définis plutôt que par recherche en texte libre.

Entrées

1. Profil d'intention utilisateur : L'utilisateur cherche-t-il un SKU spécifique (précision) ou explore-t-il un sujet (découverte) ?
2. Densité du catalogue : Combien d'éléments dans le système et à quel point les métadonnées sont-elles diverses ?
3. Appareil principal : La recherche est-elle principalement utilisée sur mobile (tactile) ou sur ordinateur de bureau (clavier) ?
4. Systèmes existants : Systèmes de couleurs, jetons d'espacement et échelles typographiques (provenant de fluid-spacing-system et fluid-typography-system).

Sorties

1. Spécification du déclencheur de recherche : Définitions visuelles pour la barre de recherche (statique, extensible ou icône uniquement).
2. Anatomie de la saisie automatique : Conception du menu déroulant de suggestions, incluant catégories, images et états de clavier.
3. Plan de mise en page SERP : Organisation spatiale de la page de résultats, équilibrant densité des métadonnées et lisibilité.
4. Carte d'interaction mobile : Plan de transition de la recherche d'une icône d'en-tête à une interface plein écran ciblée.

Flux de travail

1. Définir le motif de déclencheur de recherche

Choisissez un déclencheur en fonction de son importance dans le parcours utilisateur :

• La barre persistante : Entrée toujours visible, à contraste élevé. Idéale pour le e-commerce ou les sites axés sur la recherche.
• L'entrée extensible : Commence comme une icône ou une petite barre et s'agrandit au clic. Idéale pour les sites où la recherche est secondaire par rapport à la navigation.
• Le déclencheur « Commande + K » : Indice subtil ou icône qui ouvre une modale. Idéal pour les outils SaaS destinés aux utilisateurs avancés ou la documentation.

2. Concevoir l'expérience de saisie automatique (instantanée)

Réduisez la « distance au résultat » en fournissant un retour immédiat :

• Catégorisation : Groupez les résultats par type (ex. Produits, Articles, Aide).
• Métadonnées riches : Incluez des miniatures, des prix ou des badges d'état dans le menu déroulant.
• État ciblé : Utilisez interactive-state-system pour mettre clairement en surbrillance la suggestion actuellement sélectionnée pour les utilisateurs de clavier.
• Modèle ARIA : Modelez la relation entrée/liste sur le modèle Combobox ARIA APG (role="combobox" avec aria-expanded, aria-controls et aria-activedescendant pointant vers le role="option" en surbrillance) plutôt que d'inventer un modèle d'interaction personnalisé.

3. Établir la hiérarchie de la page de résultats (SERP)

Appliquez visual-hierarchy-system aux résultats de recherche :

• « L'écho de la requête » : Affichez le terme de recherche de l'utilisateur de manière proéminente pour confirmer le contexte.
• Cartes de résultat : Utilisez card-ui-system pour standardiser le format des résultats.
• Poids des métadonnées : Assurez-vous que les titres sont les plus proéminents, suivis de l'« Extrait » (la partie du contenu qui correspond à la requête).

4. Construire la couche de découverte mobile

La recherche sur mobile est un mode dédié, pas un widget :

• Le changement de mode : Toucher la recherche doit ouvrir une superposition plein écran pour supprimer les distractions de l'arrière-plan.
• Auto-focus : Focalisez automatiquement l'entrée et déclenchez le clavier.
• L'action de la « zone du pouce » : Placez un bouton « Effacer » et « Annuler » à portée de main (min 44x44px).

5. Définir les états de chargement et vides

• Résultats squelette : Utilisez skeleton-state-system pour maintenir la stabilité de la mise en page pendant le chargement des résultats.
• Pas de résultats intelligents : Utilisez empty-state-system pour fournir des chemins alternatifs lorsqu'aucune correspondance exacte n'est trouvée.

Règles de décision

• La règle de visibilité : Si la recherche est utilisée par >30 % de votre public, elle doit être une barre persistante et pleine largeur sur ordinateur.
• Le minimum de « trois mots » : Ne commencez pas à afficher des suggestions automatiques avant que l'utilisateur n'ait tapé au moins 3 caractères (pour éviter les sauts visuels).
• La limite de résultats : Limitez les suggestions de saisie automatique à 5-8 éléments. S'il y en a plus, fournissez un lien « Voir tous les résultats pour '...' ».
• Parfum de l'information : Mettez en gras les termes correspondants dans l'extrait des résultats de recherche pour aider les utilisateurs à scanner rapidement la pertinence.

Contraintes

• Accessibilité : L'entrée de recherche doit avoir un label visible (ou aria-label). Les utilisateurs de clavier doivent pouvoir naviguer dans la liste de saisie automatique avec les flèches, sélectionner avec Entrée et fermer avec Échap sans perdre leur requête tapée. Toutes les cibles interactives (bouton d'effacement, lignes de suggestion) doivent respecter la taille minimale de cible de 24x24px du WCAG 2.2 (2.5.8).
• Réactivité : Les menus déroulants de saisie automatique ne doivent jamais dépasser la largeur de la fenêtre d'affichage.
• Contraste : La mise en surbrillance du texte correspondant doit respecter les ratios de contraste WCAG AA (généralement via un changement de couleur d'arrière-plan ou une mise en gras).

Schémas d'échec courants

• La « recherche cachée » : Forcer les utilisateurs à chercher une icône de loupe alors que la recherche est leur principal moyen de navigation.
• Le menu déroulant « déconnecté » : Menus de saisie automatique qui ne correspondent pas à la largeur ou à l'alignement de l'entrée, créant un « flottement » visuel.
• Piège clavier : Ne pas permettre aux utilisateurs de quitter la superposition ou le menu déroulant de recherche avec la touche Échap.
• Les résultats sans issue : Ne pas conserver le terme de recherche dans la zone d'entrée sur la page de résultats, obligeant l'utilisateur à retaper s'il souhaite affiner.

Critères de validation

• Le point d'entrée de recherche est visible dans les 2 secondes suivant l'analyse de la page.
• Le menu déroulant de saisie automatique inclut des métadonnées riches (images/étiquettes) le cas échéant.
• La navigation au clavier (Flèches, Entrée, Échap) est entièrement définie pour la recherche, suivant le modèle Combobox ARIA APG.
• La recherche mobile ouvre un mode plein écran avec une focalisation immédiate du clavier.
• La page de résultats de recherche fait écho à la requête et met en surbrillance les termes correspondants.
• Des états squelettes sont utilisés pour le chargement des résultats.
• Tous les éléments interactifs respectent la taille minimale de cible tactile de 44x44 px.