uxui - Page 18 sur 33 - Blog personnel de Charles Le Prévost. Expérience utilisateur, interface utilisateur et UX writing.

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 !

14 février 201215 février 2018

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.

(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 ?

(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.)

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

Malheureusement, ce site a lui aussi un problème avec mes accents. Voici la page qui correspond à la requête « é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.

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.