Applicazione web professionale: il prezioso aiuto fornito dai tooltip
I tooltip svolgono un ruolo molto importante nella facilitazione d'uso di tutti gli elementi che compongono una applicazione web, soprattutto se complessa e destinata a impieghi professionali.
Sebbene non siano elementi nuovi in ambito informatico, a seguito dell'inarrestabile evoluzione del web e del design UX (User Experience), sono stati ripensati e riprogettati non solo per essere impiegati durante la consultazione di una pagina web ma anche per ampliarne le funzioni affinché svolgano compiti mediamente banali che avrebbero penalizzato la UX se svolti attraverso procedure più macchinose o, peggio, se avessero richiesto la creazione di ulteriori pagine.
Il tooltip viene comunemente inteso nella sua funzione nativa: visualizzare, all'interno di uno spazio rettangolare sovrapposto all'elemento preso in esame, del testo esplicativo. Per esemplificare, la comparsa della didascalia di una immagine quando si posiziona il cursore su di essa.
Da semplice elemento didascalizzante, il tooltip ha subìto una notevole evoluzione di assoluta utilità per tutti gli sviluppatori: oltre a mostrare la didascalia o il titolo di una immagine, svolgendo una funzione informativa, può essere utilizzato anche per lo svolgimento di una funzione anticipatrice, operativa o formativa.
- Anticipatrice: assume questa funzione quando viene impiegato per mostrare delle informazioni aggiuntive che, per brevità o dovere di sintesi, sarebbe inopportuno e sconsigliabile mostrare all'interno di una nuova pagina. Si pensi a un elenco di professionisti composto da tanti piccoli riquadri, in cui vengono identificati con foto e nominativo e si pensi di dover scegliere il professionista che effettua interventi tecnici non solo nella città prescelta ma anche in provincia. Un filtro ci restituirebbe subito l'elenco dei professionisti che prestano il proprio servizio nell'area geografica selezionata. Il tooltip, invece, spostando il cursore sul nominativo dei professionisti restituiti dal sistema, oltre a fornirci le informazioni principali, riporterebbe anche l'indicazione desiderata;
- Operativa: assume questa funzione quando viene impiegato per mostrare un kit di strumenti di gestione che occuperebbe troppo spazio laddove per esigenze di layout non può essere concesso. Si pensi allo stesso elenco di professionisti e si pensi di dover modificarne, eliminarne o contrassegnarne uno o molti. Spostando il cursore sul nominativo di interesse verrebbe visualizzato un tooltip con le icone di gestione, all'interno di uno spazio creato all'occorrenza e indipendente dal layout;
- Formativa: funzione molto importante per applicazioni web e gestionali adibiti a uso professionale o particolarmente complessi. Si pensi a una applicazione web manageriale con molteplici funzioni, anche dinamiche, utilizzata da semplici operatori incaricati. Qualsiasi utilizzo verrebbe precluso all'operatore se non adeguatamente istruito sulle funzioni disponibili. Anche in questo caso, il tooltip assolve pienamente al suo compito, mostrando di volta in volta una spiegazione sintetica ed esauriente della funzione che si appresta a essere utilizzata.
È doveroso precisare però che la funzione anticipatrice, nella fattispecie, riguarda soltanto i casi in cui è possibile anticipare delle informazioni secondarie senza necessariamente rimandare l'utente a una pagina specifica per la consultazione di tutti i dettagli. Non ha alcun nesso logico con casi che prevedono pochissime informazioni secondarie visualizzabili attraverso questo metodo piuttosto che tramite pagine opportunamente costruite, laddove non siano rilevanti (le informazioni secondarie) dal punto di vista SEO.
Se nei casi esposti le informazioni mancanti o desiderate venissero mostrate in nuova pagina oppure omesse, si innescherebbe un processo macchinoso e ripetitivo (accesso alla pagina di dettaglio del professionista e ritorno indietro all'elenco) a discapito della UX e dell'utenza. Nel caso formativo, invece, si rivelerebbe controproducente e disastroso.
La funzione formativa è indispensabile per ogni applicazione web complessa e non può non essere considerata durante la fase progettuale. È importante che ciascuna funzione, procedimento o strumento di gestione venga illustrato chiaramente fugando ogni dubbio.
La disponibilità di tooltip per il web è davvero vasta. Sono personalizzabili stilisticamente e tecnicamente. Ogni plug-in viene fornito con un foglio di stile per la personalizzazione grafica e con un file di configurazione per la personalizzazione tecnica.
Il mio approccio al tooltip formativo è pressocché simile per tutte le applicazioni web e i gestionali che ho realizzato. Le operazioni preliminari prevedono una personalizzazione grafica, in linea con il layout generale dell'applicazione. Successivamente, in base al grado di incidenza sugli elementi circostanti, verifico se inzializzarlo al mouseover oppure al click sulla funzione da utilizzare. Poi, in base alla complessità dell'applicazione e al numero delle indicazioni da fornire, talvolta dispongo un documento XML indipendente in cui elenco e nidifico i messaggi da mostrare, in modo da facilitare l'aggiornamento senza perlustrare ogni singolo file JS dell'applicazione. Se dispongo un file XML, questo viene parsato per ottenere il messaggio richiesto e visualizzato all'operatore.
La complessità dell'applicazione può talvolta generare un numero di tooltip molto elevato e fastidioso per gli operatori già istruiti. In questo caso è opportuno disporre una funzione tramite cui abilitare e disabilitare la visualizzazione dei tooltip, in modo da istruire i nuovi operatori e agevolare la UX a quelli già formati. Questo approccio non ha alcuna controindicazione, neanche in presenza di nuove funzioni perché l'abilitazione e la disabilitazione del tooltip è sempre accessibile e gestibile istantaneamente. Pertanto, anche l'operatore preparato può abilitare il wizard per apprendere il significato delle nuove funzioni e disabilitarlo subito dopo.
Per l'abilitazione e disabilitazione del wizard solitamente dispongo un pannello switch (on/off), di estrema e immediata facilità e che necessita di un solo click per essere attivato/disattivato.
Si intuisce palesemente e chiaramente l'utilità del tooltip in applicazioni web complesse. Il suo impiego, a mio modo di vedere, è persino più efficace di qualsiasi tutorial testuale o di un video tutorial perché, oltre a richiedere (questi) un costante aggiornamento con ripercussioni significative in termini di impegno, nel primo caso viene richiesto un imponente lavoro di esemplificazione testuale di ogni passaggio e di tutte le sue articolazioni/derivazioni; nel secondo caso viene richiesto un taglio dei frame con le funzioni deprecate e la registrazione delle nuove, che, a seconda dell'entità dell'aggiornamento effettuato, potrebbe essere gravoso. Il tooltip, invece, viene mostrato durante l'utilizzo dell'applicazione, a prescindere dalle variazioni grafiche effettuate e richiede soltanto una gestione del messaggio nel documento XML o, in casi estremamente semplici, nel file JS. Riducendo al minimo l'impegno richiesto.
Per i miei progetti utilizzo il plug-in tooltipster, dotato di tutte le funzioni necessarie e facilmente personalizzabile stilisticamente. È un plug-in jQuery.
Dopo aver incluso i suoi componenti all'interno del DOM è sufficiente attivarlo mediante questo semplicissimo comando:
$(selettore).tooltipster();
Le personalizzazioni tecniche sono numerose in base alle necessità. È sufficiente far riferimento alla documentazione fornita e dotarsi dell'ultima versione disponibile scaricabile dal sito.
Fonte immagine: Google Immagini