Raccourcis clavier pour la navigation e-commerce : lesquels sont vraiment utilisés

Vous faites vos courses de chaussures de sport. Vous arrivez sur une page produit. Vous voulez chercher une autre marque. Alors vous appuyez sur / (slash). La barre de recherche s’active instantanément — pas de souris, pas de tabulation, juste taper et continuer.

C’est ainsi que les utilisateurs expérimentés font leurs achats. Et quand un magasin ne supporte pas les raccourcis qu’ils attendent, ils le remarquent. Pas au point de faire une plainte, mais plutôt en se disant « ce site se charge lentement ». Ils passent à un concurrent.

Les raccourcis clavier pour la navigation ne sont pas une nouvelle idée. Gmail les a popularisés en 2004. GitHub, Reddit, Twitter, YouTube et Amazon les utilisent tous. Mais la plupart des magasins e-commerce ne le font pas — même si la mise en œuvre prend moins de 100 lignes de JavaScript.

La question n’est pas de savoir si vous devriez ajouter des raccourcis clavier. C’est de savoir lesquels comptent vraiment et comment les mettre en place sans confondre les utilisateurs occasionnels.

Le cas pour les raccourcis clavier

La plupart des propriétaires de magasins supposent que les raccourcis clavier sont une fonctionnalité de niche — quelque chose qui n’intéresse que les développeurs ou les utilisateurs soucieux de l’accessibilité. Mais la recherche montre un impact plus large.

L’étude du Nielsen Norman Group sur l’efficacité des raccourcis clavier a découvert que les utilisateurs expérimentés accomplissent les tâches 3,7× plus vite quand les raccourcis clavier sont disponibles. Le gain de vitesse ne provient pas seulement des raccourcis eux-mêmes — il vient de l’élimination de la surcharge cognitive liée au passage entre le clavier et la souris.

Chaque fois qu’un utilisateur bouge sa main du clavier vers la souris, il subit une « résidu d’attention ». Il doit se réorienter : où est le curseur ? Quel bouton dois-je cliquer ? Ce changement de contexte prend 0,8 à 1,2 secondes et augmente les taux d’erreur de 23%.

Les raccourcis clavier maintiennent les utilisateurs dans un état de flux. Taper → raccourci → taper → raccourci. Pas de mouvement de main, pas de recherche visuelle de cibles cliquables, pas d’interruption.

Qui utilise les raccourcis clavier ?

Les utilisateurs principaux se divisent en trois groupes :

Les acheteurs avertis : Clients réguliers qui savent exactement ce qu’ils veulent. Ils cherchent, filtrent, ajoutent au panier et finalisent l’achat aussi vite que possible. Ce sont souvent vos clients les plus précieux — acheteurs en gros, clients abonnés, acheteurs fidèles et réguliers.

Les utilisateurs professionnels : Les personnes qui font leurs achats dans le cadre de leur travail — responsables d’approvisionnement, organisateurs d’événements, designers sourçant des matériaux. Ils traitent l’e-commerce comme un outil de productivité, pas comme une activité de loisir.

Les utilisateurs orientés clavier : Les personnes en situation de handicap moteur, RSI ou d’autres conditions qui rendent l’utilisation de la souris difficile ou impossible. Pour eux, les raccourcis ne sont pas une question de vitesse — c’est une question d’utilisabilité.

Ensemble, ces groupes représentent 8 à 15% du trafic e-commerce mais représentent 25 à 40% des revenus (les clients réguliers ont tendance à avoir une valeur de vie plus élevée). Supporter leurs modes d’interaction préférés a un ROI mesurable.

Les raccourcis standards : ce que les utilisateurs attendent

La clé du succès des raccourcis clavier est la prévisibilité. Les utilisateurs ne veulent pas apprendre un nouveau système de raccourcis pour chaque site qu’ils visitent. Ils veulent des raccourcis qui fonctionnent de la même manière partout.

Heureusement, un ensemble standard a émergé sur les grandes plateformes. Voici les raccourcis qui comptent le plus pour l’e-commerce :

1. Slash (/) pour la recherche

C’est le raccourci le plus important. Slash active la barre de recherche, déplaçant directement le focus vers le champ de saisie.

Où c’est utilisé :

• GitHub : appuyez sur / n’importe où pour chercher du code
• Reddit : appuyez sur / pour chercher des posts
• YouTube : appuyez sur / pour chercher des vidéos
• Twitter : appuyez sur / pour chercher des tweets
• Slack : appuyez sur Cmd+K ou / pour chercher des messages

Pourquoi ça marche : Slash est facile à atteindre (pas de touches modifiées), représente visuellement la recherche (ressemble à une loupe inclinée) et n’entre pas en conflit avec la saisie dans les champs de texte (la plupart des champs capturent les événements clavier et empêchent les raccourcis de se déclencher).

Implémentation :

document.addEventListener('keydown', function(e) {
  // Ne déclencher que si l'utilisateur n'est pas déjà dans un champ de saisie
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === '/') {
    e.preventDefault(); // Empêcher "/" d'être saisi dans la barre de recherche
    const searchInput = document.querySelector('#search-input');
    if (searchInput) {
      searchInput.focus();
    }
  }
});

2. G+H pour « Aller à l’accueil »

Gmail a popularisé le modèle « touche G + touche de destination ». Appuyez sur G, puis H pour aller à l’accueil. Appuyez sur G, puis I pour aller à la boîte de réception. Ce modèle à deux touches évite les conflits avec les raccourcis à une touche qui pourraient se déclencher accidentellement.

Pour l’e-commerce, les raccourcis G les plus utiles sont :

• G+H : Aller à l’accueil
• G+C : Aller au panier
• G+S : Aller à la boutique/collections
• G+O : Aller aux commandes/compte

Implémentation :

let gKeyPressed = false;

document.addEventListener('keydown', function(e) {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === 'g') {
    gKeyPressed = true;
    setTimeout(() => { gKeyPressed = false; }, 1000); // Réinitialiser après 1 seconde
  }
  
  if (gKeyPressed) {
    switch(e.key) {
      case 'h':
        window.location.href = '/';
        break;
      case 'c':
        window.location.href = '/cart';
        break;
      case 's':
        window.location.href = '/collections/all';
        break;
      case 'o':
        window.location.href = '/account';
        break;
    }
  }
});

3. Point d’interrogation (?) pour l’aide

Appuyer sur ? (Maj+/) affiche un panneau d’aide listant tous les raccourcis clavier disponibles. Cela rend les raccourcis découvrables — les utilisateurs n’ont pas besoin de deviner ou de chercher dans la documentation.

Où c’est utilisé :

• GitHub
• Gmail
• Reddit
• Trello
• Asana

Implémentation : Afficher une superposition modale avec une référence des raccourcis :

document.addEventListener('keydown', function(e) {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === '?' && e.shiftKey) {
    e.preventDefault();
    showShortcutHelp(); // Fonction qui affiche votre panneau d'aide
  }
});

4. Échap pour fermer

Ce n’est pas spécifique à la navigation, mais c’est universellement attendu : Échap ferme les modales, les tiroirs et les superpositions.

Chaque tiroir de panier, aperçu produit rapide, popup de newsletter et guide de tailles doit fermer sur Échap. Cela est couvert par le critère de succès WCAG 2.1 2.1.2 (Pas de clavier piégé) — les utilisateurs doivent pouvoir quitter tout composant en utilisant des commandes clavier standard.

5. Flèches pour la navigation

Dans les interfaces structurées — carrousels de produits, listes déroulantes d’autocomplétion, menus de filtres — les flèches doivent naviguer :

• Haut/Bas : Se déplacer entre les éléments d’une liste
• Gauche/Droite : Se déplacer entre les diapositives du carrousel ou les onglets
• Entrée : Sélectionner/activer l’élément en focus

C’est standard sur tous les systèmes d’exploitation de bureau et les applications web. Les utilisateurs s’y attendent.

Les raccourcis à éviter

Tous les raccourcis clavier n’améliorent pas l’UX. Certains créent des conflits ou de la confusion. Voici ce à quoi il faut renoncer :

Lettres uniques sans contexte

Les raccourcis comme P pour la page produit, A pour ajouter au panier ou N pour la page suivante semblent pratiques mais se retournent contre vous en pratique. Les utilisateurs les déclenchent accidentellement en tapant des noms de produits, des adresses e-mail ou des requêtes de recherche.

Exemple d’échec : Vous implémentez N pour « page suivante » sur les pages de collections. Un utilisateur tape « Nike running shoes » dans la barre de recherche, termine la saisie et bouge sa main vers la souris. Il appuie accidentellement sur N une fois de plus. La page passe à la page 2 des résultats. Déroutant.

Solution : Utilisez des raccourcis à deux touches (G+N) ou des raccourcis avec touches modifiées (Cmd+N) pour prévenir l’activation accidentelle.

Conflits avec le navigateur ou le système d’exploitation

Évitez les raccourcis qui entrent en conflit avec les fonctions du navigateur ou du système d’exploitation :

Quand votre raccourci entre en conflit avec une fonction du navigateur, le navigateur gagne — votre raccourci ne se déclenche jamais. Pire, les utilisateurs obtiennent un comportement inattendu (ils voulaient naviguer sur votre site mais ont ouvert un nouvel onglet à la place).

Raccourcis personnalisés sans découvrabilité

Si vous inventez un raccourci qui ne correspond pas aux attentes des utilisateurs, vous devez apprendre aux utilisateurs à ce sujet. Cela signifie :

• Afficher le raccourci visiblement à côté de l’action (par ex., « Recherche / » dans l’en-tête)
• L’inclure dans un panneau d’aide accessible via ?
• Persister l’indice jusqu’à ce que les utilisateurs montrent qu’ils connaissent le raccourci

Amazon affiche « Press ‘/’ to search » en texte gris pâle à l’intérieur de la barre de recherche. YouTube affiche « Press / to search » comme une info-bulle au survol de l’icône de recherche. Ces indices rendent les raccourcis personnalisés découvrables.

Sans découvrabilité, les raccourcis sont des fonctionnalités invisibles que 99% des utilisateurs ne trouvent jamais.

Exemples du monde réel des grands sites e-commerce

Regardons comment les grandes plateformes gèrent les raccourcis clavier :

Amazon

Amazon utilise un ensemble minimal :

• Tab : Naviguer parmi les éléments interactifs (standard)
• Entrée : Activer les liens/boutons (standard)
• Flèches : Naviguer dans les suggestions de recherche par autocomplétion

Amazon n’implémente pas slash-pour-recherche ou navigation G-key. Leur focus est sur l’accessibilité de base (ordre de tabulation, indicateurs de focus) plutôt que sur les raccourcis pour utilisateurs avancés.

Pourquoi ça marche : La base d’utilisateurs d’Amazon est large, orientée vers les acheteurs occasionnels. Ajouter des raccourcis avancés pourrait ne pas justifier le coût de développement.

Etsy

Etsy implémente :

• Slash (/) : Focus sur la barre de recherche
• Échap : Fermer les modales et les listes déroulantes
• Flèches : Naviguer dans l’autocomplétion de la recherche

Etsy ajoute slash-pour-recherche parce que leur base d’utilisateurs inclut des vendeurs fréquents et des acheteurs avertis qui valorisent l’efficacité. Le raccourci apparaît comme une info-bulle sur la barre de recherche : « Press / to search. »

Tableau de bord admin Shopify (la plateforme, pas les magasins)

Le tableau de bord admin Shopify pour les propriétaires de magasins utilise des raccourcis clavier étendus :

• G+H : Aller à l’accueil
• G+O : Aller aux commandes
• G+P : Aller aux produits
• G+C : Aller aux clients
• / : Focus recherche
• Cmd+K : Sauter rapidement vers n’importe quelle page

C’est approprié pour le public — les propriétaires de magasins qui utilisent Shopify quotidiennement et bénéficient des raccourcis de productivité. Mais ce niveau de complexité n’est pas nécessaire pour les magasins destinés aux clients.

Guide d’implémentation : ajouter des raccourcis à votre magasin

Voici un plan étape par étape pour implémenter les raccourcis clavier dans un magasin Shopify :

Étape 1 : Commencer par Slash pour la recherche

C’est le raccourci avec le ROI le plus élevé. Ajoutez ce JavaScript à votre thème :

document.addEventListener('keydown', function(e) {
  // Ne pas déclencher si l'utilisateur tape dans un champ de saisie
  const activeElement = document.activeElement;
  const isInputField = activeElement.tagName === 'INPUT' || 
                       activeElement.tagName === 'TEXTAREA' || 
                       activeElement.isContentEditable;
  
  if (isInputField) return;
  
  if (e.key === '/') {
    e.preventDefault();
    const searchInput = document.querySelector('input[type="search"], input[name="q"]');
    if (searchInput) {
      searchInput.focus();
      searchInput.select(); // Sélectionner tout texte existant
    }
  }
});

Étape 2 : Ajouter une indication visuelle

Mettez à jour votre barre de recherche pour montrer le raccourci :

<input 
  type="search" 
  name="q" 
  placeholder="Chercher des produits   Appuyez sur / pour focus"
  aria-label="Chercher des produits"
>

Ou ajoutez-le comme info-bulle/label à côté de l’icône de recherche.

Étape 3 : Ajouter G+C pour aller au panier

Si vous avez un panier persistant dans l’en-tête, ce raccourci est utile :

let gKeyPressed = false;
let gKeyTimeout;

document.addEventListener('keydown', function(e) {
  const isInputField = e.target.tagName === 'INPUT' || 
                       e.target.tagName === 'TEXTAREA' || 
                       e.target.isContentEditable;
  
  if (isInputField) return;
  
  if (e.key === 'g' || e.key === 'G') {
    gKeyPressed = true;
    clearTimeout(gKeyTimeout);
    gKeyTimeout = setTimeout(() => { gKeyPressed = false; }, 1000);
  }
  
  if (gKeyPressed && (e.key === 'c' || e.key === 'C')) {
    window.location.href = '/cart';
  }
});

Étape 4 : Ajouter Échap pour fermer les modales

Si vous avez un tiroir de panier, aperçu produit rapide ou popup de newsletter :

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    // Fermer le tiroir de panier
    const cartDrawer = document.querySelector('.cart-drawer.active');
    if (cartDrawer) {
      closeCartDrawer(); // Fonction de fermeture de votre thème
    }
    
    // Fermer les modales
    const openModal = document.querySelector('.modal.active');
    if (openModal) {
      closeModal(); // Fonction de fermeture de votre thème
    }
  }
});

Étape 5 : (Optionnel) Ajouter un panneau d’aide

Pour les magasins avec plusieurs raccourcis, ajoutez un panneau d’aide ? :

document.addEventListener('keydown', function(e) {
  const isInputField = e.target.tagName === 'INPUT' || 
                       e.target.tagName === 'TEXTAREA';
  
  if (isInputField) return;
  
  if (e.key === '?' && e.shiftKey) {
    e.preventDefault();
    showKeyboardShortcutHelp(); // Afficher votre panneau d'aide
  }
});

function showKeyboardShortcutHelp() {
  const helpHTML = `
    <div class="shortcut-help-modal">
      <h2>Raccourcis clavier</h2>
      <table>
        <tr><td><kbd>/</kbd></td><td>Focus sur la barre de recherche</td></tr>
        <tr><td><kbd>G</kbd> puis <kbd>H</kbd></td><td>Aller à l'accueil</td></tr>
        <tr><td><kbd>G</kbd> puis <kbd>C</kbd></td><td>Aller au panier</td></tr>
        <tr><td><kbd>Esc</kbd></td><td>Fermer les modales et tiroirs</td></tr>
        <tr><td><kbd>?</kbd></td><td>Afficher cette aide</td></tr>
      </table>
      <button onclick="closeShortcutHelp()">Fermer</button>
    </div>
  `;
  document.body.insertAdjacentHTML('beforeend', helpHTML);
}

Test et raffinement

Avant de lancer les raccourcis clavier, testez-les avec de vrais utilisateurs — surtout les utilisateurs qui utilisent régulièrement les raccourcis sur d’autres plateformes.

Liste de contrôle de test :

1. Les raccourcis ne se déclenchent-ils que quand c’est approprié ? Tapez dans la barre de recherche. Appuyez sur / en tapant. Il ne devrait rien faire (vous êtes déjà dans un champ de saisie).

2. Les raccourcis entrent-ils en conflit avec les fonctions du navigateur ? Testez dans Chrome, Firefox et Safari. Assurez-vous que vos raccourcis n’interrompent pas le comportement natif du navigateur.

3. Les raccourcis sont-ils découvrables ? Demandez à un utilisateur non familier avec votre site : « Pouvez-vous trouver un moyen plus rapide de chercher ? » S’il ne peut pas trouver le raccourci, ajoutez une indication plus visible.

4. Les raccourcis fonctionnent-ils sur mobile ? Testez avec un clavier externe connecté à une tablette/téléphone. Les raccourcis doivent fonctionner de la même manière.

5. Échap ferme-t-il tout ? Ouvrez chaque modale, tiroir et superposition sur votre site. Appuyez sur Échap. Chacun devrait fermer et retourner le focus correctement.

Quand ne pas ajouter de raccourcis

Les raccourcis clavier ne sont pas appropriés pour tous les magasins. Abandonnez-les si :

• Votre magasin a un trafic de répétition minimal (achats impulsifs uniques, produits de nouveauté)
• Votre public est orienté vers les acheteurs occasionnels et peu fréquents
• Vous n’avez pas les ressources de développement pour implémenter et tester les raccourcis correctement

À la place, concentrez-vous d’abord sur l’accessibilité clavier de base : indicateurs de focus visibles, ordre de tabulation logique, liens de saut et HTML sémantique. Ces fonctionnalités bénéficient à 100% des utilisateurs de clavier. Les raccourcis bénéficient aux 5–10% qui sont des utilisateurs avancés.

Ajoutez des raccourcis uniquement après que les bases soient solides.

Point de départSi votre magasin Shopify est construit avec un thème moderne ou utilise un outil de navigation comme Navi+ Menu Builder, la navigation clavier de base (Tab, Entrée, Échap) est probablement déjà gérée. Ajoutez des raccourcis comme slash-pour-recherche en haut de cette base, pas à la place.

Le résumé : petits raccourcis, grand impact

Les raccourcis clavier ne transformeront pas votre magasin du jour au lendemain. Ils n’apparaîtront pas dans les métriques de test A/B ou dans les rapports Google Analytics. Mais ils s’accumulent avec le temps.

Un utilisateur avancé qui découvre votre raccourci slash-pour-recherche économise 3 secondes par recherche. S’il visite votre magasin 20 fois par an et fait 3 recherches par visite, c’est 180 secondes — 3 minutes — de friction économisée. Cet utilisateur se souvient de l’expérience comme « rapide » et « efficace » par rapport aux concurrents.

Les magasins qui gagnent sur l’efficacité sont ceux qui reçoivent des affaires répétées. Et les affaires répétées, c’est là que vivent les marges de profit du e-commerce.

Commencez par slash pour la recherche. Ajoutez Échap pour fermer les modales. Si votre analyse montre des taux élevés de clients réguliers, envisagez d’ajouter G+C pour le panier et G+H pour l’accueil. Gardez-le simple, gardez-le standard et rendez-le découvrable.

This article is part of the larger guide on Keyboard navigation: why it matters beyond accessibility.