jQuery non intrusivo

Ho appena rimosso l'effetto di swap delle immagini sull'header perchè l'ho giudicato intrusivo. In effetti era sufficiente muovere appena il mouse durante la fase successiva al caricamento per attivare inavvertitamente l'effetto. Questo è intrusivo, perchè l'utente non ha attivato di sua spontanea volontà la action. In generale, tutti gli effetti jQuery su cui l'utente non ha il pieno controllo e che si attivano automaticamente sono potenzialmente intrusivi. Vediamo le differenze e le eccezioni.

Eventi

Gli eventi jQuery vanno suddivisi in eventi volontari, eventi involontari e eventi dubbi (dal punto di vista dell'utente).

Eventi volontari

  1. click
  2. submit
  3. focus
  4. contextmenu
  5. eventi da tastiera
  6. drag and drop
  7. scroll
  8. resize
  9. change
  10. selezionare un'opzione di un form

Eventi involontari

  1. load
  2. ready
  3. eventi AJAX non attivati da una action

Eventi dubbi

Questi eventi possono essere sia volontari che involontari:

  1. eventi del mouse diversi da click
  2. eventi da tastiera accidentali (come tenere premuto un tasto troppo a lungo o premere un tasto inavvertitamente)

Gli eventi involontari e dubbi non sono intrusivi di per sè, ma possono diventarlo qualora le azioni ad esse associate non prevedono una modalità di disattivazione da parte dell'utente. Per esempio, i messaggi visualizzati al caricamento di ogni pagina dovrebbero prevedere un'opzione che, tramite cookies, permette all'utente di disabilitare tali messaggi sul sito.

Informazioni all'utente

Visualizzare informazioni è un metodo usato molto spesso per la pubblicità o l'annuncio di modifiche apportate al sito. La visualizzazione di questi messaggi (baloon, tooltip, lightbox eccetera), non dovrebbe mai occupare troppo spazio nella pagina nè pregiudicarne il funzionamento. Ancora una volta ribadisco che bisogna dare all'utente la possibilità di disabilitare tali messaggi. Il punto è questo: l'abuso di popup ha portato i browser a creare dei filtri appositi. Bisogna evitare che l'abuso di effetti jQuery ci riporti nella situazione che ci siamo faticosamente lasciati alle spalle.

Generazione di contenuti

Quando si generano nuovi contenuti da inserire nella pagina in modo dinamico, occorrerebbe fornire all'utente delle indicazioni sullo stato dell'azione in corso. Si possono per esempio inserire indicatori visuali che comunichino all'utente che sta per avvenire un cambiamento in una parte specifica del documento. In questo modo l'utente viene preparato psicologicamente alla consultazione dei nuovi contenuti.

Alternative a jQuery e JavaScript

Tutte le action del vostro sito devono poter funzionare anche quando JavaScript (e quindi jQuery) è disabilitato o non supportato. Mai usare action i cui URL sono fittizi o non funzionanti senza JavaScript. Il segreto è progettare prima il sito senza JavaScript e aggiungere questo linguaggio e jQuery solo in un secondo momento.

Per esempio, non fate questo:


<a href="#" id="load">...</a>


$('#load').click(function(event) {

    $.ajax({
        type: 'GET',
        url: 'rss.php',
        dataType: 'html',
        data: 'items=5',
        success: function(html) {
          //...
        }
    });
    
    event.preventDefault();

});

In questo caso il link non funzionerà senza jQuery. Fate invece come segue:


<a href="rss.php?items=5" id="load">...</a>


$('#load').click(function(event) {
  var $href = $(this).attr('href');
  var data = $href.replace('rss.php?', '');
    $.ajax({
        type: 'GET',
        url: 'rss.php',
        dataType: 'html',
        data: data,
        success: function(html) {
          //...
        }
    });
    
    event.preventDefault();

});

In questo modo il link funzionerà anche senza jQuery.

Torna su