Scorciatoie da tastiera per la navigazione negli store online: quali vengono effettivamente utilizzate

Stai cercando scarpe da corsa. Atterra su una pagina di prodotto. Vuoi cercare un marchio diverso. Quindi premi / (slash). La barra di ricerca si attiva istantaneamente—niente mouse, niente tabulazione, solo digitazione e via.

Così è come fanno shopping i power user. E quando uno store non supporta le scorciatoie che si aspettano, lo notano. Non nel senso di “fare un reclamo”, ma nel senso di “questo sito sembra lento”. E passano oltre.

Le scorciatoie da tastiera per la navigazione non sono un’idea nuova. Gmail le ha rese popolari nel 2004. GitHub, Reddit, Twitter, YouTube e Amazon le usano tutte. Ma la maggior parte degli store online no—anche se l’implementazione richiede meno di 100 righe di JavaScript.

La domanda non è se aggiungere scorciatoie da tastiera. È quali contano davvero, e come implementarle senza confondere gli utenti occasionali.

Il caso per le scorciatoie da tastiera

La maggior parte dei proprietari di store assume che le scorciatoie da tastiera siano una funzione di nicchia—qualcosa che conta solo per gli sviluppatori o gli utenti consapevoli dell’accessibilità. Ma la ricerca mostra un impatto più ampio.

Lo studio del Nielsen Norman Group sull’efficienza da tastiera ha scoperto che gli utenti esperti completano i compiti 3,7× più velocemente quando le scorciatoie da tastiera sono disponibili. Il guadagno di velocità non viene solo dalle scorciatoie stesse—viene dall’eliminazione dell’overhead cognitivo del passaggio tra tastiera e mouse.

Ogni volta che un utente sposta la mano dalla tastiera al mouse, sperimenta “residui di attenzione”. Deve riorientarsi: dov’è il cursore? Quale pulsante devo fare clic? Questo cambio di contesto richiede 0,8-1,2 secondi e aumenta i tassi di errore del 23%.

Le scorciatoie da tastiera mantengono gli utenti nello stato di flusso. Digita → scorciatoia → digita → scorciatoia. Niente movimento della mano, nessuna ricerca visiva di bersagli cliccabili, nessuna interruzione.

Chi usa le scorciatoie da tastiera?

Gli utenti primari rientrano in tre gruppi:

Power shopper: Clienti abituali che sanno esattamente cosa vogliono. Cercano, filtrano, aggiungono al carrello e completano il checkout il più velocemente possibile. Spesso sono i tuoi clienti di maggior valore—acquirenti all’ingrosso, clienti in abbonamento, fedeli acquirenti abituali.

Utenti professionali: Persone che fanno shopping come parte del loro lavoro—responsabili degli acquisti, organizzatori di eventi, designer che cercano materiali. Trattano l’ecommerce come uno strumento di produttività, non come un’attività ricreativa.

Utenti orientati alla tastiera: Persone con disabilità motorie, RSI o altre condizioni che rendono difficile o impossibile l’uso del mouse. Per loro, le scorciatoie non servono per la velocità—servono per l’usabilità.

Insieme, questi gruppi rappresentano l’8-15% del traffico negli store online ma rappresentano il 25-40% dei ricavi (i clienti abituali tendono ad avere un valore di vita più elevato). Supportare i loro pattern di interazione preferiti ha un ROI misurabile.

Le scorciatoie standard: cosa si aspettano gli utenti

La chiave per le scorciatoie da tastiera di successo è la prevedibilità. Gli utenti non vogliono imparare un nuovo sistema di scorciatoie per ogni sito che visitano. Vogliono scorciatoie che funzionino allo stesso modo ovunque.

Fortunatamente, un insieme standard è emerso su tutte le piattaforme principali. Ecco le scorciatoie che contano di più per l’ecommerce:

1. Slash (/) per la ricerca

Questa è l’unica scorciatoia più importante. Slash attiva la barra di ricerca, spostando il focus direttamente nel campo di input.

Dove viene utilizzato:

• GitHub: premi / da qualsiasi luogo per cercare il codice
• Reddit: premi / per cercare i post
• YouTube: premi / per cercare i video
• Twitter: premi / per cercare i tweet
• Slack: premi Cmd+K o / per cercare i messaggi

Perché funziona: Slash è facile da raggiungere (niente tasti modificatori), rappresenta visivamente la ricerca (sembra una lente d’ingrandimento inclinata) e non entra in conflitto con la digitazione nei campi di testo (la maggior parte dei campi cattura gli eventi dei tasti e impedisce il triggering delle scorciatoie).

Implementazione:

document.addEventListener('keydown', function(e) {
  // Attiva solo se l'utente non è già in un campo di input
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === '/') {
    e.preventDefault(); // Impedisci che "/" venga digitato nella barra di ricerca
    const searchInput = document.querySelector('#search-input');
    if (searchInput) {
      searchInput.focus();
    }
  }
});

2. G+H per “Vai alla home”

Gmail ha reso popolare il pattern “G key + destination key”. Premi G, poi H per andare alla home. Premi G, poi I per andare alla inbox. Questo pattern a due tasti evita conflitti con scorciatoie a un tasto che potrebbero attivarsi accidentalmente.

Per l’ecommerce, le scorciatoie G più utili sono:

• G+H: Vai alla home page
• G+C: Vai al carrello
• G+S: Vai al negozio/collezioni
• G+O: Vai agli ordini/account

Implementazione:

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); // Ripristina dopo 1 secondo
  }
  
  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. Punto interrogativo (?) per l’aiuto

Premendo ? (Maiusc+/) viene visualizzato un pannello di aiuto delle scorciatoie da tastiera che elenca tutte le scorciatoie disponibili. Questo rende le scorciatoie individuabili—gli utenti non devono indovinare o cercare nella documentazione.

Dove viene utilizzato:

• GitHub
• Gmail
• Reddit
• Trello
• Asana

Implementazione: Visualizza un overlay modale con un riferimento alle scorciatoie:

document.addEventListener('keydown', function(e) {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === '?' && e.shiftKey) {
    e.preventDefault();
    showShortcutHelp(); // Funzione che visualizza il tuo pannello di aiuto
  }
});

4. Escape per chiudere

Questo non è specifico della navigazione, ma è universalmente atteso: Escape chiude i modal, i drawer e gli overlay.

Ogni drawer del carrello, quick-view del prodotto, popup email e guida alle taglie dovrebbe chiudersi su Escape. Questo è coperto dal Criterio di successo WCAG 2.1 2.1.2 (Nessuna trappola da tastiera)—gli utenti devono essere in grado di uscire da qualsiasi componente utilizzando comandi da tastiera standard.

5. Tasti freccia per la navigazione

All’interno di interfacce strutturate—carousel di prodotti, dropdown di completamento automatico, menu di filtri—i tasti freccia dovrebbero navigare:

• Su/Giù: Sposta tra gli elementi di un elenco
• Sinistra/Destra: Sposta tra i diapositive del carousel o le schede
• Invio: Seleziona/attiva l’elemento focalizzato

Questo è standard su tutti i sistemi operativi desktop e le applicazioni web. Gli utenti se l’aspettano.

Scorciatoie da evitare

Non tutte le scorciatoie da tastiera migliorano l’UX. Alcune creano conflitti o confusione. Ecco cosa saltare:

Lettere singole senza contesto

Scorciatoie come P per pagina prodotto, A per aggiungi al carrello, o N per pagina successiva suonano comode ma si rivelano controproducenti in pratica. Gli utenti le attivano accidentalmente quando digitano nomi di prodotti, indirizzi email o query di ricerca.

Esempio di fallimento: Implementi N per “pagina successiva” sulle pagine di collezione. Un utente digita “Nike running shoes” nella barra di ricerca, finisce di digitare e muove la mano verso il mouse. Accidentalmente preme N ancora una volta. La pagina salta alla pagina 2 dei risultati. Confusione.

Soluzione: Usa scorciatoie a due tasti (G+N) o scorciatoie con tasti modificatori (Cmd+N) per prevenire l’attivazione accidentale.

Conflitti con il browser/OS

Evita scorciatoie che entrano in conflitto con le funzioni del browser o del sistema operativo:

Quando la tua scorciatoia entra in conflitto con una funzione del browser, il browser vince—la tua scorciatoia non si attiverà mai. Peggio, gli utenti ottengono un comportamento inaspettato (intendevano navigare il tuo sito ma invece hanno aperto una nuova scheda).

Scorciatoie personalizzate senza individuabilità

Se inventi una scorciatoia che non corrisponde alle aspettative degli utenti, devi insegnare agli utenti a conoscerla. Questo significa:

• Visualizzare la scorciatoia visibilmente accanto all’azione (ad es., “Ricerca /” nell’intestazione)
• Includerla in un pannello di aiuto accessibile tramite ?
• Persistere l’hint finché gli utenti non dimostrano di conoscere la scorciatoia

Amazon visualizza “Premi ‘/’ per cercare” in testo grigio tenue all’interno della barra di ricerca. YouTube mostra “Premi / per cercare” come tooltip al passaggio del mouse sull’icona di ricerca. Questi hint rendono le scorciatoie personalizzate individuabili.

Senza individuabilità, le scorciatoie sono funzioni invisibili che il 99% degli utenti non scopre mai.

Esempi del mondo reale dai principali store online

Vediamo come le piattaforme principali gestiscono le scorciatoie da tastiera:

Amazon

Amazon utilizza un insieme minimo:

• Tab: Naviga tra gli elementi interattivi (standard)
• Invio: Attiva i link/pulsanti (standard)
• Tasti freccia: Naviga i suggerimenti di ricerca con completamento automatico

Amazon non implementa slash-per-ricerca o navigazione a tasti G. Il loro focus è sull’accessibilità core (ordine di tabulazione, indicatori di focus) piuttosto che su scorciatoie per power user.

Perché funziona: La base di utenti di Amazon è ampia, tendendo verso gli acquirenti occasionali. Aggiungere scorciatoie avanzate potrebbe non giustificare il costo dello sviluppo.

Etsy

Etsy implementa:

• Slash (/): Attiva la barra di ricerca
• Escape: Chiude i modal e i dropdown
• Tasti freccia: Naviga il completamento automatico della ricerca

Etsy aggiunge slash-per-ricerca perché la sua base di utenti include venditori frequenti e acquirenti esperti che apprezzano l’efficienza. La scorciatoia appare come tooltip sulla barra di ricerca: “Premi / per cercare”.

Shopify Admin (la piattaforma, non gli store)

La dashboard di amministrazione di Shopify per i proprietari di store utilizza scorciatoie da tastiera estese:

• G+H: Vai alla home
• G+O: Vai agli ordini
• G+P: Vai ai prodotti
• G+C: Vai ai clienti
• /: Attiva ricerca
• Cmd+K: Salto veloce a qualsiasi pagina

Questo è appropriato per il pubblico—proprietari di store che utilizzano Shopify quotidianamente e beneficiano di scorciatoie di produttività. Ma questo livello di complessità non è necessario per gli store rivolti ai clienti.

Guida all’implementazione: aggiungere scorciatoie al tuo store

Ecco un piano passo dopo passo per implementare le scorciatoie da tastiera in uno store Shopify:

Passaggio 1: inizia con slash per la ricerca

Questa è la scorciatoia con il ROI più alto. Aggiungi questo JavaScript al tuo tema:

document.addEventListener('keydown', function(e) {
  // Non attivare se l'utente sta digitando in un campo di input
  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(); // Seleziona il testo esistente
    }
  }
});

Passaggio 2: aggiungi un hint visivo

Aggiorna la tua barra di ricerca per mostrare la scorciatoia:

<input 
  type="search" 
  name="q" 
  placeholder="Cerca prodotti   Premi / per attivare"
  aria-label="Cerca prodotti"
>

Oppure aggiungilo come tooltip/label accanto all’icona di ricerca.

Passaggio 3: aggiungi G+C per andare al carrello

Se hai un carrello persistente nell’intestazione, questa scorciatoia è 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';
  }
});

Passaggio 4: aggiungi Escape per chiudere i modal

Se hai un drawer del carrello, quick-view del prodotto o popup newsletter:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    // Chiudi il drawer del carrello
    const cartDrawer = document.querySelector('.cart-drawer.active');
    if (cartDrawer) {
      closeCartDrawer(); // La funzione di chiusura del tuo tema
    }
    
    // Chiudi i modal
    const openModal = document.querySelector('.modal.active');
    if (openModal) {
      closeModal(); // La funzione di chiusura del tuo tema
    }
  }
});

Passaggio 5: (opzionale) aggiungi un pannello di aiuto

Per gli store con più scorciatoie, aggiungi un pannello di aiuto ?:

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(); // Visualizza il tuo pannello di aiuto
  }
});

function showKeyboardShortcutHelp() {
  const helpHTML = `
    <div class="shortcut-help-modal">
      <h2>Scorciatoie da tastiera</h2>
      <table>
        <tr><td><kbd>/</kbd></td><td>Attiva la barra di ricerca</td></tr>
        <tr><td><kbd>G</kbd> poi <kbd>H</kbd></td><td>Vai alla home page</td></tr>
        <tr><td><kbd>G</kbd> poi <kbd>C</kbd></td><td>Vai al carrello</td></tr>
        <tr><td><kbd>Esc</kbd></td><td>Chiudi i modal e i drawer</td></tr>
        <tr><td><kbd>?</kbd></td><td>Mostra questo aiuto</td></tr>
      </table>
      <button onclick="closeShortcutHelp()">Chiudi</button>
    </div>
  `;
  document.body.insertAdjacentHTML('beforeend', helpHTML);
}

Test e perfezionamento

Prima di lanciare le scorciatoie da tastiera, testale con utenti veri—specialmente utenti che utilizzano regolarmente scorciatoie su altre piattaforme.

Checklist di test:

1. Le scorciatoie si attivano solo quando appropriato? Digita nella barra di ricerca. Premi / mentre digiti. Non dovrebbe fare nulla (sei già in un campo di input).

2. Le scorciatoie entrano in conflitto con le funzioni del browser? Testa su Chrome, Firefox e Safari. Assicurati che le tue scorciatoie non interrompano il comportamento nativo del browser.

3. Le scorciatoie sono individuabili? Chiedi a un utente non familiare con il tuo sito: “Riesci a trovare un modo più veloce per cercare?” Se non riescono a trovare la scorciatoia, aggiungi un hint più visibile.

4. Le scorciatoie funzionano su mobile? Testa con una tastiera esterna collegata a un tablet/telefono. Le scorciatoie dovrebbero funzionare allo stesso modo.

5. Escape chiude tutto? Apri ogni modal, drawer e overlay sul tuo sito. Premi Escape. Ognuno dovrebbe chiudersi e restituire il focus appropriatamente.

Quando non aggiungere scorciatoie

Le scorciatoie da tastiera non sono appropriate per ogni store. Saltale se:

• Il tuo store ha un traffico minimo ripetuto (acquisti impulsi una tantum, prodotti novità)
• Il tuo pubblico tende verso acquirenti occasionali e infrequenti
• Non hai le risorse di sviluppo per implementare e testare correttamente le scorciatoie

Invece, concentrati prima sull’accessibilità da tastiera core: indicatori di focus visibili, ordine di tabulazione logico, link di salto e HTML semantico. Quelle funzioni vanno a vantaggio del 100% degli utenti da tastiera. Le scorciatoie vanno a vantaggio del 5-10% che sono power user.

Aggiungi le scorciatoie solo dopo che i fondamentali sono solidi.

Punto di partenzaSe il tuo store Shopify è costruito con un tema moderno o utilizza uno strumento di navigazione come il Menu Builder Navi+, la navigazione da tastiera di base (Tab, Invio, Escape) è probabilmente già gestita. Aggiungi scorciatoie come slash-per-ricerca su quella base, non al suo posto.

Il punto fondamentale: piccole scorciatoie, grande impatto

Le scorciatoie da tastiera non trasformeranno il tuo store da un giorno all’altro. Non appariranno nei metriche dei test A/B o nei report di Google Analytics. Ma si accumulano nel tempo.

Un power user che scopre la tua scorciatoia slash-per-ricerca risparmia 3 secondi per ricerca. Se visitano il tuo store 20 volte all’anno e cercano 3 volte per visita, sono 180 secondi—3 minuti—di attrito risparmiato. Quell’utente ricorda l’esperienza come “veloce” ed “efficiente” rispetto ai concorrenti.

Gli store che vincono sull’efficienza sono quelli che ottengono il business ripetuto. E il business ripetuto è dove vivono i margini di profitto nell’ecommerce.

Inizia con slash per la ricerca. Aggiungi Escape per chiudere i modal. Se i tuoi analytics mostrano alti tassi di clienti ripetuti, considera di aggiungere G+C per il carrello e G+H per la home. Mantienilo semplice, mantienilo standard, e rendilo individuabile.

Questo articolo fa parte della guida più ampia su Navigazione da tastiera: perché conta oltre l’accessibilità.