Capita spesso di ricevere una richiesta formulata così: «vorremmo un sito più bello». È una richiesta legittima, e quasi sempre nasconde una domanda diversa: il sito attuale non sta ottenendo quello che dovrebbe. Le persone arrivano e se ne vanno, oppure arrivano e non capiscono cosa fare.

Rifarlo più bello, in quel caso, risolve solo una parte del problema. L’estetica determina la prima impressione, ma non è quella che decide se una persona continua a leggere, si fida, capisce cosa può ottenere e alla fine scrive. Quello lo decide l’esperienza: il modo in cui la pagina guida chi la sta guardando.

Estetica ed esperienza non sono la stessa cosa

L’estetica è ciò che si vede in un fotogramma: colori, tipografia, immagini, spazi. L’esperienza è ciò che succede nel tempo, mentre qualcuno scorre, legge, si ferma, torna indietro, apre una pagina, cambia idea.

Un sito può essere ineccepibile in un fotogramma e fallire completamente nel tempo. Succede quando ogni sezione ha lo stesso peso visivo, quando i testi sono tutti della stessa lunghezza, quando ci sono sei pulsanti sullo stesso schermo e nessuno di loro è più importante degli altri. Chi guarda non ha niente che lo orienti, e la reazione naturale è chiudere.

Un’esperienza efficace non chiede all’utente di scegliere cosa guardare per primo. Lo decide il progetto, e lo comunica senza dover spiegare niente.

Gerarchia: qualcuno deve decidere cosa si legge per primo

La gerarchia è la parte meno appariscente del lavoro e quella con l’effetto più grande. Significa stabilire, per ogni schermata, cosa deve essere letto per primo, cosa per secondo e cosa può anche non essere letto.

Concretamente vuol dire poche cose, applicate con disciplina:

  • una sola azione principale per schermata, evidente senza doverla cercare;
  • differenze di dimensione ampie e non timide, perché un titolo del 15% più grande del testo non è una gerarchia, è un’imprecisione;
  • contrasto usato come strumento, non solo come requisito di accessibilità;
  • spazio vuoto attorno a ciò che conta, che è il modo più economico per rendere un elemento importante.

Quando la gerarchia funziona, una persona può scorrere la pagina in dieci secondi e riuscire comunque a raccontare di cosa si tratta. È un test che vale la pena fare su qualsiasi homepage.

Leggibilità e ritmo

La leggibilità ha regole abbastanza note: righe fra i sessanta e i settantacinque caratteri, interlinea generosa, contrasto sufficiente, paragrafi brevi. Sono vincoli tecnici, si verificano e si rispettano.

Il ritmo è meno codificato ed è ciò che distingue una pagina piacevole da una pagina faticosa. È l’alternanza fra blocchi densi e blocchi ariosi, fra testo e immagine, fra sezioni che chiedono attenzione e sezioni che la restituiscono. Una pagina con quindici sezioni tutte uguali è stancante anche quando ogni singola sezione è ben fatta, esattamente come un testo scritto tutto con frasi della stessa lunghezza.

Il ritmo si progetta pensando alla sequenza, non alle singole schermate. È il motivo per cui non ha molto senso approvare il design di una pagina guardandola a pezzi.

Il contenuto viene prima del layout

Un layout progettato su testi finti regge finché arrivano i testi veri. Poi il titolo che nel mockup stava su due righe ne occupa quattro, la descrizione prevista in trenta parole ne richiede novanta, e il risultato è che il contenuto viene tagliato per stare dentro il design.

L’ordine corretto è l’opposto. Prima si stabilisce cosa bisogna dire e in quale sequenza, poi si costruisce la forma che lo sostiene. Non è un dettaglio di processo: un sito è, prima di ogni altra cosa, una successione di argomenti, e la successione degli argomenti è una decisione che riguarda l’attività, non il designer.

Quando il movimento serve davvero

Il movimento è utile quando comunica qualcosa che senza di lui andrebbe spiegato.

Movimento che orienta

Un elemento che entra dal basso mentre si scorre segnala che una nuova sezione sta cominciando. Una transizione fra due pagine dice che si è passati da qualche parte e che il sito ha capito l’intenzione. Un menu che si apre con un movimento coerente indica da dove è arrivato e dove tornerà. In tutti questi casi l’animazione sta rispondendo a una domanda implicita: cosa è appena successo?

Micro-interazioni

Sono le risposte immediate ai gesti: un pulsante che reagisce alla pressione, un campo che segnala di aver ricevuto il dato, una card che si solleva impercettibilmente al passaggio del mouse. Durano meno di due decimi di secondo e il loro compito è far capire che il sistema è vivo e ha registrato l’azione.

Un dettaglio che viene sottovalutato: sul telefono il passaggio del mouse non esiste. Qualsiasi informazione affidata solo all’hover, su mobile, non viene comunicata a nessuno.

Più animazioni non significa esperienza migliore

Questa è la parte in cui vale la pena essere netti. Il movimento ha un costo, e il costo lo paga chi sta cercando di fare qualcosa.

Un’animazione di ingresso su ogni singolo paragrafo trasforma la lettura in una sequenza di attese. Uno scroll manipolato toglie alla persona il controllo di un gesto che conosce da anni. Un parallasse pesante su una pagina di contenuto rende difficile mantenere il segno. E tutto questo, per una parte del pubblico, non è solo fastidioso: chi soffre di disturbi vestibolari può avere reazioni fisiche reali. Il sistema operativo permette di dichiarare una preferenza per il movimento ridotto, e un sito fatto bene la rispetta.

La regola pratica che usiamo è semplice: uno o due momenti di movimento riconoscibili per pagina, tutto il resto è risposta funzionale. Se un’animazione non risponde alla domanda «cosa sta comunicando?», sta comunicando solo che qualcuno sapeva farla.

La performance è parte dell’esperienza, non un tema separato

Una pagina che impiega cinque secondi ad apparire non ha un problema tecnico da sistemare dopo. Ha un problema di esperienza, ed è il primo che l’utente incontra.

Vale soprattutto in mobilità, dove la connessione è variabile e l’attenzione è corta. Le immagini non ottimizzate, i font caricati in eccesso, gli script di terze parti che bloccano il rendering e gli elementi che si spostano mentre la pagina si compone sono errori di progetto quanto una gerarchia sbagliata. Il contenuto principale dovrebbe essere leggibile subito, senza aspettare che JavaScript abbia finito il proprio lavoro.

C’è anche un effetto collaterale utile: un sito veloce si può permettere più qualità visiva, perché il budget non è già stato speso in cose che non si vedono.

Il mobile non è una versione ridotta

Ridurre i corpi tipografici e impilare le colonne non è progettare per il telefono. Su uno schermo stretto cambiano le priorità: la sequenza degli argomenti conta più della composizione, le aree toccabili devono essere reali, i menu lunghi diventano ostacoli, e ciò che sul desktop stava affiancato deve avere un ordine di lettura che abbia senso da solo.

Progettare per mobile significa decidere di nuovo cosa viene prima, non comprimere quello che era stato deciso per un monitor da ventisette pollici.

Cosa vuol dire, in pratica, progettare un’esperienza

Significa usare design e tecnologia per guidare la percezione e il comportamento di chi visita il sito: far capire in pochi secondi di cosa si tratta, condurre verso l’informazione che serve, rendere evidente il passo successivo e togliere di mezzo tutto ciò che non contribuisce.

Il risultato, quando funziona, non si nota. Nessuno esce da un sito ben progettato pensando «che bella animazione». Ne esce avendo capito cosa fa quella azienda e, se era il momento giusto, avendo scritto.

L’estetica resta importante. È la prima frase del discorso, e una prima frase sbagliata chiude la conversazione. Ma è la prima, non tutto il discorso.

ApprofondisciSiti web