Design e Performance

Capita a volte di dover ridisegnare l’interfaccia della nostra home page: è diventata obsoleta, non rispecchia più le nostre scelte, oppure semplicemente abbiamo cambiato il logo e i colori e abbiamo bisogno di una rinfrescata. Ottimo niente di meglio che creare un fantastico team che realizzi un prototipo della nuova home page.

Esperti di UX, Web Designer, Architetti Informazione si riuniscono insieme e realizzano un fantastico wireframe interattivo seguendo tutte le best practice del caso, tutto è pronto! Anche i tester di usabilità amano questa nuova pagina e sono assai felici di poter testare questa nuova creazione.

Alla fine il nuovo concept è approvato e con nostra somma approvazione lo carichiamo online, attendiamo fiduciosi i risultati e… disastro! Quello che vediamo non rispecchia quello che ci saremmo aspettati: il nostro tasso di conversione è irrimediabilmente sceso.

Abbiamo seguito step by step le classiche indicazioni, abbiamo fatto tutto da manuale eppure qualcosa non sta funzionando come dovrebbe,  come mai?

Probabilmente non abbiamo tenuto conto di alcuni piccoli accorgimenti, forse siamo incorsi in tre, quattro problemi di design che hanno inficiato il caricamento della pagina, il quale a sua volta impatta il bounce rate e anche le conversioni.

Design e Performance sono due qualità di un sito che spesso se non armonizzate fra loro con attenzione possono fare un pò a cazzotti!

Esiste una stretta relazione, nel caso non lo sapeste, fra la velocità e le prestazioni della pagina in termini di soddisfazione cliente, frequenza di rimbalzo e quantità di pagine navigate; ovvero posso aver creato il design più bello che si sia mai visto sul web, ma se la mia pagina impiega 30 sec a caricarsi, non posso certo aspettarmi che il mio e-commerce venda quantità “amazoniane” di prodotti.

Metriche e business

Se pensiamo a mamma Google e ai suoi parametri di riferimento, dobbiamo renderci conto che in termini di performance i tempi accettabili di caricamento si aggirano intorno al secondo per pagina ( a volte anche meno) e questo anche per cellulari. E’ un obiettivo molto alto indubbiamente, ma sappiate che tutti gli utenti, compresi voi, si annoiano ad aspettare; per ogni secondo guadagnato nel tempo di carica si può avere anche un incremento del 2% nelle conversioni. Mica male!

Sfortunatamente però questo obiettivo è molto lontano dall’essere raggiunto, anche negozi molto famosi di e-commerce non riescono a scendere sotto la soglia di caricamento di 5 secondi in media.

Esistono, come detto, errori di design mascherati sotto best practice che si ripercuotono sulle performance inficiandole: vediamo quali sono queste pratiche ottime per il design, ma invasive per il caricamento delle pagine.

Best Practice: banner a scorrimento

Inserire il classico banner di immagini in prima pagina è un elemento di design per e-commerce così utilizzato per spingere le vendite e le promozioni che non abbiamo nemmeno la necessità di pensare se inserirlo o no! Peccato che questo sia uno degli ultimi elementi che viene caricato per primo in pagina e uno dei più pesanti e lenti!

Questo comporta che mentre si sta aspettando il caricamento del banner, i contenuti non siano ancora disponibili per l’utente.

Gli studi di Jakob Nielsen su eye-tracking dimostrano che questo tipo di caricamento non è ottimale per gli utenti: un utente che ha potuto usufruire di contenuti interessanti entro il primo secondo di navigazione, spenderà il 20% del suo tempo nella zona di interesse, mentre un utente che ha potuto usufruire dei contenuti dopo otto secondi vi spenderà solo l’1% del suo tempo.

In altre parole se il rendering del tuo contenuto più importante è l’ultimo della pagina puoi star sicuro che non verrà visto!

Come puoi risolvere questo problema? 

Ottimizza la sequenza di rendering degli oggetti in pagina, può sembrare banale, ma non tutti lo fanno. Ottimizza le immagini: il loro peso è molto ed è circa la metà del carico di una pagina, comprimile!

Best Practice: i bottoni e links per la call to action sono posti sotto il banner

Il layout tipico di un banner è immagine di sfondo, titolo, testo descrittivo e bottoni o link per la call to action: anche questa è una pratica di design con la quale siamo cresciuti e che abbiamo sempre ritenuto valida, il problema è che molti utenti se ne stanno letteralmente con le mani in mano fino a quando l’immagine non è completamente caricata.

Gli utenti credono che i bottoni siano disabilitati o non sia possibile cliccare sul banner fino a che l’immagine non ha finito di caricarsi completamente; la soluzione è ancora una volta ottimizzare l’ordine di rendering degli elementi della pagina e nel caso spostare direttamente la call to action in alto.

Best Practice: Design e test di usabilità chiusi in una torre di avorio

Lungi da me contraddirmi sull’importanza del design e dei test di usabilità, non potrei mai farlo, ma voglio porre sotto la vostra attenzione un particolare: queste best practice di sviluppo per step, prototipizzazione del sito, creazione di wireframes dinamici, test di usabilità hanno un lato oscuro che è quello di essere in alcuni casi lontano dalla realtà.

Cerco di spiegarmi: i test di usabilità come il design sono importanti, ma se eseguiamo tutti questi step in ambienti asettici e performanti che sono distanti dalla realtà applicativa, con strumenti di ultima tecnologia, con un server che non è distante migliaia e migliaia di km, ma è posto al nostro fianco su una lan interna, se stiamo utilizzando l’ultima versione del browser rilasciata, invece di porci nelle reale condizioni in cui un utente normale si trova, stiamo sbagliando completamente e andremo fuori strada.

I nostri visitatori non sono chiusi in un ambiente ideale!