Supremazia, sì, perchè se il sito è incasinato e non trovi le cose, lo chiudi.  La navigazione ormai avviene per l’80%  dai dispositivi mobili. L’esperienza dell’utente Mobile (User Experience Design UXD o UX) è determinante. 

User Experience Design (UXD o UX) nel web design descrive la progettazione dell’esperienza di navigazione dell’utente del sito web. Consiste nell’aumentare  il piacere degli utenti con una navigazione intuitiva, logica e piacevole, ovvero migliorando l’usabilità, l’accessibilità e l’efficienza dell’interazione con i siti web.

Ecco un significativo studio delle migliori 100 pratiche di Andrew Kucheriavy, uno dei Maestri e massimi esperti di UX design. 

Per rendere l’esperienza dell’utente il più gradevole possibile bisogna tener conto di molteplici aspetti decisi in fase di PROGETTAZIONE:

  1. Pensa al sito web come a un percorso di mattonelle gialle: sposta gli utenti da una sezione all’altra, comprendendo gli obiettivi e le esigenze degli utenti. 
  2. Gli utenti sono più propensi a notare gli articoli nella parte superiore della pagina, in ordine di importanza 
  3. Le interfacce Web coerenti e di facile utilizzo aiutano gli utenti a concentrarsi sul contenuto e a spostarsi attraverso di esso 
  4. Evita di creare pagine senza via d’uscita sui siti web. Causano confusione e creano lavoro aggiuntivo per gli utenti
  5. Usa i modelli e le interfacce comuni del sito web; non fare in modo che gli utenti debbano imparare qualcosa di nuovo

  1.  Gli utenti scorreranno verso il basso nella pagina web finché sarà chiaro che ulteriori informazioni rilevanti sono below the fold 
  2. Il tuo sito web dovrebbe sempre fornire una forte indicazione visiva della direzione dello scorrimento   e se sono disponibili più contenuti 
  3. Più lunga è la pagina del sito Web, minore è la probabilità che qualcuno scorra verso il basso 
  4. Le pagine Web in esecuzione sono carine perché lo scorrimento è più rapido del clic, ma non creare pagine troppo lunghe 

  1. Design per utenti daltonici. Converti i tuoi disegni in scala di grigi per assicurarti che tutti gli utenti possano leggere informazioni importanti
  2. Non utilizzare il colore blu per qualsiasi testo su siti Web diversi dai collegamenti 
  3. Sii consapevole del contrasto sui siti web per dispositivi mobili. L’abbagliamento dello schermo può rendere inutilizzabile il tuo sito web
  4. Prevedi un colore per CTA sul tuo sito web e non utilizzarlo per nient’altro 
  5. I colori caldi e luminosi si fanno avanti e i colori freddi e scuri rimangono sullo sfondo 

  1. Assicurati che gli utenti del sito web possano raggiungere il loro obiettivo primario in modo rapido e semplice 
  2. Ciò che conta di più per gli utenti è che il tuo sito web appaia veloce (anche se è solo la loro percezione) 
  3. La percezione della velocità del sito Web si basa sul tempo di caricamento, sul comportamento del caricamento, sui tempi di attesa e sulla fluidità delle animazioni 
  4. Mostra uno scheletro degli elementi del sito Web per comunicare il layout durante il caricamento 
  5. Il testo del sito web deve essere caricato prima delle immagini in modo che gli utenti possano iniziare a leggere prima che il resto del sito venga caricato 
  6. Ritardi più lunghi di diversi secondi fanno sì che gli utenti abbandonino il sito web 

  1. Gli elementi di interfaccia mobile sono difficili da toccare con precisione se sono piccoli o ravvicinati 
  2. Le dimensioni minime per un target tattile su cellulari devono essere di 1 cm x 1 cm con imbottitura adeguata 
  3. Qualcuno che usa un mignolo sul tuo sito web o app per dispositivi mobili significa che gli obiettivi dell’interfaccia sono troppo piccoli 
  4. Quando si tiene una tavoletta, i lati e la parte inferiore dello schermo si raggiungono più facilmente con il pollice
  5. Non richiedere lo scorrimento verticale per qualcosa di diverso dal normale scorrimento della pagina web 
  6. Non utilizzare i doppi tocchi sui dispositivi mobili. Assicurati che gli utenti possano interagire con un solo tocco
  7. Determina se gli utenti utilizzeranno i dispositivi con una mano o due durante la progettazione di layout mobili 

  1. Avere sempre un modo ovvio per accedere al menu di navigazione sul tuo sito web 
  2. Se la gerarchia del tuo sito web è più profonda di 3-4 livelli, è tempo di riprogettarlo 
  3. Prendi in considerazione l’utilizzo di menu permanenti, specialmente su pagine web più lunghe o quando è necessario un accesso rapido 
  4. La buona navigazione del sito Web non è di intralcio, scompare in background 
  5. Rendi coerente la tua navigazione; non dovrebbe cambiare in tutto il sito
  6. Rendi le etichette di navigazione specifiche, non più di 2-3 parole e inizia con la maggior quantità di informazioni che trasportano le parole 
  7. Consenti agli utenti di sapere dove si trovano sul sito Web usando i breadcrumb 
  8. Navigazione mobile: mostra le opzioni più utilizzate e nascondi le altre sotto un menu di hamburger 
  9. I menu Hamburger sui desktop sono meno evidenti, meno familiari, aumentano i costi di interazione e diminuiscono il profumo dell’informazione
  10. Per la navigazione secondaria sui dispositivi mobili, utilizzare le pagine di destinazione delle categorie, i sottomenu o i menu in-page 
  11. I menu a discesa dovrebbero essere verticali, non orizzontali; è molto più difficile scorrere orizzontalmente
  12. Il Mega menu dovrebbe essere più stretto della pagina, perché sia più facilmente cliccabile
  13. Se si utilizzano mega menus, organizzare i collegamenti in gruppi e distinguere tra elementi selezionabili e non selezionabili 
  14. Non nascondere le funzioni di login o di ricerca all’interno dei menù del sito web

  1. Allineare le etichette e i campi dei moduli ad un’unica linea verticale per consentire una scansione veloce 
  2. Le etichette dei campi dovrebbero essere al di fuori del campo testo, non all’interno, in modo che gli utenti non ne perdano traccia
  3. Suddividi le sezioni con i separatori per rendere i moduli web lunghi più user-friendly 
  4. Inserisci errori di compilazione dei moduli accanto ai campi che generano errori su tutti i moduli Web 
  5. ​​I messaggi di errore dovrebbero essere utili, utilizzabili, concisi e facili da capire 
  6. Mostra tutti i campi che generano errori in una volta, accanto a ciascun campo problematico in modo che gli utenti mobili non perdano l’avvertimento 

  1. I link sui siti Web devono risaltare: utilizzare il testo blu e / o la sottolineatura per indicare i collegamenti ipertestuali 
  2. I link dovrebbero sempre apparire come link 
  3. Un utente non dovrebbe dover cliccare su un link per capire dove conduce. Il testo del link dovrebbe dirglielo
  4. Non utilizzare testo blu o sottolineatura per elementi non collegati in siti Web o app 
  5. Un riferimento a un URL completo in qualsiasi punto di un sito web dovrebbe sempre collegarsi a quella pagina 
  6. Alcuni elementi, come le immagini dei prodotti o le recensioni, dovrebbero sempre essere cliccabili 
  7. Utilizzare un colore diverso per i collegamenti visitati sui siti Web per ridurre il carico di memoria degli utenti 

  1. I pulsanti sui siti Web devono essere selezionabili e avere abbastanza spazio per consentire agli utenti di clliccare comodamente 
  2. Le azioni frequenti su siti Web o app dovrebbero essere pulsanti grandi, collocati in zone facilmente raggiungibili 
  3. I colori di sfondo, i bordi e le etichette orientate all’azione su un sito web segnalano agli utenti che un elemento è cliccabile 
  4. Per i design piatti, assicurati che i pulsanti di azione siano realizzati in un colore a contrasto con un’etichetta orientata all’azione 
  5. Un sito web dovrebbe avere un’indicazione visiva che il clic di un pulsante ha avuto esito positivo entro 0,1 secondi dall’interazione 

I pulsanti che modificano o eliminano i dati sui dispositivi mobili dovrebbero richiedere un maggiore sforzo per essere cliccati per evitare di cliccarli accidentalmente 

  1. A meno che tu non abbia un sito web molto piccolo con pochi contenuti, avere sempre un campo di ricerca 
  2. Il campo di ricerca dovrebbe sempre apparire come una casella di testo su un desktop. L’icona di ricerca è OK da usare per i dispositivi mobili
  3. Rendi il campo di ricerca facile da trovare. Gli utenti in genere lo cercano nell’angolo in alto a destra
  4. Quando cerchi la ricerca sui siti web, gli utenti in genere cercano una “piccola finestra da digitare” 
  5. I campi di ricerca sui siti web dovrebbero essere sufficientemente ampi da poter vedere l’intera query di ricerca 

  1. Evita i caroselli: ogni nuova diapositiva cancella la memoria della diapositiva precedente. Gli utenti possono concentrarsi solo su una cosa alla volta
  2. I punti sui caroselli sono difficili da vedere sui siti web per dispositivi mobili. Usa le immagini sbirciando da sinistra e destra invece
  3. Invece delle frecce di navigazione carosello, utilizza etichette descrittive in modo che gli utenti sappiano cosa aspettarsi nella prossima diapositiva 
  4. Solo circa l’1% degli utenti fa clic sulle diapositive dei caroselli sui siti Web, quindi non fare affidamento su tali clic 
  5. I caroselli dei siti Web che si muovono automaticamente dovrebbero passare al manuale una volta che gli utenti interagiscono con essi 

  • Usa le fisarmoniche per comprimere contenuti lunghi su siti web mobili 
  • Quando usi le fisarmoniche, offri un modo per comprimere qualsiasi contenuto esposto una volta che l’utente lo ha espanso 
  • Pro sull’uso di fisarmoniche sui siti web per dispositivi mobili: le pagine più brevi sono più facili da utilizzare rispetto ai collegamenti di salto in-page 
  • Contro l’uso di fisarmoniche sui siti web per dispositivi mobili: aumento dei costi di interazione; fuori dalla vista è fuori di testa

 

  1. Lo scopo principale di ogni pagina web dovrebbe essere evidente per l’utente 
  2. Gli utenti sono restii a utilizzare la Guida sul tuo sito web. Inseriscila nel contesto e offri procedure guidate e domande frequenti, se necessario
  3. Visualizza suggerimenti su siti Web e app nel contesto e solo quando necessario 
  4. Guida e istruzioni dovrebbero essere brevi e visivamente diverse dagli altri elementi dell’interfaccia 
  5. Presenta solo un suggerimento alla volta su siti Web e app mobili. Ciò riduce il carico di memoria

  1. Le icone devono descrivere visivamente la loro funzione e il loro scopo. Rendili semplici, familiari e significativi
  2. Le icone dovrebbero essere utilizzate solo se necessario. Evitare di esagerare e non usarli semplicemente per la decorazione

  1. Le informazioni più importanti sulla tua pagina web dovrebbero sempre risaltare anche visivamente come le più importanti 
  2. Prima metti le informazioni chiave. Gli utenti iniziano in alto a sinistra e le prime 2-3 parole vengono scansionate di più
  3. Inserisci contenuti ad alta priorità nella parte superiore della pagina del sito web. Utilizzare l’analisi per determinare le priorità su diversi dispositivi
  4. Usa il contrasto del colore e delle dimensioni sul tuo sito web per differenziare le informazioni principali dai dettagli di supporto 
  5. Le priorità, come il contesto, la posizione e le informazioni di emergenza, sono più importanti per gli utenti mobili 
  6. Priorità per il cellulare: Posizione, eventi, numero di telefono, informazioni di emergenza, informazioni e informazioni relative al calendario necessari in movimento
  7. I termini semplici e ovvii sono migliori del linguaggio tecnico o dei termini di tendenza per la navigazione del sito web 

  1. La maggior parte degli utenti esegue la scansione prima e legge più tardi. Usa la varietà visiva e il testo significativo per semplificare la scansione
  2. La leggibilità non riguarda solo la possibilità di leggere qualcosa, ma anche la facilità di lettura 
  3. Usa maggiore interlinea tra elenchi puntati, liste numerate, linee e paragrafi per aumentare la leggibilità 
  4. Quando si sceglie un font sito Web, considerare la sua leggibilità, pesi e stili 
  5. Sui siti web e le app per dispositivi mobili, considera di ingrandire l’altezza x di un font per migliorare la sua leggibilità 
  6. Evita caratteri piccoli su tutti i dispositivi, specialmente per le copie lunghe. Non utilizzare font condensati nel corpo del testo
  7. Assicurati che le dimensioni del testo per i titoli di un sito web per dispositivi mobili siano altrettanto reattive del resto del contenuto 
  8. Aumenta la dimensione del carattere sui siti web per dispositivi mobili: ridimensiona sempre la dimensione del carattere alle dimensioni dello schermo 
  9. Banner Blindness: gli utenti si sforzano di non guardare nulla che assomigli a banner pubblicitari 
  10. Semplificare la lettura dei blocchi di testo lunghi includendo solo un’idea per paragrafo 
  11. Il testo in corsivo è più difficile da leggere, specialmente per i lettori dislessici
  12. Non abusate dei TITOLI DI TESTA E DELLE TAGLINE. È molto più difficile da leggere
  13.