Archives des texte - Page 3 sur 6

14 mars 201222 février 2019

Expérience utilisateur : Muji, le e-commerce du XXe siècle… en 2012 (2/2)

Suite et fin de ma commande sur le site internet de Muji (voir la première note). Je clique sur le bouton « panier » en haut à droite de la page.

La structure très classique de l’ensemble simplifie la consultation : la page n’est pas sexy mais son utilisation ne devrait pas poser de problème. En revanche, la charte graphique est — malheureusement — toujours aussi bien appliquée : les textes sont petits et les boutons en bas de page manquent de contraste.

Je clique sur « commander ».

Ici aussi, la structure relativement conventionnelle de la page (bloc « nouveau client » à gauche, bloc « déjà commandé » à droite) facilite sa compréhension. Je remarque toutefois :
• un texte d’introduction minuscule (on pouvait donc faire plus petit !) ;
• plusieurs liens peu mis en valeur et aux codes graphiques changeant (le « [plus d’info] » du premier paragraphe, le « cliquez ici » en bas à droite) ;
• quelques fautes d’orthographe et de ponctuation plutôt malvenues (la phrase « En créant votre compte sur, MujiOnline vous pourrez commander nos produits et accéder a nos différents services » est un exemple intéressant).

J’ai déjà un compte client chez Muji, je m’identifie.

Je suis surpris : comment cette page peut-elle être si confuse ? Les structures des deux pages précédentes fonctionnaient convenablement, pourquoi ici est-ce si différent ?

Je distingue plusieurs autres éléments à revoir, mais j’ai l’impression de radoter :
• le lien « changer d’adresse » remporte le trophée du texte le plus petit (jusqu’à la prochaine page ?)
• le texte « si vous vouler rajoutez un commentaire » le trophée de la faute la plus insupportable ;
• l’image à droite de la colonne « historique des commandes » le trophée du picto le moins lisible (j’ai fini par comprendre qu’il s’agissait d’un Caddie). D’ailleurs : que vient faire l’historique de mes commandes sur la page « livraison » ?

Je clique sur « continuer ».

Même mise en page illisible, même lien minuscule, même faute d’orthographe… Cette page ressemble énormément à la page précédente. Petite surprise cependant : le fil de commande, que je n’avais pas remarqué, est pourtant bien présent… tout en bas de la page. Drôle d’idée.

Note : j’apprécie particulièrement les nombreuses méthodes de paiement qui me sont proposées.

Je clique à nouveau sur « continuer » (un libellé bien peu explicite.)

Bien que plus dense, cette page est un peu plus lisible. L’utilisation de codes graphiques formels (titres en gras, liens bordeaux soulignés) associés à une structure un peu plus stricte facilite grandement la lecture. Malheureusement, les concepteurs ont choisi cette dernière page pour changer de codes graphiques : le bouton « continuer » a disparu. Pour poursuivre sa commande, il faut cliquer sur… le logo d’une carte.

Je clique sur un logo, je suis redirigé sur le module de paiement.

Me voici donc de retour en 1995.

Comment en 2012 peut-on encore voir ce genre de choses ? Et encore, la copie d’écran ne montre pas le meilleur :

Un gif animé (de 200ko tout de même), comme au « bon vieux temps » !

Je ne détaille pas davantage, Fred Cavazza en parle très bien ici (les commentaires sont intéressants également.) Cela dit, après deux notes entièrement consacrées à la relative vetusté du site de Muji, je me dis que cette page n’est peut-être que la suite logique de tout le reste…

23 février 201215 février 2018

Expérience utilisateur : Muji, un site… poussiéreux ? (1/2)

Muji est une enseigne que j’apprécie. Le concept initial, illustré par le nom d’origine « Mujirushi Ryohin » (d’après le catalogue, « produits de qualité sans marque »), me plaît beaucoup. Malheureusement pour moi, les seuls magasins français se trouvent à Paris ou en région parisienne (9 là-bas, aucun ailleurs.) Je me rends donc sur leur site internet pour acheter quelques fournitures de bureau.

En un clin d’œil, je suis de retour 10 ans en arrière. (Un clin d’œil d’une vingtaine de secondes tout de même, le temps pour le site de se charger.)

Note : je ne rentre pas ici dans le détail de chaque page ; je me concentre sur les différentes étapes de ma commande.

La page d’accueil remplit son rôle : je trouve rapidement la catégorie de produits qui m’intéresse. Je clique sur « papeterie », dans la colonne de gauche.

Début des réjouissances. Qui a eu l’idée d’utiliser une police aussi petite (de l’arial 10 px apparemment) ? Et pourquoi afficher de si petites images ? La photo du cahier est plus petite que le logo de la Société Générale en bas de la page !

Message personnel : intégrateur, n’affiche surtout pas le code source de ce site. Jamais. (Quatre mots issus de Web Developer, pour l’exemple : « 6 profondeurs de tableaux ».)

Je clique sur le cahier.

Bienvenue en 1998.

Premier point, la lisibilité : si les images sont cette fois un peu plus grandes, le texte est lui toujours aussi petit. Pour ne rien arranger, les descriptions des produits sont ENTIÈREMENT EN MAJUSCULE. J’ajoute que le sigle ‘€’ a été étrangement remplacé par les 3 lettres « EUR », que cliquer sur le caractère ‘2’ constitue un challenge en soi, etc.

Je ne vais pas répéter sans arrêt que la lisibilité des textes est mauvaise. J’arrête… non sans avoir précisé que la personne chargée de cet aspect a sans doute également travaillé sur la lisibilité du catalogue papier (disponible ici — attention, ce fichier pdf extrêmement lourd de 6Mo « nécessite une connexion haut-débit »), dont voici un extrait :

Second point : la présentation. Aucun tri n’est possible : par taille (A4, A5, etc.), par nombre de pages, par prix… rien. Il n’est pas non plus possible d’augmenter le nombre d’articles affichés.

En tête de gondole, les carnets que je recherche. Je clique — sur l’image, puisque la description n’est pas cliquable.

Produit non trouvé ? En tête de gondole ? Pas très sérieux, d’autant que cette erreur est en ligne depuis plusieurs semaines il me semble…

Le bouton « continuer » ne me redirige pas sur la page liste pour faire un autre choix mais sur la page d’accueil du site. Bon… Je reviens sur la page précédente et je sélectionne un autre carnet.

Bienvenue en ex-URSS.

La description de ce produit est composée de : 4 mots. « Couverture », « kraft », « Format » et « A5 ». De façon intéressante, cette description réussit à être moins informative que le titre de la page, puisque ce dernier contient l’indication supplémentaire « à lignes ».

Bien sûr, la description d’un carnet ne requiert pas des centaines de mots. Cela dit, il y a tout de même une chose que l’on s’attend à trouver : le nombre de pages. Ici, il n’est tout simplement pas indiqué. (Dans le doute, je jette un œil aux carnets A4 et A6 : rien.)

La photo du produit, toujours aussi petite, est accompagnée d’un lien « cliquer pour agrandir ». Je clique : le visuel mesure 287 px. On est loin des 1200 px de La Redoute par exemple.

Allez, pour un simple carnet, ce n’est pas bien grave. Et sur la fiche produit d’un lit, par exemple, l’image est un peu plus grande. En revanche, on ne trouve pas d’autres photos du produit. Quant à sa description…

Le carnet me convient, je décide de le commander. Je clique sur le bouton « ajouter », un bouton perdu sous le visuel du produit et au contraste proche de zéro. Et là, il ne se passe rien.

Ah, si : la ligne de texte située au dessus du visuel indique désormais « 1 produits | 2 EUR » (la faute d’orthographe, c’est cadeau). Étant donné la taille du texte… Mais j’ai dit que je ne revenais pas dessus.

Je termine cette première partie sur une note plus positive. Puisque le nombre de pages du carnet n’était pas indiqué sur la fiche produit, j’ai contacté une boutique Muji par téléphone. Une personne m’a répondu et est allée me trouver l’information directement dans le magasin.

Bien sûr, ça fait un peu vingtième siècle, mais au moins j’ai eu l’information que je cherchais !

3 février 201215 février 2018

Expérience utilisateur : Readability, une extension qui facilite la lecture

Lire sur internet demande un certain investissement. Les conditions de lecture (entre autres), rarement idéales, poussent de plus en plus d’utilisateurs à scanner les textes plutôt qu’à les parcourir en détail.

Je l’évoque souvent sur ce blog, la lisibilité des textes est un point trop souvent mis de côté par les concepteurs de sites. Trop petits, peu contrastés, trop denses… Les paramètres à prendre en compte lors de la mise en page de contenus web sont nombreux et malheureusement souvent négligés.

Readability est une extension multi navigateurs (Firefox, Chrome, Safari) et multi plate-formes (ordinateur, tablette, smartphone) qui transforme le contenu texte d’une page web afin de le rendre plus lisible. Elle permet au lecteur de s’affranchir du bruit visuel entourant un document afin de se concentrer sur son contenu, lui même retravaillé pour plus de clarté.

Quelques réglages permettent de personnaliser l’apparence du texte modifié. En voici quelques exemples.

Vous souhaitez consulter un reportage de Zataz mais vous n’avez pas 12/10 à chaque œil ?

Vous êtes lassés des publicités collées en plein milieu des articles du Monde ?

Les 3 (!) animations Flash de cette actualité de Clubic, qui bougent en permanence (mention spéciale à la vidéo de droite), vous perturbent ?

Readability n’est pas une nouveauté : conçu il y a quelques années, il ne s’agissait au départ que d’un simple script à glisser dans ses favoris. Il a beaucoup évolué depuis et offre aujourd’hui quelques fonctionnalités supplémentaires que je n’évoque pas ici (je ne les ai pas testées.) Sa récupération par Apple dans Safari 5 est sans doute une preuve de son indéniable utilité.