Il peggior nemico della Flash usability: il pulsante back
di Jed Wood
Pubblicato il 30 Dicembre 2003
Qualche approccio alla gestione del pulsante back del browser
Di tutte le lamentele e i preconcetti che circondano l’usabilita’ dei siti sviluppati con Macromedia Flash, quella che sembra causare piu’ malditesta di tutte e’ quella relativa al pulsante back del browser. In questo articolo illustrero’ qualche opzione per gestire questo bottone, e per ognuna evidenziero’ vantaggi e svantaggi.
Metodo 1 - ELIMINARLO COMPLETAMENTE
Utilizzando un piccolo Javascript puoi utilizzare una "splash page" e lanciare una finestra senza barra dei pulsanti. Se non esiste un pulsante back da cliccare il problema sara’ per forza di cose risolto, giusto? Beh, non esattamente…
Vantaggio- pulsante back eliminato .
Svantaggio- gli utenti possono utilizzare la tastiera o i comandi menu’ per tornare indietro, azione che si traduce in un passaggio a qualsiasi sito stessero visitando prima del vostro.
Svantaggio- gli utenti devono basarsi sul vostro sistema di navigazione per navigare verso le pagine precedentemente visitate.
Svantaggio- i software "anti pop-up" stanno diventando sempre piu’ diffusi, rendendo praticamente impossibile per gli utenti visualizzare il vostro sito.
Raccomandazione- nel caso doveste optare per questa alternativa assicuratevi di avere una navigazione globale che sia intuitiva e chiara. Inoltre non lanciate automaticamente la finestra- lasciate che sia l’utente a cliccare un pulsante di accesso. Questo potrebbe consentirvi di bypassare alcuni dei pop-up killer.
Metodo 2 - ASSICURARSI CHE NON CI SIA NULLA A CUI TORNARE
L’idea che ci sta dietro e’ quella di lasciare i controlli per la navigazione browser al loro posto, ma assicurarsi che il vostro sito sia il primo ad apparire nella finestra browser. Il che lascia il pulsante back disabilitato.
Vantaggio- gli utenti non possono tornare indietro, anche se tentano di utilizzare la tastiera o i comandi del menu’ contestuale.
Svantaggio- come gia’ evidenziato nel punto precedente, gli utenti possono basarsi solo sul vostro sistema di navigazione per tornare alle pagine precedenti.
Metodo 3 - CREARE UN PULSANTE BACK IN FLASH
Nel caso utilizziate frame multipli per i vostri filmati Flash, o che abbiate tutto il vostro codice actionscript in un unico frame (altamente raccomandato), potete creare un array di "pagine visitate", e inserire uno script in un bottone che utilizzi l’array come storico delle pagine visitate. Macromedia ha un breve articolo con maggiori dettagli.
Vantaggio- date agli utenti l’opportunita’ di navigare attraverso le pagine gia’ visitate in un modo che gia’ conoscono.
Svantaggio- dovrete pur sempre continuare a gestire le interazioni tramite tastiera e menu’ contestuale.
Raccomandazione- utilizzatelo in combinazione con metodo 2 per eliminarele interazioni da tastiera e menu’.
Metodo 4- UTILIZZARE CODICE E FRAME HTML
Robert Penner a creato del codice che permette l’utilizzo del pulsante back in alcune versioni di browser.
Vantaggio- in molti browser il pulsante back funziona correttamente
Svantaggio- in alcuni semplicemente non funziona.
Raccomandazione- Una degli aspetti di Flash che amo e’ il sapere che una volta che il mio codice funziona come voluto posso utilizzarlo praticamente con qualsiasi browser. Sebbene rispetti molto gli sforzi di Robert, non ho mai utilizzato questo metodo.
Metodo 5- COMPROMESSO: ACCETTARE UN REFRESH DELLA PAGINA
Qualche tempo fa mio cognato mi ha chiesto di creargli un sitino molto semplice per rinforzare alcune aste su eBay che staca conducendo. Con poco tempo e un budget ancora piu’ ristretto ho deciso di realizzarglielo totalmente in Flash. Niente di complesso; nessuna animazione, nessuna connessione a database, niente controlli interattivi. Ed ero convinto che gli utenti che arrivavano su quel sito da eBay si aspettassero che il pulsante back funzionasse a dovere. Dopotutto il sito sembrava un "normalissimo" sito HTML.
Ed e’ stato allora che mi e’ venuto in mente. Con un po’ di codice server-side, potrei utilizzare un file .swf e una pagina dinamica, continuando ad avere piena funzionalita’ del pulsante back. E se questo non bastasse, riuscirei anche ad abilitare un normalissimo pulsante di bookmark come in tutti gli altri siti HTML.
Esiste pero’ un compromesso da accettare: il refresh della pagina. Ma, dato cge la pagina ricaricherebbe sempre lo stesso file .swf, la maggior parte dei browser lo accederebbero dalla chache e quindi il caricamento sarebbe comunque rapido.
NOTA: per utilizzare questa tecnica necessiterete almeno di Flash 6 (MX)
Ecco quello che ho fatto-
1- Scegliete il linguaggio server-side che preferite.
La mia scelta e’ PHP, ma potete anche usare ASP, JSP, CFM, Perl, quello che volete insomma. Basta che sappiate come passare una singola variabile attraverso l’URL e il metodo "GET". Nel caso di PHP, il codice all’inizio della pagina contenitore del file .swf il codice sarebbe:
<?php
$page = $_GET['page'];
?>2- Chiamate la pagina "index.php"
Questo naturalmente che la pagina sia per default quella visualizzata dai vostri utenti all’accesso del sito.
3- Fate in modo che le chiamate dei vostri link e bottoni nel filmato Flash facciano sempre riferimento a index.php, portandosi pero’ dietro una variabile. I modi sono parecchi. Ecco quello che ritengo il piu’ semplice (in actionscript):
home_btn.onRelease = function() {
getURL("index.php?page=" + this._name);
}4- Date un nome alla variabile nelle proprieta’.
Esiste una proprieta’ poco nota nelle sezioni PARAM ed EMBED del codice HTML che utilizzate per contenere il file .swf. Viene chiamata Flashvars, e puo’ contenere una TONNELLATA di dati. In PHP, assomiglierebbe a qualcosa di simile (le parti importanti sono in neretto):
<OBJECT classid="
clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0"
WIDTH="720" HEIGHT="500" hspace="0" vspace="0"
ALIGN="top" id="hobby">
<PARAM NAME=movie VALUE="hobby.swf">
<PARAM NAME=loop VALUE=false>
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=FLASHVARS VALUE="page=<? echo $page ?>">
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="hobby.swf" WIDTH="720" HEIGHT="500"
hspace="0" vspace="0" loop=false ALIGN="top" menu=false
quality=high bgcolor=#FFFFFF flashvars="page=<? echo $page ?>"
NAME="hobby"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>5-Acquisite la variabile nel swf.
Qualsiasi variabile inserita nella proprieta’ "Flashvars" e’ immediatamente disponibile sul livello _root del filmato Flash. Esistono parecchi modi in cui potete ottenere lo stesso risultato. Ma ecco come faccio io. Innanzitutto faccio girare il mio codice iniziale che crea i pulsanti di navigazione. Non mi resta quindi che richiamare la variabile dicendo "Lancia la funzione "onRelease" per il bottone a cui la variabile appartiene". Ad esempio
(in actionscript):
_root[_root.page].onRelease();Abbastanza semplice eh? Basta utilizzare un array per cercare il valore della variabile "pagina", e trovare il pulsante di navigazione con lo stesso nome. Ma un’ultima cosa di cui dobbiamo tener conto e’ il caso in cui la variabile non contenga nessun valore - evento che naturalmente si verifichera’ quando gli utenti arriveranno per la prima volta sul vostro sito.
6- Se la variabile non ha nessun valore, allora carica la "home"
Aggiungiamo un "If" al codice Actionscript riportato sopra e rendiamolo un attimo piu’ agile (in actionscript):
if (_root.page = = "") {
_root.home_btn.onRelease();
} else {
_root[_root.page].onRelease();
}NOTA: quando andrete a testare questo pezzo di codice nel player Flash, non funzionera’ in maniera corretta. Il motivo e’ semplice: invece di vedere la variabile "pagina" come "", il player vede un valore NULL. Se volete che funzioni sia nel player che nel browser, dovremo aggiungere ancora un po’ di codice (in actionscript):
if ((_root.page = = "") || (_root.page = = null)){
_root.home_btn.onRelease();
} else {
_root[_root.page].onRelease();
}Ecco fatto. Nel caso voleste vedere un semplice esempio di questo metodo in azione potete dare un occhio al sito che ho costruito per mio cognato.
Ecco quindi il mio consiglio: se il vostro sito Flash e’ una complessa applicazione che si basa su una forte inetgrazione con database o complessi elementi interattivi, utilizzate uno dei primi metodi ed eliminate la possibilita’ di utilizzare il pulsante back. Ma se il vostro sito in Flash assomiglia maggiormente ad un "normale" sito internet, allora provate la mia tecnica e lasciate che i vostri utenti usino il browser come sono abituati, col tasto back e la possibilita’ di bookmarkare. Nel caso che abbiate utilizzato con successo una tecnica che non ho inserito in questo articolo, o che abbiate altri commenti, comande o suggerimenti legati alla Flash Usability, mi piacerebbe riceverli a: jed@usableflash.com.