Questa è la traduzione dell'articolo Choosing the Right Search Results Page Layout: Make the Most of Your Width di Greg Nudelman, pubblicato originariamente su UXmatters il 9 Marzo 2009. La traduzione viene qui presentata con il consenso dell'editore (UXmatters) e dell'autore.
Il layout di pagina rappresenta la base nella presentazione dei risultati di ricerca. In un sito, la scelta del layout riguardante le pagine dei risultati di ricerca avrà sull’esperienza dell’utente un impatto fortissimo. Per i risultati di ricerca è importante scegliere la giusta larghezza, e la larghezza ottimale per tali risultati può essere molto più decisiva per coloro che utilizzano monitor di grandi dimensioni di quanto si creda.
Voi stessi potete notare nella figura 1 (si riferisce all’area shopping del sito di Starbucks) la sottile linea di demarcazione tra layout per i risultati usabili e non. Nel layout di pagina di Starbucks per i risultati di ricerca non si può non notare una povertà di progettazione. In uno schermo con risoluzione 800x600 pixel la maggior parte di ciò che si vede è il margine sinistro del layout e un grande logo.
Sebbene ci siano molti modi per utilizzare lo spazio orizzontale delle pagine per i risultati della ricerca, generalmente possiamo fare una distinzione tra layout liquidi e layout a larghezza fissa. Ogni stile di layout offre un set unico di sfide e opportunità.
L’uso dei layout liquidi
In un layout liquido, la larghezza sulla pagina dei risultati di ricerca si contrae e si espande in modo da riempire lo spazio disponibile in base a come un utente cambia la risoluzione del proprio schermo o la larghezza della finestra del proprio browser. In realtà non sorprende se molti siti importanti come Google utilizzino i layout in modo efficiente per creare interfacce utente che rendano al meglio a qualunque risoluzione dello schermo o larghezza di finestra del browser, come mostrato nella Figura 2.
Nelle pagine dei risultati di ricerca, vale davvero la pena trascorrere del tempo in più per ottimizzare l'HTML e il CSS in modo tale che i risultati di ricerca fluiscano nello spazio disponibile. La mia raccomandazione: utilizzate sempre un layout liquido per le vostre pagine dei risultati di ricerca. Purtroppo, pochi siti seguono questa raccomandazione. Perché? Il motivo che ho più volte sentito dire è i layout liquidi sono più difficili da gestire per ottenere e mantenere una consistenza visuale. In realtà creare dei layout liquidi non è poi così difficile.
Sfortunatamente, molti product manager non vedono il valore presente nell'investire sulla creazione di una tale funzionalità, e la maggior parte dei designer non perde tempo nel considerare come i loro risultati di ricerca potrebbero apparire diversamente su schermi e finestre a diversa larghezza o risoluzione.
È veramente un peccato, perché io non conosco un modo migliore per generare dei guadagni sui propri siti con modifiche abbastanza semplici di HTML/CSS. Tutte le pagine di un sito web inerenti i risultati di ricerca utilizzano la stessa struttura di base per quanto riguarda HTML e gli stili CSS, così una volta ottimizzato un layout liquido per i risultati di ricerca, in tutto il sito le pagine dei risultati di ricerca dovrebbero adeguarsi in base alle varie risoluzioni e larghezze di browser e finestre. L’utilizzo di un layout liquido è il miglior modo per ottenere pagine dei risultati di ricerca efficaci.
L’uso dei layout a larghezza fissa
Se, per qualsiasi motivo, non è possibile creare un layout liquido, l'altra opzione è quella di utilizzare un layout a larghezza fissa, e la maggior parte dei siti web commerciali, compresi i rivenditori di e-commerce come Amazon e Staples, fanno esattamente ciò. Per utilizzare in modo efficace un layout a larghezza fissa, è necessario conoscere bene i propri clienti ed essere consapevoli delle risoluzioni che essi utilizzano. Uno dei migliori esempi di pagine dei risultati di ricerca che hanno un layout a larghezza fisso è quello del sito Staples.com, illustrato nella figura 3.
Molti clienti di Staples.com lavorano per le grandi imprese, che continuano a utilizzare magari vecchi monitor o piccoli computer con una risoluzione di 800 x 600. Come risultato, le pagine del sito Staples.com per i risultati di ricerca, vengono ottimizzate per schermi con risoluzioni da 800 x 600.
Oltre a visualizzare i risultati di ricerca, Staples vuole assicurarsi che gli annunci pubblicitari nella colonna a destra siano visibili a tutti i clienti. Con un complesso sistema di filtraggio realizzato tramite una barra di navigazione posta sulla sinistra, si ottiene dunque un piccolo spazio largo solo 560 pixel! Questo, naturalmente, fa sì che ogni risultato di ricerca comprenda alcune righe in modo tale da fornire agli utenti informazioni sufficienti ed evitare inutili tira e molla; ovvero: quando gli utenti cliccano sui link per visualizzare i dettagli di un oggetto e, non trovando l'oggetto desiderato, ritornano nella pagina dei risultati di ricerca più volte.
Confrontando il layout a larghezza fissa di Staples.com per i risultati di ricerca con quello di Amazon.com, come si può vedere nella Figura 4, i clienti di Amazon che hanno uno schermo di 800 x 600 devono scorrere da un lato all’altro, per un bel po'. Anche i clienti che utilizzano uno schermo a risoluzione 1024x768 devono scorrere le pagine dei risultati di ricerca da un lato all’altro per vedere gli oggetti per intero!
Lo scorrimento in orizzontale risulta dal fatto che Amazon usa uno spazio a larghezza fissa di ben 815px per i risultati delle ricerche, il 45% più di Staples.com! In parte dovuto all’utilizzo di un layout tanto ampio, i risultati di Amazon comprendono un minor numero di righe.
Perché ciò è importante? Con uno schermo a risoluzione 1024x768, Staples può visualizzare solo tre prodotti, mentre Amazon può visualizzarne quattro: il 33% in più. Avere meno risultati di ricerca in una pagina influisce sia sullo spazio disponibile sia sulla percezione del cliente circa la rilevanza complessiva dei risultati di ricerca su un sito.
Ciò significa che Amazon è meglio di Staples? Non necessariamente. Entrambi i siti offrono un'eccellente esperienza nei risultati di ricerca. Tuttavia, le dimensioni del layout di pagina indicano che il layout a larghezza fissa di ogni sito è ottimizzato per i loro migliori clienti: quelli che rendono l'azienda più redditizia. E, in poche parole, l'ottimizzazione per i migliori clienti è la migliore pratica da adottare per il layout a larghezza fissa dei risultati della ricerca.
Fine prima parte.
Ottimizzare per i vostri clienti migliori
Il punto cruciale è che solo voi e i vostri clienti potete determinare per un sito il layout a larghezza fissa più efficace. Se il vostro sito è come la maggior parte dei siti di e-commerce o dei siti di contenuto, l’insieme delle pagine visualizzate con una risoluzione 800x600 va dall’1 e al 5%. Potete ignorare tali clienti e ottimizzare per risoluzioni più elevate? Dipende dal vostro modello di business.
Se siete un fornitore di contenuti, potreste ignorare l'1%, perché in fin dei conti ottenete ricavi in base alle visualizzazioni della pagina (impressions). Tuttavia, se siete un rivenditore, potreste scoprire che le pagine visualizzate con schermi a risoluzione 800x600 provengono da piccole e grandi aziende che spesso acquistano all’ingrosso e in grosse quantità. Così, la percentuale di pagine effettivamente visualizzate che va dal’1 al 5% può essere responsabile di un calo delle vendite che va dal 5 al 20%! Pensando di ottimizzare le entrate, è perfettamente logico che Staples abbia ottimizzato i propri risultati di ricerca per schermi di 800 x 600, mentre le pagine di Amazon riguardante gli stessi risultati di ricerca sono più ampie perché gli schermi sono di 1280 pixel e oltre. Presumibilmente, Amazon ha scoperto che i maggiori profitti provengono da consumatori benestanti che hanno schermi più ampi con risoluzioni più elevate.
Dovete essere voi a scegliere le giuste dimensioni per un layout a larghezza fissa, ma assicuratevi che le metriche che usate si adattino al vostro modello di business e ottimizzate a quel punto per i vostri clienti migliori. Naturalmente, in alternativa è possibile fare quello che fa Google: scegliere di investire in un buon layout liquido che si adatta ad ogni risoluzione di schermo.
Gestione dei margini su un layout a larghezza fissa
Quando si sceglie un layout, è importante verificare che le pagine si comportino correttamente su tutte le più popolari larghezze dello schermo. I layout liquidi simili a quelli mostrati in figura 2 solitamente vengono allineati a sinistra e gestiscono correttamente la larghezza extra incrementando lo spazio bianco tra le colonne o aumentando la larghezza della colonna principale della pagina. D’altro canto, i layout a larghezza fissa generalmente vengono centrati e assorbono qualsiasi spazio extra aggiungendo sia a destra sia a sinistra dell’area del contenuto principale dei margini neutri o dei pannelli.
Per ottenere un layout a larghezza fissa usabile, ci sono solo due scelte ottimali: centrato o allineato a sinistra. Come mostrato nella figura 3, un layout centrato come quello su Staples.com divide lo spazio extra dei margini a metà. Tuttavia, i siti con layout allineati a sinistra, con larghezza fissa — ad esempio quello del sito StubHub raffigurato nella figura 5 — mettono tutto lo spazio extra sul lato destro dello schermo.
A prima vista, un layout di pagina a larghezza fissa e allineato a sinistra potrebbe sembrare una scelta logica. I risultati di ricerca su ogni pagina iniziano in alto a sinistra, perché in Occidente si legge da sinistra verso destra. Tuttavia, nei layout a larghezza fissa, il margine di destra può diventare improvvisamente sproporzionato rispetto al resto della pagina.
Nella mia ricerca sul campo, ho osservato le reazioni delle persone di fronte gli spazi vuoti che appaiono sulla destra dei layout a larghezza fissa. Tutto quello spazio privo di contenuto si può solo descrivere come pixel-agorafobia. In primo luogo, quando tale spazio appare di solito la gente storce il naso e tenta di ridurre la larghezza della finestra per rimuovere una parte dello spazio vuoto. La maggior parte degli utenti di Windows che hanno massimizzato la finestra del browser, fanno ciò cliccando sul pulsante Ripristino in basso sulla barra del titolo della finestra. A volte il risultato è che le dimensioni della finestra diventano troppo piccole, quindi gli utenti devono regolare le dimensioni della finestra manualmente. Quando i vostri clienti sono occupati a sistemare la larghezza della finestra del browser, essi non stanno facendo shopping o guardando sul sito gli annunci; in realtà, si stanno irritando — ancora prima di interagire con le funzionalità del vostro favoloso sito web!
Al contrario, un layout centrato, soprattutto quello che utilizza ai suoi margini o sui pannelli laterali un colore neutro o più scuro, divide lo spazio vuoto in due, riducendo così il cosiddetto effetto pixel-agorafobia. Così, se si insiste sull'utilizzo di un layout a larghezza fissa, in genere è consigliabile per la vostra ricerca optare per un layout centrato, con pannelli laterali più scuri o di colore neutro, soprattutto se una percentuale significativa dei vostri clienti hanno schermi ampi e ad alta risoluzione.
In sintesi
Al momento di decidere il layout delle pagine con i risultati della ricerca, bisogna definire chiaramente il comportamento appropriato della pagina in tutte le sue dimensioni, facendo riferimento alle risoluzioni dello schermo utilizzate dai vostri utenti. Progettate queste pagine usando un layout liquido se è possibile e se avete le competenze per farlo. Se si è costretti a scegliere un layout a larghezza fissa, assicuratevi di studiare e comprendere il traffico e i criteri di misurazione per le diverse risoluzioni dello schermo. Una buona soluzione di compromesso è quella di rendere l'area del contenuto principale sul proprio sito larga 1003px, in modo che non vi sia alcuna barra di scorrimento orizzontale per gli schermi più comuni che hanno una risoluzione 1024 x 768. Se una vasta percentuale di clienti utilizza schermi più ampi, optate per un design centrato con pannelli laterali più scuri o di colore neutro. Se possibile, fare dei test di usabilità sulle pagine dei risultati di ricerca alle varie risoluzioni che siano appropriate per i vostri utenti.
Traduzione a cura di Cinzia Pasqualino.
