Ergonomie web et logicielle
L'aspect culturel dans l'expérience utilisateur des outils d'entreprise
Je discutais l'autre jour avec le responsable informatique d'une grosse PME, qui se plaignait de l'achat récent d'un outil fort couteux, dont le cahier des charges correspondait à la demande, mais qui s'avérait à l'usage trop limité par certains côtés, et trop complexe par d'autres. Résultat, le produit en rencontrait pas l'adoption escomptée et mettait en danger un projet interne stratégique.
6 erreur d'ergonomie à bannir du setup de vos applications iPhone
Vous êtes-vous déjà demandé pourquoi un wizard sur application mobile passait beaucoup plus naturellement que sur le Web ou un desktop ? C'est parce que le format du téléphone mobile et un comportement apparemment mono taches ne donnent pas à l'utilisateur l'impression qu'une barrière vient s'interposer entre son application et lui. Là où le setup est obstructif sur une application Web ou desktop, il participe au contraire d'une bonne expérience utilisateur sur mobile, à condition de ne pas tomber dans un certain nombre de pièges. Ce sont ces pièges que je vous propose de les passer en revue à travers l'étude de Tweeterena, un client Twitter qui pourrait être simplement moyen, mais qui en accumulant toutes les erreurs à ne pas faire, offre une expérience utilisateur épouvantable avant même d'avoir pu commencer à l'utiliser. 1. Mettre une étape préalable au setup Le setup étant nécessaire à l'utilisation de l'application, il est parfaitement inutile d'jouter une étape préalable à celui-ci, simplement pour dire "Vous n'avez pas encore configuré l'application, mais on va le faire". Imaginez-vous validant votre panier sur un site d'e-commerce, et voir surgir une pop-up vous annonçant que vous n'avez visiblement pas encore de compte, ou que vous n'êtes pas encore identifié, mais que vous allez pouvoir le faire. 2. Mettre une étape de votre wizard dans une alerte En plus d'ajouter une étape inutile au wizard, Tweeterama le fait à travers l'utilisation d'une fenêtre d'alerte. Les fenêtres d'alerte doivent être utilisées afin de permettre au système d'alerter l'utilisateur en dehors du flot habituel de l'application. Le fait qu'aucun compte n'ait été configuré n'est pas une erreur, c'est l'état normal de l'application après son installation. 3. Laisser la majuscule automatique activée dans le champ login Nombreux sont les services dont l'identifiant est encore sensible à la casse. Ce n'est certes pas le cas de Twitter, pour lequel fdevillamil passe aussi bien que FDevillamil, mais cela reste déroutant pour les utilisateurs, pour qui l'authentification rime encore avec stricte exactitude. Et si je trouve cette non différenciation fort pratique, je préfère que les utilisateurs gardent ce réflex d'exactitude. Peut-être cesseront-ils ensuite d'utiliser leur date de naissance comme mot de passe. 4. Désactiver la validation du formulaire avec la touche "entrée" Dans un champ texte, la touche "entrée" permet traditionnellement de déclencher la validation d'un formulaire. C'est fort pratique lors de la saisie d'informations textuelles durant laquelle on limite les aller retours entre le clavier et la souris ou, sur les téléphones mobiles, entre le clavier et la partie supérieure de l'écran. Si sur un iPhone, il n'y a pas de démarcation physique entre le clavier et l'écran de l'application, ce n'est pas le cas pour les smartphones disposant d'un clavier physique. Pour cette raison, désactiver le déclenchement du formulaire à l'aide de la touche "entrée" diminue de beaucoup la fluidité du setup. 5. Permettre à l'utilisateur de quitter le setup Laisser l'utilisateur quitter le setup avant d'avoir terminé le paramétrage initial l'amène devant une application inutilisable. C'est d'autant plus stupide que l'accès initial à l'application avait été bloqué par une alerte renvoyant l'utilisateur sur le wizard. Sur un wizard en plusieurs étapes, il est indispensable de laisser l'utilisateur revenir en arrière afin de corriger certaines informations. Il ne faut en revanche pas lui permettre de quitterie le paramétrage de l'application tant que celui-ci n'est pas terminé. 6. Utiliser des libellés inadéquats Ce dernier point est valable absolument partout. Le titre du formulaire indique nouvel utilisateur. C'est trompeur, car cela implique qu'il me faut me créer un nouvel utilisateur sur le service, alors qu'il s'agit simplement pour moi d'ajouter un compte à l'application. Avec ajouter un compte, le bouton de validation du formulaire traduit exactement ce que je vais faire, mais contredit en revanche ce qu'il y a marqué plus haut : nouvel utilisateur implique une création, que l'on ne retrouve pas dans le verbe ajouter, ce dernier implique au contraire quelque chose d'existant.
Play Nicely : si coder est fun, gérer du code devrait l'être aussi
Depuis cinq ans que je m'occupe de gestion de projets, je pense avoir largement fait le tour des outils de suivi de code et de bugs disponibles sur le marché. Entre produits pas ou mal finis et usines à gaz qui fait tout sauf le café, le choix est pléthorique, et souvent bien décevant.
Sur la performance Web et l'expérience utilisateur
Depuis deux ou trois ans, la notion de performance des sites et des applications Web a fait son entrée dans l'expérience utilisateur, mais également dans le référencement. La prise de conscience de la nécessité d'un Web "qui ne rame pas" est arrivée d'un peu tous les côtés, jusqu'à devenir une préoccupation majeure des éditeurs, à mesure que les utilisateurs s'habituaient à obtenir leurs pages quasi instantanément.
Ce qu'eBay pour iPhone nous apprend sur le mobile shopping
Avec plus de 8 millions de téléchargements sur l'App Store, eBay est l'application de shopping mobile la plus utilisée au monde. Après avoir exploré ses axes de croissance traditionnels que sont les enchères, les enchères avec prix de vente immédiat et les petites annonces, le géant des enchères sur Internet se lance sur le shopping mobile. En s'attaquant à ce nouveau segment, eBay affronte deux enjeux : offrir à ses power users des outils de suivi de leurs affaires en cours efficaces, et faire la conquête des clients qui n'utilisaient pas, ou peu, la version Web.
Beatport.com : une interface discutable, un sens du client exemplaire
Sur les conseils de Don Imil, je me suis enregistré hier sur Beatport, histoire de récupérer toutes les bombes jouées pendant la Winter Music Conference de Miami. Beatport est une plate-forme de téléchargement légale de musique électronique fournissant des MP3 en 320 Kbps sans DRM, un peu plus chers qu'iTunes, mais niveau choix, difficile de trouver mieux. Beatport propose notamment les playlists favorites de DJ comme Eric Morillo, Laidback Luke ou Judge Jules pour ne citer qu'eux.
Google change de peau, analyse d'une révolution dans la recherche sur le Web
C'est une révolution dans le domaine de la recherche : jamais depuis 1997 Google n'avait connu un changement d'interface aussi radical, celui ci présumant d'une révolution – effectuée ou à venir – dans notre manière de rechercher de l'information sur le Web. Analyse d'un changement radical pour l'utilisateur et d'un mouvement majeur dans la guerre pour la domination du Web.
Où la pagination des sites de contenus montre la relativité des notions de précédent et suivant
Sans en avoir l'air, la pagination dit beaucoup de choses sur la façon de penser de l'auteur d'un site, ou en tout cas sur sa manière d'appréhender le flot du contenu. Les notions de pages précédente et page suivante, apparemment absolues deviennent toute relatives au point de vue de l'auteur, mais également du lecteur. La pagination traditionnelle va généralement de gauche à droite, dans l'ordre croissant, dans le sens de lecture traditionnel occidental qui va de gauche à droite. Sur Google, les résultats les plus pertinents sont sur les premières pages. Plus le visiteur tourne les pages de gauche à droite, plus il s'enfonce dans le classement. Les choses se corsent quand il s'agit de contenu publié dans l'ordre chronologique inversé. Page précédente et page suivante prennent alors un sens différent selon la manière de voir du visiteur. On rencontre généralement trois motifs. La pagination suit la logique de lecture occidentale Les derniers résultats affichés sont les plus pertinents. La pagination va donc de gauche à droite, sans tenir compte de la dimension temporelle des publications. C'est notamment le choix effectué par Korben. C'est également le choix de Techcrunch. L'affichage choisi met cependant en avant la notion d'antériorité dans les contenus. La pagination suit la logique d'affichage antéchronologique Sur un site affichant les contenus dans l'ordre inverse de leur publication, c'est la disposition la plus cohérente – mais pas forcément la plus évidente – puisqu'elle permet de suivre le flux de l'information. On va donc remonter le temps de droite à gauche, et c'est là que les choses se corsent, puisque pour afficher les contenus précédents, on va afficher... la page suivante. Et là, ça devient drôle : Soit on affiche page précédente sur la gauche de l'écran, mais on affiche la page suivante. Soit on affiche page suivante sur la gauche, ce qui va à l'encontre du sens de lecture occidental. Dans tous les cas, il est impossible, dans ce cas, d'être totalement cohérent. Wordpress affiche par défaut le lien vers la page suivante à gauche de la page, mais contourne le problème en parlant d'entrées précédentes. Cela n'empêche pas les entrées précédentes de se trouver sur la page suivante. Et si rien de tout cela n'avait d'importance ? Et si, finalement, on s'en foutait un peu de tout ça ? En termes de référencement En termes de référencement, la pagination apporte plus d'emmerdements qu'autre-chose, puisqu'elle augmente les risques de contenus dupliqués. Un palliatif connu depuis longtemps est de n'afficher sur les pages qu'un extrait des contenus vers lesquels elles lient. Une solution beaucoup plus simples – à mon humble avis – est tout simplement de désindexer toutes les pages, d'avoir un bon sitemapet de construire efficacement son maillage interne. En termes d'usage En termes d'usage, la pagination ne sert pas à grand chose non-plus, au moins sur un site à contenus. Sur une application c'est une autre paire de manches. La quantité de contenus rend généralement la pagination caduque, au profit de la recherche – dont les résultats pourront être paginés – des contenus en rapport, ou des simples liens précédent et suivant sur les pages des contenus en question. Le designer Jason Santa Maria aborde d'ailleurs la pagination de manière très intéressante, et je terminerai donc avec lui. Assez peu prolifique – il publie en moyenne un article par mois, chacun ayant son design propre, une merveille – la page d'accueil de son blog correspond à la dernière publication. Les liens précédent et suivant pointent donc directement sur des contenus et non sur des listes d'articles. La faible quantité de contenu lui permet ensuite d'afficher les listes d'articles sous la forme de captures d'écran des différents designs utilisés, sans jamais devoir paginer. On a là un contournement très intelligent de la pagination, qui semble à première vue indispensable, mais n'est – analytics à l'appuis – très peu utilisée.
Un design pattern pour les formulaires sur plusieurs pages
Cet article fait suite à Un design pattern pour les formulaires longs en une seule page, publié aujourd'hui même dans ces colonnes. Il reprend le triptyque problème / solution / analyse qui me semble bien convenir. Problématique Les utilisateurs doivent remplir soit un formulaire trop long pour tenir sur une seule page soit un ensemble de formulaires liés entre eux sur plusieurs pages. Les formulaires longs sur plusieurs pages sont à utiliser : Quand celui-ci comporte un très grand nombre de questions non liées entre elles Dans le cadre d'une saisie en plusieurs étapes Le produit transpose en ligne une action qui se ferait naturellement sur plusieurs pages hors ligne Solution Regroupez vos questions en autant de pages logiques qu'il en faut, en fonction des thématiques abordées. Visez le moins de pages possible mais sans perdre en cohérence. Enfin, l'utilisateur doit savoir dès la première page combien de temps cela va lui prendre, et quelles informations lui seront demandées par la suite. Si ces recommandations semblent les mêmes que pour un formulaire sur une seule page, rappelez-vous que cette fois-ci, l'utilisateur devra aller voir sur la page suivante ce que vous lui réservez. Afin d'aider vos utilisateurs à arriver au bout, il faut : Se limiter à une question ou un groupe logique de question par page Numéroter les étapes : étapes en cours et nombre total de pages Indiquer clairement l'objet de chaque étape Afficher quand cela est possible la liste de toutes les étapes en mettant l'étape en cours en valeur Permettre à l'utilisateur de revenir en arrière afin de modifier ses informations Raisonnement Remplir un formulaire en ligne sur plusieurs pages est toujours générateur d'anxiété : on sait toujours quand ça commence, on ne sait jamais quand ça va s'arrêter. Il est possible de parcourir toutes les questions d'un formulaire papier en ligne avant de le remplir, ce n'est malheureusement pas possible en ligne sans valider les étapes. Vote but sera donc de lever l'anxiété en donnant à l'utilisateur le maximum d'informations sur ce qu'il devra effectuer et sur le temps que cela lui prendra. C'est la raison pour laquelle un chemin de fer récapitulant l'ensemble des étapes faites ou à faire est très important. Il permet non seulement de donner à l'utilisateur sa position dans l'espace, mais également dans le temps. Cela vient contrer l'effet anxiogène du formulaire sur plusieurs pages. Il est en revanche inutile de vouloir à tout prix condenser un formulaire en une seule page quand il est évident que le contraire est plus efficace. En effet, si vous économisez un ou deux clics, vous êtes cependant certain de voir votre utilisateur prendre ses cliques et ses claques. Et, laissez-moi deviner : ce n'est pas ce que vous voulez.
Un design pattern pour les formulaires longs en une seule page
Faire fuir vos visiteurs au moment du remplissage d'un formulaire est relativement facile, surtout si ce formulaire est un peu long. En relisant 5 ways to make sure that users will abandon your forms, je me suis rappelé d'un certain nombre de formulaires absolument horribles sur lesquels j'ai eu la malchance de tomber ces dernières années. Cela m'a donné l'idée d'écrire cet article sur les formulaires longs en une seule page, ainsi que son pendant pour les formulaires sur plusieurs pages, aussi bien comme aide mémoire que comme source d'information pour des développeurs qui seraient concernés par le problème. Je ne prétends pas donner une solution à tous les problèmes de la terre. Cet article a pour but de répondre à une problématique en donnant un cadre de bonnes pratiques liées à la conception de formulaires longs à afficher sur une seule page. Le pattern de cet article est lui fortement inspiré du très bon UI Patterns. Problème L'utilisateur doit remplir un formulaire demandant de nombreuses informations disposés sur une seule page. Par exemple : Le formulaires longs sur une seule page sont à utiliser quand : Le moindre clic compte, et qu'un écran de trop signifie un abandon de panier Proposer un formulaire sur plusieurs pages n'a aucun sens Le produit transpose online une action hors ligne naturellement sur une page Solution Présentez à votre utilisateur un formulaire clair, aéré et bien ordonné. Celui-ci doit pouvoir d'un seul coup d'oeil comprendre quelles informations vont lui être demandées, de quoi elles traiteront, et combien de temps cela va lui prendre. Cela passe par : Regrouper les champs du formulaire par grandes thématiques d'informations Introduire ces grandes thématiques par un titre parlant, en rapport avec les informations demandées Numéroter ces rubriques Préférer l'affichage label + champ sur une seule ligne, quand c'est possible et que ça ne nuit pas à la lisibilité Ne pas dupliquer la saisie des informations quand cela peut être évité J'en rajouterai une un peu à part, car elle concerne tous les types de formulaires. Afin de faire passer les demandes d'informations inhabituelles, expliquez pourquoi vous les demandez. D'une part cela permet à l'utilisateur de comprendre, et cela lève en partie sa méfiance vis à vis d'une demande d'informations personnelles trop intrusive, et d'autre part, ça casse un peu la monotonie d'un formulaire trop long. Vineolia n'explique pas pourquoi la date de naissance des utilisateurs est exigée à l'inscription. Le site traitant d'alcool, ils doivent légalement vérifier l'âge de leurs utilisateurs. Malheureusement, comme ce n'est expliqué nulle part, il est facile de croire qu'ils cherchent simplement à récupérer des données personnelles à des fins commerciales. Raisonnement Que ce soit en ligne ou non, personne n'aime remplir des formulaires, en dehors peut-être des grilles de Loto. Côté conception, tout votre problème va donc être d'éviter que vos utilisateurs ne referment la fenêtre avant d'avoir cliqué sur le bouton valider. Vous allez donc pour cela devoir casser la monotonie du formulaire en lui donnant un rythme – un flow, comme dans le rap – qui poussera l'utilisateur à continuer. Numéroter les grandes sections de votre formulaire va donner à votre utilisateur l'impression d'avancer en validant des étapes, exactement comme il le ferait dans un jeu. Utiliser des séparateurs visuels permet de renforcer encore cette impression de paliers. Éviter la duplication de la saisie des informations, par exemple en signalant d'une case à cocher que l'adresse de livraison est la même que l'adresse de facturation permet encore de réduire lesa saisie et ainsi la longueur du formulaire. Ne tombez pas dans l'excès contraire : l'utilisateur doit rester concentré sur le remplissage du formulaire. Ne lui donnez donc aucune raison de relâcher son attention ou de quitter la page : liens externes, références à des sujets annexes... votre but reste qu'il clique sur ce satané bouton "valider"
L'ergonomie web, l'utilisabilité et la qualité des logiciels sont trois grandes passions mises au services de ma profession.
