rechercher sur ergolab

s'abonner au fil rss
newsletter

Entrez votre adresse e-mail pour être informé de l'ajout de nouveau contenu :

 

» En savoir plus

21 Décembre 2004

Ergonomie et Flash

TAGS : Animations, Flash, Navigation

accueil > articles > questions existentielles > Ergonomie et Flash

« Liste des articles


Introduction
1. L'ergonomie n'est pas affaire de technologie
2. Flash et qualité d'utilisation
2.1. Perception cognitive de l'interface
2.2. Animation
2.3. Utilisabilité de la navigation
2.4. Poids des pages
2.5. Compatibilité
2.6. Contrôle utilisateur
2.7. Accessibilité
2.8. Gestion du contenu textuel
2.9. Restitution ou création d'un univers
Conclusion
Pour en savoir plus...

Introduction

La technologie Flash a souvent été considérée comme "anti-ergonomique". Cet article présente les avantages et inconvénients du Flash du point de vue de l'ergonomie. L'idée principale est qu'un site en Flash n'est pas foncièrement mauvais. Son utilisation peut en effet optimiser la qualité d'utilisation d'une interface informatique.

1. L'ergonomie n'est pas affaire de technologie

L'utilisation du Flash peut rester dans le cadre des recommandations ergonomiques. Il s'agit de ne pas mélanger les problématiques et de recentrer le débat: on ne doit pas être dans le "Flash ou pas Flash?", ni dans les assertions du type '"Flash XX% bad" (voir Jakob Nielsen dans les lectures complémentaires), mais plutôt dans le "Comment faire du bon Flash".

"Faire du bon Flash", comme "Faire du bon web", c'est le concevoir avec toujours en tête les préoccupations et caractéristiques de la cible finale. Un site en Flash peut donc être plus utilisable que son équivalent en html. En effet, concevoir un site utilisable, c'est d'abord appliquer une démarche qui se préoccupe des utilisateurs finaux et de l'expérience qu'ils auront en naviguant sur le site.

Le Flash comme outil technique ne peut pas remplacer cette démarche centrée utilisateur. Ce sont principalement les étapes de conception qui déterminent la qualité d'utilisation finale du site. La réalisation (par exemple à travers la technologie Flash) n'est que la mise en oeuvre de principes déterminés en amont, augmentée de choix techniques et graphiques.


When executed correctly, with attention paid to the needs and wants of users, Macromedia Flash content can actually improve the user experience on any Web site. Chris MacGregor, Flazoom.com


On évoque souvent le rapport entre ergonomie et Flash dans des termes négatifs. Cela tient principalement au fait que l'utilisation de l'outil Flash est risquée du fait même de sa flexibilité. Elle offre en effet une très grande liberté au concepteur:

"Flash is like having your very own Lego factory. It is a powerful tool and powerful tools are open to abuse. Giving people the power to make their own interfaces is the usability equivalent of giving handguns to small children. Most of the time the results are ill thought out and not very pretty." (John Dalziel, O.S. to - Usability and Flash, cf. lectures complémentaires).

Il est donc essentiel de définir d'abord le comportement et l'apparence de l'interface avant de passer à la réalisation technique. Ce procédé permet de ne pas se laisser submerger par les possibilités de conception étendues du Flash.

2. Flash et qualité d'utilisation

La technologie Flash influence la qualité d'utilisation d'un site web, que ce soit de façon positive ou négative. En évoquant le rapport entre Flash et qualité d'utilisation, notre objectif n'est pas de lister toutes les recommandations d'ergonomie, qui s'appliquent dans les interfaces flash comme dans les autres interfaces informatiques.

L'idée n'est donc pas de donner des pistes pour concevoir un site plus ergonomique, mais plutôt d'évoquer les thématiques clés liées à l'utilisation du Flash, et les défauts d'ergonomie souvent rencontrés.

Avant de se lancer dans la réalisation d'un site en Flash, on doit se demander si c'est réellement pertinent: qu'est-ce que l'utilisation de cette technologie apportera à la qualité globale du site, quel est l'objectif du site, les caractéristiques de la cible utilisateur, des contenus à présenter, etc. L'idée est que le Flash doit apporter quelque chose de notable par rapport à une interface en html.

Un des plus grands défauts des sites Flash réside en effet dans un mauvais choix de technologie au regard des objectifs et des contenus du site: on choisit de concevoir un site en Flash alors que ce n'est pas l'outil le plus adapté. La conception centrée utilisateur commence là, dans la décision d'utiliser le meilleur outil (ou la meilleure combinaison d'outils) pour supporter les objectifs d'un site.

La combinaison de Flash avec d'autres technologies web permet de profiter de ses avantages et de combler au mieux ses inconvénients. Il s'avère que les sites qui réussissent à profiter des caractéristiques du Flash de façon optimale sont rarement des sites entièrement construits en Flash. On peut en effet utiliser cette technologie uniquement pour les éléments de navigation, des démonstrations animées, de la publicité, etc.

La seconde partie de cet article vise donc à souligner les principales caractéristiques du Flash, afin de pouvoir bénéficier de ses avantages et limiter au mieux ses défauts.

2.1. Perception cognitive de l'interface

Les interfaces Flash et html classique se comportent selon deux modèles différenciés, qui affectent notre activité cognitive et conditionnent la facilité que nous avons à intégrer et comprendre ce qui se passe à l'écran :



Illustration du modèle Flash et du modèle Html.


Deux modèles d'interaction différents régissent les interfaces Flash et Html classique. Ils se distiguent principalement par la latence séparant deux états d'une page. Cette latence se manifeste souvent dans les sites Html par un "blanc" de quelques secondes.




» Le modèle Flash (une continuité visuelle qui facilite la continuité cognitive)

La réactivité d'une interface Flash est souvent telle que le rechargement d'informations dans la page est quasi-instantané. La latence dans les interfaces Flash est en général si faible qu'elle n'est pas perçue.

Si cette réactivité du Flash est parfois mise en défaut par des opérations complexes sur une base de données ou des scripts externes, elle n'atteint jamais les proportions du modèle Html.

Notre activité cognitive peut donc être entièrement dirigée vers la détection de nouvelles informations et la comparaison avec l'état précédent. Le modèle Flash permet en outre de libérer l'attention de l'utilisateur pour ses activités finales (acheter un produit, trouver une information, lire un article en ligne, etc.). Il facilite donc la réalisation des objectifs de l'utilisateur, et ne sollicite pas ses ressources pour des activités intermédiaires.

Ce modèle, qui permet de fournir un feedback presque immédiat aux actions des utilisateurs, se distingue de la linéarité du modèle web, pour proposer une présentation beaucoup plus souple des informations à l'écran.

Enfin, la rapidité de réponse d'une interface Flash va de pair avec la rapidité avec laquelle l'utilisateur pourra réaliser sa tâche. Entre ici en compte la notion d'efficience, qui fait partie de l'utilisabilité (en effet, cette dernière ne se limite pas à la facilité d'utilisation, cf. notre article sur l'ergonomie informatique). Plus l'utilisateur aura les moyens d'accomplir rapidement ses objectifs, plus il pourra être efficient, plus l'utilisabilité du site sera augmentée.

Cet avantage est annulé lorsque le site nécessite des périodes de chargement intermédiaires. On retombe alors dans un modèle de type Html, avec souvent des temps de latence élevés entre chaque page.


» Le modèle Html (une charge cognitive dépendante de la latence)

La navigation sur le web suit classiquement la règle suivante: Page > clic > temps de chargement > page. Ce modèle prévaut dans la plupart des sites en html classique. Pourtant, il entre en contradiction avec nos capacités cognitives.


De façon simplifiée, le modèle Html consiste à demander aux utilisateurs de mémoriser l'état de l'interface pendant le temps de latence, puis de comparer cet état initial avec celui de la nouvelle page. Plus la latence entre ces deux pages est importante, plus l'intégration mentale des éléments demandera de ressources.

De plus, le rechargement d'une page modifie souvent l'emplacement précédent des éléments dans la page. Cela représente une charge cognitive très importante, qui s'ajoute à d'autres activités vers lesquelles les utilisateurs mobilisent leur attention (prise de décision d'achat, comparaison mentale de caractéristiques de produits, détection d'informations pertinentes, etc.).

Ce type de modèle risque enfin d'entraîner une réaction émotionnelle qui peut influencer le comportement de l'utilisateur: il est pénible de devoir attendre le chargement d'une page, et ce ressenti peut perturber l'activité en cours.

Le modèle html classique fonctionne cependant différemment en fonction du poids des pages, de la rapidité de la connection et des opérations serveur. Il peut être optimisé par l'ajout de composants spécifiques (notamment Javascript). L'idée consiste à tout mettre en oeuvre pour limiter le temps de latence entre deux pages, ou ne recharger que les "portions" de pages nécessaires. Ainsi, on peut mettre à jour le contenu d'un panier virtuel sans recharger la page entière.

2.2. Animation

L'utilisation de Flash est en grand partie liée à la possibilité d'animer le contenu. L'animation peut avoir des avantages et des inconvénients, en fonction de sa pertinence et des caractéristiques de sa mise en oeuvre.

On doit d'abord prendre en considération la pertinence de l'animation: est-elle utile, permet-elle d'améliorer l'utilisabilité de l'interface, d'apporter une véritable valeur ajoutée au contenu, etc. Ensuite, lorsque l'on a décidé de présenter une animation, on doit la réaliser de telle manière qu'elle soit tout à fait utilisable.


» Utiliser l'animation pour attirer l'attention

L'animation peut permettre de capter l'attention de l'utilisateur sur un endroit de la page lors de son chargement, puis de le laisser se concentrer sur ce qui l'intéresse réellement.

Du point de vue ergonomique, on doit faire la différence entre des animations qui se jouent une fois et un mouvement continuel sur l'écran. L'animation permet certes d'attirer l'attention, mais l'objectif doit être d'attirer l'attention temporairement sur un endroit précis de l'interface.

Les animations qui se jouent en boucle perturbent en effet la lecture du reste du contenu, et risquent d'agacer les utilisateurs. C'est d'ailleurs une des raisons pour lesquelles on assiste au phénomène de "banner blindness": tout ce qui ressemble de près ou de loin à une bannière de publicité tend à être ignoré par les internautes.

On recommande donc de ne jouer les animations qu'une seule fois, afin que l'utilisateur les remarque lors des premières secondes de sa visite, et puisse continuer son exploration du reste du contenu sans être perturbé.

Un dernier point essentiel concerne l'animation des textes. Ce procédé est rarement bénéfique, car il perturbe la lecture et n'apporte souvent pas de plus-value réelle.


» Utiliser l'animation pour faciliter la compréhension de processus

Un des avantages du Flash est de pouvoir représenter des objets en mouvement. Ce concept d'animation permet d'optimiser la présentation de processus (par exemple: explication d'un fonctionnement mécanique, physique, biologique, représentation de l'évolution d'un objet dans le temps...). Elle permet de comprendre facilement la transition entre un état initial et un état final.


L'utilisation de la technologie Flash permet donc d'atteindre un objectif didactique plus facilement qu'avec une page web statique.
Là encore, le Flash peut augmenter l'utilisabilité de l'interface puisqu'il permet d'augmenter la facilité / rapidité de compréhension des utilisateurs finaux.



Copie d'écran de la démo Flash du jeu Perudo.
Source: Perudo.net
La présentation des règles du jeu Perudo de façon animée permet de faciliter leur compréhension. On se trouve donc dans une situation où le recours au Flash augmente l'utilisabilité du site.




» Utiliser l'animation pour influencer la représentation mentale

Le Flash permet de contrôler facilement l'ordre d'apparition des éléments à l'écran. C'est une problématique très importante en termes d'ergonomie, puisqu'on peut décider quelle importance on accorde à chacun des éléments, et influencer leur intégration cognitive. L'animation permet ainsi de souligner les relations entre les informations, et leur importance.

2.3. Utilisabilité de la navigation


» Contrôle des fonctionnalités du navigateur

Un des problèmes fréquemment rencontrés dans les sites web développés en Flash est que les utilisateurs ne peuvent plus se servir des fonctionnalités de base de leur navigateur. Par exemple, il est rarement possible de se servir des boutons "Précédent" et "Suivant" du navigateur.

Ce comportement, qu'il savent ou croient pouvoir appliquer sur tous les "sites Internet", devient erroné sur la plupart des sites en Flash. En effet, le bouton "Précédent" ne fonctionne pas par défaut dans les sites en Flash. Au lieu de ramener l'utilisateur à l'étape précédente du site Flash, il le ramène à la dernière page html visitée.

Ces fonctionnalités du navigateur sont pourtant le repère le plus important pour l'utilisateur: quoiqu'il arrive, il sait qu'il peut corriger son erreur grâce au bouton "Précédent". C'est d'ailleurs l'élément de navigation le plus utilisé par les internautes. Rendre inefficace cette fonction diminue l'utilisabilité du site, mais risque aussi de diminuer la confiance que l'utilisateur accorde au site.

Pour contourner ce défaut, il est possible de fournir dans le site lui-même un bouton "Retour". Toutefois, ce type de bouton est rarement utilisé, au profit des contrôles du navigateur, plus connus des utilisateurs.

D'autres techniques existent pour profiter des fonctionnalités "Suivant" et "Précédent" du navigateur: on peut ainsi placer chacune des parties logiques du Flash dans des pages html distinctes, ou recourir à des scripts spécifiques pour contrôler le comportement des boutons suivant et précédent.

S'il n'est pas possible de faire se comporter les boutons du navigateur de façon conventionnelle, on peut aussi les supprimer, c'est à dire que l'utilisateur ne peut pas faire l'erreur de cliquer dessus.
Cependant, ce type de procédé n'est pas recommandé, car il représente encore une perturbation pour l'utilisateur. Supprimer tout le contexte habituel oblige l'utilisateur à chercher de nouvelles solutions pour atteindre ses objectifs. Certes, il ne peut pas faire l'erreur de cliquer sur "Précédent", mais on ne lui laisse pas le choix de prendre cette décision, et on le perturbe dans sa représentation habituelle de la consultation d'un site web.

Les contrôles du navigateur ne se limitent pas aux boutons de navigation. Les fonctionnalités d'impression et de favoris sont aussi souvent dégradées dans les sites en Flash. La technique consistant à placer chaque partie du Flash dans une page html résoudra le problème des favoris. Quant à l'impression, le concepteur devra recourir à des scripts spécifiques pour créer des versions imprimables qui reprendront le contenu du Flash.


» Les éléments de navigation dans le site

La présentation des éléments de navigation (menus, liens, boutons) est souvent très originale dans les sites en Flash. Or, une des règles en ergonomie consiste à essayer de capitaliser sur les apprentissages antérieurs des utilisateurs.

Dans cet objectif, on doit présenter les éléments de contrôle d'un site de façon cohérente avec les conventions web. Par exemple, les utilisateurs détecteront plus facilement qu'un élément leur permet de faire défiler du contenu s'il est présenté de façon standardisée. Ils l'utiliseront aussi plus facilement, car ils ont acquis des réflexes moteurs en naviguant sur les autres sites.

De plus, la consistance de la navigation est rarement respectée: elle n'apparaît pas sur toutes les pages, pas toujours au même endroit ni sous la même forme, etc. Or, les objectifs d'utilisabilité d'un site en Flash ne sont pas différents de ceux d'un site en html: les utilisateurs ne doivent pas avoir de difficultés à naviguer. Il peut certes être amusant de découvrir un principe de navigation, de jouer le jeu de découvrir ce principe, de le remettre en question sur toutes les pages, mais la navigation dans un site ne peut pas reposer sur ce type de procédé.
Pour que les utilisateurs n'aient pas à chercher la navigation, les menus et liens doivent apparaître en tant que tels. On déconseille par exemple de ne faire apparaître les informations clés qu'au passage de la souris.

Enfin, la loi de Fitts est rarement mise en pratique sur les sites en Flash. Elle consiste à dire qu'une cible sera d'autant plus facile à atteindre qu'elle est proche et grande.

Lorsque l'on conçoit des éléments cliquables en Flash, il est donc important de leur donner une surface cliquable assez grande pour que le travail de ciblage avec le pointeur de la souris soit facilité. Dans le cas d'un bouton de navigation, on ne doit pas limiter la surface cliquable au contour du texte :


Surface de la zone cliquable. Dans la version 1, la zone cliquable du bouton est restreinte autour du texte, alors que dans la version 2 elle s'étend jusqu'au rectangle composant le bouton.

Dans la version 1, l'utilisateur aura plus de mal à cliquer sur le bouton, du fait de la taille réduite de la zone cliquable. Il peut de plus être induit en erreur par la forme rectangle, qui semble indiquer que tout ce qui est contenu à l'intérieur de ce rectangle est cliquable

La version 2 du bouton est plus utilisable: elle permet à l'utilisateur de cliquer sur le bouton plus facilement (avec moins de risque d'erreur) et aussi plus rapidement.




De plus, on doit concevoir l'interface de façon à limiter le risque d'erreur entre un item et un autre. Il doit donc exister une surface non cliquable entre deux éléments cliquables:


Distinction des zones cliquables. Dans la version 1, les boutons sont collés l'un à l'autre, alors que dans la version 2 ils sont séparés par un espace non cliquable.

En 1, la distinction entre les deux boutons n'est pas suffisante pour éviter toute erreur de l'utilisateur. Il convient de les présenter de façon plus distincte, comme en 2.



Autrement dit, on doit augmenter la surface cliquable de chaque élément et la distance entre les éléments cliquables.

La loi de Fitts n'est bien sûr pas applicable uniquement dans les sites en Flash. Cependant, étant donné que l'on constate qu'elle est souvent mise en défaut, il semble important de la rappeler. Encore une fois, ce n'est pas le fait que le site soit conçu en Flash qui pose ces problèmes de navigation. C'est le concepteur qui choisit ce qu'il veut demander au Flash.

2.4. Poids des pages

Un des défauts d'utilisabilité des sites en flash réside dans les délais de chargement des pages. Ce n'est pourtant pas le Flash en lui-même, mais le manque d'optimisation des contenus qui pose problème.

En effet, une des caractéristiques du Flash est de pouvoir traiter des images vectorielles, qui sont très légères. Il intègre en outre des algorithmes de compression performants, qui permettent de générer des contenus optimisés en termes de poids. Par exemple, construire une navigation en Flash peut être plus léger qu'une solution images et Javascript:




Illustration du top du site Perudo: la version Flash pèse 44 Ko au total, alors que la version Html (images et Javascript) pèse 50 Ko.

Source: Perudo.net
La navigation du site Perudo est moins lourde dans sa version Flash que dans sa version Html + Javascript.




Dans la pratique, les sites en Flash sont souvent très lourds et demandent un temps de chargement important. Il est important de noter que l'ajout de son et de vidéo augmente considérablement le poids d'un site. Quelques astuces permettent d'optimiser le poids des pages et donc les durées de chargement.


Une des solutions consiste à pratiquer le préchargement avancé. En utilisant cette technologie de streaming, on peut commencer à présenter des contenus aux utilisateurs pendant que le reste du site continue à se charger. Cela permet de réduire le temps de chargement initial du site. On doit optimiser ce préchargement en chargeant au fur et à mesure non pas de façon linéaire, mais en suivant chacune des options de l'architecture en parallèle.

De plus, lorsque l'on demande à l'utilisateur d'attendre que le contenu se charge, il est indispensable d'afficher un indicateur de progression du chargement. La page d'attente devra aussi fournir un lien vers la version Html du site si elle existe. Cela permettra aux utilisateurs ayant le plug-in Flash nécessaire mais ne souhaitant pas attendre que la version Flash se lance de pouvoir consulter une version Html, souvent plus légère.

La recommandation la plus importante consiste à se préoccuper du poids des pages: il s'agit surtout de ne pas concevoir une animation Flash sans jamais s'intéresser à son temps de chargement.

On peut notamment se donner un poids maximal avant de commencer à concevoir l'animation. Cette limite en termes de poids sera déterminée en fonction du temps maximal de chargement que l'on peut accepter. Il est donc dépendant des caractéristiques des plate-formes cibles (par exemple, pour un site très grand public, le temps maximal de chargement sera calculé sur la base du débit atteignable avec un modem 56Ko). Le testeur de bande passante intégré au logiciel Flash permet de visualiser l'apparence du site en fonction du débit du poste client, et le débit nécessaire pour charger chacun des éléments du site.

2.5. Compatibilité

L'affichage d'un site en Flash est dépendant du poste client. En effet, pour voir un site en Flash, l'utilisateur doit disposer d'un plug-in spécifique. On doit donc développer en fonction des statistiques de pénétration des plug-in Flash chez les utilisateurs cibles.

Pour éviter de demander à l'utilisateur d'installer le plug-in Flash, on peut détecter sa configuration. S'il ne dispose pas du plug-in nécessaire, on lui affiche automatiquement une version html de la page. Au-delà de cet avantage au niveau de la compatibilité, développer une version html du site a d'autres avantages, principalement au niveau de l'accès au contenu textuel, de l'accessibilité et du référencement.


Illustration des deux versions du site 75: la version Flash s'affiche lorsque l'utilisateur a le plug-in nécessaire. Elle a l'avantage d'être esthétique, de restituer un univers graphique, et d'être animée. La version Html s'affiche lorsque l'on détecte que l'utilisateur n'a pas le plug-in nécessaire pour voir le site en Flash. Ses points forts sont l'accessibilité visuelle et technologique et le référencement.



La nécessité de disposer d'un plug-in peut aussi être vue comme un avantage. En effet, elle permet que le site s'affiche de la même manière quelque soit la plate-forme de consultation, si le plug-in est installé et que les performances de l'ordinateur sont suffisantes (des problèmes de performance peuvent causer des défauts de synchronisation entre son et image). Cette stabilité de la présentation reste tout de même un des grands avantages du flash par rapport à toute autre technologie web.

2.6. Contrôle utilisateur

Une des principales règles en ergonomie informatique consiste à donner à l'utilisateur le contrôle du système.

On ne doit pas afficher des informations ou lancer des actions sans qu'il l'ait décidé, et le laisser maître du comportement de l'application.

Le Flash offre beaucoup de possibilités d'interaction, mais cette liberté au niveau du développement pénalise souvent les utilisateurs dans leur niveau de contrôle de l'interface. On voit ainsi de nombreuses interfaces qui jouent toutes seules, dans lesquelles l'utilisateur ne peut pas interrompre des processus engagés, qui présentent les sites en plein écran, sans les contrôles du navigateur, etc.

» Flash ou html?

L'utilisateur doit pouvoir décider de voir la version Flash ou la version html d'un site. Il ne s'agit pas forcément de lui demander de faire un choix avant même d'entrer sur le site, mais plutôt de fournir des liens réciproques entre les versions. Ainsi, pendant le chargement de la version Flash, l'utilisateur peut décider de lancer la version html.

Ces liens réciproques devraient être les plus compréhensibles par les utilisateurs: rares sont ceux qui savent ce qu'est le Flash, ou le html. Puisque ce qui détermine le choix entre l'une ou l'autre des deux versions est souvent la rapidité de chargement, on peut parler de versions bas-débit (html) ou haut-débit (flash). Il faut trouver des labels de liens qui soient compréhensibles par les novices, et clairs pour les utilisateurs plus expérimentés.


» Intro

On peut dire qu'en général, la passivité sur Internet n'est pas un comportement apprécié des internautes. Il ne le devient que dans des cas bien spécifiques, notamment pour la vidéo ou les animations pédagogiques.

L'utilisateur doit pouvoir choisir de ne pas voir les introductions animées qui vantent les mérites inestimables du site ou de la société qui se cache derrière ce site. On doit donc lui fournir un moyen de voir immédiatement le contenu du site. Ce lien "skip intro" devient une convention dans le domaine du web. Cependant, pour un site francophone, il convient de le nommer "passer l'animation", ou en tout cas de ne pas présenter ce lien en anglais.

Il est aussi appréciable de détecter que l'utilisateur a déjà vu l'introduction et donc de l'amener directement sur la page d'accueil du site.


» Son

L'insertion de son sur un site Flash est une problématique critique en ergonomie. Elle suppose en effet que le son ne perturbe pas l'utilisateur dans son activité, et qu'il améliore réellement l'expérience utilisateur. Et c'est rarement le cas.

D'abord parce qu'un site web n'est pas censé "faire du bruit". Il faut ajouter à cela que le volume de la bande son est souvent mal réglé (souvent trop fort), et que les utilisateurs ont parfois déjà un fond sonore lorsqu'ils naviguent sur Internet.

D'autre part, le son est souvent joué en continu, alors qu'il est préférable d'intégrer des "virgules sonores", c'est à dire des sons qui n'apparaissent que simultanément à une action utilisateur ou un événement à l'écran. Ce type de sons permet d'insister sur cet événement, de lui donner un sens particulier. A l'inverse, un fond sonore continu devient vite fatiguant, d'autant que les sons sur un site sont souvent des boucles musicales, qui sont rarement très longues.

On se trouve fréquemment confronté au problème de détecter d'où vient la musique d'un site: il suffit que l'utilisateur ait plusieurs sites ouverts, et que la musique se charge en fond pendant qu'il consulte visuellement un autre site. Il est alors difficile de trouver rapidement d'où vient le son. La stratégie utilisateur consistera d'abord à chercher dans le site qu'il regarde ce qui peut lui permettre d'arrêter la musique. Ce n'est qu'après avoir compris que ce n'est pas le site affiché qui diffuse la musique qu'il pourra commencer à chercher le site sonore. Autant de temps pendant lequel il peut maudire le site en question, ses concepteurs, et plus largement la société ou la marque représentée.

Lorsque l'on choisit d'intégrer du son dans un site, on doit repsecter les recommandations suivantes: l'utilisateur doit pouvoir choisir d'entendre ou non le son d'un site, de préférence avant qu'il se lance. Il doit de plus pouvoir en contrôler facilement le début, l'arrêt, et éventuellement le volume.


» Gestion des animations

Le déroulement d'une animation didactique ou informationnelle doit pouvoir être géré par l'utilisateur. Cela suppose qu'elle soit découpée en tranches logiques. On fournira des fonctions de précédent, suivant et de menus, permettant de passer d'une partie logique à une autre. De plus, on doit proposer une fonction de lecture / pause.

2.7. Accessibilité

Il est difficile de résoudre tous les problèmes d'accessibilité que pose un site en Flash. Fournir une version html respectant les standards d'accessibilité permet de s'assurer que le contenu du site sera accessible à tous.

Pour optimiser l'accessibilité d'un site en Flash, on doit respecter certaines règles. Les informations importantes ne doivent absolument pas être présentées uniquement de façon sonore, car nombreux sont les visiteurs qui n'entendront pas ces informations (aussi bien les malentendants que les gens qui n'ont pas de sortie auditive sur leur ordinateur, ou ne l'ont pas activée).

On doit aussi intégrer des contenus alternatifs, équivalents à la version visuelle: textes, raccourcis claviers, navigation sans la souris, contenus alternatifs aux sons et vidéos. Comme dans les sites html, on veillera à nommer tous les éléments de navigation, les liens, les images.

Pour aider les concepteurs à implémenter des fonctions clés pour permettre l'accès des sites Flash à tous les internautes, Macromedia propose un kit ainsi que des extensions pour l'accessibilité.

Une des manières d'optimiser l'accessibilité consiste à gérer le contenu textuel de sorte qu'il puisse être traité par des machines. En effet, on observe que les sites qui sont accessibles par les moteurs de recherche sont aussi souvent ceux qui sont accessibles physiquement.

2.8. Gestion du contenu textuel

Les sites en Flash posent fréquemment des difficultés d'interaction avec le contenu. En effet, il pose souvent des problèmes de lisibilité, d'accessibilité et de référencement. De plus, les comportements "classiques" pour les utilisateurs sur le web (copier / coller du texte à partir d'un site web, utiliser l'ascenseur ou la roulette pour descendre dans la page, etc.) sont parfois bouleversés sur les sites en Flash.

Lorsqu'on a une quantité importante de texte à présenter, on doit donc se demander si Flash est le meilleur outil pour présenter ces informations.

Pour présenter du texte efficacement en Flash, il faut utiliser la propriété "texte dynamique". Elle permet d'obtenir du texte aliasé et sélectionnable. Ce format facilite la lecture à l'écran, et permet à l'utilisateur de copier / coller des informations à partir du site.

Contourner ce défaut du Flash permet aussi de résoudre certains des problèmes liés au référencement. Cependant, il n'existe actuellement pas d'autre solution fiable que de concevoir une version html du site pour optimiser son référencement par les moteurs de recherche.

2.9. Restitution ou création d'un univers

L'utilisation de Flash correspond souvent à un besoin d'image: en comparaison d'un site statique en html, le Flash apporte une note esthétique non négligeable, et permet de restituer un univers.



Source: irene.fr L'utilisation de la technologie Flash pour le site d'Irene permet de créer une expérience d'utilisation qui correspond à l'esprit de cette société de production.

Un message publicitaire fort lié à l'image peut difficilement être transmis avec une technologie basée sur le texte. Le Flash permet à l'inverse de créer facilement des interactions ludiques, efficaces et interactives.

Conclusion

L'utilisation de la technologie Flash n'est pas à proprement parler anti-ergonomique. Le Flash peut même optimiser l'utilisabilité d'un site, lorsqu'il est employé de manière pertinente. On peut résoudre certains des défauts du Flash du point de vue de l'ergonomie, et bénéficier de ses avantages pour générer une expérience utilisateur réussie.

Concevoir un site en Flash qui soit ergonomique se fait de la même manière que pour un site en Html. Appliquer le cycle de conception centrée utilisateur et respecter les critères ergonomiques permet ainsi de concevoir des sites utiles et utilisables, quelque soit la technologie employée.

Pour en savoir plus

» Ressources en ligne


Developing User-Friendly Flash Content

, Chris MacGregor, Flazoom.com.
(Version pdf à télécharger sur le site de Macromedia, 774 Ko)

Une traduction française du livre Blanc de Chris MacGregor: Développer des contenus Flash utilisables, Vincent Bénard, Veblog, 2001.

The Flash Usability Guide, Chris MacGregor: téléchargement du chapitre 9, "Think Accessibility" (pdf, 205 Ko).

Flash Usability, Meryl K. Evans, Digital Web, 2002.

Top 10 Tips For Usable Flash, Stephanie Reindel, Thunder Lizard Productions, 2002.

Flash: 99% Good, Michael Truese, SitePoint, 2001.

Macromedia Flash, Pros and Cons, Wikipedia.

To Flash or Not To Flash?, Usability and User Engagement of HTML vs. Flash. David T. Schaller & Steven Allison-Bunnell, Educational Web Adventures / Anthony Chow, Paul Marty & Misook Heo, Florida State University, USA.


--- EMLLABS -------

Decisive Flash 101, Eddie Wilson, EML Labs, 2004.

Decisive Flash 102, Eddie Wilson, EML Labs, 2004.


--- FLASH 99% GOOD -------

Le chapitre 1 du livre Flash 99% Good (Ying and Yand of design and Usability) à télécharger en version pdf (152 Ko).

Le chapitre 8 (The Future of Flash) à télécharger en version pdf (7.43 Mo).

www.flash99good.com, " This site is for Flash designers who want to skip the piss and vinegar of the so called "usability" experts and get right to the solutions for your Flash usability problems.". Difficile de faire plus clair. Le site "compagnon" du livre.

Flash Usability Tips. L'ancien compagnon web du livre Flash 99% Good présente 10 tips à appliquer pour concevoir des sites Flash utilisables.


--- FLASH MAGAZINE -------

We've Got Flash - The Ominous Wow Factor and Its Adverse Affect on Usability, Stephanie Reindel, Flash Magazine, 2002.

Myth-Conceptions about Flash, Michael Truese, Flash Magazine, 2001.

Flash + Information Visualization = Great User Experiences, Matthew Klee, Flash Magazine, 2001.

O.S. to - Usability and Flash, John Dalziel, Flash Magazine, 2001.


--- INFORMIT -------

Flash Usability: 25 Tips for Better Websites, Dave Emberton, InformIt, 2001.

Flash Usability: Sizing Up Text, Part 1, Michelangelo Capraro & Duncan McAlester, InformIt, 2002.


--- MACROMEDIA -------

Macromedia's Top 10 Usability Tips for Flash Web Sites

Creating Accessible Content in Macromedia Flash MX 2004: Best Accessibility Practices

Design Firm Tests Macromedia Flash Usability Tips, une étude comparative entre un site en Flash respectant les 10 critères d'utilisabilité Macromedia, et un ne les prenant pas en compte.

» Tout sur l'ergonomie de Pet Market, une application prototype en Flash:

Enhancing User Interaction in Pet Market, Will Schroeder, Christine Perfetti & Jared M. Spool, User Interface Engineering (Fichier pdf, 1.25 Mo).

Usability review of the Pet Market Demo, Jakob Nielsen.

The Usability Testing Process for PetMarket, Eric Pressman.

Macromedia Flash: A New Hope for Web Applications, Christine Perfetti & Jared M. Spool, User Interface Engineering (Fichier pdf, 1.85 Mo).


--- USEIT -------

Flash and Web-Based Applications, Jakob Nielsen's Alertbox, November 25, 2002.

Flash: 99% Bad, Jakob Nielsen's Alertbox, October 29, 2000.

Guidelines for Multimedia on the Web, Jakob Nielsen's Alertbox, December 1995.


--- VEBLOG -------

Flash et design d'interfaces : un exemple intelligent, Vincent Bénard, Veblog, 2002.

Flash : bientôt la maturité ?, Vincent Bénard, Veblog, 2001.

Design : faut il brûler flash ?, Vincent Bénard, Veblog, 2000.


» Ressources externes

Kevin Airgid & Stephanie Reindel (2002). Flash 99% Good: A Guide to Macromedia Flash Usability, Osborne / McGraw-Hill.
> Lire la chronique d'Ergolab

Chris MacGregor, Crystal Waters & David Doull (2002). The Flash Usability Guide: Interacting with Flash MX, Wrox Press.

Duncan McAlester & Michelangelo Capraro (2002). Skip Intro: Flash Usability and Interface Design, Pearson Education.






« Liste des articles

à voir aussi sur Ergolab
Flash 99% Good

Kevin Airgid & Stephanie Reindel

» Lire la chronique


Flash

Un logiciel intéressant pour concevoir des maquettes interactives associant image et son, mais qui nécessite un minimum d'apprentissage.

» Visiter le site


ergolab