Le Carnet de Léa

Ce billet fait partie d'une série Etude d'ergonomie durant laquelle Léa étudiera l'ergonomie, le design général et parfois le code d'un site web.

Premier changement par rapport à la version 1, La page d'accueil incite à l'inscription : pour profiter des services et des vidéos gratuites il faut désormais créer un compte. Cette démarche est idéal pour augmenter de facon considérable sa base de données clients/prospects.

Cette nouvelle page oriente le lecteur sur la richesse du contenu : les différentes listes (sélections, nouveautés, meilleurs ventes) sont là pour le démontrer. Dommage qu'il y ait quelques doublons dans les listes, mais l'utilisateur peut rapidement faire son choix suivants les critères qui l'intéressent.

Le flux RSS pour s'informer des nouveautés saute désormais aux yeux. Le logo (sans rappeler celui que j'utilise pour le carnet respecte les normes d'usage (fond orange, logo rss blanc), l'utilisateur est donc dans un environnement connu.

Un bandeau listant les modes de paiement acceptés a fait son apparition ; c'est plutôt rassurant quand on veut s'offrir un pack complet avoisinant la centaine de dollars. La cinématique - elle - ne change pas, les anciens utilisateurs sauront retrouver leurs marques. Dès la naissance du portail cette cinématique était rapide, simple et très bien expliquer avec les vidéos de démonstrations (fr) : un modèle du genre.

Egalement dans le rayon nouveauté, emob nous permet de "proposer ses services en tant que formateur". Très dans l'esprit web2, ce service implique directement l'utilisateur dans le contenu de la boutique (un autre exemple avec la boutique qui fait de bien jolis tee-shirts (fr)).

L'outil le plus utile d'une boutique en ligne, blog ou tout autre site web est le formulaire de recherche. Dommage qu'ici, il ne soit pas exploité à sa juste valeur. Le formulaire est caché dans le menu de droite et ne fournit qu'une recherche textuelle. Une barre de recherche avec le choix entre une recherche simple (textuelle comme aujourd'hui) et une recherche plus détaillée (par formateur, par prix, par date domaine, par logiciel, etc...) aurait apporté encore plus de facilité à la navigation.
Pour les septiques, je vous recommande d'aller faire un tour sur le site d'un constructeur automobile allemand (en), ce formulaire en est l'outil principal de navigation.

Marketinguement parlant, cette page est bien conçue, présente les services et produits de manière agréable grâce à une réalisation graphique réfléchie, belle et soignée.
Je souhaiterai néanmoins voir apparaître dans une version 3 un outil de recherche plus évolué que celui existant ainsi qu'un petit encart pour présenter les quelques formateurs vedettes, leur parcours, etc. Avec l'habitude les utilisateurs souhaiteront connaitre l'actualité de leur formateur favori ; cela deviendra sûrement même un critère de choix pour l'achat "tiens c'est le dernier tuto de Julien Pons (fr), je vais tout de suite l'enquiller dans mon caddie".

En terme de réalisation technique il y a malheureusement quelques petits défauts qui se retrouvent d'ailleurs assez régulièrement sur la toile.

Ce qui m'a choqué à la première visite c'est le temps qu'il m'a fallut pour télécharger la page. J'ai voulu donc creuser en regardant la conception technique de la page.

Comme j'en ai pris l'habitude lorsque je consulte un site bien réalisé, je regarde si le site respecte les standards d'accessibilité (fr). Pour cela j'utilise l'extension web developper (en) intégrée à Firefox et je consulte la page sans aucune CSS.

Si la page conserve sons sens et le message que vous souhaitiez donner à votre page c'est gagné ! Votre page pourra être consultée quelque soit le navigateur, déformée graphiquement par endroit mais tout en gardant un message cohérent et compréhensible. Voici le rendu sans CSS :



On s'aperçoit que c'est une suite d'image mise bout à bout où on fait difficilement la distinction entre les titres, les paragraphes, les listes etc. Les menus n'apparaissent donc pas clairement comme étant des menus, les classements semble n'être qu'une suite d'image et de texte sans réelle cohérence sémantique (c'est à dire porteuse de sens).

En conséquence, les navigateurs ne gérant pas les feuilles de styles ou les gérant mal afficheront un contenu sans cohérence. Cela a son importance pour les utilisateurs mal voyants, aveugles et pour les moteurs de recherche !

En effet une page structurée sans CSS sera mieux lues des moteurs de recherche, votre page sera mieux référencée et aura plus de chance d'apparaître dans les premières pages de votre moteur favori.

D'autre part si on visualise notre page avec les CSS mais sans les images (ce qui peut arriver lorsqu'une page est longue à charger), voici ce qui se produit :



Tout les artifices marketing si bien mis en place disparaissent : les listes perdent leur sens car il n'y a plus de titres, on en oublierait presque qu'on est sur le site d'emob

La conception de cette page est visiblement entièrement basée sur les images qui la composent, dommage pour les malvoyants et ceux qui ont fait le choix de ne pas les télécharger. Trop de commentaires sur leur blog on fait mention d'une taille de caractère trop petite ; même si les navigateurs peuvent augmenter ou diminuer les polices de caractères, ils ne peuvent agrandir les caractères des images

Pour conclure ce billet un peu long, les choix marketing pris par l'équipe emob ont été judicieux, je pense que cette nouvelle page portera ses fruits, même si je regrette

• une réalisation décevante contrairement aux habitudes de la bande à Nicolas
• une résolution de la boutique en 800px de largeur comme au bon vieux temps de caramail (fr) alors que les vidéos - elles - sont optimisées pour un affichage 1024px