Qui aujourd’hui n’a jamais eu lors de sa première visite sur un site web une réaction telle que : « Oh que c’est moche ! », « Oulalaaa ! » ou encore « Ah jolie ! »… Ces exclamations sont souvent un de nos premiers réflexes qui peut être similaire au délit de faciès à  l’égard d’un individu inconnu. Cette réaction assez primaire est quasi identique à  une interprétation esthétique face à  une interface web encore jamais utilisée.

Ergonomie et design objet

Avant d’aborder ce sujet face à  une interface web, une « anecdote » liée aux Arts Appliquées va permettre de compléter et d’illustrer cette même réaction dans un tout autre domaine : le design objet.

Le très controversé presse citron « Juicy Salif » de Philippe Starck est sans doute un des exemple les plus parlant pour évoquer la confrontation entre l’esthétisme et l’ergonomie dans le design d’objet de la fin du XX° siècle.

En 1991, Philippe Starck conçoit pour l’éditeur italien Alessi un presse citron au design assez inhabituelle pour un ustensile de cuisine. Perché sur ses 3 longues pattes, ce presse agrume peut évoquer à  la fois une araignée, une fusée ou une créature sortie tout droit d’un roman de science fiction. Son créateur avoue avoir eu l’idée en pressant un citron sur un calamar lors d’un déjeuner. D’o๠cette apparence semblable à  un animal (ci-dessus la nappe du restaurant o๠P.Starck avait dessiné ses premières idées concernant cet objet).

Malgré ses lignes élancées, son aspect sobre et épuré le « Juicy Salif » est malheureusement peu pratique par son manque de prise en main pour une utilisation quotidienne.

Pour attester le manque de pragmatisme de cet objet, deux designers allemand, Adam und Harborth, se sont permis de réaliser, dix ans plus tard, un prototype en plastique afin de faciliter l’utilisation de ce presse citron : « Salif Aid fûr Juicy Salif ». Ce récipient s’encastre au cÅ“ur de l’objet et permet de récupérer la pulpe et les pépins des agrumes pressés.

L’ironie de cette « prothèse » provient entre autre par sa matière, sa couleur et le nouveau look qu’elle occasionne au « Juicy Salif ». Ce rajout décrédibilise cet objet devenu une icà´ne des années 90 exposée dans plusieurs musées et galeries du monde. Philippe Starck, qu’on aime ou pas ce personnage, est l’un des premier designer français qui a su démocratiser et vulgariser au plus grand nombre l’importance de l’esthétisme dans nos objets du quotidien qui dans le passé devait être avant tout ergonomique.

Aujourd’hui, l’esthétisme d’un objet est aussi importante que son utilisation au quotidien. Si l’objet est beau vous aurez plus de plaisir à  l’utiliser. Sur Internet c’est pareil.

Esthétisme, ergonomie et interface web

« Tractinsky, Katz et Ikar ont ainsi réalisé une étude selon laquelle l’esthétique de l’interface influencerait la perception de l’utilisabilité du système. Les utilisateurs confrontés à  une belle interface auraient tendance à  lui attribuer un meilleur niveau d’utilisabilité. » Ergonomie et beauté des choses

Lorsque l’appréciation esthétique d’un utilisateur entre en jeu pour sa première visite sur un site web, deux réactions sont envisageables :

• Si l’interface plaît graphiquement à  l’utilisateur alors ce dernier ne percevra pas immédiatement les erreurs d’utilisabilité du site et sa satisfaction de navigation se portera davantage sur son jugement de goût.
• Si l’utilisateur à  une forte répulsion dès l’ouverture de la page de son navigateur, il ne manquera sans doute pas d’évoquer son dégoût tout au long de sa visite même si le site possède une qualité d’utilisabilité optimisé.

« En 2003, Nielsen Norman Group à  recenser 42 études comparatives entre l’utilisabilité d’un site web existant et sa refonte : Usability Return on Investment. Cette étude à  prouvé une augmentation de l’utilisabilité de l’ordre de 202%. » (Ergonomie Web, pour des sites web efficaces – A.Boucher)

Même si ce jugement est évidemment subjectif et lié aux émotions de l’internaute, cette réaction peu le conditionner tout au long de sa navigation. Si vous envisagez la création d’un site web ou sa refonte, n’oubliez pas que l’ergonomie se complète au design graphique : cela permet de satisfaire la qualité de l’interface ainsi que l’optimisation de l’utilisabilité du site. Si ces deux paramètres sont bien pris en compte dès le début, ils renforceront l’appréciation de l’utilisateur par rapport à  votre site internet.

Si c’est pas beautiful çà  !

Je viens de recevoir le livre d’Amélie Boucher qui est, avec toute sincérité, très bien écrit. Avant de vous en parler je tiens à  évoquer mon avis sur le livre de Patricia Gallot-Lavallée que je vous avais mentionné dans un billet précédent.

« Internet donne moi ce que je veux ! »

Patricia Gallot-Lavallée donne 60 modèles de navigation en se basant sur des points précis de sites existants : barre de navigation, formulaire d’incription, moteurs de recherche, widgets… Elle décortique un élément qui est complété par une interview, des conseils ou des notes. Toutefois je ne suis pas satisaite. On n’y apprend plein de choses mais on ne sait pas pour autant comment les appliquer. Ok ! Ce n’est pas le but de ce livre et c’est facile de critiquer sachant que mes Ergotests manquent d’approfondissement.


Je le sais bien mais je crois avoir trouver « Le livre » qui va m’aider :

« Ergonomie web, pour des sites web efficaces »

On vient de me l’offrir hier soir et je suis déjà  en train de le dévorer. A peine au chapitre 3, qu’il est déjà  rempli de post-it, de note, de pense-bête qui vont m’aider à  appliquer ce que je sais déjà  par rapport à  mon cursus mais surtout ce que j’y découvre dans cet ouvrage : fondements de l’ergonomie, méthodes, processus, règles, théories, bonnes pratiques, applications…

Des connaissances vulgarisées que seul un ergonome peut avoir eu lors de ses études et de son expérience professionnel. J’apprécie énormément la qualité d’écriture d’Amélie Boucher qui est simple, efficace et accessible. Chaque propos sont illustrés d’exemples concrets ce qui permet une meilleure compréhension.

J’espère pouvoir réutiliser ses conseils dans mes futurs Ergotests et surtout dans mes projets professionnels à  venir. Je vous le conseille vivement car il est à  porté de tous et bénéfique à  n’importe quel profil.

En vous souhaitant de bonnes fêtes de fin d’années et à  bientà´t en 2008.

A lire aussi :

• Ergophile : Mémento d’Egonomie Web – Amélie Boucher
• Ergophile : Paris Web 2007 : Atelier d’ergonomie avec Amélie Boucher
• Designers Interactifs : 3 questions à  Amélie Boucher

La semaine dernière j’ai reçu un email fort sympathique de Sébastien Médard et Alexandre Huete pour m’avertir qu’un nouveau projet était né : l’univers de la liste de diffusion Ergoihm. Ergophile en fait partie. Cet environnement créé sous Netvibes est une très bonne idée et permet d’avoir plusieurs ressources de blogs qui aborde l’ergonomie.

Afin d’expliquer davantage ce projet Alexandre a accepté avec gentillesse de répondre à  3 petites questions :

Comment vous est venue cette idée et dans quel but ?

Cette idée nous est venue en discutant avec les autres modérateurs de la manière la plus simple (pour nous) et efficace (pour la communauté ergoihm) de partager du contenu. Nous avons la chance d’être dans un contexte culturel et technique favorable au partage de contenu ; il ne nous manquait plus qu’à  trouver une plate-forme la mieux adaptée à  une telle expérience. Le choix s’est arrêté sur Netvibes car leur manière de présenter les univers correspondait parfaitement à  la manière dont nous imaginions notre espace : quelque chose en libre accès avec la possibilité d’intégrer ces blogs à  nos propres outils de veille (plus facile pour les utilisateurs de netvibes, car manuelle pour les utilisateurs d’autres lecteur de flux rss).
Quant au but, je pense que les membres de la communauté des ergonomes (au sens large) auront compris que cet univers vient compléter la liste de diffusion d’ErgoIHM en y apportant le cà´té partage d’information.

Votre profession est-elle liée au domaine de l’ergonomie ?

Je pense que nous pouvons l’affirmer dans la mesure o๠je suis ergonome et que je me suis spécialisé dans les Interactions Hommes Machines 😉
C’est vrai que la discipline « ergonomie » est plus connue que le métier mais je vous assure que ça existe… ou alors on m’aurait menti !!! Notre métier au sein d’un projet informatique est d’accompagner le choix de différents acteurs (informaticiens, clients, chefs de projet, graphistes, marketings) tout en mettant en avant le point de vue de l’utilisateur final.

Pour représenter les utilisateurs on nous demande souvent de nous « mettre à  leur place » (pour donner encore plus de poids à  ces guillemets, il faut m’imaginer faire la même chose avec mes index et majeures des deux mains) sauf que nous ne sommes pas dotés de facultés extra-sensorielles, ni d’une empathie à  toute épreuve ! Nous allons donc interroger directement les utilisateurs finaux et déployer notre boite à  outil pour travailler avec eux : tests utilisateurs, entretiens, analyse de l’activité, tri par cartes, etc. (lire à  ce sujet le très bon article sur Ergolab)

En fonction de la place que nous allons occuper dans le projet nous allons avoir plus ou moins de marge de manœuvre :

• Si la demande arrive dès la phase de conception, et dans la mesure du possible, on intègre les utilisateurs dans la boucle et on mène une conception centrée utilisateur ; c’est à  dire considérer leurs besoins tout au long du processus de développement d’une application et non pas à  la fin !!! Puis présenter ces résultats lors des itérations réalisées entre les différents acteurs du projets,
• Si la demande arrive bien en amont, nous allons pouvoir aider les demandeurs à  formaliser leur besoin. La possibilité de réaliser l’analyse de l’activité des utilisateurs finaux ciblés permet de confronter leurs besoins et leurs contraintes à  ceux du demandeur,
• Si la demande arrive après la phase de conception, c’est dans ce cas o๠nous avons le moins de marge de manÅ“uvre et notre rà´le consiste à  limiter la casse ! Nous faisons des tests ainsi que des recommandations qui ne seront pas forcément prise en compte sur la v1 du projet mais sur une version ultérieure.

En fait ce qu’il faut retenir de tout ça, c’est que plus tà´t on intègre un ergonome dans un projet de conception, et plus tà´t, lui pourra intégrer l’utilisateur final dans ce projet !

Comment avez vous sélectionné les sources de cet environnement ?

En fait nous avons bouclé en interne avec les autres modérateurs pour savoir quelles étaient les lectures quotidiennes de chacun. Il nous a fallu ensuite trouver les catégories de notre univers ergoihm et faire la répartition des flux en fonction des thèmes choisis. Nous nous sommes retrouvés avec du contenu déséquilibré, notamment sur les facteurs humains, et avons rapidement mis à  contribution des collègues ciblés afin qu’ils diffusent également leurs sources. Actuellement nous attendons les retours des utilisateurs d’ergoihm sur le partage de leurs sources et sommes prêts à  faire vivre cet espace en fonction de leurs remarques.

Merci à  Sébastien et Alexandre pour ce projet qui va en aider plus d’un 🙂

Sans doute que certains ont déjà  répondu à  cette enquête « Interface Research« , pour ma part je viens seulement de la découvrir : 12 questions simples vous sont posées, moins de 30 secondes pour y répondre, des résultats inattendues vous y attendent !

Cette semaine, j’ai eu la chance de participer à  un test utilisateur formel. Ce test a eu lieu dans une pièce fermée contenant une vitre sans tain, 4 caméras, 3 micros, 2 écrans plasma (reliés à  l’ordinateur que j’ai manipulé) et un ergonome qui a surveillé, avec sympathie, mes faits et gestes. Pour clauses de confidentialité je ne dévoilerai pas le site testé, ni les questions, ni le lieu…

Les étapes

Ce test utilisateur a duré deux heures, o๠la notion de partage et de découverte a occupé mon attention :

• 10 minutes à  apprivoiser seule le service. L’ergonome n’était pas dans la pièce.
• 1h50 o๠l’ergonome m’a demandé d’agir sur le site en suivant ses requêtes.
• 10 minutes de questions sur la satisfaction d’utilisation du site testé.

« Partage & Découverte » : l’utilisateur participe à  l’amélioration d’un service. Il donne son avis, son approche par ses commentaires et ses actions qu’il commente à  voix haute. Il découvre une nouvelle navigation qui lui est inconnu et se doit d’être attentif, spontané mais aussi naturel dans ses actions. L’ergonome étant présent avec l’utilisateur, une relation amicale se créé et le dialogue se construit au fil du test. Des échanges et des questions apparaissent afin de construire et d’établir des solutions qui peuvent être envisageables.

Conclusion

Si vous avez la possibilité un jour de participer à  un test utilisateur, n’hésitez pas une seconde, allez-y ! Une expérience inattendue vous y attend. En aucun cas j’ai eu l’impression d’être surveillée ou épiée par les caméras ou l’ergonome. Si votre profession est lié au web, vous constaterez que, peu importe votre place dans le processus de création d’un service, les tests utilisateurs sont primordiaux dans l’appréhension et l’approche de l’utilisateur face à  un nouveau projet inconnu. Ces tests permettent de corriger des erreurs et même d’apporter des fonctionnalités qui n’étaient pas prévues.

Suite à  l’atelier d’ergonomie soutenu par la souriante Amélie Boucher, lors de ParisWeb 2007, 12 règles élémentaires ont été abordées. Ce billet a pour but de vous les résumer même s’il a été difficile en 2h de tout préciser pour Amélie. Toutefois, elle a très bien su vulgariser son savoir et gérer son temps entre explications, exemples et plaisanteries. Ces règles sont d’une logique irréprochable à  leurs écoutes (ou lectures) mais tellement plus difficile à  retranscrire lors d’une conception d’interface :
« Plus facile à  dire qu’à  faire »

MAJ : PowerPoint d’Amélie Boucher présenté lors de l’atelier.

1. Organiser les informations

• Penser au visiteur : essayez de vous mettre à  sa place. Que vient-il faire ? Quel connaissance d’Internet a-t-il ?
• Réfléchir à  la hiérarchisation du contenu dès la fondation du site : zoning, organisation conceptuelle, storyboard…

2. Organisation visuelle

• Limiter la surcharge visuelle.
• Faire attention à  la différence des quantités d’informations perçues par l’utilisateur et celles réelles qui sont proposées sur le site.
• Réduire les animations qui surchargent l’intégration mentale des informations. [A consulter les lois Gestalt]

3. Cohérence

• Eviter les changements de place ou la suppression d’éléments utiles afin d’alléger la page.
• Conserver une logique de navigation au risque de perdre votre utilisateur.
• Une hétérogénéité est indispensable pour faire la distinction entre des liens, du texte, des titres… (Attention à  la sémantique)

4. Convention

• N’essayer pas de vouloir réinventer le web. Dans un premier temps, appliquer la localisation habituelle des éléments, les règles d’interaction, le choix d’un vocabulaire adapté et compréhensible. Cela évitera des confusions et une fuite de votre utilisateur.

5. Information

• Un site doit informer et répondre à  l’internaute. Des informations générales doivent être ponctuelles pour le guider.
• La notion de Feedback est très importante. Un utilisateur avertit est un utilisateur confiant.

6. Compréhension

• Un vocabulaire précis permet une compréhension immédiate.
• Le site doit permettre à  l’utilisateur de comprendre ses actions. En aucun cas ces dernières doivent être indécises. Une réaction positive de l’utilisateur apparaitra naturellement si une compréhension direct existe.

7. Assistance

• Guider l’internaute : l’utilisation de mot unique, de légende (assistance explicite) doit, ou pas, se compléter avec une organisation visuelle comme le format et le comportement des objets (assistance implicite).
• Il faut envisager des actions d’affordance qui guideront l’utilisateur afin d’éviter de le perdre.

8. Gestions des erreurs

• Protéger l’internaute avant l’erreur.
• Lorsque l’erreur est commise, il faut faciliter le repérage et la compréhension de l’erreur.
• Au-delà  de l’erreur : faciliter la correction afin de rassurer l’internaute.

9. Rapidité

• Eviter de perdre du temps et de commettre des actions inutiles à  votre utilisateur.
• Facilité les clics et les interactions.
• Ne pas recourir à  la mémoire de l’utilisateur pour facilité sa navigation. [A lire la loi de Fitts]

10. Liberté

• Limiter les intrusions : plus un site est facile d’accès, plus l’internaute sera confiant.
• L’utilisateur doit avoir une liberté d’action, ou du moins, faites-lui croire qu’il a les commande. Un utilisateur brimé ne reviendra pas.

11. Accessibilité physique et technologique

• Concevoir un site accessible est vivement recommandé et n’est pas impossible à  concevoir.
• Utiliser des technologies adaptées afin d’avoir un site rapide et fluide.

12. Satisfaction de l’internaute

• Utilité, esthétique, expérience utilisateur, qualité du service, puissance et fiabilité technique feront le bonheur de votre internaute.

A lire…

Je vous invite à  lire son livre « Ergonomie web, pour des sites web efficaces » (édition Eyrolles). J’avoue : je n’ai pas encore pris le temps de l’acheter (honte à  moi) mais je viens de recevoir le livre de Patricia Gallot-Lavallée : « Internet, donne-moi ce que je veux ! 60 modèles de navigation pour satisfaire vos internautes ». Je vous rassure le livre d’Amélie est dans ma WishList de Noà«l.

A consulter :

• Paris Web 2009 – Hervé Mischler
• Ergophile : Mémento d’Egonomie Web – Amélie Boucher
• Ergophile : Ergonomie web pour des sites web efficaces
• Ergophile : Paris Web 2007 : Atelier d’ergonomie avec Amélie Boucher
• Designers Interactifs : 3 questions à  Amélie Boucher

Omniprésence est le premier reproche des internautes envers la publicité. Son statut et son intégration sur certain site manque de clarté : intrusion dans le contenu, conception graphique agressive ou non-adapté à  la cible, autopromo ou partenariat… Tous ces détails agacent les internautes qui en oublient même qu’une publicité peut être aussi informative avant d’être vendeuse. Alors, est-ce l’intégration des pubs qui n’est suffisamment pas réfléchi par les webdesigners ? Ou bien, est-ce la conception graphique et son contenu qui n’est pas assez élaboré ?

Les objectifs d’une publicité

• Respecter les internautes : envisager un signalement de la publicité par la présence d’une mention telle que « publicité » afin d’éviter des malentendus entre de l’autopromo ou du contenu.
• Limiter la gêne : éviter les pop-up, le déclenchement automatique du son (pub audio ou vidéo), des animations trop brutales afin de ne pas bloquer l’utilisateur dans ses actions de navigation ou de lecture du contenu.
• Réfléchir en amont si l’on désire monétiser le site web : prévoir l’emplacement publicitaire dès les storyboards pour qu’il soit le plus harmonieux et homogène lors de la conception du site.
• Réfléchir à  son positionnement : la publicité doit corresponde à  la cible du site si vous désirez un meilleur accueil de la part des internautes (et pourquoi ne pas envisager la méthode du Wait Marketing?)
• Visibilité de la marque et bien sûr « faut que ça clic ! »

Exemples d’existants

La Mega banner (728x90px), le pavé 300x250px ou le skyscraper (160x600px)
Dans le header, sous le menu et dans les colonnes de gauche ou droite ces bannièrers sont les plus exploitées car leur taux de clic à  augmenter jusqu’à  4.8 point entre 2005 à  2007. Je vous invite à  consulter le PDF de l’IAB France (Interactive Advertising Bureau) qui publie ces recommandations 2007 sur les formats e-pub en France. Ces pubs sont considérées comme étant envahissantes par leur manque de finesse dans leur intégration. Les Spaces de Windows Live est un exemple parmi tant d’autres : la bannière flotte dans son espace, aucun raccord avec la barre de menu, elle attire le regard de l’internaute par sa démarcation au point de gêner la lecture du contenu.

La publicité interstitielle
Située avant l’accès à  la page d’accueil ou entre deux pages web d’un site, cette publicité dite interstitielle est souvent considérée comme une véritable gène pour accéder au contenu. Le bouton permettant l’accès direct au site doit être visible dès le premier regard pour éviter la perte de l’internaute.

Le popup
Les pop-up (ou les pubs qui les imitent) dérangent et empêchent la lisibilité du contenu. Un lien permettant de la fermer le plus vite possible par l’utilisateur doit être perceptible et compréhensible : la mention « fermer » ou son symbole « la croix » doit être situé dans le coin du haut à  droite de la pop-up comme pour une application. Ce format publicitaire va disparaître peu à  peu à  cause d’une trop grande gène pour les internautes.

Expand banner
Ces bannières sont très utilisées pour la notion de teasing car elle annonce un évènement que l’utilisateur peut découvrir directement sans clic mais juste avec le rollover. Le seul inconvénient est qu’elle peut obstruer la lecture du contenu.

Liens textuels
Le site Ladies Room à  opter pour une solution ingénieuse qui n’obstrue pas le header et le logo du site : absence de bannière. Ici, l’emplacement des adword allège le site et intensifie la qualité de la charte graphique à  la différence du header du site le Monde o๠tout se mélange : moteur de recherche, bannière publicitaire, login.

Deezer utilise aussi des adwords dans les playlists des utilisateurs. Leurs positions et leurs intégrations ne portent en aucun cas confusion et l’utilisateur en fait facilement abstraction.

Attention aux liens textuels qui sont directement introduit dans le rédactionnel du site. Ces liens sont purement trompeur au point de décrédibiliser le contenu.

Les publicité audio et vidéo
De plus en plus présentes ces pubs n’occassione pas deènes si elles sont fixes avec le son éteint. Leurs formats sont souvent en 300×250 et sont présentées sous différentes formes. BlogBang utilise le caractère informatif : visuel fixe faisant office d’aperçu, texte explicatif avec lien, utilisation des bannières Expand : lors du rollover sur l’image la vidéo se lance (voir ci-dessus).

Le flash transparent
Le flash transparent recouvre l’ensemble ou partiellement le site aux risques d’empêcher l’accès aux fonctions. Il donne une grande visibilité à  marque si cette dernière est bien réalisé. Exemple d’un flash transparent pour la marque Nike mais qui dure vraiment trop longtemps : monopolisation du site au risque d’agacer l’utilisateur.

Habillage de site
Moins intrusif que des bannières, l’habillage enveloppe le site jusqu’à  une refonte totale. La solution surement la plus efficace pour donner de la visibilité à  la marque sans trop gêner l’internaute dans ces actions de navigation ou de consultation. Le meilleur exemple est sans doute le site Allociné qui arrive à  bien gérer l’habillage.

Interactivité avec l’utilisateur

Les bannières interactives vont de plus en plus apparaître dans notre quotidien car elles offrent la possibilité à  l’internaute de choisir s’il veut ou pas d’être actif. Elles impliquent l’utilisateur et changent des formats traditionnels dont l’internaute est habitué. Le meilleur exemple est sans doute la dernière campagne d’Adobe illustré ci-dessus (active jusqu’en décembre 2007). Pour le lancement du pack CS3, Adobe avait lancé il y a quelques mois des bannières interactives similaires à  celle-ci sauf que le contenu était cloîtré dans son format. Dernièrement, Adobe a renouvelé cette campagne avec une petite innovation :

• Effet teasing : l’animation se joue un peu à  l’apparition du bloc puis elle reste statique
• Rà´le actif de l’internaute : utilisation du curseur qui dévoile au fur et à  mesure le contenu
• La publicité n’est plus confinée dans son format mais elle s’étale et se superspose au contenu du site
• Moins intrusif : En aucun cas l’animation se joue sans l’accord et l’action de l’internaute
• Contenu reflétant la marque et son produit : conception graphique de qualité, contenu inattendu, visibilité et mémorisation de la cible destiné. Cette nouvelle solution est un très bon coup de pub pour Adobe qui a fait signe d’imagination pour un produit destiné aux créatifs.

Pour voir cette publicité intégrée dans un site web je vous invite à  vous rendre sur Layer Tennis Live

Conclusion

Le problème n’est pas seulement l’intégration de la publicité mais véritablement son contenu et sa conception graphique. Souvent ces bannières manquent de qualité, de pertinence et d’ingéniosité qui reflète une culture graphique modeste ou un manque de confiance entre les graphistes et les marketeux. Dans les années à  venir nous verrons de plus en plus d’interactivité publicitaire s’imposer dans notre quotidien comme l’on déjà  compris certaines marques afin de se différencier de leurs concurrents.

Porte d’entrée interactive sur Design.2803.com