veblog

liste de diffusion | contact

 accueil > archives > ergonomie, design web > Flash et design d'interfaces : un exemple intelligent


liens associés

sur veblog.com

Les défauts des navigateurs comme support d'interface ont été analysés ici.

Flash a déjà suscité pas mal d'écrits sur ce site:
-
Faut il bruler Flash ?
-
Livre blanc sur l'utilisabilité de Flash
-
Flash, bientôt la maturité ?

ailleurs sur le web

I-hotelier et l'hotel Broadmoor, l'exemple étudié ici

Une interview de Jeremy Allaire (CTO de macromedia) sur l'avenir de Flash

Téléchargez Flash 6, çà vaut le coup.
(Les versions précédentes m'avaient laissé de marbre)

Flash et design d'interfaces : un exemple intelligent
vers une nouvelle génération d'interfaces web ?
page créée le: 04/02/2002
réagir à cet article

Résumé: Le monde du web n'a pas réellement trouvé de moyen satisfaisant pour créer des bonnes interfaces pour des applications évoluées à travers un navigateur. Mais l'amélioration constante de technologies "post-HTML", comme Flash, laisse entrevoir de belles possibilités, comme le montre l'exemple limité mais instructif de système de réservation en ligne étudié dans cet article.

Des interfaces HTML trop primitives pour des applications complexes

ASP: le flop - Alors que le microcosme des NTIC prévoyait, il y a deux ans, un avenir brillant aux logiciels distribués via le net ou au sein d'intranets, force est de reconnaître que ce modèle ne perce pas. La principale raison, selon moi, est que les interfaces utilisateur de ces outils constituent un très fort recul par rapport à une bonne vieille application "classique" bien dessinée. Cette raison est souvent sous-estimée par de nombreux analystes qui préfèrent mettre en exergue "le manque d'habitude des consommateurs" par rapport à un tel mode de distribution ou de fonctionnement des logiciels...

Foutaises. La vérité est que personne n'a envie d'écrire un long texte à travers un formulaire web, car ces interfaces sont trop pénibles à utiliser vraiment. Pour l'instant, les interfaces web ne sont populaires que pour des applications nécessitant une interactivité limitée et peu d'appel à la créativité de l'usager.

Les interfaces servies en "bête html" à travers un navigateur ont de graves défauts, déjà évoqués sur ce site. Rappelons essentiellement: 

  1. Une interactivité limitée à l'usage de formulaires, qui permettent d'offrir très peu de commandes, ne supportent pas de fonctions de type "dessin", le glisser déposer, des capacités de mise en forme médiocre...
  2. Une quasi-impossibilité d'implanter convenablement des fonctions comme "save" (même si l'utilisateur ferme son navigateur par erreur), "undo" (et non, la touche back du navigateur ne joue pas ce rôle...), ...
  3. Et surtout, la transformation d'un objet sur une page implique le plus souvent de recharger toute la page, ce qui impose une charge cognitive importante à l'utilisateur: effacement, rechargement, reprise en compte d'un nouvel emplacement de l'objet sur la page (la mémoire des barres de défilement est rarement conservée), etc...

Les designers ont tenté de contourner ce dernier point par l'utilisation des frames, mais ce dispositif relève du rafistolage technologique et fait supporter de nombreux autres inconvénients à l'internaute, hors du champ de cet article.

Améliorer les navigateurs - Toutefois, le navigateur, de par son caractère universel, présente de nombreux avantages théoriques comme un déploiement sans douleur, qui abaisse les coûts de maintenance et d'exploitation. Aussi des solutions visant à superposer au navigateur une couche logicielle corrigeant ses défauts ont été imaginées.

Java a été l'une d'elle, mais les défauts de jeunesse de cette technologie (instable initialement, trop lente, code trop lourd pour les débits disponibles sur le réseau) l'ont discréditée au niveau du poste client, alors qu'elle excelle et semble conquérir une part de marché de plus en plus grande pour les applications côté serveur.

Aujourd'hui, Macromedia tente de positionner un de ses produits phares, Flash, comme une nouvelle alternative sur ce créneau, avec la dernière version de cet outil, Flash MX.


La lente et difficile évolution de Flash

Flash, des promesses mal exploitées - Les premières versions de Flash ont été conçues uniquement comme des outils permettant de créer des animations visuelles interactives (voire sonores) vectorielles, donc légères, sur Internet. Hélas, cédant à la mode du "multimédia gratuit", de nombreux web designers ont utilisé flash comme un outil permettant de produire des sites "frime" mais sans aucune valeur ajoutée et à l'utilisabilité déficiente. Résultat, cet outil a aujourd'hui très mauvaise presse auprès de nombreux décideurs, notamment outre Atlantique.

Flash comme outil pour développeur - Conscient du danger, Macromedia a décidé de réorienter cette technologie en la présentant depuis la version 5, et plus encore pour la version MX (alias 6), comme un outil de développement d'interfaces post HTML. Pour avoir assisté à une présentation assez approfondie, je puis dire que l'essai semble réussi, et que moyennant encore quelques améliorations, on peut espérer rapidement que des applications disponibles via un navigateur supportent des interfaces proches de celles que nous connaissons avec les applications classiques, avec même certaines améliorations liées aux propriétés intrinsèques des éléments visuels vectoriels. Quelques exemples en démo étaient absolument bluffants (tableaux réorganisables instantanément, outil de détourage en ligne, présentations de simulations économiques via le web modifiées en temps réels en fonction de paramètres changeants...).

Pour ce faire, Macromedia a mis à disposition des développeurs des bibliothèques d'éléments préfabriqués qui semblent simplifier considérablement la vie du développeur. Et les versions suivantes iront encore plus loin, dixit les dirigeants techniques de la firme.

Flash conserve quelques handicaps - Tout d'abord, il ne gère que l'interface, il doit être relié à d'autres applications (comme cold fusion MX, ou tout serveur d'applications correct) pour que "la plomberie" de l'application soit développée. De surcroît, Flash continue d'ignorer certains formats ouverts du net comme SVG et reste un outil fondamentalement propriétaire. Mais cela mis à part, ses potentialités sont importantes.

Tout ceci est bien beau, mais pour l'utilisateur, qu'est-ce que cela peut changer ?

Etudions ensemble un exemple d'usage limité, pas du tout spectaculaire, mais intelligent de Flash MX (visible seulement avec la version 6 du player).

I-hotelier, système de réservation hôtelière sous Flash

I-hotelier.com commercialise pour des hôtels un système de réservation de chambres dont l'interface tient sur une seule page. Voyons ce que cette interface apporte sur un des clients de cette firme, un hôtel de luxe dans le Colorado, the Broadmoor hotel.

L'interface, version HTML - L'interface de réservation antérieure à Flash 6, qui est toujours proposée pour ceux qui ne disposent pas de la dernière version du player flash, ou qui ont une liaison Internet à trop faible débit (nous y reviendrons), est un process de réservation en ligne classique divisé en quatre écrans. La réservation des dates d'entrées dans les chambres se fait au moyen de listes déroulantes certes classiques mais franchement peu avenantes, passer d'une étape à l'autre induit un changement de page, le retour en arrière ne perd pas les informations précédemment saisies (ouf, programmeurs corrects), et en cas de saisie de dates ou les chambres sont indisponibles, l'utilisateur doit opérer quelques allers retours. Rien de méchant, l'utilisabilité de l'ensemble est correcte, mais bon, rien de spécialement avenant.
(voir ci dessous)

hotel broadmoor, inerface de réservation HTML
figure 1 : L'interface HTML de réservation se divise en 4 parties
(vérifier la disponibilité et les prix, choisir, confirmer, payer)
plutot bien conçues, mais du fait des inconvénients du HTML,
l'ensemble manque de "fluidité".

L'interface Flash 6 - Elle tient sur un seul écran 800X600, tant horizontalement que verticalement. Et surtout, l'aptitude de flash à modifier une partie d'une page sans la recharger entièrement en fonction de paramètres saisis sur une autre page est ici parfaitement utilisée.
(voir ci dessous)

broadmoor, interface de réservation sous Flash 6 . Tient sur une seule page.
Broadmoor Hotel, interface de réservation sous Flash 6 .
Tient sur une page, donc pas de rupture cognitive pour le visiteur
le design des éléments d'interactivité est adapté à la fonction
Répartition très claire sur trois colonnes.

Les avantages de cette interface sont les suivants:

  1. L'utilisateur peut saisir ses dates d'arrivée et de départ sur le calendrier assez intuitif figurant en première colonne. Cela change instantanément l'apparence du calendrier, aussi l'utilisateur voit-il de façon claire la plage qu'il a réservée. Il peut la modifier à loisir au fur et à mesure qu'il avance dans son process.
  2. Dès qu'il a sélectionné une plage calendaire, la seconde colonne affiche les types de chambres pour lesquelles il y a des disponibilités et uniquement celles là, avec le prix total du séjour pour chaque type de Chambre. Pour chaque chambre, un clic permet de présélectionner une photo et même un panorama tournant de la chambre, permettant une vue d'ensemble de celle ci.
  3. Mieux encore, dès qu'il a sélectionné l'intérieur qui lui plait, le client retrouve dans le calendrier le prix de la chambre nuit par nuit (Ce prix peut changer en fonction des périodes), et les dates pour lesquelles aucune chambre de ce type n'est libre sont clairement repérables, ce qui évite à l'utilisateur de sélectionner des jours supplémentaires indisponibles.
  4. La colonne de droite met à jour en permanence le montant total qui sera facturé, et le visiteur, une fois son choix définitif, n'a plus qu'à inscrire ses informations de paiement. La sélection des cartes de crédit acceptées est particulièrement instinctive. Cette économie d'espace est permise par le parfait contrôle que Flash autorise sur la taille et l'emplacement de chaque élément de l'interface.

Cette interface a sans doute encore quelques défauts.

  • Tout d'abord, elle est peu utilisable via un simple modem (197 Ko de téléchargement, à renouveler partiellement si on change de mois dans le calendrier) - Mais l'alternative HTML légère reste accessible... Enfin, pour qui sait la trouver (une faiblesse liée au site, pas à flash).
  • Ensuite, Les caractères sont assez petits et ne peuvent être agrandis
  • Enfin, je ne suis pas sûr que l'accessibilité aux handicapés soit garantie.
  • Flash à travers un navigateur: pour une application plus complexe, cela risque d'être lent.

Mais dans l'optique d'une "prochaine" amélioration du débit accessible à l'utilisateur final, et en supposant que la loi de Moore vienne à bout des questions de rapidité du matériel d'ici deux ou trois ans, une telle exploration intelligente des possibilités de Flash en ligne s'avère intéressante.

Principaux enseignements:

L'exemple ci dessus pourra paraître limité, mais il touche à une des fonctionnalités essentielles du commerce en ligne, à savoir la réservation et le paiement. Aussi est il particulièrement instructif des améliorations que l'on peut attendre d'une utilisation "orientée utilisateur" des technologies les plus avancées.

  1. Une utilisation intelligente du Panel des technologies à notre disposition permet d'aller au delà du paradigme "HTML à la papa et rien d'autre" pour créer des interfaces performantes.
  2. Les principales aptitudes de Flash en ce domaine sont le contrôle total du placement et de l'apparence des différents éléments d'interface, la capacité à faire varier des éléments d'une page en fonction de saisies directes dans une autre partie de la page sans délai et sans rechargement. NB. D'autres applications en ligne auraient mis en exergue le support du glisser déposer, la possibilité de réordonner ou de recalculer des éléments graphiques de la page, etc...
  3. Des contraintes techniques (bande passante, format propriétaire, habitude des vieux formulaires ...) obligent à considérer que la transition vers ces nouvelles interfaces ne peut être que progressive, et tous les maîtres d'ouvrage ne doivent pas par un nouvel effet de mode se précipiter pour "Flasher" (version MX) leurs interfaces dès demain.
  4. Il est important que les gourous de l'ergonomie web comme Nielsen (Jared Spool a commencé cette révolution) abandonnent leurs positions ultra-orthodoxes (intégristes ?) vis à vis de Flash ou de technologies similaires (Live Motion, dernières versions de Java, etc...) et que de véritables recherches sur le bon usage des "outils à interactivité avancée" soient conduites, aboutissant à de nouvelles règles d'or de l'utilisabilité des services en ligne de demain. 

 

Liste de diffusion
Abonnez vous pour être prévenu(e) à chaque nouvel article de veblog


Respect de la vie privée, désabonnement : plus d'infos


contact: vincent@veblog.com

©informations légales & vie privée

accueil - haut de page

statistiques par