59 tecniche per l’ottimizzazione della UX nel tuo sito

Caro web designer, abbiamo già parlato altre volte dello UX design, spiegando (anche in maniera INFOGRAFICA…) di cosa si tratta. Ma qual è lo scopo dello UX design? Semplice: rendere piacevole l’esperienza utente (la UX, appunto) ed evitargli di perdersi.

ottimizzazione-ux-sito

 

Ci sono numerose tecniche per ottimizzare la UX del sito: qui ne trovi ben 59. 

Organizza il percorso tra le pagine (consigli 1-7)
Organizza gli elementi della pagina (consigli 8-22)
Usa bene il copy (consigli 23-25)
Previeni l’errore (consigli 26-37)
Gestisci i tempi di attesa (e, se possibile, evitali) (consigli 38-42)
Diventa un Ninja con tabelle, filtri e box di ricerca (consigli 43-48)
Fai attenzione ai pop-up! (consigli 49-51)
Form: last but not least (consigli 52-59)

Organizza il percorso tra le pagine

1. Menu di navigazione: chiaro e semplice. Evita effetti fantasmagorici o metafore: il menu è il cartello stradale del tuo sito e deve dire dove andare.
2. Evidenzia graficamente in quale punto del menu si trova l’utente: puoi farlo cambiando il colore del testo o del brackground, con un effetto bold o usando frecce.

 

ottimizzazione-ux-menu-di-navigazione-3

3. Hai dei sottomenu? Occhio alla grafica! Font e colori devono accordarsi, e fai attenzione alla larghezza del sottomenu: meglio se occupa lo stesso spazio del menu principale.

ottimizzazione-ux-categorie-menu-di-navigazione

4. Click, meno è meglio. Fallo con organizzazione a tab del contenuto, informazioni extra al mouse over, box subito sotto il prodotto.
5. Gli step vincono sempre. Usali per le azioni complesse; ed evidenzia, con grafica e testo, di quanti step si tratta e in quale step è l’utente.

ottimizzazione-ux-sequenza-di-step

6. Informazioni e azioni: c’è la gerarchia = architettura informativa. Cosa devi dire subito, cosa si deve vedere per primo? Questo è il menu di primo livello. Il resto è approfondimento e dettaglio e va in secondo livello. L’organizzazione dell’architettura informativa è uno dei cardini di una buona UX… oltre che di una buona ottimizzazione SEO on-site. 

 

ottimizzazione-ux-menu-di-navigazione-1

7. Dai la stessa importanza gerarchica alle azioni più frequenti. In questo caso il numero di stellette sulla divisa è lo stesso: vanno quindi fianco a fianco.

ottimizzazione-ux-menu-di-navigazione

Organizza gli elementi della pagina

8. Crea una gerarchia visiva tra gli elementi della pagina per guidare la scansione. Per aiutarti, disegna la linea immaginaria del percorso di navigazione dell’utente nella pagina.
9. Usa il layout a una colonna. Così sei obbligato a organizzare i contenuti della pagina secondo un percorso lineare.
10. Considera la parte above the fold come una pagina a sé. L’essenziale è visibile agli occhi e deve stare lì.
11. Inserisci elementi grafici di collegamento tra above e beyond the fold. In questo modo suggerisci l’azione di scroll.

ottimizzazione-ux-beyond-the-fold

12. Dividi la pagina a blocchi orizzontali. Anche qui, usa elementi grafici di collegamento tra l’uno e l’altro per creare continuità visiva.

ottimizzazione-ux-elementi-tra-blocchi

13. Mantieni allineati gli elementi della pagina secondo linee guida – una regola che i web designer professionisti sanno a memoria.
14. Call to action: una, evidente, sopra e/o sotto. Primo, ci deve essere una call to action. Secondo, deve essere staccata graficamente dalla pagina. Terzo, può essere above o beyond the fold: fai un A/B test e vedi cosa converte meglio
15. Guida la call to action coi colori. Se hai 3 o più scelte, guida visivamente quella migliore o la più comune e l’utente te ne sarà grato. Un esempio è l’organizzazione della pagina Pricing di molti tool in commercio.

ottimizzazione-ux-call-to-action

16. Evita gli spazi bianchi che interrompono l’azione. Lo spazio bianco è un grande alleato dell’usabilità, ma non quando interrompe una stessa azione, come un paragrafo a una colonna che prosegue su 2 colonne.

ottimizzazione-ux-spazio-bianco

17. Bordi: pochi ma buoni. Prediligi il flat design senza bordi, salvo che per gli elementi che devono essere più evidenti, come form e call to action.

ottimizzazione-ux-design-minimale

18. Il testo non deve essere corto, ma ben organizzato. Qui passiamo a un sottogruppo dell’usabilità, che è la leggibilità. E il vero nemico della leggibilità non è il testo lungo, sono il muro di testo e le parole inutili. Quindi segui tutti i suggerimenti qui sotto 😉
19. Suddividi il testo in paragrafi e usa gli headings. Fa bene all’utente e alla SEO. NB: assicurati che i titoli di paragrafo abbiano da codice gli attributi H1 H2 H3 eccetera.

ottimizzazione-ux-paragrafi

20. Crea variazioni visive nel paragrafo. Fallo con lo spazio bianco, e ancora immagini, elenchi puntati, citazioni, video, slideshow, podcast.

ottimizzazione-ux-paragrafo

21. Inserisci i grassetti e fai il test della velina. Evidenzia in grassetto le informazioni più importanti e immagina di staccare i grassetti con una velina. Si capisce il senso? Allora i grassetti vanno bene.
22. Allineamento? sinistra. Ci sono pagine che giocano con allineamenti a sinistra, a destra, poi al centro e ancora a sinistra… Si trattasse di calcio va bene, ma in questo caso rischi l’autogol perché la lettura diventa troppo faticosa.

ottimizzazione-ux-allineamento-a-sinistra

 

Usa bene il copy

23. Parla la lingua dell’utente, non la tua. Fa bene a lui e fa bene alla SEO.

ottimizzazione-ux-copywriting-2

24. Traduci le istruzioni, sempre. Quanti siti hanno dei fantastici “Chi siamo /Cosa facciamo” e poi ti cadono con un “message successfully sent”? I punti più nascosti del sito sono in realtà quelli più importanti perché è qui che si concentra l’interazione fra utente e brand. Curali, traducili, usali.
25. Comprendi i bisogni reali e soddisfali. Ad esempio, perché gli serve sapere quando sei aperto? Per chiamarti o per comprare? Comprendi la sua esigenza e rispondigli come in una conversazione.

ottimizzazione-ux-copywriting

Previeni l’errore

26. Prima cosa: se l’utente sbaglia, lo stupido sei tu. Frase forte forse, ma è fondamentale. Senza questo atteggiamento di fondo non c’è ottimizzazione della UX
27. Rimuovi le istruzioni ridondanti. Se dai troppe istruzioni ciascuna sarà meno visibile: un po’ come quando scriviamo email troppo lunghe…

ottimizzazione-ux-elimina-istruzioni-ridondanti

28. Evita all’utente di fare i conti: falli tu per lui, o meglio, lasciali fare alla macchina per entrambi.

ottimizzazione-ux-filtri-ecommerce

29. C’è un errore? Segnalalo 3 volte. Con il testo, il colore e anche altri dettagli visivi: in questo caso ridondante è meglio.

ottimizzazione-ux-errore

30. Chiedi il dell’azione fatta se c’è possibile errore: è il caso di quando Gmail ti dice “hai scritto allegato ma non alleghi nulla; sicuro di inviare la mail così?”

ottimizzazione-ux-prevenzione-errore

31. Cambia il bottone acquista e previeni l’acquisto dello stesso prodotto. Se invece di lasciare ACQUISTA metti un CONTINUA L’ACQUISTO o ACQUISTA ALTRO, riduci le possibilità di doppio acquisto. Quindi di errore.

ottimizzazione-ux-bottone-acquista

32. Usa colori che siano semanticamente coerenti con l’azione: rosso è NO, verde è sì, e non importa quale sia il colore del tuo brand

ottimizzazione-ux-colori

33. Usa i tooltip per dare suggerimenti. Aiutano chi non ti conosce e non infastidiscono chi sa già di cosa stai parlando.
34. Se l’azione è irreversibile, crea un “posto di blocco”. Ad esempio Mailchimp chiede di digitare la parola DELETE se devi eliminare un template o una campagna; così hai tempo di pensarci due volte.

ottimizzazione-ux-cancello-azione-irreversibile

35. Dai all’utente la possibilità di ripensarci. Se sa che può tornare indietro, è più facile e meno “spaventoso” per lui andare avanti.

ottimizzazione-ux-chiedi-conferma

36. Non usare il campo libero, se la scelta è limitata. Usa menu a tendina, calendari o altro.

ottimizzazione-ux-campi-liberi-o-no

37. Dai sempre messaggi di feedback positivo o negativo al completamento di un’azione. Così al tuo utente non verranno dubbi.

ottimizzazione-ux-messaggi-dopo-azione

Gestisci i tempi di attesa (e, se possibile, evitali)

38. Se l’azione richiede un tempo di caricamento, rendilo evidente non solo con un messaggio, ma anche con la grafica.
39. Una live chat? Può essere un’idea: mentre la persona attende, può contattarti e magari chiederti informazioni su un prodotto.
40. Evidenzia la progressione del caricamento con barre e percentuali, e se l’azione è in sequenza, rendi evidente anche la sequenza: vedere quanto manca renderà meno agitato e impaziente chi aspetta.

ottimizzazione-ux-gestione-attesa-sequenza-task

41. Prova ad usare il colore blu nell’animazione grafica e fai un A/B tes: il blu è un colore riposante e dovrebbe “calmare i nervi”.
42. Nell’attesa, prova a dare contenuti con cui tenersi occupati: il meccanismo è lo stesso delle riviste dal dentista.

ottimizzazione-ux-contenuti-gestione-tempi-di-attesa

Diventa un Ninja con tabelle, filtri e box di ricerca

43. Organizza i parametri prodotto a mo di tabella per fare confronti. Con parametri della stessa categoria, il confronto è più facile e immediato se li organizzi in tabelle.

ottimizzazione-ux-prodotti-ecommerce-1

44. Alterna i colori delle righe nelle tabelle per renderle più leggibili.

ottimizzazione-ux-tabelle

45. Usa i filtri e filtra per davvero. Se l’utente inizia a digitare del testo, aggiorna dinamicamente i risultati presentando per primi quelli più vicini alla query: ottimizzi tempo e conversioni.

ottimizzazione-ux-filtri-di-ricerca-1

46. Menu di ricerca : sì o no? Anche. Se il menu diventa enorme, allora vai di box di ricerca e completa le query nel box di ricerca con le ricerche più pertinenti.

ottimizzazione-ux-search-

47. Quando c’è una selezione, specifica il totale della selezione: es. “hai scelto 8 phon su 85”. Così l’utente sa che c’è dell’altro e può andare oltre nella ricerca.

ottimizzazione-ux-selezione-categoria

48. Inserisci nel motore anche le varie possibilità: errori di digitazione, sinonimi e termini correlati.

ottimizzazione-ux-errori-sinonimi-varianti-search

 

Fai attenzione ai pop-up!

49. Quando compare un pop-up, scurisci e sfoca lo sfondo che rimane dietro.
50. Rendi visibile il meccanismo di chiusura del pop-up. Altrimenti verrai punito del Girone degli Spammer e il tuo Caronte sarà l’ad-block.

ottimizzazione-ux-pop-up

51. Gestisci la comparsa e scomparsa del pop-up in base al comportamento dell’utente: ci sono dei tool che ti aiutano in questo

Form: last but not least

52. Limita i campi delle form a quelli veramente essenziali. Aggiungere un campo può costarti 20.000 dollari all’anno, parola di NNGroup.
53. Raggruppa le informazioni per gruppi coerenti: nome + cognome, email + telefono, interessi…
54. Indica chiaramente i campi obbligatori e non obbligatori
55. Con le registrazioni, dai alternative: user o email o cellulare o social login
56. Form label: a destra o in altro, ma mantienile vicine al campo di compilazione

ottimizzazione-ux-allineamento-form

57. Precompila la form con i dati già noti
58. Suddividi chiaramente gli spazi, es. quello dell’IBAN

ottimizzazione-ux-form-iban

59. Dai messaggi di errore circostanziati, non generici

 

In conclusione

Come l’utente si muove nella pagina, qual è il percorso che fa? Questo percorso deve essere il più lineare e semplice possibile: un sentiero di OZ a senso unico, senza bivi e ostacoli. Ne parliamo?


Fonti e approfondimenti:

Questo articolo si è ispirato nella struttura e nelle immagini alla raccolta curata da Nick Kolenda sul suo blog, con variazioni sulla base dell’esperienza diretta. Altre letture utili sono Ottimizzare le interfacce per il multitouch di For a Better Web e la raccolta di 23 esempi creativi nel mouse-hover di Econsultancy. Da leggere la guida all’usabilità di Html.it, non foss’altro per com’è ben organizzata 🙂

Fonte immagine di apertura: tumblr-unsplash

Altri Articoli

Newsletter

Non perderti più nulla. Iscriviti alla newsletter!