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.

Muji.fr - accueil

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.

Muji.fr - catégorie

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.

Muji.fr - page liste

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 :

Muji.fr - extrait du catalogue

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.

Muji.fr - page d'erreur

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.

Muji.fr - page produit

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.

Muji.fr - zoom produit

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.

Muji.fr - ajout au panier

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 !

Expérience utilisateur : little big mistakes, les petites erreurs qui agacent #2 (La Poste, le dictionnaire, orthonet)

Petite compilation de bugs, d’oublis et de mesquineries glanés sur l’internet ces derniers jours. (Le premier little big details est accessible à cette adresse.)

• La Poste : fâchée avec les accents ?

Le site internet de La Poste propose depuis quelques temps un service très pratique permettant de localiser un bureau de poste et d’en connaître les horaires (entre autres). Il suffit de se rendre à cette adresse et d’entrer la ville ou le code postal de son choix.

Little big mistake - La poste : localiser un bureau

(Le bouton « recherche » est placé si bas qu’il est invisible sur ma capture d’écran, mais ce n’est pas le propos.)

Problème : selon ce site, il n’y aurait pas de bureau de poste à Montélimar. Étrange ?

Little big mistake - La poste : recherche "Montélimar"

(Me permettre de faire une nouvelle recherche directement plutôt que de me renvoyer sur une autre page via un bouton aurait été agréable, mais ce n’est pas le propos.)

La raison est simple : le site ne comprend pas les accents. La recherche d’un bureau de poste à « Montelimar » renverra elle vers la bonne page. (Testé sur Mac, avec Firefox et Safari.)

Little big mistake - La poste : recherche "Montelimar"

• Le Dictionnaire : encore une histoire d’accent

J’ai souvent besoin d’un dictionnaire lorsque je rédige mes notes (pour éviter d’employer un mot à tort, par exemple : « derechef » ne signifie pas « immédiatement » mais « à nouveau, une seconde fois »). Je me rends donc régulièrement sur le-dictionnaire.com pour m’assurer de ne pas écrire d’ânerie.

Little big mistake - Le dictionnaire : page d'accueil

Malheureusement, ce site a lui aussi un problème avec mes accents. Voici la page qui correspond à la requête « été » :

Little big mistake - Le dictionnaire : résultat de recherche "été"

Testé sur plusieurs Firefox. Pas de souci avec Safari en revanche.

Note : lire la phrase « Veuillez vérifiez l’orthographe … » sur un site intitulé le-dictionnaire.com me fait un peu mal au cœur. (J’ai changé de dictionnaire depuis.)

• Orthonet : focus !

Orthonet est un autre site que je consulte régulièrement lorsque je rédige un document.

Little big mistake - Orthonet : page d'accueil

Ici aucun problème d’accent. Aucun problème particulier d’ailleurs, juste une remarque : pourquoi ne pas mettre automatiquement le focus sur le champ de recherche ?

Je m’explique. Si je tape « google.fr » dans ma barre d’adresse et que je valide avec la touche <entrée>, je suis redirigé sur la page d’accueil de Google. Si je tape ensuite du texte (sans toucher à ma souris), il sera automatiquement inséré dans le champ de recherche. C’est un gain de temps très appréciable pour les utilisateurs avancés.

On retrouve ce fonctionnement sur de très nombreux sites : Google donc, mais aussi le-dictionnaire, le dictionnaire des synonymes de l’université de Caen (cette note a un thème assez précis)… mais pas sur Orthonet. Dommage.

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 ?

Readability - article de zataz.com sans (à gauche) et avec (à droite) l'extension

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

Readability - article du Monde sans (à gauche) et avec (à droite) l'extension

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

Readability - article de Clubic sans (à gauche) et avec (à droite) l'extension

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é.