Non, ne fuyez pas tout de suite, je m’explique :
Le flash est très utilisé pour les lecteurs audios/vidéos, pour des RIA, à destination des domaines variés du e-commerce aux sites marketing ou aux applications un peu plus ludiques. Les campagnes interactives et marketing, d’accord, mais le web ne tourne pas qu’autour de cela !

Et il est un domaine – celui des sites institutionnels – caricaturalement ennuyeux, avec des chiffres sur l’entreprise, une maladie du PDF et un wording parfois si complexe et institutionnel qu’il en est incompréhensible. Ce n’était pas jusqu’à récemment un domaine qui se voulait être le fer de lance de l’innovation. Et pourtant ! il y a aujourd’hui un enjeux certain à se présenter en 2009 de manière un peu plus proche des internautes, de manière à répondre à leurs besoins lorsqu’ils naviguent sur ces sites. Et de manière plus interactive, plus attrayante. Pour résumer, j’essaye d’aller là où se passe en théorie le moins de choses pour en tirer les quelques points les plus intéressants.

Et la question suivante se pose : quelle est l’utilisation sur ces sites de grands comptes(+premières plus grandes compagnies du monde) du flash, alors que l’accessibilité et le référencement par le dieu Google du contenu textuel est censé être une de leur règle première ?

Bon nombre de sites semblent avoir compris le principe des flux RSS à présent, voire des podcasts pour certains. Pourtant, dès que l’on arrive sur de l’audio ou de la vidéo, c’est une autre affaire. Regardons cela de plus près. Au sommaire donc :

- Diaporamas, illustrations, photos interactives, vidéos, webcast, PDF, synthèse vocale, lecteur vidéo….

Note : attention, évitons toute mésentente, je ne dis pas que faire un site en flash est bien. Je fais simplement un état des utilisations du flash sur ces sites et exclusivement du flash. Et j’ai essayé de rester impartial^

On commence !

http://www.alstom.com/home/

Je passe sur les petites animations explicatives. Tout le monde les connait, et on pouvait les faire en flash 5. Même si une animation comme celle d’Alstom plus haut est tout à fait convaincante.

Par contre, des vidéos interactives comme celle de StatoilHydro sont plus intéressantes : précises, de qualité, explicatives. Surtout pour aborder des sujets sur l’histoire de l’entreprise peu.. sexy. Nous ne sommes plus très loin du cdrom pédagogique.

De même chez General Electrics, des mini-sites bien ficelés documentent avec animations, illustrations et vidéos des axes bien précis.

Diaporamas d’images interactifs

Présente la diversité des facettes de l’entreprise. Simple slideshow ou diaporama interactifs, l’animation peut devenir sérieusement intrusive et gênante à la longue. C’est toutefois une grosse tendance d’avoir des visionneuses avec plusieurs images associées à des liens, autour de sujet centraux sur l’entreprise ou des évènements du moment. L’image est roi ! (enfin reine..)

Exemples :
http://www.bouygues.fr/fr/le-groupe/
http://www.capgemini.com/
http://www.danone.com/fr/carrieres/nos-metiers/achats.html
http://www.lagardere.com/groupe/page-accueil-fr-234.html

Chez TimeWarner, par contre, on mélange tout, avec vignettes, tags, ou tri par business sur une présentation dans l’espace. On leur pardonnera (ou pas) un menu entièrement en flash… On a également une variante chez Nissan avec des petites bulles, (ca ne va pas loin mais bon).

Zurich a un système interactif un peu complexe mais qui mérite attention : il a plusieurs systèmes de visualisation, de droite à gauche et de haut en bas. Une richesse de contenu condensée dans une seule zone.

Les lecteurs vidéos

Beaucoup utilisent des lecteurs flash open source (Je me demande s’ils ont payé la licence commerciale…^), d’autres le player composant de flash 8 coloré et d’autres des players dédiés, avec une intégration à plus de 450/500px de large et une très bonne qualité. Ce n’est pas toujours le cas, on voit encore de petits players timides. Une vidéo en grand et de bonne qualité donne envie de la regarder ! Peu de players réellement bien brandés. Et pourtant, cela ajouterait une touche plus ‘pro’.

Dernier point, il semble que sur les exemples vus, il y a quand même une compréhension du format de la vidéo, en 4:3 et 16:9ème. Très bon point !

http://www.airliquide.com/fr/le-groupe/recherche-et-developpement.html
http://corporate.airfrance.com/fr…859974e4f
http://corporate.airfrance.com/fr/mediat…f02e85e

Un exemple d’intégration en lightbox de vidéo :
http://www.gdfsuez.com/fr/medias/mediatheque/videos/vue-de-detail/?media=54

Un effort d’intégration des vidéos dans le site original :
http://www.ppr.com/front__sectionId-463_Changelang-fr.html

Chez Capgemini (capture) comme chez Intel (ou d’autres), on peut embedder une vidéo chez soi ou sur différents réseaux sociaux.

Et ceux qui ne sont pas en flash alors ?

http://www.eads.com utilise un bon media center, mais en windows media… Essilor également avec un pop up, ainsi que Michelin. Le Wmv subsiste encore mais il est largement minoritaire. (oui, comme le rapport, mais cela n’a rien à voir).

Le real et le quicktime sont quelques peu passés de mode, visiblement.

Carte interactives monde

Pour souligner une présence internationale, rien ne vaut une petite carte interactive en marge des combobox de sélection avec une liste de pays à n’en plus finir. La règle d’une bonne intégration : légère à charger, fluide, ergonomique. L’alternative est un panneau qui s’ouvre en grand avec la liste des pays. On gagne un peu de temps, mais c’est moins fun. Voici quelques exemples :

http://www.bouygues.fr/fr/le-groupe/bouygues-dans-le-monde/bouygues-dans-le-monde/
http://www.gdfsuez.com/fr/groupe/presence-internationale/
http://maps.bnpparibas.com/
http://www.sanofi-aventis.com/produits_presence/presence_locale/local_presence_home.asp
http://www.roche.com/r….id=63 ou également http://www.novartis.com/abo….shtml: soulignons sur ces 2 exemples un zoom profond jusqu’à un google maps.

Bon, on peut faire aussi de très belles choses avec du html quand même hein…

La palme de la carte interactive revient à…

http://www.unicreditgroup.eu…tegy.htm pour l’originalité de son intégration.
Sur cette page, il suffit de cliquer sur le bouton situé tout en haut et observez ce qu’il se passe. J’ai failli applaudir… superbe intégration ! L’agenda n’était pas indispensable je trouve…

Dans le même genre Siemens en Javascript, mais l’effet n’est pas le même, c’est moins beau.

Et entre parenthèses(), dans le genre mashup, voir ce superbe exemple de worldbank avec google maps, qu’il ne faut pas non plus oublier.

Des titres plus riches avec une police dédiée

Pour changer de polices sur le web, il n’y a pas 36 solutions : ou bien du texte en image, ou bien avec du flash, avec des outils comme SiFR :

Quatre exemples différents d’intégration, avec des chartes bien différentes :
http://www.bouygues.fr/fr/finances-actionnaires/
General Electrics
http://www.danone.com/
http://www.unilever.com/sustainability/?topic=2

Le dernier exemple donne un très bon rendu à la page.

Des illustrations animées

Les compositions d’images, c’est sympa mais Chevron a trouvé mieux avec des compositions interactives en vidéos, avec pour chacune des urls. Une forme moins diaporama mais plus illustratrice permettant si cela intéresse l’utilisateur d’aller vers d’autres parties du site. (Le reste du texte est en flash aussi, mais ne chipotons pas).

Ils ont également un très bon minisite autour de l’environnement et de l’humain, avec une url rewriting, et qui s’intègre très bien dans le site : ni trop, ni pas assez. C’est important de garder en tête la place de chaque élément par rapport au reste !

Graphique et diagramme dynamique avec exportation en image

Déception sur les graphiques, peu sont animés et bien designés (ce qui ajoute un gramme de finesse dans ce monde de chiffres bruts), et pas mal d’interfaces auraient méritées de gros diagrammes en Flex comme sur un Google Analytics. Il existe pourtant de très bons outils pour créer de beaux graphiques aujourd’hui, et même animés. Même pour le cours de bourse, le fournisseur du service proposant un menu en Java, on n’aura pas droit à du Flex, question de développement supplémentaire. (Pourtant, il y a des choses qui devraient faire envie!). Les beaux graphiques de RIA sont réservés à un front en accès restreint le plus souvent à valeur ajoutée ou à des applications métiers.

Quelques beaux exemples quand même :
http://www.loreal-finance.com/fr/chiffres-cles
http://www.lagardere.com/groupe/chiffres-cles-151.html

Chez RWE Group, on a un diagramme interactif de présentation de chaque branche du groupe, avec un peu de 3D et de la vidéo. Presque parfait.

Magazine vidéo

Quelle que soit la thématique, les magazines vidéos vont bon train et sont souvent dédiés à un domaine particulier. Plus rares sur le terrain purement institutionnel, les espaces vidéos eux-aussi comment à fleurir sur les sites, mais restent timides.

Globalement l’usage de la vidéo est vaste : reportages sur les personnalités du groupe ou collaborateurs, évènements, magazines, vidéo institutionnelle ou dernière publicité en cours… c’est un autre sujet mais il apparait deux cas :

- Il y a des modules très bien habillés, tournés, préparés.
- Il y en a qui frôlent un peu le manque de moyens, mais plus encore, le manque de forme ‘pro’ corporate. Certains sont maladroits. A mon sens, cela donne une touche un peu plus humaine, même si c’est le décalage de qualité entre toutes les vidéos d’un même site qui peut paraitre étrange. En tout cas, il faut bien le baliser.

Full flash, vous avez dit full flash ?

Il en existe un ou deux en effet :
- Site de L’Oréal : très beau site full flash, même s’il n’y a pas de version texte alternative mais de l’URL rewriting. Inconvénients ? Cela prends du temps de chargement à chaque onglet, mais il reste très bien concu. Les limites sont là lorsqu’il y a du contenu plus long : on récupère un ascenseur classique. Autre sujet à base de flash, l’entreprise a par ailleurs depuis longtemps un widget corporate sur le bureau assez sympa et très (trop?) complet.

- Le site portail d’EDF : full flash également mais il y a une optimisation du contenu textuel en version alternative.

Rich media et synchroslides

Très utilisé dans le cadre des rapports financiers et des assemblées générales : vidéo + synchroslides avec gestion de la bande passante. (le bon vieux rich media). Superbe exemple d’habillage chez L’Oréal :
http://loreal.netdirect.fr/080422_loreal/site/Archives/ND_SLIDE_CDROM_001_FR.html

De manière générale, hormis ces synchro-slides, tous ces sites donnent l’impression que le chapitrage sur une simple vidéo ne leur sert à pas grand chose. Je n’en ai pratiquement pas vu. Déjà l’intégration des vidéos pêche parfois au niveau de l’habillage mais intégrer un système de chapitrage, c’est peut-être un peu trop.

(mauvaise expérience avec celui d’EDFoù il faut un plugin windows media webcast.. et chez eux également avec une autre vidéo en flash cette fois, je n’ai jamais eu l’image. Pas si facile.)

Transcript sur les vidéos

Option qui peut intéresser quelques personnes : il y existe différentes vidéos sur tous ces sites qui mettent à disposition les transcripts des vidéos. Un bel effort sur l’accessiblité et le référencement.

Etrangeté

http://www.socgen.com/rse/#la-demarche-qualite
A mi-chemin entre le mini-site et le pdf interactif : on ne sait pas trop sur quel pied danser, et le menu qui disparait en continu et va de droite et de gauche, cela me perturbe personnellement. Mais bon, graphiquement, cela tient la route.

La lecture vocale des pages

Exemples :
http://www.gdfsuez.com/fr/services/lecteur-vocal/?no_cache=1
http://www.bnpparibas.com/fr/develop…20sibles.
http://www.glaxosmithkline.fr/gsk/gsk_monde/index.html

Ces lecteurs audios discrets qui lisent du texte au travers d’une synthèse vocale sont très appréciés et notamment de personnes ayant des difficultés à lire sur un écran, tant la synthèse vocale de leurs propres outils sont parfois mauvais. Petit outil sympathique donc ! Par contre, j’ai un doute sur l’accessibilité du lecteur avec une apparition en Javascript comme c’est le cas chez GDF…

Rapports et PDFs interactifs :

http://www.edf.com/html/RA2007/dd/appli.htm
http://media.bnpparibas.com/fluidbook/Depliant_2008_Vf/
http://www.vinci.com/vinc…ts-annuels.htm#

Je ne comprends pas comment tous ces pdfs publiés à profusion n’ont pas une version automatiquement transformée en flash interactif, à la lecture plus aisée sur le web, et doté d’une bonne ergonomie de zoom. On peut aujourd’hui avoir de très bons systèmes de flipbook avec des moteurs de recherches sur le texte, des envois à un ami, des paniers des pages les plus importantes…

Un peu de 3D ?

Mais oui, chez Statoil Hydro, qui affiche sur un mur des artistes qu’ils soutiennent. C’est le côté mise en avant et galerie permise par la 3D en flash qui est utilisée ici à bon escient.

Aide à la navigation et relation avec un avatar

Le crédit Agricole sur sa page d’accueil permet au visiteur de se renseigner avec un avatar. Souvent cité comme un moyen d’humaniser la relation client, il est mis en valeur ici comme un bon « plan du site » interactif. Mais ce n’est pas le site corporate, je m’égare.

Les worstcases et petites bourdes

- Créer un lien directement sur un mp3, sans lecteur audio en flash. Ce n’est pas compliqué (ca prends 40 minutes à coder pour un flasheur), et cela facilite la vie. Pourtant ne pas proposer les deux usages ?

- On ne fait pas un pop up pointant directement sur un swf… ca demande d’ouvrir le lecteur flash sur le poste interne !!!

- Les menus entièrement en flash (je ne citerais personne tant c’est honteux…), avec des lettres floues, des frames, des ascenseurs qui ne sont pas cliquables, et un plan du site en flash également. (Apothéose !). Sans aucune version alternative HTML, bien sûr…

- Confusion entre un lecteur vidéo et un diaporama de photos (un gif animé quoi..). Eviter les diaporamas si petits que personne ne comprendra que les éléments sont en réalité cliquables.

Mes préférés

http://www.psa-peugeot-citroen.com
http://www.vivendi.com/vivendi/-accueil-en-
http://www.gdfsuez.com/fr/developpement-durable/
Tous les 3 pour leur parti pris ambitieux graphiquement qui ont fait un véritable effort de se démarquer avec uen identité propre, même cela manque ci et là de css sur le texte ou d’allègement de la page en terme de chargement.

http://www.statoilhydro.com
http://www.unicreditgroup.eu
http://www.chevron.com
Et pour leur simplicité, rapidité de navigation et quelques efforts sur l’interactivité et la présentation.

Remarques diverses :

- Au final, le bilan est plutôt positif : il y a un effort de fait sur l’aspect graphique et la navigation en général. On ne rencontre plus guère de grossières erreurs sur l’utilisation en flash classiques d’une époque pas si lointaine. Le flash est utilisé de manière parcimonieuse là où les contenus peuvent être plus interactifs : mise en scène, vidéo et audio, pdf interactif, diaporamas, animations… mais sans pour autant révolutionner le genre. Ces sites sont plutôt suiveurs par rapports à l’énorme source d’innovation que l’on rencontre dans d’autres domaines, même si le tour n’est pas inintéressant à faire.

- On voit poindre des technologies classiques utilisées : swfobject, SiFR, et des techniques de référencement avec du contenu alternatif. C’est bien !

- Une vidéo qui démarre automatiquement mais sans son (attention important!) bien mise en scène, je trouve cela sympathique en fin de compte. Exemple.

- Je suis tombé sur quelques 404. Ce n’est pas sérieux, allons…. Soyez utilisateur de vos propres sites !

- Ce genre de site est complexe à réaliser : surcharge de l’information, ergonomie et clarté de l’architecture de l’information tant tout est dense. Faire passer tel ou tel contenu plutôt qu’un autre, faire ressortir son identité, cela n’est pas chose facile. Sans parler des barrières techniques de plateformes parfois préhistoriques et des questions politiques. bref, soyons indulgents, mais il sera intéressant de voir comment ce type de communication évolue.

- Pour le reste des remarques, je les garde, ce n’est pas le sujet ici… ^