Quelques points à revoir sur sohome.fr

Je viens de lire l’article de Capitaine commerce 3 bonnes idées à piquer sur Sohome.fr. Si certains points évoqués me semblent intéressants (l’utilisation récurrente d’une mini-fiche produit par exemple), d’autres éléments du site m’ont davantage interpellé, en particulier sur la homepage.

Comme sur de nombreux sites e-commerce, la surface dédiée aux opérations commerciales est très importante. Sur cette page d’accueil, les 3 encarts promotionnels représentent près de la moitié de l’espace occupé. Malheureusement, dans ce cas précis, les marges qui séparent les 3 blocs sont trop fines, ce qui engendre une impression de confusion : il sera très difficile pour le client d’envisager ces 3 encarts comme des éléments différents d’un seul coup d’œil.

Le contenu même de ces encarts pourraient être amélioré. L’animation principale est très chargée : un titre (2 couleurs de texte, 3 tailles, de l’italique, c’est déjà énorme !), un bouton, un ensemble description + prix, un message commercial (la livraison gratuite, message redondant par ailleurs), un titre de tendance et plusieurs éléments de navigation au sein du carrousel (flèches & vignettes). Ce n’est pas forcément trop en soi, mais sur une zone de cette taille, animée (trop rapidement pour lire tous les textes) et peu lisible (placer les textes au dessus d’images si denses est élégant mais rend l’ensemble très confus), le risque de saturation est grand.

Les encarts secondaires souffrent eux aussi d’un problème de lisibilité : le prix du drap « Hello Kitty » et le lien « Draps de plage » sont quasiment invisibles. Toutefois, une structure se dégage de ces 2 blocs, avec un gros titre à gauche et une illustration à droite (ce n’était pas le cas la semaine dernière…). C’est un bon point : la répétition de cette structure va simplifier la consultation de la page, mais je crains que ce ne soit pas suffisant pour donner une chance à ces 2 opérations commerciales.

(Dans le même ordre d’idée je découvre à l’instant que l’encart de gauche me propose une réduction de -20%. C’est une information qui mériterait d’être davantage mise en avant.)

J’en viens au reste de cette homepage. Je distingue plusieurs choses qui pourraient être retravaillées rapidement afin d’améliorer la consultation de la page :
plusieurs textes sont trop petits. La baseline du logo, l’exemple de recherche, le texte « Bienvenue » (à quoi sert-il ?)…
• Au sujet du header : le formulaire de recherche n’est pas centré mais légèrement décalé vers la gauche, ce qui déséquilibre la page et renforce l’effet de flottement des éléments du header, qui manque de structure. Le « ok » ne ressemble pas du tout à un bouton.
De nombreux éléments manquent de contraste. C’est pour moi le problème le plus gênant : les messages situés dans les 2 barres grises sont bien peu lisibles. Est-ce pour cette raison que ces messages sont répétés plusieurs fois sur la page ? La livraison gratuite est évoquée 2 fois, l’inscription à la newsletter aussi.

Une dernière remarque au sujet du bloc fixe « So news », collé à gauche de l’écran. Premier soucis : sur les écrans d’ordinateurs les plus petits, ce bloc peut se retrouver superposé à la flèche gauche de l’animation principale.

Second soucis : après avoir rentré mes coordonnées, on me propose de « recevoir les offres So Home par email » et de « recevoir les offres des partenaires par email ». Or, il est possible de répondre « non » à ces 2 choix. Dans ce cas, à quoi serais-je inscrit ?

On me souffle à l’oreille qu’il est possible que ces choix soient « en plus » de l’inscription à une newsletter. Dans ce cas, il me semble plus compréhensible de rajouter le mot « aussi » aux 2 propositions (« Je souhaite aussi recevoir… »).

L’utilité du bouton « Annuler » reste quant à elle toujours à démontrer.

Bilan

Textes trop petits
Manque de contraste de certains éléments
Superpositions d’éléments de navigation
Lisibilité des opérations commerciales

Sécurité et autres écueils sur ameli.fr

La sécurité sociale offre depuis plusieurs années à ses assurés la possibilité de s’inscrire sur son site internet afin de ne plus recevoir de relevés de remboursement par voie postale. Suite à la réception d’un courrier m’incitant à ouvrir mon compte en ligne, j’ai décidé de tester ce service il y a quelques jours.

Je me rends sur www.ameli.fr comme me le recommande le courrier, puis je clique sur l’encart en bas à gauche « Mes remboursements en temps réel … J’ouvre mon compte ».


(On ne met pas d’espace devant des points de suspension, mais ce n’est pas le propos.)

La page sur laquelle je suis redirigé me propose plusieurs choses :
• je peux commander un code provisoire (tiens, on me parle de code provisoire, alors que le courrier fait mention d’un simple code) si je n’ai pas encore de compte ameli ;
• je peux résoudre mes problèmes d’accès ;
• je peux consulter une démo pour connaître les avantages du compte ameli ;
• je peux me connecter à mon compte.
Et pour les gens qui ont reçu un code par courrier mais qui n’ont pas encore de compte ?

Cette page manque de précision. Un simple bouton « vous avez reçu un code par courrier et souhaitez créer votre compte » résoudrait cet écueil.


(Les astérisques présentes à côté des légendes ne renvoient à rien, mais ce n’est pas le propos.)

Par déduction, je choisis « connexion à votre compte » (compte que je n’ai pas encore créé : le choix des mots est à revoir.) Je saisis mon numéro de sécurité sociale, puis mon code confidentiel (tiens, on me parle de code confidentiel désormais), et je valide en cliquant sur « me connecter ».

La page suivante décrit les conditions d’utilisation du compte. Je clique sur continuer.


(Les boutons radio se baladent à droite des labels au lieu d’être proprement alignés à gauche, mais ce n’est pas le propos.)

Je suis désormais sur la page de création de compte. Première remarque : le langage utilisé dans le premier paragraphe ne correspond pas tout à fait à ce que l’on attend d’un organisme comme la sécurité sociale. La phrase « C’est votre première visite… » devrait être supprimée. Deuxième remarque : les 2 mentions « tous les champs sont à compléter obligatoirement », ainsi que le texte « de 8 à 13 chiffres » sont en verdana… 8pt ! Dire que la sécurité sociale ne rembourse quasiment pas les achats de lunettes…

Le premier champ à remplir est intitulé « Mon code confidentiel provisoire », le second « Mon code personnel ». Si je récapitule, jusqu’à maintenant, on m’a parlé de :
• code (dans le courrier que j’ai reçu) ;
• code confidentiel ;
• code provisoire ;
• code confidentiel provisoire ;
• code personnel.

Tout ceci est très confus. Il est indispensable d’utiliser un seul terme pour qualifier une seule chose. C’est d’autant plus vrai qu’ici le code personnel n’est pas le même que les 4 autres – qui eux se réfèrent tous au même code. Heureusement, la popup d’aide permet d’y voir un peu plus clair.

Je remplis le premier champ puis passe au second. Mon code personnel, de 8 à 13 chiffres ? Un second coup d’œil à l’aide me le confirmera, le code ne peut contenir que des chiffres ! D’un point de vue sécurité, c’est une catastrophe. Sans parler de la limitation de longueur, elle aussi très gênante. Une attaque type « bruteforce » viendrait à bout de cette sécurité en quelques heures.

L’aide précise qu’il n’est pas possible d’utiliser son numéro de sécurité sociale, une suite de chiffre ou sa date de naissance. Quelles possibilités reste-t-il ? Je me lance : je parie que plus de 80% des codes créés sont soit des dates de naissance (conjoint, enfant) soit des numéros de téléphone.

Des règles de sécurité pareilles sur le site de la sécurité sociale (63 millions d’assurés), en 2011, c’est difficile à croire. Pendant ce temps, la loi Hadopi sanctionne le défaut de sécurisation de l’accès à internet…

Je poursuis. Paragraphe suivant : « Votre question secrète vous sera demandée… ». Demander une question ? Il y a de gros efforts de français à fournir… Je poursuis (encore). « …en cas d’oubli ou de perte de votre code confidentiel ». De mon code confidentiel, ou de mon code personnel ?

Je poursuis (toujours). La question secrète permet donc de récupérer son code en cas d’oubli. Une fonctionnalité très pratique à laquelle il convient d’appliquer une règle de sécurité évidente : il ne faut pas que la réponse soit trop facile à trouver. C’est loin d’être le cas ici : le nom de votre chien, le prénom de votre premier enfant, le prénom de votre père etc. sont des données très faciles à retrouver sur internet.

Pour finir, un petit mot sur l’interface de l’ensemble. Le site utilise des codes plutôt datés : largeur limitée, polices minuscules… Une mise à jour semble nécessaire. Quant au bouton d’aide situé en haut à droite de toutes les pages, il peut induire en erreur : son contenu n’est pas relatif à la page consultée. Pas la peine d’y chercher des indications sur votre code personnel provisoire et confidentiel, il n’est question ici que de « résolution » (une aide sur la résolution d’affichage ?), de « compatibilité des environnements » et de « cookie ». Pas certain que cette popup aide qui que ce soit, finalement.

Bilan

langage peu adapté, fautes de français
taille de certaines polices
désignations approximatives de fonctionnalités et d’éléments importants
sécurité !

Télécharger Live Messenger, pas si facile

Je prépare en ce moment une fiche de formation “Initiation à Windows”. Afin de présenter quelques unes des applications classiques d’un environnement Microsoft, je décide de télécharger Live messenger. Je tape donc « live messenger » dans Google : le premier résultat semble être une page officielle Microsoft, parfait.

Après avoir cliqué sur ce lien, je suis redirigé vers une page qui ne correspond pas à ce que j’attendais. Le site ressemble à une campagne marketing (et pour cause) pour le « MDR » (le Mouvement des Discussions Riches, un acronyme désopilant.) Et effectivement, un coup d’œil à l’url me confirme que je me trouve bien sur le site www.mouvement-mdr.fr.

Premier couac, la redirection automatique et transparente vers un site au contenu relativement éloigné du contenu attendu. La surprise est d’autant plus grande que seuls quelques éléments (les bonshommes issus du logo de MSN) disséminés sur la page rappellent que celle-ci a un lien direct avec le logiciel que je recherche – enfin pour ceux qui connaissent le logo de l’application.

À ce stade, un certain nombre de visiteurs risquent d’aller chercher le logiciel ailleurs.

Après avoir creusé un peu, je trouve (en dessous du fold, j’utilise un netbook) un bouton « Téléchargez ». Malheureusement, celui-ci ne fonctionne pas. Plus bas sur la page, je trouve un lien [il vous suffit d’avoir Messenger] « ou de le télécharger en un seul clic » : même problème.

Second (gros) couac, les liens ne fonctionnent pas.

À ce stade, le plus simple est effectivement d’aller télécharger Live messenger sur un autre site. (D’ailleurs si vous aviez fui dès le premier couac, vous seriez déjà en train de le récupérer).

Je m’accroche, je cherche, je trouve un lien [Messenger, qui leur permet de discuter en privé et en] « vidéo HD », je clique pour voir. La page qui s’ouvre alors présente bien un bouton « Téléchargez », mais elle est pour l’instant inactive car surmontée d’un layer intitulé « Explorer 9 pour MSN ». Et comble de malchance : il n’est pas possible de fermer ce layer, le bouton de fermeture se trouvant en dehors de la zone d’affichage.

Troisième (éneaurme) couac, impossible de fermer le layer (appuyer sur la touche échap ne fonctionne pas, cliquer à côté du layer non plus.)

À ce stade seuls quelques acharnés masochistes poursuivront la recherche sur ce site.

Je suis têtu, je connais un peu le truc, je recharge la page et le layer disparaît. Je clique sur le bouton « Téléchargez », ce qui déclenche l’affichage d’un layer (dont le bouton de fermeture est visible, cette fois) qui m’explique que «Oups, le messenger nouvelle génération n’est disponible que sur un pc équipé de la nouvelle génération de Windows ». Cela dit, un téléchargement se lance tout de même, alors quoi ?

Une comparaison entre le nom du fichier (Installation_WLMessenger.exe) et le contenu du layer me permet de comprendre que je suis en train de télécharger une ancienne version, sans doute la dernière disponible pour ma « vieille » machine. Pas très compréhensible, tout ça, pour les gens qui se fichent de ces histoires de versions…

Cela dit, c’est toujours mieux que sur un Mac : un clic sur le bouton « Téléchargez » déclenche l’ouverture d’un layer qui m’explique comment télécharger le fichier (?!), mais ne déclenche pas le téléchargement !

A ce stade, alors que vous n’avez toujours pas récupéré votre logiciel, les gens qui ont quitté le site au premier couac chattent depuis 5 minutes.

Bonus

Je reviens 2 minutes sur le layer « Explorer 9 pour MSN » et sa nana hystérique décoiffée par la vitesse du brouteur (une métaphore subtile et inventive.) A tout hasard, j’ai cliqué pour tester : j’ai été redirigé vers une page dédiée à Internet Explorer 9, surmontée d’un layer (on aime les layers chez Microsoft) « Oups, votre pc ne vous permet pas d’installer Internet Explorer 9 ».

Pourquoi ne pas me l’avoir dit plus tôt ? Non, la bonne question est plutôt : pourquoi m’avoir proposé Internet Explorer 9 alors que je ne peux pas l’installer ?

Dernier message de Microsoft : « Microsoft vous conseille toutefois de mettre à jour votre navigateur en installant Internet Explorer 8 ». C’est aimable, seulement IE8 est déjà installé sur ma machine…

Bilan

texte en contradiction avec l’action déclenchée
contenu proposé non adapté
page d’arrivée non conforme à celle indiquée sur le lien cliqué
lien cassé
layer impossible à fermer