Vi è mai capitato di visualizzare una pagina web, che pensavate completa, e scoprire poi dell’esistenza di ulteriori contenuti “fuori dallo schermo”? In caso affermativo è importante sapere che questa è una grossa mancanza a livello di design, assolutamente da evitare: è fondamentale infatti che gli utenti siano in grado di visualizzare tutte le informazioni utili.

Se il visitatore non riesce a capire o arrivare a tutti i dettagli dell’offerta come può trasformarsi in un prospect?

Il modo in cui guardiamo una pagina web è molto simile all’osservazione di un paesaggio attraverso un binocolo: una piccola parte del panorama è subito visibile, ma per avere una visione completa è necessario spostare la visuale lateralmente o verticalmente. Allo stesso modo, su una pagina web, gli utenti per visualizzare tutti i contenuti sono obbligati a spostarsi ai lati o scorrere su e giù la pagina.

Se si osserva un panorama attraverso un binocolo si ha ben chiaro che lo scenario non si limita a ciò che vediamo ma si estende in ogni direzione. Sul web non è possibile dare scontato questo aspetto in quanto gli utenti fanno affidamento sulla progettazione della pagina per capire quali contenuti hanno a disposizione.

Se, per assurdo, una pepita d’oro fosse nascosta sotto la piega, senza un accurato design che guida allo scrolling, non sarà mai vista e trovata.

Cosa s’intende con “illusione di completezza”?

Come anticipato, l’illusione di completezza si verifica quando il contenuto visibile sullo schermo sembra essere completo, ma in realtà esistono altre informazioni al di fuori dell’area visibile. L’illusione avviene quando il visual design non è in grado di guidare gli utenti verso il materiale aggiuntivo. Far erroneamente intuire che una pagina sia completa è una grave mancanza di usabilità che porta gli utenti a perdere informazioni preziose e a non raggiungere i loro obiettivi.

Nonostante la tematica non sia nuova e molta letteratura sia stata scritta in merito, una ricerca condotta da Nielsen Norman Group evidenzia come diversi siti replichino questo errore, e che gran parte dei soggetti coinvolti nello studio siano rimasti intrappolati dall’illusione di completezza.

Illusione di completezza: dimensione verticale

Le ultime tendenze in materia di web design hanno abituato gli utenti allo scorrimento verticale delle pagine web. Nonostante conoscano questa possibilità è importante non sottintendere che lo facciano anche in assenza di indicatori visivi che esortino all’azione.

Di seguito vi riporto un elenco di design style che spesso comunicano erroneamente la fine dei contenuti e creano l’illusione di completezza:

Hero graphic o video: la recente tendenza verso l’image-based design ha spinto diversi siti web a incorporare una eye-catching imagery o un video nella zona superiore della pagina. Questi approcci spesso lasciano i contenuti sotto la piega (e fuori da una visione immediata) e non offrono ulteriori spunti visivi che invitano gli utenti a scollare. Ad esempio, vediamo come il sito Maple.com, presenta un video in loop che occupa l’intero schermo.

L’inserimento di un video di grandi dimensioni associato ad una forte call to action rende la pagina apparentemente completa. In realtà tutti i dettagli relativi all’azienda sono riportati sotto la schermata. Questo design delimita una fine solo apparente della pagina e, l’assenza di elementi di navigazione, contribuisce ulteriormente a generare l’effetto di completezza.

Durante uno studio di usabilità condotto da Nielsen e Norman Group è stato chiesto agli utenti di visitare questo sito e scoprire che tipo di servizio offriva questa azienda. Sei su otto soggetti non capiscono di poter scollare la pagina in quanto nessun altro link o call to action guidavano all’azione richiesta. Inoltre, la CTA Get Started porta a dei form che richiedono informazioni personali per poter fruire del servizio. Gli utenti hanno poi scoperto che la loro area non rientrava nei confini aziendali. Il 75% del campione è risultato frustrato per aver dovuto sprecare tempo ad inserire inutilmente dati nel sito senza inoltre riuscire a capire che tipo di offerta proponeva l’azienda.

Separatori orizzontali: l’illusione di completezza può verificarsi in ogni punto della pagina. Un’interruzione di contenuto definita da una spessa linea orizzontale che occupa tutta la lunghezza della pagina può andare a creare una barriera visiva e scoraggiare l’utente a scorrere ulteriormente. Se si incontrano questo tipo di separatori, particolarmente invasivi, è possibile giungere all’errata conclusione di trovarsi non alla fine di una sezione, ma al termine dell’intera pagina. Nella schermata che segue vediamo come Virginamerica.com includa linee orizzontali come separatori di sezione, andando a impattare negativamente sulla visualizzazione complessiva dei contenuti.

Eccessivo spazio bianco tra gli elementi contenuto: se le barre orizzontali sono troppo larghe o i contenuti non riempiono completamente lo spazio della pagina (contenitore) si crea un eccessivo divario tra gli elementi, che porta l’utente a percepire la pagina come terminata. Sulla home page di Urbanoutfitters.com sono evidenziate in rosso le sezioni di contenuto. I separatori orizzontali delle sezioni fanno apparire completa la pagina, anche se ulteriori contenuti sono presenti più in basso.

Interruzioni nel flusso di contenuti: annunci, promozioni interne e bottoni di social-share possono far credere all’utente di aver visualizzato tutti i contenuti rilevanti della pagina. Il problema può essere inoltre ulteriormente intensificato dalla presenza di adv molto grandi che rendono difficoltoso capire cosa c’è sopra o sotto, in particolare su mobile, dove gli schermi sono di dimensioni limitate. Inoltre, se la promozione è posizionata in corrispondenza della fine naturale di un contenuto, l’utente è ancora più giustificato ad assumere che non ci siano altre informazioni interessanti anche se, per esempio, la pagina può ancora contenere commenti o articoli correlati sotto l’annuncio.

Illusione di completezza: dimensione orizzontale

Gli utenti sono principalmente avvezzi allo scorrimento verticale, lo scrolling (o swiping) orizzontale non è infatti ancora una modalità di interazione acquisita, in particolare lato desktop. Anche sui dispositivi mobile però, dove lo swipe è un gesto comune, interfacce che si basano su questo movimento hanno ancora necessità di chiari indicatori che guidino il visitatore.

Nell’immagine che segue vediamo come per leggere gli articoli e le notizie su App Yahoo gli utenti debbano scorrere lateralmente per visualizzare i successivi. Sullo schermo mancano però gli indicatori visivi che guidino all’azione.

Lato desktop la navigazione orizzontale è più frequentemente associata ai caroselli. L’inserimento quindi di segnalatori, che indicano la corretta interazione con lo slider di immagini, sono cruciali. Novartis.com, ad esempio, inserisce pallini poco visibili nella parte inferiore dell’immagine: in primo luogo questi indicatori sono poco evidenti e, inoltre, le frecce di navigazione compaiono solo durante l’hover. Questo sito ha però anche degli aspetti positivi, in quanto incoraggia allo scorrimento verticale mostrando, sotto il carosello, una parte della sezione successiva (Corporate, Careers, News and Research).

È invece raro (ma non impossibile) trovare interi siti a sviluppo orizzontale che prevedono l’utilizzo della scroll bar per visualizzare tutti i contenuti. Questo approccio a volte è utilizzato dai designer che vogliono esprimere la loro creatività ma, a livello di utilizzo, e per i siti web tradizionali o eCommerce, è assolutamente sconsigliato. I motivi principali sono da attribuire prima di tutto alla difficoltà di utilizzo della scroll bar orizzontale, oltre che all’insorgenza di errori a livello di visual design, che danno vita al fenomeno dell’illusione di completezza, rispetto alla dimensione verticale.

Secondstory.com utilizza un layout orizzontale. Per capire che sono presenti altri contenuti oltre lo schermo, gli utenti devono riuscire a vedere la freccia gialla sulla destra, nascosta e coperta dalla grafica, e spostarsi utilizzando la scroll bar.

In conclusione, per evitare frequenti abbandoni da parte degli utenti e conseguenti mancate opportunità di conversioni, è importante che le pagine di un sito comunichino continuità e non completezza, in modo che sia possibile fruire di tutti i contenuti rilevanti. È fondamentale infatti che il design della pagina sia il più possibile semplice ed intuitivo, in modo che l’utente sia stimolato a interagire con il sito e a portare a termine specifici compiti e azioni.