Chosen, trasformare e migliorare i select

Autore:  Angelo Iasevoli

L’usabilità di un sito o di una webapp è ciò che può far la differenza tra un successo e un totale fallimento. L’utente non deve rendersi minimamente conto della complessità di tutto ciò che c’è dietro le azioni che sta per innescare.

Prendiamo ad esempio Facebook: è molto complesso, eppure anche gli utenti più “all’antica” riescono ad utilizzarlo senza problemi. Forse è stata proprio questa una delle chiavi della sua incredibile diffusione.

Il Fattore Tempo

Uno dei fattori che caratterizza l’usabilità di un sito è il tempo impiegato dall’utente per compiere un’azione. Se ad esempio la registrazione è troppo lunga, aumenterà il tempo necessario al suo completamento e con esso le probabilità di un ripensamento dell’utente (ossia: perdiamo potenziali clienti).

Vi sarà sicuramente capitato, durante una registrazione, di dover scegliere la vostra nazionalità…

Personalmente clicco ripetutamente la “i” sulla tastiera per arrivare velocemente alla voce “Italia”, ma cosa succede il 70% delle volte?

Salto ciò che vorrei selezionare e ricomincio dalla prima “i”. Per farvi comprendere come mi sento quando succede, pensate al meme “Rage Guy”.

Migliorare i campi select dei form con jQuery e Chosen

E’ proprio dei select che voglio parlare oggi. Se i valori tra cui scegliere sono al massimo una decina, allora non c’è problema, riusciamo ancora a selezionare ciò che ci serve evitando inutili perdite di tempo.

Cosa succede se invece le voci sono tante quanto gli stati del mondo? Qui qualche problemino lo incontriamo ma ci siamo – se non abituati – rassegnati.

Come possiamo risolvere questo problema che colpisce le nostre creazioni? Come donare ai nostri utenti un’esperienza innovativa e rilassante? Semplice, usando un plugin jQuery creato appositamente per risolvere questo tipo di problema: Chosen.

Chosen trasformerà gli odiosi select chilometrici in graziosi select contenenti un campo per il filtraggio che ci consentirà di trovare e selezionare ciò che vogliamo.

Anche i select multipli si trasformeranno dandoci l’impressione di “taggare” ciò che intendiamo selezionare.

Per avere questo gioiellino sui nostri siti basterà incorporare jQuery ed il file contenente lo script di Chosen. Tutto ciò che vi serve, compreso anche un esempio, lo trovate qui: https://github.com/harvesthq/chosen.

Diverse demo, invece, sono disponibili qui: http://harvesthq.github.com/chosen.

Il select che avrà la fortuna di ricevere il miglioramento dovrà essere del tipo:

<select data-placeholder="TESTO MOSTRATO QUANDO E' VUOTO." style="width:350px;" class="chzn-select"">

Ovviamente le dimensioni sono arbitrarie.

Per invocare il plugin basterà scrivere:

$(".chzn-select").chosen({no_results_text: "TESTO MOSTRATO QUANDO LA RICERCA NON PRODUCE RISULTATI"});

Credo che d’ora in poi utilizzerò sempre questo plugin per evitare “disastri da select”. Conoscete qualche sistema alternativo?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech e a ricondividere il post sui social. ;)