{"id":226,"date":"2021-02-04T23:40:25","date_gmt":"2021-02-04T22:40:25","guid":{"rendered":"https:\/\/www.alecerme.it\/raggi\/?p=226"},"modified":"2025-09-28T09:46:34","modified_gmt":"2025-09-28T09:46:34","slug":"ui-design-pattern-bandiere-e-lingue","status":"publish","type":"post","link":"https:\/\/alecerme.it\/raggi\/ui-design-pattern-bandiere-e-lingue\/","title":{"rendered":"UI, design pattern, bandiere e lingue"},"content":{"rendered":"\n
\"\"
Foto di J\u00c9SHOOTS<\/strong> da Pexels<\/strong>
<\/figcaption><\/figure>\n\n\n\n

Un team dell’azienda per cui lavoro, si occupa di fare evolvere come prodotto una piattaforma e-commerce proprietaria. La piattaforma \u00e8 cresciuta a tal punto, che \u00e8 arrivato in sprint la storia che esponeva l’esigenza di poter mostrare la piattaforma in pi\u00f9 lingue.<\/p>\n\n\n\n

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\u00e8 il sottoscritto, si \u00e8 trovato a dover posizionare l’esperienza utente e a scegliere quale elemento dell’interfaccia fosse pi\u00f9 corretto da inserire per la scelta della lingua preferita da parte dell’utente.<\/p>\n\n\n\n

Facendo un passo indietro, ho cercato di vedere il problema con gli occhi “UX” e mi \u00e8 scaturita questa domanda: <\/p>\n\n\n\n

\n

Qual \u00e8 il modo migliore per far scegliere una lingua preferita ai nostri utenti?\u00a0<\/p>\ndomanda che girava in team<\/cite><\/blockquote>\n\n\n\n

La risposta \u00e8 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).<\/p>\n\n\n\n

Volevo per\u00f2 un p\u00f2 approfondire e mi son letto l’articolo “International Web Usability”<\/a> del Nielsen Norman Group (Leader mondiali nell’esperienza utente basata sulla ricerca), se pur un p\u00f2 datato da una bella panoramica sulla tematica, dando molti consigli.<\/p>\n\n\n\n

Nella parte specifica della scelta della lingua per\u00f2 vi \u00e8 questa frase:<\/p>\n\n\n\n

\n

Il miglior simbolo visivo per una lingua \u00e8 probabilmente una\u00a0bandiera<\/p>\nNielsen Norman Group – International Web Usability
<\/cite><\/blockquote>\n\n\n\n

Sulla parola “bandiera” per\u00f2 vi era il rimando a questo articolo: “Flag Problems<\/a>“, dove viene evidenziato che il problema con l’utilizzo delle bandiere come simboli per la scelta della lingua \u00e8 che alcune lingue sono parlate in molti paesi.<\/strong> <\/p>\n\n\n\n

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, \u00e8 probabile che tu stia creando un attrito o per lo meno un esperienza non ottimale non scegliendo la bandiera del loro paese.<\/p>\n\n\n\n

Con queste domande in testa, solitamente il mio primo approccio \u00e8 di chiedermi se quel elemento UI \u00e8 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.<\/p>\n\n\n\n

Nel corso di questa ricerca, ho scoperto questo sito<\/a> “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:<\/p>\n\n\n\n

\n
\n

Le bandiere<\/strong> sono simboli che rappresentano paesi o nazioni.<\/p>\n<\/div>\n\n\n\n

\n

Le lingue<\/strong> rappresentano un metodo di comunicazione condiviso tra le persone.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Le bandiere<\/strong> sono uniche per un paese o una nazione<\/strong>: ma le lingue sono spesso parlate oltre i confini nazionali<\/strong>. Utilizzando una bandiera per una lingua, potresti confondere<\/strong> o addirittura offendere gli<\/strong> utenti<\/strong>.<\/p>\n\n\n\n

Approfondendo e leggendo nel suo sito, condivido i tre consigli che esprime:<\/p>\n\n\n\n

    \n
  1. Usa<\/strong> sempre il nome della lingua nel formato locale<\/strong>.<\/li>\n\n\n\n
  2. Se possibile, prova a rilevare automaticamente la lingua dell’utente<\/strong>. (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 \u00e8 sempre accurato al 100%.)<\/li>\n\n\n\n
  3. Fornire<\/strong> un modo chiaro per cambiare le lingue<\/strong>. (L’intestazione e il pi\u00e8 di pagina sono luoghi adatti in \u200b\u200bcui gli utenti possono trovare i selettori di lingua.\u00a0Sui dispositivi mobili valuta la possibilit\u00e0 di posizionare il selettore della lingua nella navigazione del menu principale.)<\/li>\n\n\n\n
  4. Non utilizzare le bandiere a meno che il contenuto non sia specifico del paese<\/strong><\/li>\n<\/ol>\n\n\n\n
    \n
    \n
    \"\"<\/figure><\/div><\/div>\n\n\n\n
    \n
    \"\"<\/figure><\/div><\/div>\n\n\n\n
    \n
    \"\"<\/figure><\/div><\/div>\n<\/div>\n\n\n\n

    ad esempio il sito https:\/\/wordpress.com\/ rispetta tutte le caratteristiche<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    Un team dell’azienda per cui lavoro, si occupa di fare evolvere come prodotto una piattaforma e-commerce proprietaria. La piattaforma \u00e8 cresciuta a tal punto, che \u00e8 arrivato in sprint la…<\/p>\n","protected":false},"author":1,"featured_media":541,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,34],"tags":[29,42,40,41,43,44],"class_list":["post-226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comunicazione","category-user-experience","tag-comunicazione","tag-internazionalizzazione","tag-lingue","tag-sito-multilingua","tag-tecniche","tag-user-interface"],"_links":{"self":[{"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":7,"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/posts\/226\/revisions\/525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/media\/541"}],"wp:attachment":[{"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alecerme.it\/raggi\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}