Archives des expérience utilisateur - Page 11 sur 22

14 décembre 201119 février 2018

Interface utilisateur : les détails qui font la différence (vidéos)

Sur le principe de littlebigdetails*, quelques exemples de détails d’interfaces plus ou moins utiles qui nous simplifient la vie.

• Mac OS X : menu contextuel dynamique

Le clic droit offre à l’utilisateur de la plupart des systèmes d’exploitation un certain nombre de commandes pas ou peu accessibles autrement. Certaines fonctions restent cependant masquées, comme « ajouter au menu démarrer » sur Windows XP par exemple (il faut maintenir la touche Shift enfoncée avant d’effectuer un clic droit pour faire apparaître cette ligne.)

Les concepteurs d’OS X ont pensé à une alternative pour ces fonctions cachées : elles s’affichent dynamiquement (c’est la différence avec l’exemple ci-dessus) lorsque l’utilisateur enfonce la touche Alt.

• Mac OS X : affichage en colonnes et lisibilité du texte

Le Finder de Mac OS X permet à l’utilisateur de sélectionner un mode d’affichage parmi quatre. Le mode « colonnes » présente l’ensemble des fichiers de la machine sous forme de colonnes successives.

Lorsque la colonne est trop étroite pour afficher le nom entier du fichier présenté, des points de suspension remplacent les lettres manquantes. Mais avant d’afficher ces points, OS X diminue légèrement l’interlettrage afin de garder le nom du fichier entier.

Vous me direz : au lieu de s’amuser à implémenter ce genre de fonctionnalités, les concepteurs du Finder feraient bien d’améliorer le Finder lui-même. Je suis bien d’accord.

• Dailymotion : progression de la vidéo

Un classique. Lors de la lecture d’une vidéo sur Dailymotion (et lorsque le pointeur de la souris ne se trouve pas sur la vidéo), le logo « Dailymotion » situé en bas à droite se remplit progressivement de blanc.

Bien sûr, on pourrait assez facilement faire l’inverse de Littlebigdetails et créer un blog répertoriant les erreurs les plus « évitables » qui soient.

• Littlebigmistakes : publier une vidéo sur Vimeo

Pour publier une vidéo sur Vimeo avec un compte gratuit, il vaut mieux être patient : le site impose un délai de 30 minutes entre le moment de l’envoi et la mise en ligne réelle du fichier. Soit, c’est une restriction comme une autre. En revanche, j’ai été très surpris de voir qu’il existait une limite à la taille du fichier publié. Une limite… basse, c’est-à-dire qu’il est impossible de mettre en ligne une vidéo trop légère !

L’erreur ici est de ne pas préciser quelle est cette limite…

• Littlebigmistakes : mettre à jour ses logiciels Adobe

Application Manager est un petit programme d’Adobe qui s’installe automatiquement avec la suite CS et qui permet de maintenir à jour l’ensemble des logiciels qui la composent. De temps en temps, lorsque je lance l’un de ces logiciels, une icône apparaît dans la barre supérieure de l’écran. Si je clique dessus, un message m’indique que « [l’]Ouverture de l’actualiseur [est] en cours… ». (Note : la vidéo suivante contient une musique qui illustre assez bien le propos.)

L’ouverture n’est évidemment pas en cours ; pour afficher l’actualiseur il faut cliquer sur le libellé. Un bien mauvais choix de mots…

* Littlebigdetails.com est un blog visiblement très apprécié sur lequel différents contributeurs publient de nombreux détails d’interfaces qui les interpellent.

7 décembre 201122 février 2019

Expérience utilisateur : un résultat c’est bien, un résultat complet c’est mieux

J’ai reçu il y a peu de temps un courrier du ministère du budget (oui bon… une lettre des impôts) me réclamant le paiement de la cotisation foncière des entreprises. En tant qu’auto-entrepreneur, il me semble pourtant être exonéré de cette CFE. Je vais donc rechercher des informations à ce sujet.

Première idée : je me rends sur le site officiel du gouvernement. Attention, ça pique un peu les yeux.

Oui, nous sommes bien en 2011, sur un site officiel.
Je pourrais écrire des livres entiers à propos de ce site, mais ce n’est pas l’objet de cette note. J’y reviendrai sans doute.

Je cherche un moteur de recherche, je n’en trouve pas. Je scanne le contenu de la page d’accueil, je ne trouve aucune information relative à ma question. Je jette un œil au menu supérieur : il y a bien un bouton « CFE », mais cet acronyme désigne ici le Centre de Formalité des Entreprises. Je clique sur le bouton juste à côté, « Questions / Réponses ».

Je suis un utilisateur avancé, je ne perds pas mon temps à lire tout le contenu de la page, je fais une recherche avec cmd + ‘F’. Je tombe très rapidement sur le paragraphe qui m’intéresse. Je souhaite bon courage aux utilisateurs les moins à l’aise, ceux qui ne connaissent pas le moyen de faire une recherche sur une page par exemple (Dan Russell, usability chief chez Google, parle ici de 90% des gens).

J’ai ma réponse : Non. Vous êtes exonéré de la cotisation foncière des entreprises (ex taxe professionnelle) l’année de la création de l’entreprise et les deux années suivantes. J’ai trouvé ce que je cherchais, je suis satisfait.

Oui mais. En réalité, la démarche que je viens de décrire n’est pas tout à fait celle que j’ai mise en œuvre. La vérité, c’est que je suis bien moins courageux que ça. Et ça tombe bien.

Lorsque je lance mon navigateur, la page qui s’ouvre est la suivante :

Le champ de recherche est déjà actif, ce qui signifie que je peux saisir du texte puis lancer ma recherche sans avoir besoin de cliquer où que ce soit. Je tape donc « auto-entrepreneur CFE » dans le champ et je valide.

Le premier lien de la page n’est pas un résultat pertinent (il y est question du Centre de Formalité des Entreprises.) Le second lien, en revanche, est un fichier PDF hébergé sur le site officiel qui détaille précisément la démarche à suivre dans mon cas.

Ce document très intéressant évoque dans le paragraphe comment formuler votre réclamation ? un modèle de lettre ci-joint. Ce modèle ne fait malheureusement pas partie du fichier PDF. Je retourne donc dans Google et saisis une autre recherche : « CFE site:www.lautoentrepreneur.fr ».

Le quatrième lien me renvoie vers le fichier PDF du modèle de lettre.

Bilan

En passant par le site officiel du gouvernement, j’ai trouvé la réponse à ma question. En passant par Google, j’ai trouvé la réponse à ma question… ainsi que plusieurs documents intéressants qui me simplifieront la vie. C’est quand même très décevant : les documents sont hébergés sur le site officiel du gouvernement, mais je n’ai réussi à les trouver qu’en passant par Google. C’est un très mauvais point (de plus ?) pour le site du gouvernement, et un bon point (de plus…) pour Google, qui n’en demandait pas tant.

16 novembre 201119 février 2018

Baromètre Inria : charte graphique, mise en page et résultats (2/2)

Suite et fin de mon exploration du baromètre Inria « Les français et le nouveau monde numérique ».

Première remarque, le site a été modifié depuis ma dernière visite. Le changement le plus visible est l’ajout d’un footer de grande taille commun à toutes les pages du site. Ce nouvel encart reprend le look du footer du site inria.fr.

Je note également qu’un picto a remplacé le texte « <Embed> » (juste au dessus du footer, à côté du texte « Et vos amis ? »). Pas sûr que cela rende ce lien plus explicite.

Plus étrange, le test a lui aussi été revu :
• l’ordre des questions a été modifié ;
• certaines d’entre elles ont été regroupées ;
• conséquence du point précédent, le nombre de questions a été divisé par deux.

Les résultats du test n’étant pas (à ma connaissance) utilisés à des fins statistiques, ces changements n’ont pas grande importance. J’en profite pour signaler un point que j’avais oublié dans la note précédente : il n’est pas possible lors du test de revenir à la question précédente.

Après avoir abordé le test dans la note précédente, je m’intéresse cette fois à la partie « résultats » du site. Je clique donc sur le bouton « les résultats de l’enquête ».

Cette page me permet d’évoquer un point très important dans la création d’un site internet : la création d’une charte graphique.

Une charte graphique (dans ce contexte), c’est un document dans lequel tous les éléments nécessaires à la création et à la mise à jour d’un site sont répertoriés : les polices à utiliser, les couleurs recommandées, les boutons à insérer, etc. On y trouve également – et c’est ce qui m’intéresse ici – leurs usages exclusifs : quand doit-on utiliser telle couleur, à quel moment utiliser la police XYZ, etc.

Sur le site du baromètre, le code graphique « cartouche à coins arrondis » est omniprésent (j’ai compté une vingtaine de cartouches sur la copie d’écran ci-dessus). Le problème, c’est que ce look n’est pas associé à un comportement : parfois il est cliquable, parfois il ne l’est pas. Exemple : le cartouche « Perception » est cliquable, le texte « Changer de thématique » ne l’est pas.

Ce ne serait pas un problème si les codes couleurs utilisés permettaient de s’y retrouver, mais ce n’est pas le cas non plus. Exemples : sur les pages précédentes les boutons de navigation principaux sont gris, ici ils sont rouges (ce qui s’explique, d’ailleurs). Sur les pages précédentes les blocs de texte bleu pétrole n’étaient pas cliquables, ici le cartouche « Perspectives » bleu pétrole l’est. (Le bouton « Les résultats de l’enquête » aussi, sans que l’on sache vraiment pourquoi.)

Il s’agirait d’un souci moindre si les éléments de même type respectaient les mêmes codes… mais là encore, ce n’est pas le cas. Exemple : les menus « Changer de thématique » (au look totalement éloigné de celui d’un menu) et « Affinez les résultats » n’ont pas grand chose en commun.

Ce manque de rigueur dans la présentation générale du site peut perturber l’expérience utilisateur.

Autre remarque, au sujet de la présentation des résultats. Chaque thématique donne accès à de nombreuses données. Plus ce nombre augmente, plus la consultation sera longue : il convient donc d’adapter la mise en page pour faciliter la lecture des données présentées.

Sur la page ci-dessus, la lecture du graphique « en barre » est aisée. J’ajoute qu’en plus d’être (partiellement) visible en rollover, la légende est ici affichée immédiatement.

Sur la page ci-dessus, la consultation des graphiques va prendre beaucoup plus de temps. Comme l’indique la taille de la barre de défilement, la page contient énormément d’informations : 27 ou 28 réponses (je n’ai pas réussi à les compter précisément, c’est révélateur) sont affichées ici. La taille réduite de la fenêtre de lecture n’est pas adaptée à un si grand nombre de données.

La présentation de ces résultats n’est pas mauvaise, mais elle aurait pu être bien meilleure : plus ludique, plus interactive, plus lisible… En tant qu’amateur de visualisation de données, cette mise en page me déçoit. J’invite les gens intéressés par le sujet à jeter un œil aux travaux de Dave Mc Candless (ses livres sont disponibles sur Amazon). Dans un domaine plus proche du baromètre Inria, l’enquête Sexperience 1000 (SFW) propose une expérience bien plus amusante.

Pour finir, j’avoue qu’une chose m’a particulièrement ennuyé. Sur le site du baromètre, il est possible de « faire le test » et de « découvrir les résultats de l’enquête ». Or les résultats ne correspondent pas exactement aux questions du test ! Si je prends la première page des résultats par exemple, il est question de TNT, de robots domestiques, de cinéma en 3D… Autant de points qui ne sont pas abordés dans le test.

Quel est donc l’intérêt de faire un test et de découvrir les résultats des autres utilisateurs… à des questions différentes ?