Miglioramento del checkout mobile: perché dovresti disattivare la correzione automatica dell'iPhone
Pubblicato: 2021-08-19Uno dei motivi per cui i nuovi imprenditori esitano ad avviare un negozio online è perché temono l'assistenza clienti.
Steve, dovrò installare una linea di supporto per il mio negozio? Preferisco non avere a che fare con i clienti direttamente al telefono. Posso semplicemente inserire un indirizzo e-mail e chiamarlo un giorno?
Pur avendo a che fare con l'inconveniente dell'assistenza telefonica è sicuramente una preoccupazione valida, non temo affatto l'assistenza clienti. Infatti lo abbraccio. E se potessi avere ogni singolo cliente al telefono lo farei .
Come mai? È perché accadono sempre cose buone quando parlo direttamente con un cliente. Non solo le possibilità di convertire una vendita sono drasticamente aumentate , ma le chiamate dei clienti hanno portato a molte importanti correzioni di bug per il mio sito web.
Oggi voglio condividere con voi un bug killer del mio sito mobile che sta allontanando i clienti da quasi un anno!
Suggerimento: comporta il checkout mobile e la correzione automatica dell'iPhone!
Ottieni il mio mini corso gratuito su come avviare un negozio di e-commerce di successo
Se sei interessato ad avviare un'attività di e-commerce, ho messo insieme un pacchetto completo di risorse che ti aiuteranno a lanciare il tuo negozio online da zero. Assicurati di prenderlo prima di partire!
Maledetto correzione automatica!
Un giorno, mi è capitato di stalkerare un cliente online quando ho notato un comportamento molto strano. Questa persona aveva un sacco di merce nel carrello ma continuava ad andare avanti e indietro tra 2 pagine del sito web.
Un momento sarebbero nella pagina di pagamento e poi sarebbero tornati alla pagina del carrello e poi di nuovo alla pagina di pagamento... più e più volte. In effetti, questo inspiegabile schema di navigazione web è continuato per circa 10 minuti.
Ora, in circostanze normali, avrei chiamato subito questa persona ma non avevo ancora le sue informazioni perché non avevano completato la prima pagina del checkout. Quindi non potevo fare altro che aspettare.
E anche se non riuscivo a vedere la faccia del cliente, potevo dire che si stavano innervosendo e che probabilmente avremmo perso la vendita.
Fortunatamente, il cliente ha finalmente deciso di chiamarci al telefono per effettuare l'ordine online.
Moglie: Siamo così dispiaciuti. Come posso aiutarla?
Cliente: Mio figlio mi ha detto che fare acquisti sul mio iPhone dovrebbe essere facile e diretto, ma per quanto mi riguarda non riesco a fare il checkout sul tuo sito
Moglie: Sarei felice di prendere il tuo ordine per telefono.
Cliente: Grazie mille. L'ho già avuto fino a qui. Questo stupido telefono non mi permetteva di inserire correttamente la mia città e l'indirizzo e-mail!!! E stavo diventando così frustrato che volevo lanciare il mio telefono dall'altra parte della stanza.
Moglie: Siamo così dispiaciuti per questo. Ti dispiacerebbe descrivermi il tuo problema esatto per la nostra conoscenza?
Si scopre che questa simpatica signora viveva in una città chiamata "Southborough". Ma il suo iPhone non le permetteva di entrare correttamente nella sua città perché continuava a trasformare "Southborough" in "South borough" .
Il suo iPhone pensava di farle un favore correggendo la digitazione ma non le permetteva di entrare correttamente nella sua città.
Affrontare il problema della correzione automatica
Abbastanza sicuro, quando ho provato a entrare in "Southborough" sull'iPhone di mia moglie, ha continuato a provare a correggere automaticamente anche la città. E come questa signora, mi sentivo un po' frustrato dal fatto che ci fosse voluto così tanto sforzo per far sì che il telefono registrasse correttamente la mia digitazione.
Dopo aver fatto una piccola ricerca sul web, ho scoperto che avevo un difetto di progettazione critico nel mio sito mobile. Per evitare che un browser Web interferisca con l'input di un cliente, è necessario disattivare la correzione automatica su tutti i moduli per smartphone e tablet.
Fortunatamente, disattivare la correzione automatica è stato facile da fare...
Per tutti i tuoi moduli, devi semplicemente aggiungere il seguente tag a tutti i tuoi campi di input di testo.
E per buona misura, dovresti anche disattivare le maiuscole automatiche e il completamento automatico aggiungendo anche le maiuscole automatiche = "off" e il completamento automatico = "off" a tutti i tuoi moduli.
Una volta apportate queste modifiche, è stato molto semplice inserire l'indirizzo corretto. Siamo stati fortunati che questo cliente abbia deciso di chiamare, perché probabilmente non avrei pensato a questo potenziale problema.
E anche se ho testato molto a fondo il nostro sito web mobile, non ho pensato di testare nomi e moduli che l'iPhone avrebbe cercato di correggere automaticamente.
Rendere i numeri di telefono cliccabili
Dopo questo fiasco del cliente, ho deciso di fare un'analisi più approfondita dei miei moduli web mobili prestando particolare attenzione all'usabilità ed ecco cosa mi è venuto in mente.
Prima di tutto, e questa è solo un'impressione, ma credo che avremmo sicuramente perso questo cliente se non avessimo avuto il nostro numero di telefono ben visibile nel piè di pagina del nostro sito web mobile .
Ma sono stato davvero fortunato ed ecco perché. Android e iOS fanno un ottimo lavoro nel rendere automaticamente cliccabili i numeri di telefono per impostazione predefinita.
Ma poiché in realtà non ho scritto alcun codice per rendere esplicitamente selezionabile il numero, il nostro numero click-to-call potrebbe non funzionare su tutti i telefoni .
In generale, è meglio peccare per eccesso di cautela e non fare affidamento sul rilevamento automatico, quindi ecco il codice per rendere i numeri di telefono cliccabili su un telefono.
Prima di tutto, vuoi disattivare qualsiasi rilevamento automatico che il telefono offre già perché vuoi impedire al sistema operativo di rendere accidentalmente selezionabili numeri casuali.
Quindi, vuoi trasformare il tuo numero di telefono in un collegamento
Rendere ancora più facile l'inserimento dei moduli
Un'altra cosa che ho notato mentre cercavo di effettuare un ordine era che inserire il mio numero di telefono era un po' goffo . Poiché la mia tastiera standard del telefono mette tutti i numeri nella riga superiore del mio telefono, è molto facile commettere un errore di digitazione.
Fortunatamente, ci sono alcuni costrutti HTML5 che facilitano la digitazione dei numeri.
Aggiungendo i seguenti tag al campo di immissione del telefono, è possibile fare in modo che alcuni telefoni (soprattutto l'IPhone) utilizzino una tastiera del telefono invece della tastiera standard quando si inseriscono i numeri.
L'aggiunta di questi tag ai campi di inserimento del numero di telefono farà apparire la tastiera numerica per rendere l'immissione del numero molto più semplice.
Conclusione
Quando si tratta di usabilità di telefoni cellulari e tablet, ho chiaramente molto da imparare :) Ma ora che sono più consapevole dei potenziali problemi, sono più in grado di individuare bug e problemi con il nostro design.
Ma se c'è una lezione da imparare, vale sempre la pena parlare con i clienti e chiedere loro opinioni sull'usabilità. Dopotutto, sono loro a pagare le bollette ed è nel tuo interesse che abbiano l'esperienza di acquisto più fluida possibile.
Buona fortuna con il tuo negozio!