Una casella di ricerca è uno dei pezzi essenziali inclusi in quasi tutti i progetti di siti web. Mentre a volte la creazione di questo piccolo elemento si trasforma in un ripensamento, non vi è alcun motivo per cui la casella di ricerca non debba essere progettata in modo così bello come il resto di un sito web.
La progettazione di una casella di ricerca dovrebbe rispecchiare quella del resto del sito, essere funzionale e facile da usare e collocata in una posizione che è ovvia per gli utenti. Oggi daremo un'occhiata ad alcune fantastiche caselle di ricerca e ad alcuni strumenti per aiutarti nella progettazione.
Il tuo sito ha bisogno di una casella di ricerca?
La semplice risposta è sì. Se il tuo sito include una quantità significativa di contenuti - pensa più di un teaser o di una splash page - una casella di ricerca è obbligatoria.
Avere una casella di ricerca rende più facile per gli utenti trovare contenuti. Può anche aiutarti a raccogliere informazioni su ciò che gli utenti vogliono trovare e stanno arrivando sul tuo sito per, ad esempio informazioni sul prodotto, utilizzo di parole chiave e desideri e necessità degli utenti.
D'altra parte, i siti che funzionano come teaser o splash page potrebbero andare bene senza l'inclusione di una funzione di ricerca. In generale, si potrebbe pensare che i siti Web a pagina singola rientrino in questa categoria, ma in realtà dipende dalle dimensioni, dall'ambito e dal design. I siti web a pagina singola contenenti molti contenuti attraverso l'uso di elementi come lo scrolling della parallasse potrebbero trarre vantaggio dall'inserimento della funzionalità di ricerca.
Funzionalità di ricerca
Una delle più grandi domande quando si tratta di ricerca è? Cosa dovrebbe fare ?? Mentre questo può sembrare una domanda ovvia e una risposta, come funzioni di ricerca possono variare da sito a sito. Gli utenti possono avere aspettative diverse su come funzionerà la ricerca anche in base al contenuto del sito.
Ricerca semplice: Il tipo più comune di ricerca sul sito web è progettato intorno a una scatola che include un posto dove digitare ciò che stai cercando e una ricerca? o? inviare? pulsante. (Usiamo questo tipo di ricerca qui sul sito di Design Shack.) Spesso la scatola include ciò che è ricercabile sul sito, come parole chiave o numeri di articoli.
Ricerca intelligente: Google è il leader quando si tratta di ricerca intelligente, che aiuta a riempire ciò che stai cercando in base ai termini di ricerca e alla pertinenza del sito.
Ricerca filtrata: I siti che utilizzano la ricerca filtrata, forniscono all'utente le opzioni per cosa o dove cercare qualcosa all'interno del sito. Amazon è un ottimo esempio di utilizzo della ricerca filtrata. Nella barra in alto è possibile cercare l'intero sito per un articolo o restringerlo in una determinata categoria di prodotti. (Amazon utilizza anche la ricerca intelligente, dimostrando che non si è limitati a un tipo di funzionalità di ricerca.)
Posizionamento della casella di ricerca
C'è una buona ragione per cui quasi tutti i siti che visiti hanno una casella di ricerca nella parte superiore dello schermo. Ecco dove gli utenti si aspettano che sia.
Un'analisi di Site Search Today ha mostrato che tra i primi 50 rivenditori degli Stati Uniti, tutti avevano una casella di ricerca nella parte superiore della pagina. Di questi il 54% aveva una casella di ricerca situata in alto a destra, il 30% nella parte superiore centrale e il 16% nella parte superiore sinistra della pagina. I risultati sono stati simili in uno studio dei rivenditori del Regno Unito con un avvertimento importante: la ricerca è più comunemente situata in alto al centro del sito, seguita da in alto a destra.
Il posizionamento da evitare è ovunque sotto lo scroll o nella parte inferiore del sito. (Ovvero, a meno che non includa una casella di ricerca in entrambe le posizioni.) I progettisti dovrebbero inoltre evitare di nascondere la casella di ricerca all'interno del menu di navigazione o all'interno di una barra degli strumenti.
Cerca identificatori
Gli strumenti di ricerca dovrebbero essere facili da identificare e utilizzare. Se gli utenti non riescono a trovare lo strumento, possono causare frustrazione o far abbandonare il tuo sito.
Identificatori di ricerca comuni sono una casella con la ricerca di parole o una lente di ingrandimento accanto a una casella di input. Questo è tutto. Quando si progetta la ricerca, una di queste opzioni è la soluzione migliore.
E non dimenticare il pulsante di azione. Proprio come gli identificatori di ricerca, anche il pulsante per eseguire la ricerca effettiva dovrebbe essere semplice. Utilizzare una parola come? Ricerca? o? trovare? ?Partire? è un'altra opzione accettabile.
Suggerimenti per la progettazione di ricerca
Quando si tratta di creare una casella di ricerca (o molti altri elementi comuni dell'interfaccia utente), la semplicità è la chiave. Una casella di ricerca ha bisogno di diverse cose: una casella di immissione, titolo, pulsante di azione e istruzioni.
Quando si progetta una casella di ricerca, il design dovrebbe concentrarsi su una casella. Sembra semplice, giusto? Tieni presente che la casella deve essere abbastanza grande da digitare (e vedere) termini di ricerca comuni pertinenti al tuo sito e contenere testo sufficientemente grande da poter essere letto in un semplice carattere tipografico. Stai lontano da caratteri minuscoli o caratteri tipografici o di novità.
Metti in chiaro che hai una ricerca. Contrassegna le funzionalità di ricerca come tali, con un titolo accanto o sopra la scatola o con il testo all'interno della casella che indica agli utenti di "cercare nel sito qui".
Assicurati che gli utenti sappiano come utilizzare la ricerca. Includere semplici istruzioni all'interno della casella di ricerca che dicono loro cosa possono trovare usando lo strumento. (Ma assicurati che il testo di esempio scompaia quando l'utente fa clic per digitare o attivare la casella.) Infine, includi un chiaro pulsante di chiamata all'azione per l'invio della ricerca.
Strumenti di ricerca e risorse
Motore di ricerca Google
Puoi aggiungere la ricerca Google al tuo sito con un semplice strumento gratuito per le funzionalità di base e personalizzabile in base al design del tuo sito. Google ha anche uno strumento di ricerca a pagamento che include alcuni extra extra, tra cui più opzioni di progettazione, per $ 100 all'anno.
Cerca input con suggerimenti
Questa semplice scatola si presenta come un file di Adobe Photoshop che è possibile personalizzare in qualche modo per avviare la progettazione della casella di ricerca. Il file vettoriale a strati viene fornito con una funzione di suggerimento automatico ed è a soli $ 2 da Creative Market.
Ricerca barra a discesa
Questo semplice file di ricerca utilizza un semplice formato di ricerca con un menu a discesa per le opzioni di menu.Il file Photoshop è scaricabile gratuitamente con il giusto credito.
Casella di ricerca espandibile
Se stai cercando di vedere come codificare la tua casella di ricerca, dai un'occhiata a questa opzione espandibile disponibile su CodePen.
CSS3 Form Pack
Se non sei del tutto sicuro di quale stile della casella di ricerca stai cercando, il CSS3 Form Pack include sei stili di modulo di ricerca. La licenza per l'intero pacchetto è di $ 4 per una bella raccolta di gadget.
Come costruire un modulo di ricerca
Costruendo dal codice, puoi avere un grande controllo sulla tua casella di ricerca. SpeckyBoy Design ha un ottimo esempio di codice semplice per una casella di ricerca pulita che è facile per quasi chiunque abbia una conoscenza di base della codifica da seguire.
Conclusione
Pur avendo un'ottima casella di ricerca potrebbe non essere la parte più divertente del processo di progettazione, è spesso una parte essenziale del tuo sito. Pensa prima all'utente quando crea una casella di ricerca e poi considera la progettazione generale.
Le caselle di ricerca possono aggiungere grandi funzionalità al tuo sito, mentre sembrano grandi. Scegli una scatola che corrisponda al tema generale del tuo sito web e si integri, ma senza nasconderlo del tutto.
Se vuoi vedere anche altre fantastiche caselle di ricerca, consulta la galleria di Design Shack.
Fonte immagine: Search Box di Jamie Syke.