Progettare un'esperienza di ricerca dall'aspetto gradevole: le basi

Articolo originale pubblicato venerdì 14 dicembre 2012

Salve a tutti, mi chiamo Kate Dramstad e lavoro come Program Manager nel team di ricerca di SharePoint. L'esperienza della ricerca in SharePoint 2013 è più ampia che mai: gli sviluppatori e i progettatori possono ora creare quasi tutto ciò che riescono a immaginare. Quando si personalizza l'esperienza di ricerca, però, è importante usare cautela. La linea che demarca una pagina ben bilanciata da una pagina sovraffollata è molto sottile, e siamo lieti di condividere con voi le nostre riflessioni sulla progettazione di un'esperienza di ricerca che è allo stesso tempo bella da vedere e funzionale.

Allineamento dell'intera pagina

L'allineamento degli elementi della pagina rappresenta uno dei fattori più importanti nell'esperienza di ricerca. Nella progettazione predefinita noterete che la web part per il perfezionamento della ricerca (che visualizza le opzioni di ordinamento nella parte sinistra della pagina) e l'icona centrale di ricerca di SharePoint (l'immagine della lente di ingrandimento in alto a sinistra) sono allineate a sinistra. Casella di ricerca, area di spostamento e risultati sono anch'essi allineati a sinistra. La parte alta della casella di ricerca è allineata alla parte alta dell'icona; la parte bassa dell'area di spostamento è allineata alla parte bassa dell'icona. 

Figura 1. Tutti gli elementi nella pagina dei risultati di ricerca sono allineati a una griglia, in verde

Potrebbe sembrare un dettaglio di poco conto, ma se si allineano gli elementi della pagina a una griglia, gli utenti riescono a visualizzare la pagina in maniera più agevole. I componenti sono separati gli uni dagli altri da linee di spazio bianco, verticali e orizzontali. In questo modo, l'occhio riesce a distinguere più facilmente i vari componenti della pagina. Una pagina non allineata non risulta gradevole alla vista, e potrebbe impedire agli utenti di visualizzare correttamente i risultati. I componenti non allineati creano bordi irregolari. Quando un utente visualizza una pagina con bordi irregolari, deve fare avanti e indietro più volte con gli occhi. Gli occhi guardano in maniera molto più facile ed efficiente quando le linee sono diritte. 

Figura 2. In questa immagine l'icona della ricerca è spostata a sinistra, e non è più allineata alla griglia

Quando aggiungete un nuovo componente nella pagina oppure cambiate la disposizione dei componenti esistenti è importante tenere a mente la griglia, poiché vi aiuta a mantenere un aspetto pulito. 

Figura 3. Qui abbiamo modificato i risultati e aggiunto una caratteristica di classificazione a stelle e metadati aggiuntivi. Potete notare che anche le caratteristiche aggiunte sono allineate alla griglia.

Aspetto dell'intera pagina

L'allineamento non è l'unico aspetto importante. È bene prestare attenzione al numero di colori, caratteri e controlli che si aggiungono alla pagina. Il punto focale della pagina dei risultati di ricerca deve essere sempre il risultato; quando si progetta una pagina dei risultati di ricerca, quindi, è importante fare in modo di non distrarre l'occhio dell'utente dai risultati. Ecco qualche suggerimento e trucchetto.

Se possibile, usare colori convenzionali

Ad esempio, nei risultati di ricerca si usa convenzionalmente il blu per i titoli sui quali è possibile fare clic, mentre l'URL di un risultato è solitamente in verde. Cambiando queste convenzioni, l'utente dovrà pensare più a lungo su ciò che visualizza. 

Figura 4. Invertire il colore del titolo e il colore dell'URL disorienta gli utenti. Usare i colori delle convenzioni note.

Usare pochi colori

I colori sono utilissimi per mettere in risalto alcuni elementi, ad esempio un'opzione di filtro, il titolo di un risultato o l'URL. Ma se si utilizzano troppi colori, potrebbe sembrare che tutti gli elementi vogliono essere messi in risalto o cercano di attirare l'attenzione dell'utente. Alla fine si otterrà solo una giungla di colori, e nessun elemento sarà davvero in risalto. 

Figura 5. Troppi colori diversi distraggono l'utente e non lo aiutano a capire dove guardare o cosa è importante. Limitare il numero di colori utilizzati nell'interfaccia utente.

Usare pochi caratteri e dimensioni diversi

I caratteri, le dimensioni, il grassetto e il corsivo sono usati per mettere in risalto gli elementi importanti, proprio come i colori. E proprio come i colori, se si usano troppi stili e caratteri, tutto appare confuso. Il nostro team parla spesso di "lettera di riscatto" per indicare una pagina che sembra copiata da più pagine, proprio come tante lettere ritagliate dai giornali.

Mantenere i controlli il più semplice possibile

Analizziamo il filtro di perfezionamento della data sotto l'intestazione Modified (modificato) nella Figura 6. Inizialmente avevamo pensato che sarebbe stato rischioso collocare il filtro nella pagina predefinita, poiché è un controllo dall'aspetto complesso che potrebbe apparire troppo in risalto in confronto ai filtri basati su testo. Però abbiamo mantenuto i colori coerenti con il resto della pagina, e le linee e le forme semplici e pulite. È importante fare lo stesso quando si aggiungono controlli personalizzati.

Un'altra idea sulla quale abbiamo riflettuto molto è quella del filtro del grafico a torta. Nella Figura 6 possiamo vedere in che modo distrae l'attenzione. 

Figura 6. Questo filtro a torta personalizzato ha troppi colori e non corrisponde allo stile visivo degli altri colori: distrae troppo l'attenzione.

Guardiamo ora cosa succede nella Figura 7, se semplifichiamo lo schema di colori e le forme. 

Figura 7. Usando colori già presenti nell'interfaccia utente e mantenendo lo stile visivo degli altri controlli, questo filtro a torta è abbastanza utile da suscitare l'interesse degli utenti, ma non così dispersivo da distogliere la loro attenzione dalle loro attività

Divisione concettuale della pagina

Durante la progettazione di un'esperienza di ricerca, è bene considerare sia aspetti estetici che aspetti concettuali. Sulla base delle convenzioni di ricerca più comuni e su ricerche da noi condotte, abbiamo organizzato i componenti della pagina in aree diverse sulla base della funzionalità e del modello di interazione dell'utente. Quando si aggiunge o si dispone diversamente un componente è una buona norma mantenere la nostra divisione concettuale, in modo tale che l'utente non entri in confusione quando cerca qualcosa.

Ad esempio, noi abbiamo disposto tutte le azioni di filtro sul lato sinistro della pagina dei risultati di ricerca. Quando un utente vuole filtrare i risultati ottenuti, saprà che dovrà guardare in quel lato. Quando si aggiunge un filtro alla pagina, è bene farlo accanto agli altri filtri così che gli utenti non troveranno difficoltà nel cercarlo.

Nella Figura 8 è illustrata una panoramica delle divisioni concettuali nella pagina dei risultati di ricerca predefinita. 

Figura 8. La pagina dei risultati di ricerca è divisa in cinque aree funzionali. Quando si personalizza questa pagina, cercare sempre di aggiungere i nuovi elementi nell'area funzionale corrispondente.

Queste sono soltanto linee guida molto generali che vi possono aiutare a creare esperienze di ricerca piacevoli. Rimango in attesa dei vostri commenti e delle vostre domande.

Questo è un post di blog localizzato. L'articolo originale è disponibile in Designing a beautiful search experience – The basics