Au sommaire :

• Les goûts et les couleurs : la formation sur la symbolique des couleurs
• Tester l’ergonomie de son site même sans budget : les best practices
• Petite arithmétique de l’UX design : choisir, renoncer, construire étapes par étapes
• API et formulaires en HTML5
• Un bug à la fois : les problématiques d’un navigateur, Opera
• Les lighting Talks : 40 min, 10 intervenants, 10 speechs à mourir de rire !

Bonne lecture !

Les goûts et les couleurs

Une formation intéressante sur la symbolique des couleurs appliquée au web. La palette de couleurs est extrêmement importante pour l’expérience utilisateur, notamment sur les sites e-commerce où elle peut fortement favoriser l’acte d’achat. En fonction de leur spectre, les couleurs entrainent des réactions acquises et physiques différentes. Dans le premier cas, ces réactions dépendent de notre éducation et de notre culture. La réaction physique quant à elle entraine une accélération ou une réduction de notre métabolisme. C’est pour cela qu’il est communément admis que le rouge excite alors que le bleu apaise. La symbolique de chaque couleur en occident s’en est suivie, ainsi que des exemples de sites internet correspondants.

Quelques conseils en matière de sélection de couleurs ont été proposés : une couleur de base + une nuance correspondante + la couleur complémentaire correspondante. Et des outils pour faciliter cette tâche ont également été proposés tel que Kuler et Mypant.

Une question se pose ici finalement : peut-on stigmatiser chaque couleur à des sensations physiques même en ne restant que dans la symbolique des codes occidentaux ? Ne serait-ce pas comme l’a précisé un membre de l’assistance durant la session de questions/réponses : « un peu bullshit » ?

Tester l’ergonomie de son site même sans budget

Formation sur les best practices pour faire tester son site par des utilisateurs lambda sans avoir à passer par une agence spécialisée, car cela peut rapidement coûter très cher. « Do it yourself » ! Aussi bien durant la phase de maquettage ou de développement, car comme vous allez le voir, cela peut être « facile » avec de la méthode !

Tout d’abord, sélectionnez un panel d’utilisateurs pioché dans vos proches :

• La famille / des amis : pas vraiment optimal, car ces membres risquent d’être trop positifs dans leurs réponses pour vous faire plaisir.
• Des collègues : attention ici à ceux qui risqueraient de répondre sans vis-à-vis de leur propre intérêt. Un collègue intégrateur ayant tout intérêt à ne pas être négatif pour éviter toute modification de travail !
• Des étudiants : pratique, car toujours à la recherche d’argent !

Un lieu clos doit être choisi, ainsi qu’un logiciel d’enregistrement de la session tel que Camstudio. Sélectionnez ensuite un observateur : il aidera les utilisateurs si des problèmes techniques arrivent, pour répondre à ses questions, incitez celui-ci à parler à voix haute tout en lui proposant étapes par étapes le scénario. Il doit être présenté comme détaché du projet pour éviter de biaiser les réponses de l’utilisateur. Attention également à ne pas donner d’indices sur une fonctionnalité à l’utilisateur, exemple : « recherchez des billets de train »

Un scénario d’accompagnement de l’utilisateur doit être préparé en amont pour l’aider dans les tâches qu’il devra réaliser. Une tâche c’est un contexte et un objectif. Un scénario pour contextualiser un achat, une inscription par exemple. Et un objectif correspondant que l’utilisateur peut lui-même valider : « j’ai réussi à commander cette paire de chaussures » quitte à ce que cela soit faux ! Un bon démarrage peut être tout simplement la description de ce que voit l’utilisateur : type de site, fonctionnalité présente sur la page, etc. Prenez des notes après chaque session pour optimiser le debrief avec le chef de projet effectué en fin de la journée de test.

Finalement, le seul coût de l’opération est la rémunération de l’utilisateur, 40 euros semblent être une bonne moyenne, que cela soit en bon d’achat ou en cash suite avec une note de frais (tout dépend de votre comptabilité !). Pensez aussi que les lieux publics tels que le bon vieux Starbucks coffee et les tests utilisateurs à distance sont des options tout à fait envisageables ! On notera sur ce point des sites utiles tels que Appili en français (25^e par utilisateur) ou Youeye en anglais qui possédera bientôt une fonction de EyeTracking pour utiliser à distance la webcam de l’utilisateur.

Bref, faîtes des tests, que cela soit fait par vos soins, ou ceux d’une agence, cela vous évitera de toute façon des coûts bien plus importants par la suite et les éternels V3,V4,V5 !

Petite arithmétique de l’UX : choisir, renoncer, construire

Restons « User Centric » avec cette formation très intéressante pour « épurer » efficacement et avec pertinence votre site internet durant sa création ou sa refonte. On démontrera ici l’utilité de la méthode S.H.E pour « Shrink » (réduire) Hide (cacher) et Embody (personnifier).

Tout d’abord, il va falloir choisir le nombre de fonctionnalités pour éviter d’avoir des multi-tools « qui en jettent » et peu utiles au final pour l’utilisateur. Plus facile à dire qu’à faire, car dans cette étape de réduction on se confronte :

• À nous-mêmes, créateurs de site internet.
• À l’utilisateur, attaché par habitude à des fonctionnalités.
• À la concurrence : si elle fait beaucoup de choses, je ne peux pas en faire moins !

Comment faire alors ? Lister une fonctionnalité et comparer sa valeur à son coût en « Journée Homme ». Vous verrez dans le mapping ci-dessous le résultat du comparatif de chaque fonctionnalité : certaines auront beaucoup de valeur, mais seront très compliquées à mettre en œuvre (coût élevé), d’autres auront une valeur limitée et un cout élevé (poubelle), d’autres encore auront beaucoup de valeurs et seront très simples à mettre en place (the best ones !).

Pour réduire sa sélection on peut : prioriser, raconter une histoire, penser « mobile first » tout en gardant dans l’esprit que l’instinct ne doit pas être brimé dans cette démarche !

• Cacher permet de faciliter le travail d’attention sélective, certaines fonctionnalités sont évidentes dans cette démarche : menus déroulants, apparition d’éléments uniquement au survol.
• Personnalisez, simplifiez avec des icônes et en pensant à l’opposition entre l’agencement dans l’espace (un écran, x rubriques) VS l’empilage dans le temps (x écrans, 1 rubrique) dans le but d’optimiser l’expérience utilisateur.

Petite note de fin, « l’usabilité » d’un site est une affaire d’ergonomie alors que la simplification est une affaire d’UX design (User eXperience design).

HTML5

Deux formations distinctes ont été proposées : une sur les API HTML5 et une autre sur les nouvelles possibilités des formulaires.

Du coté des formulaires, l’intervenant a démarré sa session avec un parti-pris très clair sur les webkits qui sont des bibliothèques logicielles permettant aux développeurs d’intégrer facilement un moteur de rendu de pages Web dans leurs logiciels. En trois mots : « C’est à prohiber ! ». S’en est suivi un listing d’attributs pour améliorer l’expérience utilisateur dans un formulaire tel que :

• @autofocus : pour donner le focus d’un élément
• @placeholdfer : pour afficher un texte donnant un indice sur le contenu à rentrer (input et texte area)

Du coté des APIs on listera :

• Les Websockets : pour avoir une communication bidirectionnelle entre le serveur et le client.
• File API : possibilité de lire directement côté client le contenu des fichiers sans avoir à passer par le serveur
• vidéos API : avec les formats H264 (bourrés de brevets) et WebM (open source). La vidéo se comporte comme un élément HTML, libre à vous de lui donner toutes les compétences CSS ou SVG que vous souhaitez ! À noter un media framework pour synchroniser à une vidéo avec tout type de marqueurs : http://popcornjs.org/
• History API : pour gérer l’historique plus efficacement qu’en Ajax avec la méthode pushState.
• Le format JSON : pour transférer à peu près n’importe quel objet JavaScript valide en chaîne de caractère et de faire la transformation inverse.
• La technologie Apcash pour permettre l’utilisation du site lorsque l’on est hors ligne.
• Les incontournables Canvas : tueront-ils la technologie Flash dans le futur ?
• pdf.js : pour garantir l’intégration de format PDF sans l’utilisation de plug-in.
• La technologie WebGL : pour des rendus 3D plus que bluffants (ex : http://bodybrowser.googlelabs.com/ pour regarder le corps humain sous tous les niveaux. Toujours, en bêta test malheureusement…)

Le vrai défi du HTML5 a clairement été soulevé en fin de formation : une utilisation globale, répandue et stable. Bref, il faut le démocratiser !

Un bug à la fois

Un intervenant a sensibilisé l’assistance sur le problème de l’XML parsing du point de vue du navigateur Opera. Avec un message fort pour les intégrateurs : créer des hacks est une mauvaise politique et l’utilisation de librairy « funky » présente plus de risques que d’avantages ! Opera comme tout navigateur est confronté à un insight récurrent de la part des internautes : « si cela ne marche pas c’est la faute de mon navigateur, pas celle du site internet ! »

Les lighting Talks

Une très bonne surprise pour ma part, 10 intervenants présentent durant 4 min top chrono un point de vue, un fait en rapport au web.
@Karlpro remporte la compétition à l’applaudimètre avec son étonnante démonstration : comment faire un sac de laptop avec un jean !

Suivi par deux ex-aequo proposant pour l’un un fait absurde : Pas De Liens Sans Autorisation, ou comment informer que de nombreux sites obligent, selon leurs mentions légales, les internautes à les informer avant de poster un lien hypertexte ! Tel que Facebook, Google, Twitter… Le second ex-aequo nous propose le concept hilarant du G.A.O : les best practices de la Glande Assisté par Ordinateur. 25 min de travail, 5 min de pause !

Voilà pour le long debrief de cette première journée de formations à ParisWeb, deuxième session ce matin que vous pouvez suivre en live ici !

La première partie de la conférence était axée sur le modèle ergonomique à respecter pour les applications Android à savoir: l’application Twitter. En effet cette application a été réalisée conjointement par Twitter et Google, avec pour objectif de déterminer un standard, un petit peu comme l’a fait le Google Nexus One au niveau des standards hardware.

Trois éléments principaux sont désormais à considérer comme des standards : L’action Bar, le quick action popup et la présentation de la Home page.

Action bar

L’action bar représente ce que l’on pourrait nommer le header de l’application. En plus de contenir le logo de l’application, servant aussi de retour à la home, l’action bar doit contenir la fonction de recherche sur son extremité droite, si celle-ci à lieu d’exister bien-évidemment. Mais surtout elle doit contenir un bouton d’accès à la fonctionnalité principale de l’application.

Dans le cas de l’application twitter c’est la fonctionnalité permettant de « tweeter » que l’on retrouve.

Le Quick Action Popup

Le Quick Action popup a pour objectif de remplacer le context menu. Le context menu c’est ce menu secondaire qui apparait comme une light box dans les applications Android. Peu esthétique et à l’ergonomie moyenne, on comprend cette volonté de s’en passer.

Le quick action popup se veut bien plus direct et esthétique. Il se symbolise par un menu, lié à un élément, un tweet dans notre cas, contenant plusieurs actions illustrées par des logos. Disposé à l’horizontale celui-ci autorise le scroll horizontal, ce qui permet d’ajouter un nombre conséquent d’options ou d’actions. De plus il faut savoir que les applications Android sont capables de supporter des plugins et c’est dans ces quick action popup que l’on va retrouver ces derniers.

La Homepage

Enfin la Homepage d’une application Android doit se présenter sous une forme simple et explicite : l’action bar est une

série d’îcones explicites et titrées symbolisant les différentes fonctionnalités de l’application. Ceux-ci doivent être de taille conséquente et très réactifs, Google insiste sur cette volonté d’instantanéité.

Ce sont donc les attentes de Google en terme d’application sur leurs système d’exploitation mobile.

La deuxieme conférence a été animée par @ludovic_perrier, co-fondateur de Diota Soft, entreprise qui propose ses savoir-faire en matière de Réalité augmentée, 3D, géolocalisation, temps réel,…

Le sujet de cette seconde partie était plus orienté vers les différents usages d’Android liés à ses spécificitées techniques (boutons physiques par exemple).

La navigation sur le mobile

Afin de ne pas reproduire certaines erreurs présentes sur quelques applications Android, comme le bouton retour inutile, voici un schéma présentant les différents boutons de navigation Android qu’il est important de prendre en compte pour l’utilisabilité de votre application.

En fonction des constructeurs, la position des boutons varie.

De ce fait, lors de la création de jeux mobiles, il est intéressant de laisser la possibilité à l’utilisateur de pouvoir configurer lui même ses touches, problème que l’on ne trouve pas sur iPhone.

Voici quelques règles d’or qu’il est important de connaitre et d’appliquer

• Pouvoir annuler l’action.
• L’appli ne doit pas être en pleine écran, il faut laisser la barre des titres.

En effet, un utilisateur, lorsqu’il utilise une application, aime bien pouvoir avoir accès à l’heure, ou voir ses nouveaux mails. Il ne faut pas non plus abuser de la modularité d’Android, notamment avec la profondeur de navigation (Maximum 4 sous-menu de nav)

Toute action doit avoir une réaction visible :

• Eviter les vues défilantes (Scroll view)
• Quand c’est intuitif, pas besoin d’aide (repensez au petite trombone de notre cher et
• tendre Word !)
• PENSER comme M. TOUT LE MONDE !

Que deviendra Android dans le futur ?

L’avenir est prometteur pour Android, et Google compte bien s’implanter sur les ordinateurs, la Télévision, avec comme exemple récent la Google TV. Un avenir prometteur donc pour le géant américain, qui nous dévoilera encore de nombreux projets dans les mois à venir…

Apple : des contraintes salvatrices

Le premier type de contrainte auquel va se confronter l’ergonome/designer sera celui de l’ergonomie imposée par la plateforme. Particulièrement dans le cas d’iOS, le célèbre système d’exploitation mobile d’Apple. En effet Apple impose certaines règles ergonomiques sur la plupart des applications. Les ressources en ligne d’Apple indiquent que l’ergonomie d’une application doit reprendre les usages ergonomiques de la plateforme. Il faut entendre par là qu’il est nécessaire d’utiliser le système de navigation de l’OS comme l’arborescence horizontale ou encore le système de tri par onglets.

Apple autorise bien évidemment une alternative à ce type d’ergonomie, mais celle-ci requiert davantage d’efforts de la part des développeurs. Ce type de design se base sur la métaphore. L’application doit donc se baser sur des éléments visuels présents dans « le monde réel » et reproduire une mécanique d’interaction proche de ce qu’il se ferait dans la vraie vie. Ce choix se fera en fonction de la manière dont est piloté le projet, selon les coûts, la qualité ou les délais.

Android : une liberté à maitriser

Pour la plateforme Android les problématiques sont différentes. Le designer aura une marge de manœuvre bien plus importante au niveau de son interface. Toutefois il devra obligatoirement prendre en compte les contraintes des résolutions multiples dès le début de la conception. En effet la multiplicité des terminaux Android engendre un nombre de résolutions conséquent. Lors de la conception il faudra donc prendre en considération la résolution des écrans des terminaux, leur densité (nombre de pixels par rapport à la surface de l’écran) mais aussi le ratio de l’écran (panoramique ou non).

Ces paramètres influencent l’équipe entière et ne doivent jamais être perdus de vue. Dans les kits de développement fournis par Google il existe une technologie nommée 9-patch qui permet de simplifier cette gestion de résolution via une gestion avancée des fichiers PNG.

Voici donc les premières contraintes auxquelles les designers orientés mobilité devront se confronter. Certains choix graphiques devront être réfléchis avec prudence car ils seront les facteurs déterminants du bon déroulement d’un projet mobile.

Nous rentrerons, au cours d’un prochain billet, dans les détails opérationnels de cette problématique. En attendant, bons tests et n’oubliez pas : soyons mobiles !

Toutefois,  comment peut-on définir l’utilité de telles applications ? Une interface riche peut être utile si, par exemple, elle propose des aides au remplissage de formulaires, des infobulles, un affichage plus sophistiqué, des réglettes, des sélections sur des éléments graphiques  ou un apport d’une plus value bénéfique au site.  Cependant, une sophistication toujours croissante amène les développeurs à innover sans cesse sur les modèles de navigation au risque de les rendre, parfois,  trop compliqués.

Innovation et aide à la navigation

Si l’on prend l’exemple de Deezer, l’innovation se fait dans l’interactivité entre les différentes zones du site. Pour ajouter une musique dans votre playlist, vous pouvez la faire glisser dans le nom de la playlist (avec un effet de surbrillance) ou cliquer sur le pictogramme associé à l’ajout d’une musique. Si vous essayez de déplacer une musique dans une autre zone incompatible, l’effet de surbrillance passera de vert à rouge, vous indiquant clairement que l’action n’est pas faisable.
Cette application permet donc de simplifier la navigation de façon cohérente. Au lieu de cliquer sur le pictogramme « + » puis de sélectionner le nom de la playlist et enfin de cliquer sur « autoriser », vous pouvez ajouter une musique grâce à un simple glisser déposer. 
 

La navigation se veut aussi fortement intuitive. Dans l’exemple suivant, Miramarcrouesty, plusieurs boutons peuvent être déplacés afin de ne pas gêner la lecture du contenu mais aussi pour permettre à l’utilisateur de créer en quelque sorte son petit univers. Ces modifications permettent de passer outre les règles de navigation préétablies d’un site traditionnel.  Cependant cela implique évidemment un petit travail d’organisation de la part de l’utilisateur, car si certaines zones d’un site sont déplaçables, d’autre ne le sont pas et n’ont pas été prévues pour. Autrement dit, si vous déposez un élément à droite d’une page pour améliorer votre lecture, vous aurez surement à le déplacer à nouveaux à l’affichage d’une nouvelle page.

 Certaines applications ne se révèlent être qu’une sorte de tape à l’œil cherchant à distraire pour cacher un contenu pauvre ou peu attractif. Sans prétendre que cette utilisation produit des applications futiles, quels sont alors les bénéfices apportés ?

Immersion par le Gameplay

Afin de se démarquer des systèmes de navigation classiques, on voit apparaitre de plus en plus de modèles  de navigation empruntés  aux jeux vidéos ou relevant d’une certaine expérience d’utilisation. Par exemple le Gameplay des jeux vidéo grâce auquel,  l’utilisateur  va naviguer en utilisant les touches de son clavier, la visualisation en 3D et le clic droit. C’est-à-dire qu’on utilise vos habitudes de navigation n’étant pas issues du web pour les adapter aux applications.  Cela permet notamment de créer une forte immersion dans l’univers du site afin d’amener l’utilisateur à son objectif d’une façon moins ennuyeuse.

Dans l’exemple de Photosynth, l’utilisateur peut utiliser son clavier ou sa souris pour naviguer. Les flèches permettent d’avancer dans la photo comme on avancerait dans un univers avec son personnage. La souris sert ici à regarder autour de soi. Cette navigation est très intéressante car elle propose une nouvelle approche de la navigation que ne permettaient  pas certaines visionneuses innovantes.

Outre le fait de créer une forte immersion,  ce genre de navigation prend tout son sens quand l’application devient le centre d’intérêt unique du site sans avoir à cacher ou à justifier un contenu quelconque  par la suite. L’application perd alors son statut d’aide à la navigation pour devenir une entité supérieure, l’objet de toutes les attentions.  L’application remplace le contenu pour délivrer un divertissement qui se révèlera utile ou non en fonction de l’exigence de chacun.

Pour conclure je souhaite vous poser cette question :

Pensez-vous que l’interface utilisée dans les applications riches sert le contenu pour plus de clarté ou sert uniquement à divertir son utilisateur ?

« Le logo est à gauche », « le menu en haut ou sur le côté », « le contenu est au centre »…tels sont des éléments qui reviendraient de façon régulière car effectivement, une large majorité des sites est basée sur ces standards (admis par l’internaute et donc maîtrisés, pour la plupart).

Cela dit, de nombreuses expérimentations montrent qu’il est possible d’envisager de nouveaux modèles de naviguation (avec plus ou moins de succès).

Quelques exemples :

Songza

Songza est un moteur de recherche de musique doté d’une ergonomie originale et innovante. Ici on laisse de côté les traditionnels symboles « play » à gauche du titre ou les petites étoiles pour voter. Un pointeur/cible permet d’effectuer toutes ces actions très simplement mais surtout de manière tout à fait intuitive. Dès la première utilisation et sans effort intellectuel particulier l’utilisateur devient à l’aise avec cette nouvelle interface.

Pour en savoir plus sur Songza, je vous invite à consulter une analyse détaillée sur le blog Ergophile.

Sekisuihem

Une expérience intéressante pour promouvoir une société Japonaise de maisons préfabriquées.

Il faut ici déplacer son personnage en drag’n drop au sein des pièces de la maison pour accéder aux contenus dus ite. Ce n’est pas toujours très simple mais l’originalité est là !

Publicis Stockholm

J’ai découvert le site de la branche Suédoise de Publicis un peu par hasard mais sa navigation aussi inhabituelle qu’étrange ne laisse pas indifférent. Ici pas de menu, pas d’espace reservé au contenu, seulement des cases menant à d’autres pages à la façon d’un tableau de bord.

Le design est minimaliste et forcément déroutant du fait de l’occupation totale de l’espace du navigateur. (waaa, on étouffe un peu ici…)

Si l’originalité est là, l’efficacité est loin d’être évidente.

Dans la même veine, voici Marumushi qui permet une autre forme de visualisation de l’information au travers de blocs de couleurs de différentes tailles.

Dont Click It

Le célèbre site dans lequel aucun clic n’est nécessaire pour naviguer.

Un vrai défi pour l’internaute qui doit résister à son instinct premier. Toute l’intéraction se fait par des jeux de survol pour obtenir l’information désirée.

D’autres interfaces intéressantes à découvrir :

• Playersrepublic
  
• Shematic
  

Au travers de ces exemples, on se rend compte que de nombreuses voies restent à explorer quant à la façon de présenter ou d’accéder à l’information.

Pour aller plus loin :

• Connaissez-vous l’ergonomie artistique ? par Frédéric Cavazza

C’est sans doute partant de ce constat que l’univers netvibes ErgoIHM est né.

Au menu, plusieurs onglets : « Ergo IHM », « Conférences », « Facteur humain » avec de nombreux flux RSS en français et en anglais.

Une mine d’or pour l’ergonome classique (au sens industriel), et donc également une bonne source pour la veille informationnelle de l’architecte de l’information web. A ce titre, je vous recommande l’excellent Usernomics, qui publie moult analyses et conseils pour l’optimisation de votre site.

Tout juste rentré des ateliers Paris Web 07 que déjà la frustration de n’avoir pu assister aux conférences s’installe. En effet, tous les excellents échos que j’avais pu avoir se sont révélés vrais.

Plusieurs « pointures » du web français et international étaient présentes ce qui a donné lieu à des interventions d’une qualité plus qu’appréciable, des interactions nombreuses avec les auditeurs et une bonne humeur générale toute à fait plaisante.

Le seul défaut que j’ai pu trouver à cette journée est qu’il était impossible d’assister à tous les ateliers…damned

Puisqu’il a fallait en choisir 4, voici les ateliers auxquels j’ai assisté :

• « Analysons ensemble l’ergonomie de votre site Internet !» par Amélie Boucher
• « Flex, Flash et accessibilité» par Stéphane Deschamp
• « Le RGAA par la pratique » par Aurélien Levy
• « Conception d’un site accessible : démarche et bilan ! » par Émilie Sidoli, Julie Landry, Laurence Borne, et Marie Destandau.

Je vais donc vous faire mon petit compte rendu sur ces 4 interventions (en 4 billets différents) qui, est-il besoin de le préciser, ont toutes d’été de grande qualité.

1^er atelier : Analysons ensemble votre site Internet par Amélie Boucher

Amélie Boucher – fondatrice d’Ergolab et auteur du récent ouvrage sur l’ergonomie web disponible chez Eyrolles.

Première remarque et non des moindres, la salle était pleine. Pleine, à tel point qu’il n’y avait plus de places assises et que les retardataires ont dû rester debout. Bien que cela ait l’air tout à fait anodin, quel meilleur témoin de la prise de conscience de la place importante de l’ergonomie dans la conception de site Internet.

La présentation s’est axée autour de 12 règles essentielles :

- Une architecture bien rangée et adaptée à la cible

S’il semble évident que cela soit une nécessité de base, de nombreux sites Internet viennent nous prouver tous les jours le contraire. L’architecture business ne doit pas systématiquement être adaptée de façon « brut de pomme » sur le site. En effet, certains termes spécifiques à la marque ne sont pas toujours porteurs de sens pour l’internaute ce qui peut venir perturber la navigation au sein du site.

Par ailleurs, il existe une différence notoire entre la quantité d’informations proposées par le site par rapport à celle perçue par l’utilisateur d’où l’importance capitale d’organisation du mieux possible l’information.

- Organisation visuelle

L’organisation visuelle se cale directement sur les lois de Gestalt (grands principes d’organisation visuelle)

-Cohérence

Conserver une logique tout au long de la navigation de l’internaute.

Un peu facile mais tellement flagrant en ce moment, les portails France Television en pleine refonte. La page d’accueil de France 2 et France 3 viennent d’être mise à jour alors que le contenu de niveau 2 conserve l’ancienne mise en forme. Un peu déroutant même pour les utilisateurs avertis que nous sommes.

-Convention

Les conventions font appel à la mémoire utilisateur et au « règles » ou « principes » établis des usages sur Internet. Exemple concret : le logo d’un site Internet. Ce dernier est systématiquement placé en haut à gauche pour suivre le principe de lecture qui va dans ce sens. De façon intuitive nous avons le réflexe d’aller le chercher là quand bien même il serait placé à droite.

L’exemple présenté par Amélie s’est fait sur le site de Clarins. Il est vrai que lors du choix du produit, une liste de checkbox est laissée libre à l’utilisateur. Instinctivement (et puisque c’est gratuit), nous avons tendance à cocher toutes les cases.

Dommages, un seul article semble autorisé (et pourtant cétait indiqué). Un radiobutton aurait semble-t-il été plus judicieux d’autant que les différentes utilisations des éléments de formulaires sont maintenant quasiment acquis pour les utilisateurs réguliers du net.

-Information – visibilité du feedback

Informer l’utilisateur ! Un utilisateur informé est un utilisateur en confiance, qui plus est sur un site d’achat.

Sur VirginMega, un ajout de produit présent déclenche l’affiche en haut de page d’une alerte précisant le contenu du panier. Problème, on ne le voit pas lorsque l’on est trop bas dans la page.

Dommage de ne pas avoir pensé à faire adapter la position de cet affichage selon là où l’on se trouve dans la page.

Résultat de cette erreur, un double clic de l’utilisateur donc un double ajout ce qui entrainera plus tard une suppression dans la page dans son panier. Bien évidemment, cela ne sera pas pour rassurer le futur acheteur.

-Compréhenssion

Faire comprendre à l’internaute ce qu’il est en train d’entreprendre sur le site. Les actions ne doivent pas être ambigües mais claires pour être le plus efficient possible.

-Assistance

Guider l’internaute !

Il faut suggérer les actions (notion d’affordance) qu’il doit faire sur le site. Ne pas le laisser perdu dans cette masse d’information sous peine qu’il ne revienne pas.

-Gestion des erreurs

La gestion des erreurs est essentielle. Comme dans la règle « information », un utilisateur informé est un utilisateur rassuré.

L’erreur en elle-même n’est pas problématique, il faut simplement faire attention à bien le faire remonter à l’internaute en lui indiquant précisément d’où vient le problème pour faciliter la correction.

Attention toutefois à la surprotection.

L’exemple étudié pour illustré les formulaires à vérification instantanée a été Remember the Milk déjà mis en avant par Fred Cavazza. Amélie Boucher montre ici que ce formulaire, aussi intuitif soit-il, pousse la protection utilisateur contre les erreurs trop loin dans le sens où le site considère comme erreur tout champ non rempli à partir du moment où le focus de la souris est sur ce champ.

A titre personnel, je trouve le formulaire d’inscription au portail Yahoo bien plus intéressant et intuitif (celui-ci fera d’ailleurs l’objet d’un article prochain). L’ajax est certes beaucoup utilisé mais de manière plus judicieuse que dans RTM. En effet, Amélie Boucher précisait que si la vérification instantanée était très appréciable d’un point de vue ergonomique, une sur-utilisation pouvait ne pas être utile.

-Rapidité

La rapidité où comment être efficient sur une page.

Un exemple tout simple de comment perdre du temps lorsque l’on cherche quelque chose sur le site de l’AFNIC.

Lorsque vous rechercher un nom de domaine mais que vous souhaitez le modifier, le contenu du champ disparait systématique et l’on se retrouve à devoir ressaisir mainte et mainte fois la saisie.

-Liberté

Live free or die…

L’internaute doit ressentir une grande liberté d’action sur le site. No comment.

-Accessibilité

Bien évidemment, l’accessibilité est une contrainte essentielle.

Selon Tim Bernes Lee, directeur du W3C et inventeur du World Wide Web « Le pouvoir du Web réside dans son universalité»

Rendre un site accessible devrait être aujourd’hui considéré comme un postula obligatoire dans toute création web. Mais oui, un site accessible est souvent plus long à faire ce qui impacte des coûts supplémentaires que tous les annonceurs ne sont pas près à assumer. Par ailleurs, un site accessible n’est pas synonyme de charte graphique absente et d’une mise en page laide, en témoigne le site réalisé par Émilie Sidoli, Julie Landry, Laurence Borne, et Marie Destandau pour le centre Pompidou.

-Satisfaction de l’internaute

Ce point se passe à mon sens de commentaire. Le titre seul suffit à comprendre.

La séance s’est terminée par une analyse de quelques sites proposés par les personnes présentes. Par manque de temps, seuls 3 sites ont été analysés.

Au final, j’ai trouvé que cette intervention était l’un des plus intéressantes de la journée. La bonne humeur dégagée par notre oratrice et les nombreux exemples ont permis d’apprendre rapidement quelques règles essentielles d’ergonomies, qui bien qu’elles soient connues, sont loin d’être appliquées partout.

Bravo pour cet atelier !

Amélie Boucher sera également présente à la conférence du 29 novembre à Adobe organisée par Designers Interactifs.

Synerg’heTiC ne manquera pas de vous faire un compte rendu.