Un team dell’azienda per cui lavoro, si occupa di fare evolvere come prodotto una piattaforma e-commerce proprietaria. La piattaforma è cresciuta a tal punto, che è arrivato in sprint la storia che esponeva l’esigenza di poter mostrare la piattaforma in più lingue.
Il “Full Stack Designer” (i team non sono grandi, per cui, come succede alle piccole e medie aziende, chi ha questo ruolo ha il compito di curare da l’user experience (UX), passando per l’user interface (UI) fino alla scrittura del codice Front-End), cioè il sottoscritto, si è trovato a dover posizionare l’esperienza utente e a scegliere quale elemento dell’interfaccia fosse più corretto da inserire per la scelta della lingua preferita da parte dell’utente.
Facendo un passo indietro, ho cercato di vedere il problema con gli occhi “UX” e mi è scaturita questa domanda:
Qual è il modo migliore per far scegliere una lingua preferita ai nostri utenti?
domanda che girava in team
La risposta è parsa subito semplice: facendo scegliere all’utente tra un set di lingue a disposizione e salvando poi la sua scelta. Ove necessario poi, una volta effettuata la scelta caricare i testi della nuova lingua. Tutto abbastanza semplice. Per ora non dovevamo gestire lingue con alfabeti particolari (come giapponese, cinese, cirillico) o scrittura rtl (right to left – come le lingue arabe).
Volevo però un pò approfondire e mi son letto l’articolo “International Web Usability” del Nielsen Norman Group (Leader mondiali nell’esperienza utente basata sulla ricerca), se pur un pò datato da una bella panoramica sulla tematica, dando molti consigli.
Nella parte specifica della scelta della lingua però vi è questa frase:
Il miglior simbolo visivo per una lingua è probabilmente una bandiera
Nielsen Norman Group – International Web Usability
Sulla parola “bandiera” però vi era il rimando a questo articolo: “Flag Problems“, dove viene evidenziato che il problema con l’utilizzo delle bandiere come simboli per la scelta della lingua è che alcune lingue sono parlate in molti paesi.
In effetti per il sito in inglese quale bandiera dovresti usare? Britannico, americano o forse australiano? A meno che tu non abbia un sito per ogni paese, è probabile che tu stia creando un attrito o per lo meno un esperienza non ottimale non scegliendo la bandiera del loro paese.
Con queste domande in testa, solitamente il mio primo approccio è di chiedermi se quel elemento UI è un design pattern riconosciuto e standard. I Design Pattern sono soluzioni ricorrenti che risolvono problemi di progettazione comuni, sono punti di riferimento standard per i progettisti di interfacce utente esperti.
Nel corso di questa ricerca, ho scoperto questo sito “flagsarenotlanguages” di James Offer user experience designer con anni di esperienza nella progettazione di siti web multilingue e un vivo interesse per la lingua e la cultura, che mi chiarisce ancora meglio il problema:
Le bandiere sono simboli che rappresentano paesi o nazioni.
Le lingue rappresentano un metodo di comunicazione condiviso tra le persone.
Le bandiere sono uniche per un paese o una nazione: ma le lingue sono spesso parlate oltre i confini nazionali. Utilizzando una bandiera per una lingua, potresti confondere o addirittura offendere gli utenti.
Approfondendo e leggendo nel suo sito, condivido i tre consigli che esprime:
- Usa sempre il nome della lingua nel formato locale.
- Se possibile, prova a rilevare automaticamente la lingua dell’utente. (In questo modo puoi presentare a un utente il contenuto nella sua lingua, se disponibile. Tuttavia, assicurati di dare un’opzione facile per cambiare lingua: il rilevamento automatico non è sempre accurato al 100%.)
- Fornire un modo chiaro per cambiare le lingue. (L’intestazione e il piè di pagina sono luoghi adatti in cui gli utenti possono trovare i selettori di lingua. Sui dispositivi mobili valuta la possibilità di posizionare il selettore della lingua nella navigazione del menu principale.)
- Non utilizzare le bandiere a meno che il contenuto non sia specifico del paese
ad esempio il sito https://wordpress.com/ rispetta tutte le caratteristiche