Comment faire en sorte que le bouton BACK (ou Retour) de votre navigateur soit compatible avec la navigation flashe Conseils pour l’ergonome et le developpeur de site Flash.
Voici un cas concret : un internaute est en train de surfer sur le site e-commerce flambant neuf que vous venez de developper vous offrir. Le service commercial attend desesperement que la premiere vente soit faite et la logistique fretille a l’idee d’envoyer le premier colis. Mais voila… La SSI ou webagency a oublie de penser au bouton BACK sur votre site Flash. Et au moment ou votre premier acheteur est en train de visionner son panier, l’envie subite de revenir en arriere lui prend. H? oui, il vient de se souvenir de l’objet qu’il a vu sur votre site 3 ?crans auparavant. Ca fait 12 minutes qu’il est sur votre site. Sa souris se deplace lentement vers le haut de la page, le haut, a gauche pour etre exact.
D’un clic frenetique, il revient 3 fois en arriere, persuade de se retrouver nez ? ?cran avec l’objet convoite, celui qu’il a oublie de mettre dans son panier, a cote des 4 autres objets qui sont deja prets a etre payes. Ces 3 BACK seront fataux pour sa navigation, les nerfs de votre service statistique (qui suivait son surf en temps reel), le portefeuille de votre service commercial (qui se demande bien comment ils ont pu payer un site internet qui ne sait pas faire marche arriere) et les timbres de votre service logistique (qui restent colles sur les pouces des preparateurs qui se voyaient deje brandir fierement le premier pli au facteur).
La commande est perdue et votre internaute, qui vient de se retrouver sur le site n-3 (souvent Google), cherche deseesperement un autre site dans le resultat de recherche. Un autre site…. Tout sauf le votre, qui lui avez fait perdre 12 minutes de son precieux temps… Et toute confiance en votre image de marque.
Scenario catastrophe ? Non, simple realite. D’un site Flash mal developpe. Pour eviter tout cela, suivez les conseils suivants :
# usage des boutons de navigation (Refresh, Back, Favoris, Envoi d’url)
Les boutons de Refresh et de Back sous-tendent le probleme de la chronologie dans la navigation. Lorsque vous etes sur une page n et que vous desirez revenir sur une page n-1, il faudrait trouver une solution pour que le flash se souvienne :
- de l’endroit ou il est a l’instant n.
- de l’endroit qui co?ncide avec n-1.
On ne peut recuperer via Flash ou Javascript l’ev?nement Back du navigateur. On va donc ?crire la chronologie dans l’url en utilisant l Anchor. Le ”Hash Property” est la partie de l’url qui correspond au lieu interne de la page consultee (?galement appele ancre). Dans une url, le Anchor correspond au morceau d’url situ? apres le #.
En changeant le Anchor de l’url, on ne peut demander a flash de s’ajuster automatiquement sur le nouveau Anchor . La methode couramment utilisee est donc de mettre un timer en javascript qui va lire l’url periodiquement et s’il detecte une difference entre le Flash loade et le Anchor , va demander au flash de s’ajuster sur le Anchor . Dans ce cas, attention aussi a prevoir une gestion des erreurs de Anchor et v?rifier si un flash existe bel et bien pour le Anchor demande.
Je prends l’url suivante comme exemple : http://nikefootball.nike.com/nikefootball//siteshell/index.jsp#,fr,0;frontpage
Dans cet exemple, nous avons l’url racine : http://nikefootball.nike.com/nikefootball//siteshell/index.jsp et l’Anchor #,fr,0;frontpage
A chaque fois que nous cliquons sur un lien flash, l’anchor est directement mis ? jour par Flash lui-meme. Et si je modifie a la main l’anchor , ca donne :
Instant T0 :
#,fr,0;frontpage
Hypothese : Le Timer en Javascript vient de lire l’url et remarque qu’elle correspond au flash actuellement charge.
Instant T1 :
#,fr,0;frontpa
Hypothese : Le Timer en Javascript n’a pas encore lu l’url
Instant T2 :
#,fr,0;fro
Hypothese : Le Timer en Javascript vient de lire l’url => 2 possibilites : Ou bien une brique Flash correspond bien a “fro” et elle est chargee ou bien aucune brique ne correspond a “fro” et on demande alors au javascript de relancer sa boucle de timer pour lire plus tard une Anchor valide.
Il y a un probleme ? eviter : que 2 Anchor aient la meme racine (exemple : tab-table-tablette. Si je suis sur l’Anchor tablette et que je veux passer sur l’Anchor tab, je vais obligatoirement passer par l’etat table et dans ce cas, je risque d’etre sur l’Anchor table au meme moment que le Timer. )
L’utilisation du bouton BACK permet juste de revenir a l’Anchor n-1. Ainsi, apres avoir cliqu? sur le Back, l’internaute n’a plus qu’a attendre que le timer ait lu l’Anchor pour etre redirige sur la brique Flash correspondante.
*** Merci a Frank pour son aide sur la redaction de cet article ***