davide
Come gestire timeout multipli
Spesso lavorando in Javascript ci si ritrova a lavorare con i timeouts. Generare eventi temporizzati in Javascript è abbastanza banale, si ricorre all'uso di due funzioni:
- setTimeout() - che esegue una porzione di codice dopo lo scadere di x millisecondi
- clearTimeout() - cancella il setTimeout()
Notare la sintassi dei comandi:
JavaScript:
-
/* richiama la funzione alert allo scadere dei 5000 ms */
-
var timeout = setTimeout( "alert('5 secondi!')",5000);
-
-
/* cancella l'evento associato alla variabile timeout*/
-
clearTimeout(timeout);
Ma se si devono gestire più eventi temporizzati contemporaneamente? Una possibile soluzione è creare una variabile globale in cui gestire la coda di timeout, e una funzione che ripulisca la coda.
JavaScript:
-
//dichiaro variabile globale
-
var timeoutsQueue = new Array();
-
-
//aggiungo evento
-
timeoutQueue[n] = setTimeout("ritardaFunction("+parametro+")",250);
-
-
//interrompo un singolo evento
-
clearTimeout(timeoutQueue[n]);
-
-
//interrompo tutti gli eventi della coda
-
for(i=0;i<timeoutQueue.length;i++){
-
clearTimeout(timeoutQueue[i]);
-
}
404 error: File not found
Ci sono mille motivi per cui capita, ma spesso in rete ci si ritrova davanti ad una pagina di errore 404. Il 404 è un codice di risposta dello standard HTTP che indica che il cliente è in grado di comunicare con il server, ma il server non ha trovato la risorsa richiesta.
Troppi siti non si preoccupano di cambiare la pagina predefinita di errore 404, queste schermate disorientano l'utente e spesso sono causa di un suo abbandono del sito. Nelle situazioni critiche, ovvero in caso di errore, la compilazione di una form o i moduli di ricerca, bisognerebbe progettare e implementare con ancora maggiore rigore e attezione l'usabilità dell'interfaccia Web.
La pagina di errore 404 di default non ha lo stesso layout del sito e non spiega nulla dell'errore ma fornisce solo un messaggio tecnico, quindi disorienta e non lo aiuta in alcun modo.
Quindi primo punto è ricreare un design simile al resto del sito o almeno includere il logo. Ricreando il design del sito facciamo attenzione ad evidenziare il fatto che ci si trova su una pagina di errore, quindi viene il momento delle spiegazioni e suggerimenti, evitando tecnicismi dobbiamo:
- spiegare il perchè viene visualizzata la pagina di errore;
- elencare le cause più comuni;
- dare delle alternative, ovvero link alla homepage, motore di ricerca o meglio ancora qualcosa tipo "forse cercavi" di Google;
- infine un indirizzo email per riferire del problema.
Sengalo come esempio positivo il sito Apple ,per le note folcloristiche e non il 404 Research Lab, invece per maggiori dettagli tecnici fate riferimento al solito ListApart.
Usability: false banalità e navigazione
Per chi è già ampiamente convinto della utilità delle linee guida salti la premessa.
Premessa sociodemopolitica
Spesso leggendo le linee guida proposte nei testi di usability, viene da pensare che siano banalità pensate per agevolare gli utenti disabili. Evitando ogni discorso etico/morale ma parlando in maniera volutamente politicamente scorretta, non conosco disabili e perciò non li considero possibili utenti del mio "business". Generalmente sviluppo siti rivolti per un pubblico di professionisti, ma il nostro popolo è uno dei più vecchi, anche i manger delle aziende italiane e così il nostro parlamento.
Per esperienza personale la maggior parte delle persone oltre i 40/45 anni, pur usando il computer quotidianamente, fatica sia a capirne i concetti base come icone e utilizzo delle finestre, sia ha notevoli problemi con i sistemi di puntamento, insomma muovere il mouse e il doppio click sembrano metterli in difficoltà. Questa mia premessa non vuole essere una campagna per l'adozione di un anziano, ma è una aperta riflessione sul fatto che i nostri potenziali clienti sono informaticamente parlando, per la maggior parte disabili.
1. Inibire il tasto "Indietro"
Ancora oggi molti siti in maniera volontaria o involontaria inibiscono il funzionamento del tasto "Indietro":
- aprendo i documenti in nuove finestre
- siti a tutto schermo
- reindirizzamento forzato
- utilizzo del tag META di "refresh"
Mediamente il tasto "Indietro" è percepito dall'utente come un "Undo/Annulla", insomma un'ancora di salvezza. Oltretutto mi sembra evidente che bloccare una qualsiasi funzionalità del browser sia una violazione della libertà dell'utente che proverà solo una grande frustrazione.
2. Aprire nuove finestre
Finalmente mi tolgo questo sassolino dalla scarpa, anche io un tempo, per i link che puntavano all'esterno preferivo aprire nuove finestre, pensando di mantenere l'utente rilegato al mio sito.
HTML:
-
<a target="_blank"></a>
Questo è un errore grave: poichè deludiamo le aspettative dell'utente che si attende di vedere aperto il documento nella medesima finestra, come accade normalmente per ogni link. Anche se fosse un utente esperto saprebbe aprire da solo il documento in una nuova finestra o tab, perchè rischiare di contraddirlo? In questo modo inoltre si vanifica l'utilizzo del tasto "Indietro", oltre ad incrementare il prolificare delle finestre sullo schermo dell'utente.
3. I link che non cambiano colore
Per noi designer è prevalentemente una questione estetica, quel blu elettrico o quel color prugna secca sono proprio un pugno in un occhio! Ma per gli utenti è una questione di praticità, cercano qualcosa e la vogliono trovare senza perdersi, quindi diventa indispensabile che sia evidente dove un utente si trova, dove può andare dal punto in cui si trova e dove è già stato.
Conclusioni
I libri e le linee guida sull'usabilità sembrano sempre delle acide paternali, quindi superflue e irritanti ma osservate questo sito in cui sono incappatto l'altra sera. Un layout davvero attraente, per di più i link sottolineati rispettando le linee guida e la leggera discontinuità l'originalità del layout. Peccato che persone tanto illuminate abbiano tralasciato un dettaglio, secondo me grave, ovvero :
Informazioni fondamentali come numeri di telefono, indirizzo ed email dovrebbero sempre essere scritte con testo, in modo che l'utente possa fare copia-incolla agilmente annotandosi queste informazioni. L'argomento immagini al posto del testo è molto delicato in quanto ad accessibilità ma questo è un altro discorso.
Usability: la teoria.
Usability, ecco uno di quei termini che nel Web spesso scatena polemiche e discussioni, eppure si tratta di una disciplina nemmeno tanto giovane che affonda le sue radici nell'interazione uomo-macchina e che in generale, concettualmente parlando, non ha apportato grandi novità.
Il mondo reale
Donald Norman1 nei suoi numerosi saggi ha trattato gli orrori di usabilità applicata al design di oggetti comuni, pensiamo alle porte a vetri dei grandi edifici pubblici, migliaia di persone le attraversano ogni giorno, ma spesso non sono progettate in modo che giunti in prossimità si intuisca se si debba spingere o tirare per aprirle, anche quando ci fosse la classica etichetta adesiva a suggerirci la soluzione si puo' porre un ulteriore problema, sono a doppia "anta" e l'una blocca l'altra, quale delle due devo scegliere? La grossa differenza nel Web è che gli utenti se non riescono a capire come funziona "la porta" di un sito volgono altrove, nel mondo reale solitamente hanno più pazienza perchè non hanno questa rapida via di uscita.
Definizione
È doveroso cercare una definizione rigorosa dell'oggetto di studio, e per prima cosa rivolgo la mia attenzione al lavoro di Jakob Nielsen2.
L'usabilità è un indicatore di qualità che ci dice quanto una determinata cosa è semplice da usare. Più precisamente ci dice quanto è necessario per imparare a usare quella cosa, con quanta efficienza la si usa poi, quanto si riesce a tenerne a mente il funzionamento, quanto alta è la probabilità di fare errori quando la si usa, e quanto è piacevole usarla.
Qualcosa stride in questa definizione, quindi nell'ottica in cui si pone Nielsen, per questo concordo con la critica mossa da Franco Carlini3 che non digerisce la riduzione ad un valore numerico, un punteggio, del concetto di soddisfacibilità dell'utente. Questa definizione sottende l'esistenza di un algoritmo per il calcolo di questo punteggio, ma leggendo l'opera di Nielsen non si trova la ricetta miracolosa ma un insieme di linee guida da seguire basate su
osservazioni empiriche provenienti da test compiuti su 716 siti web e 2136 utenti di tutto il mondo.
Contando che a stessa detta di Nielsen il web conta più di 80 milioni di siti e che almeno potenzialmente gli utenti del Web sono qualche miliardo, possiamo dire che l'ingrediente segreto proposto da Nielsen in realtà è tanta attenzione verso ilcliente ed esperienza nel conoscere le sue esigenze.
Inoltre come evidenzia Michele Visciola4 non si tratta solo di semplicità d'uso, nel caso del web un elemento fondante è l'informazione, quindi il bisogno dell'utente di reperire un informazione coerente alla sua richiesta.
Conclusione
La mia conclusione è che dall'esperienza altrui c'è sempre da imparare quindi un buon designer deve tenere ben a mente le linee guida frutto delle ricerche di Nielsen e i maggiori studi in materia di usabilità (guardate la bibliografia), per poi saperle rielaborare grazie alla propria esperienza e conoscenza degli utenti del sito che si sta progettando.
Quindi se l'esperienza verrà con il tempo agevoliamola in ogni modo stimolando gli utenti dei nostri lavori a fornirci un continuo feedback e quando possibile provando a reclutare utenti per sottoporli a test.
Mi riprometto entro fine settembre di sottoporvi qualche interessante linea guida e approfondire l'argomento dei test di usabilità
Bibliografia
- "Emotional Design: Why we love (or hate) everyday things" di Donald Norman (2004).
- "Web Usability 2.0. L'usabilità che conta" di Jakob Nielsen (2006).
- "Parole di carta e di web. Ecologia della comunicazione" di Franco Carlini (2004).
- "Usabilità dei siti web" di Michele Visciola (2000).
News Scroller
Ecco un piccolo esempio in cui si applicano le proprietà presentate in Scroll boxes. Si tratta di una possibile visualizzazione di news a scorrimento automatico in un blocco DIV. Niente di innovativo e tanto meno completo, ma può considerarsi uno buono spunto per esercitarsi con javascript, css e xhtml ( AJAX usando una sigla audace ).
Primo step, HTML formato da un contenitore generale un wrapper che servira' come contenitore delle news e quindi le singole news:
HTML:
Secondo step,CSS che nasconde l'overflow delle news:
CSS:
-
#container{
-
margin: 20px;
-
width: 200px;
-
height: 200px;
-
/*Nasconde la parte in eccesso*/
-
overflow: hidden;
-
border: 1px solid #000
-
}
-
-
div.news{
-
padding: 10px;
-
}
Ultimo step, Javascript per dare moto al tutto:
JavaScript:
-
//dichiarazione variabili globali
-
var time;
-
var scroll_limit;
-
-
//Alcune impostazioni fondamentali pre caricamento pagina
-
function init(){
-
var container = document.getElementById("container");
-
var wrapper = document.getElementById("wrapper");
-
var client_height = container.offsetHeight;
-
var news_nodelist = wrapper.getElementsByTagName("DIV");
-
-
/**
-
* Lo scroller deve resettarsi quando gli attuali
-
* elementi news sono stati tutti scorsi.
-
**/
-
scroll_limit = wrapper.offsetHeight;
-
var i = 0;
-
var current_element = news_nodelist[i];
-
-
/**
-
* Si duplicano i nodi in modo da creare l'illusione
-
* dello scorrimento continuo. Si assume che ci siano
-
* abbastanza nodi (news) da duplicare.
-
**/
-
while(client_height>= 0){
-
var current_element = news_nodelist[i];
-
client_height = client_height - current_element.scrollHeight;
-
wrapper.appendChild(current_element.cloneNode(true));
-
i = i + 1;
-
}
-
scroll("wrapper");
-
}
-
function scroll(element_id){
-
var wrapper = document.getElementById(element_id);
-
var container = wrapper.parentNode;
-
var scroll_top = container.scrollTop;
-
if( scroll_top + 1 <scroll_limit ){
-
container.scrollTop = container.scrollTop + 1;
-
}else{
-
container.scrollTop = 0;
-
}
-
// Si richiama la funzione tra 25 millisecondi
-
time = setTimeout('scroll(\'wrapper\')', 25);
-
}
-
-
function stopScroll()
-
{
-
if (time) clearTimeout(time);
-
}
Ovviamente la funzione init() deve essere richiamata al termine del caricamento della pagina HTML, ora sta a voi raffinare questo rozzo esempio di News Scroller.
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Scroll boxes
Il titolo forse non è dei più immediati, ma vorrei presentare delle proprietà degli elementi HTML utilizzabili con Javascript per creare degli scroller personalizzabili o automatici ( classico box delle news a scorrimento continuo ) o quant'altro preveda il movimento di un blocco scrollabile.
Innanzitutto presentiamo le proprietà degli elementi HTML che utilizzeremo negli script.
clientHeight
Proprietà in sola lettura che ritorna il numero di pixels dell'altezza interna di un elemento, incluso il padding ma escluse l'altezza della scrollbar, del bordo o del margine.
JavaScript:
-
var element = document.getElementById(id);
-
var height = element.clientHeight;
clientWidtht
È il corrispettivo di clientHeight ma per la larghezza interna di un elemento.
JavaScript:
-
var widht = element.clientWidtht;
scrollHeight
È una proprietà in sola lettura che restituisce il numero di pixels dell'altezza di un elemento relativa al layout, quindi comprensiva di padding e bordi.
JavaScript:
-
var scrollHeight = element.scrollHeight;
scrollWidth
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
JavaScript:
-
var scrollWidth = element.scrollWidth;
scrollTop
È una proprietà in lettura e scrittura che può assumere un valore qualsiasi intero positivo rappresentate la distanza in pixel tra il lato superiore e la prima parte visibile dell'elemento countenuto.
JavaScript:
-
var scrollTop = element.scrollTop;
scrollLeft
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
JavaScript:
-
var scrollLeft = element.scrollLeft;
Schema riassuntivo
Note: le proprietà presentate sino ad ora sono state introdotto dal object model di MSIE, quindi non sono nè una specifica nè una raccomanandazione W3C. In ogni caso sono implementate anche dal render Gecko ( Firefox, Mozilla, Netscape, etc. )
Queste proprietà si applicano a numerosi elementi, per avere maggiori dettagli consultate pure la MSDN DHTML library
Form highlighting
Dopo l'autofocus, altro script a mio parere utilissimo è quello dell'highlighting degli input field e delle textarea, ovvero un semplice meccanismo javascript + css che permette di evidenziare il campo della form attualmente in uso. Vi propongo una funzione sviluppata in maniera che sia abbastanza adattabile ai diversi casi.
JavaScript:
-
window.onload = function(){
-
/*applico l'highlight a tutti i campi di input*/
-
var inputFields = document.getElementsByTagName("INPUT");
-
for(i=0; i<inputFields.length; i++){
-
var field = inputFields.item(i);
-
if ( field != undefined){
-
if ( field.type=="text" || field.type=="password" ){
-
/*onfocus cambio la classe corrente con quella focus*/
-
field.onfocus = function(){this.className="focus";}
-
/*onblur ripristino la classe di default*/
-
field.onblur = function(){this.className="";}
-
}
-
}
-
}
-
/*stesso vale per le textarea*/
-
var textareas = document.getElementsByTagName("TEXTAREA");
-
for(i=0; i<textareas.length; i++){
-
var textarea = textareas.item(i);
-
textarea.onfocus = function(){this.className="focus";}
-
textarea.onblur = function(){this.className="";}
-
}
-
}
Chiaramento a questo script va assocciato un opportuno foglio di stile con almeno una classe focus.
CSS:
-
input.focus{
-
border: 1px solid #a00;
-
}
-
textarea.focus{
-
border: 1px solid #a00;
-
}
-
input, textarea{
-
padding: 1px;
-
background-color: #eee;
-
border: 1px solid #999;
-
}
Visto che sostenere l'utilità di questi script può essere discutibile, vi propongo un esempio completo di una tipica form di contatti.
N.B: Questi script non trattano campi del tipo checkbox, ma in quel caso bisognerebbe studiare una soluzione ad hoc che evidenzi l'intera area contente tutti i radio button o checkbox e non il singolo, poichè la check box o i radio button sono uno o più valori per un campo.
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
