Beauty Tips

Ritratto di Vanni

Migliorare la User Experience (UX) dell’utente, all’interno del nostro sito, è una delle cose più importanti da curare per un webmaster.

Agevolare la fruizione dei contenuti delle nostre pagine, aiuta l’utente e quindi lo rende felice; di conseguenza un utente contento è probabile che visiti anche altre pagine o che ritorni nuovamente a leggere i nostri contenuti. Ottimo risultato anche dal lato SEO.

Ecco perché a volte si rende utile guidarlo, tramite dei piccoli suggerimenti (tips), all’interno di un testo, o di una “call to action”, o nella compilazione di un form ecc.

Drupal 7 ci viene in aiuto con moltissimi moduli che inseriscono questi “consigli”, e molti di essi utilizzano la tecnica del “Tips Baloon” o “Toolpit”. Ovvero, tramite l’interazione del mouse con apposite porzioni di testo appare una “nuvoletta” con all’interno una frase che descrive all’utente cosa deve fare.

In questa pagina andrò a descrivere il modulo Beauty Tips, che mi sembra abbia una buona possibilità di configurazione e un facile utilizzo. Per funzionare utilizza porzioni di jQuery, ma ha tutto il necessario al suo interno.

Ci sono molti altri moduli simili (ma spesso hanno bisogno dell’installazione di altri moduli o librerie):

Ho creato questa pagina di esempio funzionante del modulo Beauty Tips, dove potete vederlo in funzione.

Descrizione d’utilizzo del modulo Beauty Tips

  • installare e abilitare il modulo (3 sottomoduli)
  • andare nella sua pagina di configurazione e qui possiamo passare subito a configurarlo a nostro piacimento
  • prima parte della pagina di configurazione del modulo beauty tips
  • tramite la prima checkbox possiamo attivare il Tips Baloon a qualsiasi elemento della pagina, l’importante è che gli venga assegnata la classe “beautytips” (vedere primi 2 casi della pagina di esempio)
  • Possiamo anche aggiungere dei selettori personali tramite cui verrà richiamata e visualizzata la “nuvoletta” (nel mio esempio ho inserito una classe “nome-classe” e un ID “nome-id”, vedi casi 3 e 4)
  • Poi possiamo scegliere il tipo e la forma del Toolpit da visualizzare (nel mio esempio ho scelto lo stile google-maps)
  • seconda parte della pagina di configurazione del modulo
  • A fondo pagina troviamo altre possibilità di personalizzazione e di visualizzazione
  • Salvare la pagina di impostazioni e poi creare la pagina in cui inserire i tips
  • Con queste impostazioni di base, il testo che verrà visualizzato nella nuvoletta è quello che andremo ad inserire all'interno dell'attributo "title", ma possiamo modificare questa impostazione con la procedura che descrivo qui sotto

Utilizzare Beaty Tips insieme al modulo Webform

Voglio riportare un breve esempio di come sia possibile sfruttare le potenzialità di questo modulo quando si deve aiutare un utente a compilare un form online, in questo caso lo voglio integrare col modulo Webform (questo tipo di procedimento è utilizzabile in qualsiasi occasione e non solo con i form).

  • Prima di tutto si deve creare un form
  • Poi, si cerca nella pagina del codice sorgente, la classe o l’ID che sono state assegnate ad un determinato tipo di input (Allo stesso tipo di input vengono assegnati gli stessi selettori per ogni form, quindi, chi ha nel proprio sito molti form è bene che personalizzi la classe/ID di quel campo in fase di creazione, altrimenti lo stesso Tips apparirà in form diversi)
  • Andare nella pagina di configurazione del modulo e cliccare sul tab (in alto a destra) “Beauty Custom Style
  • pagina di configurazione degli stili del toolpit del modulo beauty tips
  • Qui possiamo creare lo stile del Toolpit come meglio ci piace e assegnargli un nome identificativo; a mano a mano che si apportano modifiche allo stile, si modifica il “baloon” di esempio
  • Cliccare sul tab “Beauty Custom Tips
  • pagina di configurazione delle proprietà del nuovo toolpit
  •  Inserire l’ID o la classe del tipo di input a cui vogliamo far visualizzare il messaggio
  • E scegliere cosa deve essere visualizzato (nel mio caso ho inserito un mio testo)
  • parte finale della pagina di configurazione delle proprietà del toolpit
  • Scegliere quando deve apparire (hover, click, focus ecc..)
  • E assegnargli uno stile
  • Nel mio esempio ho creato due stili diversi, uno per la textarea e uno per textfield (vedere ultimi 2 casi della pagina d’esempio) 

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
11 + 6 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.