BLOG

22 giugno 2018 - Web

Select dinamiche: come ottimizzarle nelle applicazioni web

select-dinamiche.jpg

Le select dinamiche sono dei menù a tendina, in HTML tradotte con il tag select, spesso utilizzate anche nelle applicazioni web professionali e di grandissima utilità per la scelta di valori già filtrati in base a dei parametri precedentemente impostati, grazie alla loro dinamicità.

In quest'articolo esaminerò e illustrerò una ottimizzazione delle select dinamiche finalizzata alla restituzione di valori realmente esistenti nel database, aumentando la UX (User Experience).

Capita spesso di consultare dei siti web per la ricerca di un articolo o prodotto di interesse e di dover selezionare, progressivamente, dei valori da una serie di select con lo scopo di individuare con maggior precisione possibile il prodotto o i prodotti voluti. Talvolta queste select, pur essendo dinamiche e alimentate dal sistema a ogni selezione della select precedente, restituiscono valori che potrebbero corrispondere a determinati articoli ma che in realtà non producono alcun risultato perché quegli stessi articoli o non sono disponibili o non sono stati ancora inseriti, risultando di fatto indisponibili in entrambi i casi.

Questo sistema di elaborazione e restituzione dei dati non può certo essere definito un errore, perché sebbene restituisca valori temporaneamente improduttivi, comunica all'utente la loro potenziale esistenza e corrispondenza, producendo un risultato informativo e non un errore tecnico di sviluppo. In termini UX, però, è sicuramente preferibile che l'utente selezioni soltanto i valori realmente esistenti e venga eventualmente interrotto quando la select da espandere non contiene il valore desiderato, risparmiandogli il tempo necessario alla selezione dei valori rimanenti o all'effettuazione di ripetuti e sterili tentativi.

Esemplificando il concetto, si ponga di essere proprietari di un sito di autoveicoli e di avere a disposizione due tabelle: marche e veicoli.

Immaginiamo la tabella marche così:

ID MARCA
1 FIAT
2 FORD
3 AUDI
4 ALFA

Immaginiamo la tabella  veicoli così:

ID ID_MARCA VEICOLO
1 1 Fiat 500
2 1 Fiat 500 L
3 2 Ford Fiesta
4 4 Alfa Giulietta

La tabella veicoli è composta da tre colonne: la colonna ID è di tipo numerico e identifica univocamente il veicolo; la colonna ID_MARCA è di tipo numerico e il suo valore corrisponde alla colonna/chiave ID della tabella marche con cui ha una relazione esterna. Infine la colonna VEICOLO contiene il nome del veicolo.

Se la select delle marche non fosse ottimizzata, verrebbe alimentata dal sistema con tutti i valori disponibili, riportando anche l'option AUDI il cui valore ID non ha alcuna corrispondenza nella colonna ID_MARCA della tabella veicoli, restituendo questo risultato:

<select name="marca">
 <option value="1">FIAT</option>
 <option value="2">FORD</option>
 <option value="3">AUDI</option>
 <option value="4">ALFA</option>
</select>

Se, diversamente, la select fosse ottimizzata, riportando valori con almeno una corrispondenza nella tabella dei veicoli, l'option AUDI non verrebbe aggiunta, fornendo all'utente soltanto valori produttivi, qualsiasi sia la marca selezionata fra quelle disponibili.

Per ottenere questo risultato è sufficiente scrivere correttamente la query in SQL, interrogando così la tabella marche:

SELECT id, marca FROM marche WHERE id IN (SELECT id_marca FROM veicoli GROUP BY id_marca)

Queste ottimizzazioni sono realmente applicabili solo se:

  • Si precisa che i valori restituiti sono soltanto quelli immediatamente disponibili;
  • Nel sistema di progettazione non sia presente alcun meccanismo o vincolo che spinga ad adottare soluzioni diverse e meno ottimizzate.

Se la prima condizione per motivi legati al marketing non è attuabile, è sempre possibile riportare tutte le marche disponibili impedendo la selezione delle opzioni senza alcuna corrispondenza, ad esempio così:

<select name="marca">
 <option value="1">FIAT</option>
 <option value="2">FORD</option>
 <option value="3" disabled>AUDI</option>
 <option value="4">ALFA</option>
</select>

Questa ottimizzazione mostra tutta la sua efficacia in una ipotetica sezione dell'area riservata di un operatore adibito all'inserimento e all'aggiornamento dei veicoli in stock; ma la può mostrare anche in moltissimi altri casi simili.
Ad esempio, se l'operatore ha registrato dei veicoli negli anni 2016, 2017 e 2018, una select contenente anni che vanno dal 1990 al 2018 servirebbe soltanto a disorientarlo e a indurlo a effettuare vani e improduttivi tentativi di filtraggio. Una select dinamica ben ottimizzata, invece, che riporta soltanto gli anni in cui effettivamente sono stati registrati dei veicoli, produce risultati sicuri e realmente esistenti, riducendo a zero il margine di errore.

In conclusione, più è complessa l'applicazione, più filtri simili prevede, più attenzione bisogna prestare al tempo impiegato dall'utente per la selezione dei valori di interesse assicurandosi, quando possibile, di restituire dei valori con almeno una corrispondenza.

Fonte immagine: Google Immagini

CATEGORIE