Sud Web et Web UX, inscrivez-vous maintenant

Sud Web - Savoir-faire et faire savoir - Nîmes, 27 mai 2011 - Jy vais !
Sud Web 2011 - J'y vais !

Je parle souvent de Paris-Web ici. Avant, uniquement en tant qu’auditrice et parce que j’adorais la qualité de cette conférence. Maintenant, aussi parce que j’ai tellement aimé que j’ai rejoints l’équipe d’organisation. Depuis que j’y suis, je me suis peu à peu approprié l’asso et l’événement et c’est donc non sans fierté que j’ai vu naître Sud Web.

Sud Web est né de l’idée que Paris-Web, c’est bien, mais ça n’est qu’une fois par an et c’est à Paris.

De nombreuses personnes se déplacent du sud vers le nord pour venir à Paris-Web en automne ; Sud Web propose d’inverser la migration pour ce printemps (à Nîmes plus précisément).

Sud Web est un cycle de conférences autour du web s’accompagnant de la très jolie accroche : « Savoir-faire et faire savoir« .

Le programme est très attrayant (ben oui ! j’y parle quand même 5 minutes ! c’est vous dire ;D !) et un apéritif communautaire est prévu pour pouvoir profiter des rencontres entre professionnels du web.

De plus, comme ils ont vraiment fait les choses bien chez Sud Web, la journée de conférence est couplée avec Web UX ! Web UX est une journée de conférences sur l’expérience utilisateur sur le web. Même endroit, la veille. Malin.

Là aussi, le programme est des plus prometteur avec de quoi aborder l’expérience utilisateur sous différents aspects.

Il y a donc un prix préférentiel pour assister aux deux journée et puis la possibilité de faire jouer son DIF, des réductions négociées pour le train, des réductions chômeurs et étudiants (faites vite !), etc. Allez voir tout ça sur le site de Sud Web.

Attention, les inscriptions se terminent bientôt, le 02 mai !

Alors ? On se voit là-bas ? 😉

Sud Web - Savoir-faire et faire savoir - Nîmes, 27 mai 2011 - Allez-y !
Sud Web - Savoir-faire et faire savoir - Nîmes, 27 mai 2011 - Allez-y !

Journée Mondiale de l’Utilisabilité 2010

En introduction

Pour la 6ème année, Fred Cavazza a animé une participation française au World Usability Day (qui est tombé un jour férié en France, le 11 novembre. La France est donc en avance d’une journée).

Le thème pour cette année était sur l’utilisabilité des sites d’informations et le programme portait sur :

  • un panorama de la presse en ligne
  • le webdocumentaire
  • l’écrit web
  • la visualisation des données
  • l’information à l’heure du websocial
  • l’utilisabilité des interfaces mobiles

Le thème n’est pas, à priori, celui qui me concerne le plus. Pourtant, la diversité des interventions et le fil rouge utilisabilité ont permis un balayage riche.
Plus que de donner de l’information ou un apprentissage, cet événement était une bonne occasion de sortir un peu de flux de la production et de jeter un œil sur ce qui se fait.

En plus, petite satisfaction personnelle, j’ai eu le plaisir d’y voir Amélie Boucher. Na !

Panorama de la presse en ligne

Benoît Drouillat

A travers son panorama, Benoît Drouillat a fait remonter des points qui ont en particulier retenu mon attention :

  • « un nouveau médium ne s’ajoute jamais aux média antérieurs et ne les laisse jamais intacts. Il les bouscule sans cesse et leur trouve de nouvelles formes et de nouveaux emplois. » (Marshall Mac Luhan), bon, juste pour rappeler que non, Internet ce n’est pas la mort du livre, de la télé, de la carte postale ou de je ne sais quoi !
  • Respecter un design en passant d’un support à l’autre (charte graphique identique du Financial Times du papier à l’écran) est-ce un garant d’une bonne ergonomie ? L’amoureuse de l’identité graphique que je suis aurais tendance à répondre qu’il faut garder des éléments. Mais justement, l’identité graphique, c’est l’art de respecter une identité globale avec des éléments, des supports, des contextes différents. De plus, la plus-qu’amoureuse de l’expérience utilisateur que je suis aurait tendance à dire qu’il faut s’adapter au média et ses modes d’utilisation. Donc ? Donc respecter l’identité ne veut pas dire copier-coller une charte. Et le web a sa propre utilisation, grandement différente du papier.
  • La culture de l’innovation n’existerait pas ou peu en France dans les médias et les efforts sont plutôt portés sur les terminaux mobiles. C’est en effet l’incontournable du moment sans compter, bien sûr, sur le sempiternel blocage financier sur la R&D (Recherche et Développement).
  • Si les versions de journaux en ligne qui ne sont que des versions papier en PDF sont vraiment bien faibles par rapport aux possibilités, c’est au designer de proposer quelque chose exploitant le médium et favorisant les usages (bon, et à la direction de trouver des sous pour !)

Pour un compte-rendu (bien plus fidèle, de fait !) voir à la source 😉 :
Un panorama du design de la presse en ligne

Webdocumentaire

Upian

La conférence d’Upian a eut pour avantage d’ouvrir mes petits yeux d’intégrateur-du-bon-vieux-HTML-de-papa sur un autre support que la page web traditionnelle.
Les projets présentés étaient :

  • Gaza Sderot
  • Prison Valley

« Gaza Sderot » (mais ? tiens ! Jonez Ronez nous en avait aussi parlé lors de sa conférence sur la qualité éditoriale à Paris Web 2008 !) est un projet ayant pour but de présenter des vidéos faites à Gaza, en Israël et à Sderot, en Palestine. L’ensemble du webdocumentaire est basé sur cette volonté de toujours montrer les deux villes en parallèle.

« Prison Valley » (qui, selon Ben, serait « partout ») propose près de 3h de films articulés sur une frise chronologie permettant de l’interaction avec des éléments connexes.

Ce qui est à retenir c’est que ces deux webdocumentaires abordent la page web avec des principes de navigation originaux. Mais rien n’a été dit sur des tests d’utilisabilité (tests utilisateurs) fait pour valider ces navigations.
Je me demande aussi si l’accessibilité est prise en compte…

L’unique point technique soulevé était sur l’innovation et le fait que les équipes sont tournés vers les nouveautés technologiques pour toujours chercher à aller plus loin.

L’écrit web

Éric Mettout – Rédacteur en chef du site L’Express

Cette conférence aurait largement pu prendre une demi-heure de plus. Les informations données par Éric Mettout ne sont pas nouvelles (pour quiconque consomme des informations sur le sujet, en tout cas) mais c’est très bien retranscrit. Il me semble que cette conférence balaye la totalité du sujet. Les diapositives étaient très complètes et peuvent aisément servir de « rattrapage ».

Mes notes en vrac :

  • la longueur d’un texte sur le web est aussi dépendante de la façon dont on va architecturer le texte. Penser à laisser des respirations dans un texte long.
  • les questions 5W2H (What, Where, Who, When, Why, How, How many) doivent avoir été couvertes par les premiers éléments : titre, intertitre, chapô, et, au pire, premier paragraphe.
  • C’est également dans cette même zone que doivent figurer les mots qui permettront aux moteurs d’indexation de classer la page.
  • L’écriture web c’est aussi des photos, des vidéos (attention aux droits de diffusion !), des mashups, l’anticipation des commentaires à venir, des liens. Le rédacteur web doit avoir ces outils là en tête et s’en servir.
  • A propos des mashups, Éric Mettout a évoqué les frises chronologiques, la visualisation de données, les arborescences, les webdocumentaires. Il a alors souligné le fait que, grâce à des outils en ligne (dipity, Many Eyes, Pearltrees…), l’éditeur est maintenant à même de travailler lui-même ces éléments (voilà pourquoi ils rejoignent les tâches de l’écrit web).
  • Le rédacteur en chef de L’Express atteste que plus on fournit des liens externes à un internaute …plus il revient ! (Si ce principe me paraît plein de bon sens, il semble que là, il ait été vérifié et validé par un site dont les revenus sont probablement basés sur l’audience. Voilà qui apporte de l’eau à ce moulin)
  • chaque article est potentiellement une page d’atterrissage. Cela doit être prise en compte dans les principes de navigation du site.
  • L’écrit web (journalistique) peut aussi être du live-blogging ou l’écriture dédiée à des réseaux sociaux. Commenter une manifestation en direct, animer une page éditoriale sur Facebook, alimenter un fil Twitter d’actualité est un exercice spécifique auquel le journaliste doit s’adapter. Il en va de même pour le blog.

Enfin, Éric Mettout a fini de balayé tout son paysage de journaliste web en insistant sur combien les informations de web analytics pouvait être précieuses (et nouvelles !) pour un éditeur qui voit rapidement quels sont les contenus qui « marchent » le mieux. Le rédacteur web doit donc faire appel à ces informations et s’en servir.

Si la conférence a été faite au pas de course, je pense donc que le diaporama vaut une lecture.

Visualisation des données

Caroline Goulard

Caroline Goulard est venue nous « vendre » la visualisation des données. On a donc commencé par une introduction rappelant que la visualisation des données permettait de rendre compréhensible aisément une multitude d’informations car elle fait appel à notre intelligence visuelle plutôt que verbale. Bon, je ne sais pas pour vous, mais moi j’en étais déjà convaincue.
Spécifiquement à propos de l’utilisabilité, elle a précisé que la visualisation de données permet :

  • la personnalisation
  • l’interactivité
  • l’affinité
  • l’immersion

et que ces éléments permettaient donc une expérience utilisateur positive (en fait, on est plus dans la désirabilité que l’utilisabilité selon moi et en me référent au schéma de P. Morville).
Les trois modes d’engagement de la visualisation de données offre une forte préhension de l’utilisateur :

  • la vision
  • la manipulation
  • la circulation

Pour organiser une visualisation de données, il faut penser « LATCH » : Localisation Alphabet Temps Catégorie Hiérarchisation.
Les conseils finaux de Caroline Goulard pour concevoir une visualisation de données :

  • de garder à l’esprit que le but est de fournir de l’information ;
  • de privilégier la fonction et non l’esthétique ;
  • de donner du contexte ;
  • de tester ses interfaces à l’aide de tests utilisateurs.

L’information à l’heure du websocial

Fred Cavazza nous livre un passage en revue des impacts du websocial et des usages qui en découlent sur les médias informatiques.

Il note que le multiplicités des usages apporte une nouvelle complexité aux interfaces qui prévoient maintenant plusieurs couches d’information :

  • l’éditoriale,
  • une partie communautaire
  • reliée à une partie sociale.

Il se livre ensuite à son exercice préféré (enfin, c’est une interprétation toute personnelle) : les hypothèses d’évolution.
Il en cite trois :

  • la personnalisation : des médias d’information dont les pages sont créées à mon image
  • l’information à géométrie variable : comme le New York Times par exemple, qui propose une interface classique, une interface écrémée ne gardant plus que le contenu « brut » et une interface linéaire chronologique.
  • la contextualisation en fonction du terminal : si je suis sur mon ordinateur de bureau je ne voudrais pas avoir accès au mêmes fonction qu’en mobilité, par exemple.

Utilisabilité des applications mobiles

Backelite

Backelite est spécialisé en interfaces mobiles. A travers la présentation de leur société et de quelques unes de leurs réalisations, ils insistent sur :

  • la complexité liée à la multiplication des plateformes,
  • l’importance de se consacrer d’abord sur les fonctions premières,
  • le fait que le design doit être dédié à la simplicité et à l’explication
  • et que le contenu doit être adapté au terminal.

En conclusion

Félicitations à Fred Cavazza qui a réussi, je trouve, un joli éventail de sujet autour de l’utilisabilité via les sites d’information. On a abordé, au cours de cette demi-journée, les sites de presse traditionnels, le webdocumentaire et ses originalités, l’écriture web (bien) vue par un journaliste, l’information de données et sa retranscription visuelle (et utilisable !), l’incursion du websocial dans la consommation et les usages de l’information et un focus sur les applications mobiles (inévitable, par les temps qui courent) !

Encore une fois, cette conférence était plus un temps d’arrêt sur ce qui se fait que de la mise en pratique.

A cette occasion, Eyrolles, Designers Interactifs et L’Express ont gentiment distribués quelques livres, extraits et magazines.

Les 100 agences qui font le design interactif, Les métier du design numérique, Ergonomie web illustrée
Les 100 agences qui font le design interactif, Les métier du design numérique, Ergonomie web illustrée

Voir : Journée Mondiale de l’Utilisabilité 2010

L’exercice de la carte de vœux réussi pour Usabilis

Usabilis, pour le marronnier qu’est la carte de vœux, a eu une petite idée sympathique et originale.

Si vous êtes abonnés à la lettre d’actualité d’Usabilis, vous avez pu recevoir une carte de vœux sous forme de kit de maquettage.

C’est mignon et, pour une société d’ergonomie web, c’est bien pensé.

Rien de plus sensationnel que ça, mais ça m’a bien plus car cela met à la fois en avant l’un des services de la société et cela met à disposition du client (potentiel) un outil à utiliser.

usabilis-maquettage

Ergonomie des interfaces riches – Amélie Boucher

Amélie Boucher lors de la conférence Paris Web 2008
Amélie Boucher lors de la conférence Paris Web 2008 sur l'ergonomie des interfaces riches

Les interfaces riches ne changent pas les grands principes de l’ergonomie

Si l’arrivée des interfaces riches – qui se construisent et se déconstruisent en fonction des actions de l’internaute – apporte de gros changements matière d’ergonomie, les principes et les contraintes restent les mêmes. L’interface reste « l’écrin » du service ; elle s’efface à son profit.

Quelques points sont à veiller particulièrement avec les interfaces riches

Les changements ergonomiques qui découlent des interfaces riches portent plus sur la façon dont l’ergonomie va s’adapter aux nouvelles techno pour toujours faciliter la tâche de l’internaute.

Attente et Immédiateté

Si l’attente doit être limitée, elle doit aussi être signalée. L’internaute doit savoir que quelque chose est en train de se produire, il doit aussi savoir quoi. L’attente doit aussi être justifiée : attendre pour un calcul, oui ; attendre pour avoir une police à disposition dans une application d’édition, non.

L’attente peut parfois être « forcée » car parfois, l’immédiateté est déroutante.

Feedback

Le feedback doit être donné à chaque fois qu’il est nécessaire : au rechargement d’un élément, pendant le traitement d’une action, pour les différents état d’une tâche (« Ajout en cours », « Ajouté »)

Il doit également être correctement placé, c’est-à-dire dans la même zone que celle du changement.

Affordances

Les affordances sont les possibilités d’action que suggère un objet par sa forme. Elles se basent aussi bien sur la métaphore que sur l’expérience.

Les nouvelles possibilités d’interaction suggèrent de nouveaux usages. Cela implique de bien guider l’internaute pour qu’il comprenne les actions attendues. Les mots, sont toujours le moyen le plus efficace pour le guider mais on peut également avoir recours aux symboles, aux icônes, au curseur de la souris…

Comme pour les interfaces « traditionnelles », il s’agit de bien accompagner l’internaute dès sa première utilisation.

Concevoir un plan de site

L’utilité du plan de site.

Le plan du site comme aide à la navigation

La toute première fonction d’un plan du site est d’aider le visiteur dans sa navigation.
Cela peut, par exemple, être un visiteur qui recherche un type d’information précis et n’arrive pas à le trouver dans le menu, ni dans les pages. Si le site n’a pas de module de recherche, ou si l’internaute ne souhaite pas y faire appel, il peut alors utiliser le plan du site.

Mais l’internaute peut tout aussi bien avoir consulter le plan du site sans avoir fait une seule recherche dans les rubriques du menu ou en navigant. Il se peut très bien que le plan soit le premier lien auquel il ait recours. Soit qu’il recherche une information pointue et estime qu’il la trouvera plus facilement en ayant accès aux sous-rubriques et autres niveaux directement. Soit, tout simplement, pour se donner une idée de la prestation d’un site et des domaines couverts.

Des mot-clés et des liens pertinents

Le plan du site, par sa fonction même, va reprendre les mots importants du site : le titre des pages.

Mais la plus grande force encore du plan du site vient du fait que c’est un véritable réseau de liens sur le site.
D’abord, en listant la totalité des pages du site (ou des pages principales), on s’assure que le robot des moteurs de recherche trouvera chacune d’entre-elles. C’est donc une page que le spider doit facilement trouver.

Comment faire ?

Emplacement

On a vu que le réseau de lien que représente le plan du site est un avantage pour le référencement. Cet avantage est réellement efficace si de nombreuses pages pointent vers le plan du site. Mais de toute façon, d’un point de vue ergonomique, la présence d’un lien vers le plan du site sur chaque page est indispensable. En effet, on ne peut savoir d’avance à quel moment un visiteur va en avoir besoin. Et comme c’est un outil d’aide à la navigation… il doit facilement être trouvable !

Par habitude, on s’attend à trouver un lien vers le plan du site au moins en bas de page.

Présentation

Un plan de site peut-avoir un aspect très différent selon que le site est composé de quelques pages ou de plusieurs centaines ! Il n’y a pas une façon de faire un plan mais il faut savoir s’adapter à la situation.

Dans le cas d’un site à beaucoup de pages, vous n’allez pas lister dans votre plan la totalité (ou en utilisant une solution faisant apparaître des sections, par exemple). Vous pouvez très bien, également, faire un plan sur plusieurs pages. Gardez d’ailleurs à l’esprit que Google déconseille d’avoir plus de 100 liens dans une page et que les règles d’accessibilité préconisent 40 liens maximum.

Au contraire, pour le plan d’un site ayant peu de pages, vous pouvez vous permettre un plus grand niveau de détails. Vous pouvez même aller jusqu’à une description succincte de la page derrière chaque lien, pour mieux aiguiller l’internaute (et glisser quelques mot-clés !)

Pour que votre plan soit vraiment utile à l’internaute, pensez à bien l’organiser. Hiérarchisez les rubriques, les pages.
Les marges, les couleurs peuvent vous aider à créer des zones. N’oubliez pas que si votre plan est agréable à consulter, cela pourrait insciter l’internaute à le regarder dans le détail et, peut-être, à voir des pages qu’il n’aurait pas pensé à chercher autrement.

Code

Un plan, ce n’est rien d’autre que la liste des pages du site. Il faut donc utiliser les balises <ul> <li> (dans certains cas <ol> <li>). Vous aurez certainement à imbriquer ces listes.

La syntaxe est la suivante :

<ul>
        <li>Rubrique 1
                <ul>
                        <li>Sous-rubrique 1</li>
                        <li>Sous-rubrique 2</li>
                </ul>
        </li>
        <li>Rubrique 2</li>
</ul>

Pour que votre référencement soit vraiment optimisé, n’oubliez pas d’utiliser l’attribut title sur vos liens.

La page 404

Votre site devrait contenir une page 404 personnalisée. Si un internaute arrive dessus, c’est soit qu’il y a une erreur dans l’URL qu’il a tapée.

Soit il identifie et corrige son erreur immédiatement, soit la page n’existe plus ou tout autre situation. Il faut alors aider votre visiteur et quoi de mieux que le plan du site ?!

Il est donc utile de prévoir, si on le peut, le plan du site dans un include qui serait appelé depuis la page plan du site et depuis la page 404.

Des exemples

Un exemple sur www.service-public.fr www.service-public.fr/aide/plan.htmlPour ce site aux nombreuses pages, en plus des rubriques déjà présentes, le plan a été découpé en trois espaces thématiques.
Un exemple sur http://pourpre.com http://pourpre.com/pied/plan.phpPour ce site très riche autour d’un thème unique, la courte description a côté des rubriques et des sous-rubrique apporte une aide en plus.

Réussir ses liens

L’apparence

Pour que votre site soit fonctionnel, les liens doivent être immédiatement reconnus comme tels. Ils doivent donc impérativement se différencier du texte normal. L’usage veut que le lien soit souligné et bleu. Si la majorité des sites s’affranchissent du bleu (créant ainsi un apprentissage de l’internaute), le soulignement reste encore un repère utile. Il est d’ailleurs fortement déconseillé d’utiliser le soulignement pour autre chose que les liens hypertextes. L’effet en est TRES perturbateur.

Si on décide de se passer du soulignement, il faut lui substituer un autre repère visuel. C’est le cas, par exemple, des menus qui sotn souvent présentés de telle sorte qu’ils n’ont pas besoin d’être souligné. C’est aussi le cas des boutons dans lesquels on reconnaît immédiatement une action à faire.

Pour plus de fonctionnalité, les CSS peuvent vous aider à donner des repères supplémentaires en fonction des actions (survol du lien, liens déjà vus, etc).

Le libellé

Il faut le soigner à plusieurs niveaux. D’abord, parce que c’est ce qui va -ou non- insciter l’internaut à cliqurer. Vos liens mis en valeur comme vu dans le paragraphe « L’apparence », il est possible que l’oeil de l’internaute ballaye le page, entre autres, de liens en liens.

Le libelé doit donc être clair et explicite. Evitez les liens trop génériques et, si vous optez quand même pour un lien type « En savoir plus », n’oubliez pas de préciser de quoi vous parler : « En savoir plus sur le livre L’ignorance de Milan Kundera ».

Les moteurs d’indexation sont également très sensibles aux libelés des liens. Si vous pensez à rédiger un lien parlant, il auta de grandes chances de contenir des mots-clé, très utiles pour votre référencement naturel.

Pour un lien d’action, utilisez un berbe à l’infinitif qui décrit bien l’effet induit par le clic. Exemple : « Valider mon choix ».

Attention, par contre, à éviter les libelés trop longs. Le lien doit être explicite en lui-même. Pour qu’il puisse être un bon repère pour l’internaute, il est préférable qu’il ne fasse que quelques mots.

De plus, les règles d’accessibilité préconisent moins de 80 caractères par liens.

L’attribut « title »

Il n’est pas un élément obligatoire, mais il apporte plusieurs avantages.

En premier lieu, il vous permet de (et il doit) donner des information supplémentaires à l’internaute. Sur le type d’ouverture (« Nouvelle fenêtre »), sur le poid à charger (« format .pdf – 53k) ou des renseignements plus précis (« Lire la fiche de lecture : Le Petit Prince d’Antoine de Saint-Exupéry » sur un lien « Le Petit Prince »), etc.

Cela peut être l’occasion de renforcer votre référencement naturel : densité des mots-clé ou couverture du champ lexical.

Pour finir, ces informations supplémentaires sont également très utiles en terme d’accessibilité. Là aussi, il ne faut pas dépasser 80 caractères.

Le lien entrant

Avoir d’autres sites qui font un lien vers le votre est une très bonne chose (surtout si la page qui vous cite traîte d’un sujet connexe). Cela augmente, bien sûr, vos chances d’être trouvé par l’internaute et c’est bon pour le référencement naturel. Si vous ne pouvez agir que rarement sur l’apparence des liens chez un site partenaire qui fait un lien vers vous, veille par contre à la qualité du libelé et à la présence de l’attribut « title ».

Dans le cas d’un partenariat rémunéré, un repère modifie l’URL afin de savoir que le lien a été cliqué. Certaines méthodes sont mauvaises pour le référencement car elles empêchent les robots d’indexation d’enregistrer correctement le lien. C’est donc également un aspect à surveiller lors d’un partenariat.

Les liens, par leur rôle spécifiques au web – et par leur importance dans le référencement naturel – méritent la plus grande attention. pour un Internet plus riche et plus pertinent.

L’expérience utilisateur

I. Qu’est-ce que l’expérience utilisateur

Lorsqu’un internaute visite un site, il enregistre des impressions, des informations – plus ou moins consciemment. Ce ressenti est composé de nombreux éléments : l’esthétique générale de la page, la facilité de navigation, la compréhension des textes, la présence ou l’absence d’information, l’efficacité des icônes, la présentation des produits, etc.

Chacun de ces aspects peut être très bon ou très mauvais, indépendamment les uns des autres et de façon disparate. Pourtant, c’est à partir de ces éléments que l’internaute va se construire une impression générale du site et de ses services.

C’est ce ressenti global que l’on appelle l’expérience utilisateur. Il peut être négatif, si une majorité des aspects de la visite sont perçus comme mauvais par le visiteur, ou positif, si l’ensemble lui a, au contraire, donné une bonne impression.

II. L’importance de l’expérience utilisateur

Qu’elle soit positive ou négative, l’expérience utilisateur a, concrètement, des conséquences pour le site.

Un utilisateur qui a eu une expérience négative ne souhaite pas revenir, ne parle pas du site ou en parler en mal et, bien sûr, il n’est pas enclin à acheter ou a profiter des services du site.

Tout au contraire, celui qui a eu une expérience positive se souvient du site pour une prochaine utilisation, peut en parler et le conseiller et est dans un contexte favorable à l’achat des produits et services proposés par le site.

Une expérience utilisateur positive c’est donc :

  • la fidélisation du client
  • un canal d’acquisition
  • la contribution à une bonne image de marque
  • une augmentation du taux de transformation

Le tout pour un coût modique voir nul puisque c’est la qualité de la conception et du développement du site qui prend en compte tous les aspects influant sur l’expérience utilisateur. Et que cette réalisation de qualité est alors relayée par la satisfaction du visiteur et le bouche-à-oreille.

III. Les facettes de l’expérience utilisateur

Pour qu’une visite soit transformée en une expérience utilisateur positive, le site doit être conçu de sorte à optimiser aux maximum tous les différents aspects qui constituent une expérience utilisateur.

Ces aspects ont été détaillés par Peter Morville, architecte informationnel renommé dont la présentation en hexagones est une référence.

P. Morville distingue sept axes à prendre en compte : l’utilité, l’utilisabilité, la trouvabilité, la crédibilité, l’accessibilité, la désirabilité, la valeur.

L’utilité :

Le site doit répondre aux besoins, à la recherche de l’internaute.

Ou encore il lui apporte des renseignements, des fonctionnalités qu’il ne cherchait pas forcément mais qui lui ont été utiles.

L’utilisabilité :

L’information, le renseignement, même très utile à l’internaute, est inefficace s’il n’est pas pratique à comprendre, à utiliser.

La trouvabilité :

Cela implique deux notions :

  1. le site doit être trouvé facilement par les internautes auxquels il s’adresse ;
  2. l’information doit être trouvé facilement à l’intérieur même du site

La crédibilité :

L’ensemble du site doit convaincre l’internaute qu’il est dans un climat de confiance : offres sérieuses, interlocuteur respectueux, outils fiables, etc.

L’accessibilité :

L’internaute doit pouvoir accéder à l’information quelles que soit sa condition physique ou son installation matérielle

La désirabilité :

Le site doit « donner envie », séduire. Il doit offrir un contexte visuel confortable ou attrayant incitant ainsi l’internaute à s’y sentir bien, à y rester pour y trouver information et service.

Bien sûr, tous ces différents aspects influent les uns sur les autres et peuvent même parfois agir au détriment les uns des autres. Par exemple, un site au design innovant et très soigné, peut servir la désirabilité mais perdre l’internaute (et l’utilisabilité) dans des boutons graphiques séduisants, parfaitement intégrés au design et … ne correspondant plus à ce que l’internaute connaît et reconnaît comme étant un bouton !

Transformer une visite en une expérience utilisateur positive est donc tout un jeu d’équilibre à respecter.

IV. Les implications sur la conception et la réalisation

Pour qu’un site réponde à chacun des impératifs de l’expérience utilisateur sans en léser aucun, il y a donc de nombreux points à prendre en compte lors de la conception et de la réalisation du site.

Les différents acteurs de cette phase de création travaillent et réfléchissent ensemble à l’optimisation des différents points, utilisant leurs différentes compétences de façon croisée.

Quelques exemples de l’interaction d’une compétence sur les facettes de l’expérience utilisateur :

La rédaction des textes doit faciliter l’utilisation du site sans alourdir le design. Les textes doivent être riches en informations et compréhensibles.

Ils peuvent participer à l’appréhension de la navigation, de l’utilisation d’un outil mais aussi à la séduction, à l’attraction.

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, accessibilité, désirabilité

Le design doit servir la séduction mais également la facilité d’utilisation du site, la compréhension des différentes zones, des fonctions, des actions, etc.

Il participe aussi à la compréhension de la navigation, fournit des repères « géographiques », informe l’internaute sur la hiérarchisation des éléments d’une page.

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, désirabilité

Le code source optimise les pages de sorte qu’elles soient plus facilement trouvables sur Internet (référencement naturel), apporte des fonctionnalités supplémentaires de compréhension, organise et hiérarchise les types de renseignements donnés.

Il assure également une présentation correcte sur tout type de supports, garantissant ainsi une fiabilité de l’outil (présentation et utilisation)

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, accessibilité

Le projet de la page ou du site vise à fournir à l’internaute les information ou les outils qu’il lui manquait, optimise leurs fonctionnalités de sorte à être toujours plus utile et à répondre aux attentes des clients.

Une réflexion de la page dans son contexte permet de soigner sa cohérence avec l’ensemble du site (design, rédaction) favorisant ainsi la navigation dans le site, le confort de l’utilisateur, l’utilisation des repères, etc.

  • Bénéfices : utilité, utilisabilité, trouvabilité, crédibilité, désirabilité

Les différents métiers interviennent ainsi sur plusieurs aspects chacun et doivent le faire en collaboration les uns avec les autres afin de prioriser et harmoniser tout ces points importants et afin d’optimiser les pages et les outils de sorte à transformer toute visite en une expérience utilisateur positive.

Le formulaire d’inscription

Les informations

Des informations concises et utiles

Le formulaire va d’abord donner une première impression au visiteur ; la page ne doit pas le faire fuir. Il ne faut pas oublier que les internautes ne sont pas patients, qu’ils passent souvent leur temps à remplir des formulaires d’inscription, à devoir donner des informations sur eux, leur goûts, etc., pour accéder à des pages. Il vaut mieux éviter de demander des informations en trop grand nombre ! D’abord, cela va charger votre base avec des informations dont vous ne ferez probablement pas usage (Allez-vous vraiment téléphoner à vos internautes ?!) Ensuite, cela peut décourager celui qui voulait s’inscrire. Non seulement c’est trop long mais il est aussi en droit de se demander pour quelle raison on a besoin de savoir sa ville pour jouer à un jeu en ligne. N’oubliez pas, d’autant plus, que s’il estime la question inutile ou trop personnelle, rien ne l’empêchera de remplir de fausses informations !

Aider à la saisie

Mentionnez, dés le début, les champs obligatoires et, comme précédemment, ne rendez obligatoires que ce qui doit vraiment l’être. Une aide contextuelle est la bienvenue. Pour indiquer un format de date, préciser en quoi on a besoin de telle information, etc. Attention, tout de fois, à ne pas surcharger le formulaire en renseignements : vos indications comme vos libellés, pour être efficaces, doivent être clairs, concis … inutile de faire de la littérature ici.

La présentation

Une présentation adaptée

Ce premier point acquis, soignez la présentation de votre page. Si le contexte de votre site nécessite un formulaire long, découpez le en plusieurs étapes que l’internaute pourra visualiser et identifier. Ainsi, il ne sera ni surpris ni lassé si, en validant sa page, il doit encore remplir d’autres renseignements.

Cheminement et actions

Dans ce type de questionnaire à étapes, il y a quelques règles à respecter. Il est notamment nécessaire de permettre de revenir aux étapes précédentes. Au moment de la validation finale, un récapitulatif de l’ensemble des informations données, avec la possibilité de les modifier, est, là aussi, le bienvenu. Que ce soit pour l’accessibilité du site… comme pour le confort de tous.

Exemple de découpage en ongletsExemple de navigation d’un formulaire à étapes

Pour un formulaire long comme pour un formulaire court, n’oubliez pas d’afficher une confirmation après la validation. Rien de plus perturbant pour un internaute que de n’avoir aucune explication de ce qu’il va découler d’une action qu’il vient de faire !

L’ergonomie et le design

Une utilisation fluide et agréable

Après avoir travaillé le contenu, apporter un soin tout particulier à sa présentation et à son comportement peut être d’une grande aide pour l’internaute et, là encore, contribuer à l’effort de séduction que vous faites envers lui. Découpez les types d’informations en zones, grâce aux balises et (c’est-à-dire la délimitation de la zone et son titre). La balise < label >, nécessaire aux navigateurs vocaux, est aussi très utile et très agréable. Elle permet de mettre le curseur dans le champ de saisie voulu quand on clique sur son étiquette. Et surtout, ce dont on se passe difficilement dès qu’on y a goûté, elle permet de cocher / décocher un bouton radio ou une case à cocher en cliquant sur son libellé (la zone de clic est considérablement élargie).

Un design agréable mais aussi informatif

Pour ce qui est du design lui-même, les feuilles de style vont vous permettre de rendre votre formulaire plus « sexy », apporter quelques agréments supplémentaires. Vous pouvez, par exemple, les utiliser combinées au javascript, pour modifier l’apparence d’un champ de saisie quand le focus est sur lui. Rien ne vous empêche non plus d’appliquer un style particulier à vos champs obligatoires ; de personnaliser vos champs de saisie aux couleurs de votre site, etc. Tant que vous ne faites pas de votre page un arc-en-ciel de couleurs doublé d’un feu d’artifice d’effets ! Mettez-vous à la place de l’internaute et simplifiez-lui la vie.

Le fonctionnement

La fiabilité des informations

Votre formulaire est maintenant d’une présentation irréprochable ; attaquons-nous à son fonctionnement (fiabilité, enregistrement) Il va, bien évidement, falloir vérifier les informations qui vous ont été indiquées : la présence du « @ » dans l’email, une date au format voulu, etc. Pour limiter les erreurs, vous pouvez avoir recourt au menus déroulants, à un calendrier cliquable, etc. Le tout est de minimiser la frappe de l’internaute (sans pour autant alourdir le formulaire inutilement). Faire une première vérification en Javascript peut vous permettre de limiter les sollicitations au serveur. Par contre, ne serait-ce que dans le cas où le Javascript est désactivé, il faut quand même faire une deuxième vérification côté serveur avant d’enregistrer les informations dans la base. A vous de juger, donc, en fonction du nombre d’informations à vérifier, de votre serveur, etc. Une petite astuce bien pratique est de désactiver le bouton de validation final dès qu’il a été cliqué une première fois. Cela permet d’éviter les inscriptions en doublons des internautes qui cliquent deux fois (soit que la page suivante est lente à charger et qu’ils s’impatientent ; soit qu’ils double-cliquent par habitude).

La confirmation

L’envoi d’un mail de confirmation va vous permettre de vérifier la validité du mail – si celui-ci est nécessaire pour le déroulement du jeu – en confirmant et achevant l’inscription via celui-ci. C’est également le moyen de rappeler à l’internaute ses paramètres de connexion. D’abord, même si votre envoi est immédiat, il peut très bien finalisé son inscription plus tard ; mais ainsi, il garde aussi une trace, dans ses mails, au cas où il perdrait son mot de passe … ou votre URL ! N’oubliez donc pas de rappeler, dans votre mail, le nom du jeu, son adresse, éventuellement comment se connecter et les informations personnelles de votre nouvel inscrit : login et mot de passe. Si nécessaire, vous pouvez également aiguiller votre nouveau joueur vers la prochaine étape de jeu, ce qu’il peut dès à présent faire. Ceci dépend surtout de la complexité de votre game-play.

La legislation

Les informations légales

Un dernier point à aborder, et non des moindres, est la partie légale. En premier lieu, un site qui récolte des informations sur des personnes -et c’est le cas d’un formulaire d’inscription – doit être déclaré à la CNIL. C’est totalement gratuit. Mentionnez alors votre numéro de déclaration dans votre page et rappelez au visiteur qu’il garde un droit de consultation et de modification des informations qu’il aura remplies.

Le règlement interne

Le formulaire est aussi l’occasion de faire lire et accepter le règlement du jeu et du site par le futur inscrit. N’autorisez la validation du formulaire que si le champ correspondant au règlement a été rempli.

La newsletter

Enfin, si vous proposez une newsletter, sachez que la Loi sur l’Economie Numérique, vous interdit d’inscrire l’internaute par défaut. Il doit lui-même cocher une case indiquant qu’il souhaite être abonné à la newsletter. Si le fonctionnement de votre jeu oblige à recevoir des mails, précisez-le. Un formulaire prêt et complet ;-) Fonctionnement, ergonomie, accessibilité, … ; séduction, look, fiabilité, … votre formulaire est maintenant fin prêt ! Il ne me reste plus qu’à vous souhaiter beaucoup d’inscrits ;)

Article écrit pour Game On Net (articles sur le développement de jeux en ligne)

Qu’est-ce que l’ergonomie ?

Quels sont les points auxquels s’attache l’ergonomie, les grands principes de l’ergonomie – spécifiquement pour la navigation sur Internet ?

L’ergonomie s’intéresse à la facilité d’utilisation. En ergonomie informatique, nous nous attachons particulièrement à l’usage des produits interactifs. Quel que soit le média, qu’il s’agisse de web, de logiciel, de PDA ou de téléphone mobile, nos missions visent à mesurer et à améliorer l’utilisabilité du produit. Ce concept, traduit de l’anglais usability , résume la capacité du produit à permettre à l’utilisateur de réaliser efficacement la tâche pour laquelle il a été conçu.

L’analyse de l’ergonomie de navigation sur internet ne diffère pas de celle d’un autre produit interactif : Un site doit permettre au visiteur de trouver rapidement l’information qu’il cherche, de la même manière que le produit doit permettre à l’utilisateur de réaliser facilement la tâche.

A partir de là, la tâche de l’ergonome est simple : Il suffit d’identifier quels sont les freins, les difficultés qui vont empêcher l’utilisateur d’atteindre rapidement l’information qu’il cherche. C’est en analysant la cause de ces difficultés, qu’il identifie les manières d’y remédier et permet ainsi d’améliorer l’utilisabilité du site.

Pouvez-vous nous donner un exemple concret de « frein » que l’on rencontre sur les sites ?

Un frein c’est un problème qui ralentit l’utilisateur dans l’exécution de sa tâche. Par exemple, il ne comprend pas le libellé d’un lien et arrive sur une page qui ne correspond pas à ce qu’il cherche. Il doit revenir en arrière. Il perd du temps et de l’efficacité.

Il arrive aussi que l’utilisateur ne trouve pas le lien qu’il cherche, car il n’est pas suffisamment mis en évidence. Par exemple, sur un site de e-commerce, j’ai observé que certains utilisateurs cherchaient le lien qui permettait d’afficher le contenu du panier.

Un problème que l’on rencontre fréquemment dans les boutiques en ligne est celui de la description du produit qui ne correspond pas aux informations que recherche l’internaute. Il lui manque des renseignements qui lui permettraient de choisir. Sur un site, je me souviens par exemple, que les utilisateurs cherchaient le prix car celui-ci n’était pas suffisamment mis en évidence.

Parfois le designer pêche par excès. Des éléments visuels ou textuels masquent l’information importante aux yeux de l’utilisateur. Il cherche, filtre les données affichées pour isoler ce qui l’intéresse. Bref, il perd du temps inutilement. Le test utilisateur permet d’identifier ce type de problèmes. Ces difficultés freinent l’utilisateur dans son cheminement sur le site et contribuent à une mauvaise expérience. Au contraire, lorsque ces freins ont été éliminés, la navigation sur le site est fluide. Elle semble naturelle à l’utilisateur qui est plus enclin à revenir.

Ces principes, comment les a-t-on mis en place ? Comment en vérifie-t-on la fiabilité, l’efficacité ?

En fait, on ne parle pas de principes mais de « critères ergonomiques ». Il s’agit d’un ensemble de critères qui vont permettre d’évaluer l’utilisabilité d’un produit interactif. Un chercheur français, Ch. Bastien de l’INRIA, a élaboré une liste de critères qui fait référence [1]. Ces critères s’appuient sur le fonctionnement psycho-cognitif de l’individu. Ils sont initialement issus de l’expérience des chercheurs du domaine. Ch. Bastien a ensuite mené plusieurs expérimentations qui ont permis de les valider.

A dire vrai, les critères présentent l’intérêt de permettre à un ergonome expérimenté d’identifier les problèmes d’utilisabilité potentiels et donc de lever des difficultés d’utilisation par une simple analyse du logiciel. Ils nous évitent la mise en œuvre, parfois complexe, d’un test avec les utilisateurs finaux.

Toutefois, peu importe le nom qu’on leur donne et les principes auxquels ils se réfèrent, les véritables problèmes d’ergonomie sont ceux qui rendent le logiciel difficile à utiliser, ceux qui freinent l’utilisateur dans sa tâche. C’est en ce sens que le test utilisateur reste à mon avis, la meilleure manière d’évaluer l’ergonomie d’un produit interactif, car il permet d’observer les véritables problèmes que rencontre l’utilisateur lorsqu’il se sert du logiciel.

Qu’est-ce qu’un test utilisateur ? Comment cela est-il organisé et quel genre de résultats recherche-t-on ?

L’organisation d’un test se fait en trois étapes. Dans un premier temps, nous identifions avec le concepteur ce qu’il souhaite évaluer par le biais du test : certaines fonctionnalités du site, le ressenti de l’utilisateur sur certains points, etc. Dans un second temps, nous recrutons les utilisateurs en sélectionnant des internautes correspondant au profil visé par le site. Puis une session de test est menée avec chaque utilisateur.

A l’issue des tests, nous présentons à l’équipe projet une synthèse des résultats, illustrée au moyen de captures d’écran, enchaînements fonctionnels d’écrans (cinématique) et verbatims d’utilisateurs. Les difficultés rencontrées par les internautes sont décrites et des recommandations sont proposées afin d’y remédier. Généralement, lors de la restitution, les solutions préconisées sont analysées, et parfois revues, afin de prendre en compte les contraintes de développement.

En quoi l’ergonomie telle qu’elle est présente dans notre quotidien (voiture, appareils, etc.) peut-elle se retrouver dans la conception d’un site Internet ?

Les critères ergonomiques qui vont faciliter notre utilisation des objets de tous les jours : guidage, homogénéité, concision , etc. vont contribuer de la même manière à l’ergonomie des sites web.

La navigation Internet est probablement le domaine où les règles d’ergonomie de la vie de tous les jours s’appliquent le mieux. En effet, ce sont les mêmes principes ergonomiques qui vont s’appliquer qu’il s’agisse de permettre à un individu de se repérer dans une ville, dans les couloirs d’un immeuble ou sur un site web. Pour qu’il puisse se repérer, l’utilisateur doit savoir se situer par rapport au reste et comprendre par où il est passé.

La difficulté sur Internet est que l’utilisateur arrive directement sur la page qu’il cherche, à plus forte raison lorsqu’il se sert d’un moteur de recherche, sans passer par les pages intermédiaires. Contrairement au monde réel, il ne découvre pas progressivement le site dans lequel il se déplace.

Quelle est la part de l’ergonome dans la conception d’un site Internet ? N’est-il pas amené à travailler étroitement avec d’autres intervenants ?

Au démarrage, nous intervenons généralement dans la conception d’un site en collaboration avec l’équipe marketing pour définir l’architecture de communication du site. En interviewant les futurs utilisateurs du site, nous identifions leurs attentes et leurs besoins par rapport aux services qui seront mis en œuvre sur le site. Il nous arrive également de mener une analyse ergonomique des sites concurrents afin de construire le design du nouveau site en évitant les erreurs des concurrents.

Nous travaillons avec le web designer à la fois sur la charte graphique et sur l’architecture du contenu du site. Sur ce dernier point, il nous arrive de mener des séances de « tri par carte » pour construire la structure du site du point de vue des utilisateurs (voir Conseils en ergonomie informatique : Tri par carte , pour une description de la méthode).

Finalement, nous menons une série de tests d’utilisabilité avec les utilisateurs du cœur de cible afin d’identifier les problèmes d’utilisabilité avant de mettre le site en production.

Comment devient-on ergonome informatique ? Existe-t-il des formations ?

Il existe assez peu de formation pour devenir ergonome informatique. Les deux formations les plus connues à Paris sont le DESS « Ergonomie et conception des systèmes de production » de Paris 1 Sorbonne et le DESS « Ergonomie » de Paris 5 (voir aussi CNAM – DEA d’Ergonomie pour une liste de l’ensemble des formations en ergonomie). Il s’agit généralement de formations complémentaires à un cursus d’informatique ou un cursus de psychologie.

A mes yeux, ces formations manquent encore aujourd’hui d’ouverture. En effet, le métier d’ergonome informatique est typiquement un « métier d’interface ». Il est souvent au cœur des débats lors de la conception. C’est pourquoi, il nécessite non seulement, une meilleure compréhension des différents métiers intervenant dans la réalisation d’un produit interactif, mais aussi une sensibilité forte au coté subjectif de l’interaction.

De mon point de vue, une véritable formation d’ergonome informatique devrait également enseigner le marketing et les techniques de communication, mais aussi et surtout la création artistique et l’histoire de l’art tout comme le font les écoles de design. En effet, n’est-ce pas la finalité du métier d’ergonome que d’accompagner le designer dans la conception du produit ?