9_elements_UX-erreur

Les 8 éléments d’UX design à éviter dans la conception web

Si l’UX nous apparaît comme une pratique plutôt récente, elle s’inscrit néanmoins dans la grande histoire d’Internet (presque 30 ans déjà) et hérite, par conséquent, de certains de ses aspects les plus sombres. Ceux nés avant 2000 se souviendront sûrement, parfois avec effroi, des animations flashs interminables à charger, du wordart, des nuages de tags ou encore des illisibles forums à la charte graphique douteuse. Les choses ont changé, la pratique s’est professionnalisée, tout en se démocratisant et on les espérait disparues à jamais.

Mais, tels quelques gaulois bien connus des bédéphiles, certaines de ces pratiques semblent irréductibles, quand bien même elles n’offrent aucune valeur ajoutée et auraient, au contraire, plutôt tendance à gêner le confort de navigation…

Parmi celles-ci, voici 8 éléments du Web que nous vous conseillons d’éviter au maximum dans vos démarches UX.

 

I. Le module de partage toutes les icônes côte à côte

 

Outre le fait qu’il prend de la place, ce genre de module a la fâcheuse tendance de se trouver présent partout autour du contenu proposé1, ce qui aura pour conséquence de provoquer souvent de la lassitude visuelle, de l’indécision voir de l’agacement).

Icônes partage réseaux sociaux

Vous reprendrez bien quelques icônes ?

Privilégiez un module de partage qui se déroule lorsque l’on clique dessus, ou à défaut, un pop-up qui se déclenchera au clic sur votre bouton ou votre lien de partage. Orientez vous donc, dans la mesure du possible vers des solutions customisables ou des développements légers2.

 

II. Les pop-ups intempestifs

 

Le grand classique des années 2010. Jaillissant de toutes parts pour vous vendre LA solution, vous proposer un abonnement à une newsletter ou une réduction incroyable, les pop-ups intempestifs sont la plaie des débuts du web 2.0. Rendant l’expérience de navigation difficile, ils forcent la rétention, ce qui a nécessairement pour effet de l’impacter négativement à très court terme, même si elle la gonfle dans l’immédiat3.

Le pop-up intempestif (dans le sens de non-inscrit dans la démarche logique de la navigation) sont donc éviter ou limiter. Faites le choix de pop-ups bien conçus, déclenchés au moment opportun et qui s’inscrivent harmonieusement dans votre interface de navigation. Cela s’avérera sans aucun doute payant sur le long terme, à la fois sur l’engagement et sur le taux de rétention.

pop-up fail

Une offre exceptionnelle à ne rater sous aucun prétexte !

Aimeriez-vous commencer par payer avant même d’entrer dans un magasin ? Très probablement non. Même lorsqu’il s’agit d’accéder à un service très exclusif, il est difficile de donner quelque chose en échange d’un service dont on n’a pas déjà expérimenté la qualité. Surtout quand, et c’est le cas pour internet, on a l’impression qu’on pourrait trouver la même chose ailleurs.

Pourquoi mettre une barrière à l’entrée ? Vous vous assureriez au mieux une rétention contrainte avec, bien souvent, des comptes factices créés pour l’occasion. Privilégiez la mise en place d’une stratégie de rétention travaillée où en proposant du contenu générique mais intéressant vous pousseriez les utilisateurs vers des solutions premiums (cours, articles, etc)5. Sans parler des avantages concernant la qualité de vos articles, les retombées en termes de considération pour ce que vous proposez ont beaucoup de chances de s’avérer non négligeables.

 

III. Les menus à rallonge

 

Le menu est le point d’entrée privilégié de vos utilisateurs vers les différentes parties de votre site. Il est alors tentent de répertorier l’intégralité des pages en se disant que l’utilisateur n’aura qu’à choisir. Malheureusement, dans les faits, les choses sont plus difficiles… Les menus à rallonge ont souvent pour effet de perdre l’utilisateur plus qu’ils ne le dirigent vers les pages qu’il cherche4. C’est d’autant plus vrai pour les mobinautes, dont la taille des écrans ne permet de saisir immédiatement qu’une petite partie du contenu.

Ne mettez dans vos menus que l’essentiel. Plutôt qu’un menu exhaustif, travaillez en détail votre page d’accueil afin de dispatcher efficacement vos visiteurs vers la partie qui les intéresse vraiment. Assurez-vous également que votre moteur de recherche soit accessible en permanence. Ajoutez de façon harmonieuse des suggestions en bas des pages produits. Peaufinez également vos funnels de vente pour être sûr de ne pas perdre vos utilisateurs en cours de route. Un site où il est facile de se repérer et de se glisser dans un entonnoir nous permettant d’accéder à ce que l’on souhaite voir ou découvrir offre, à l’évidence, une expérience de navigation bien plus agréable qu’un site où l’on passe un temps infini à trouver ce qu’on était venu chercher.

menus à rallonge

« Un menu complet…mais illisible »

V. Les publicités invasives (vidéos qui se lancent toutes seules, habillage de fond, pub en entrée de site, etc)

 

On le sait, contrairement à l’idée qu’on pourrait en avoir de prime abord,

Internet n’est pas gratuit. Les sites web et les apps génèrent des coûts structurels non négligeables (en plus des coûts de développement évident). Il faut donc bien rémunérer le service qu’on propose. Et comment faire, lorsqu’il n’est pas directement rémunérateur, sans la publicité ? C’est difficile. Attention donc à la surcharge de contenus sponsorisés.

Tentez au maximum de réduire l’impact des publicités sur votre site. Ne gardez que les emplacements que vous jugez absolument nécessaires. Évitez les différents mécanismes de surimpressions, les habillages immenses et clignotants, les overlays impossibles à quitter, etc. Les publicités invasives sont une nuisance, surtout quand on considère que la majeure partie du trafic se fait désormais sur mobile6 (avec les impacts sur les temps de chargement et sur la lisibilité que cela cause inévitablement). La publicité est essentiel pour de nombreux média mais attention à l’intégration de celle-ci et la possible nuisance de l’expérience utilisateur, qui peut avoir des impacts sur votre taux de rétention7.

Trop de pub

« Je crois qu’il y a encore un petit créneau en haut à droite, non ? »

VI. Les visuels mal calibrés

 

Il est surprenant de voir que les visuels (bannières, gif, pictogramme, etc) des interfaces puissent encore être un sujet problématique. Et pourtant avec la multiplication des CMS, l’explosion des besoins, le graphisme DIY, on peut même dire qu’il l’est devenu de plus en plus. Quand bien même il existe de nombreuses solutions pour faciliter la tâche.

Qu’ils soient trop lourds, trop grands, étirés d’un côté ou de l’autre ou tout simplement mal placés, les visuels mal calibrés sont une nuisance dans l’harmonie générale de votre interface et devraient être traités avec autant d’importance que sa police ou sa charte graphique. Ne négligez jamais l’impact que peut avoir un visuel mal calibré sur la qualité qu’on prête à votre service. Nous l’avons déjà mentionné dans un précédent article, mais pour tout ce qui n’est pas photographique, vous devriez privilégier le format SVG qui s’adapte parfaitement à toutes les tailles d’écran du mobile à, virtuellement, l’infini.

 

VII. Les bulles de chatbot

 

Aucun héritage de ce côté-ci, c’est même un ajout récent. Malheureusement sa présence ne résout pas tous les problèmes. De nombreuses études montrent d’ailleurs que les utilisateurs les détestent8.

Il n’est pas rare, dans la tech, d’adopter une fonctionnalité lorsqu’elle n’est pas parfaitement effective, mais dans le cas des chatbots, cela peut-être contre-productif. Ils captent en effet profondément l’attention de l’utilisateur, tout en ne lui apportant que très rarement, ou presque, une réponse satisfaisante. Dans le cas de n’importe quelle autre fonctionnalité, cela aurait été un no go complet. Attention donc à la qualité du service rendu, l’utilisateur va prendre du temps pour formuler sa question, autant que la réponse ne soit pas déceptive.

Chatbot inutile

Encore en apprentissage.

VIII. Les icônes/logos pixélisées

 

Les icônes, favicons, logos sont des éléments clefs de votre storytelling. Une seule chose à faire donc : soignez-les ! Combien d’interfaces ont des icônes pixélisées, des logos en PNG aux contours mal dessinés, des favicons illisibles ? Comme pour les visuels mentionnés plus haut, c’est votre crédibilité qui est en jeu.

Soignez vos icônes, c’est le travail minimum que vous devriez faire sur votre site internet, c’est le détail qui fait la différence dans la confiance qu’on peut vous accorder, la petite touche professionnelle qui vous placera parmi les joueurs sérieux.

Pensez à vos utilisateurs et orientez vous vers une démarche UX qui . Retrouvez de nombreux conseils UX sur le blog UX d’Arquen et n’hésitez pas à solliciter notre équipe pour tous vos projets !

 


1. Des stats éclairantes sur les modules de partages : https://www.zdnet.com/article/study-claims-99-percent-of-users-ignore-sharing-buttons-on-mobile/

À ce sujet : https://www.wordstream.com/blog/ws/2015/04/23/social-media-buttons

Un article à propos des SaaS mais qui traite du même principe : https://empireflippers.com/growing-saas-product/

Voir les #3 et #4 : https://neilpatel.com/blog/common-website-navigation-mistakes/

12 exemples très parlants à ce sujet : https://www.uscreen.tv/blog/12-successful-subscription-sites-and-what-theyre-doing-right/

Pour vous aider à faire le tri : https://www.nngroup.com/articles/most-hated-advertising-techniques/

Un article léger sur le sujet : https://usabilitygeek.com/how-to-deal-with-bad-mobile-ads/

#8 https://www.callcentrehelper.com/customers-hate-chatbots-131757.htm

CRO-mobile

Ce que vous devrez savoir pour augmenter vos conversions sur mobile

États des usages mobiles actuels

Nous sommes dans l’ère du mobile-first. Rien de nouveau me direz-vous, une majorité de site ont désormais un site responsive mais…cela ne suffit pas !
Pourquoi ? De nombreuses études montrent que la plupart des sites reçoivent plus de 50% de leur trafic à partir d’appareils mobiles. Pourtant le volume de vente n’est souvent pas proportionnel. En effet le design d’une interface mobile est un réel challenge en soit. Du fait de la taille réduite de l’écran, chaque petites erreurs de design et d’UX peut faire rapidement baisser le taux de conversions.

Les entreprises doivent aller au delà du simple site responsive, qui est souvent une transposition du site desktop et qui se contente de rendre « navigable » le site sur mobile. Attention ! Les usages sont différents !

Voici quelques données issuent des études de monetate.com et comscore.com :

Website Visits by Device Q1 2016 Q2 2016 Q3 2016 Q4 2016 Q1 2017
Traditional 49.30% 47.50% 44.28% 42.83% 42.83%
Smartphone 36.46% 39.00% 43.07% 44.89% 44.89%
Other 0.62% 0.39% 0.46% 0.36% 0.36%
Tablet 13.62% 13.11% 12.19% 11.91% 11.91%

Source

La progression nette de la part des visites via smartphone est non négligeable, de 36% à 44% en un an ! Sur des chiffres 2016-2017 en plus.
Qu’en est-il des taux de conversions mobile ?

Conversion Rates by Device Q1 2016 Q2 2016 Q3 2016 Q4 2016 Q1 2017
Traditional 4.23% 3.88% 3.66% 4.25% 3.63%
Tablet 1.42% 1.31% 1.17% 1.49% 1.25%
Other 0.69% 0.35% 0.50% 0.35% 0.27%
Smartphone 3.59% 3.44% 3.21% 3.79% 3.14%

Source

Nous constations un certaines stabilité avec pourtant des taux de conversion mobile toujours inférieurs à ceux du desktop.

Selon une étude de comscore sur les usage mobiles à travers le monde, il est constaté que /

– Le mobile représente 69% du temps passé pour 20% du revenu

– Le desktop représente 31% du temps passé pour 80% du revenu

Soit un retard de 49% entre le temps et le revenu pour mobile ! 

conversion-mobile-desktop-arquen

Source

Alors qu’es ce qui pourrait expliquer cela ?
Comme nous l’avons dit précédemment l’espace réduit de l’écran du smartphone va rendre la tâche plus complexe à l’entreprise. Les choix et la priorisation en termes de design et d’ergonomie utilisateur doivent être pris avec le plus grand soin.

Les 5 freins principaux à la conversion sur mobile

Voici les principaux freins constatés à la conversion sur mobile.

  • Problématique de sécurité : 20,2%
  • Détails des produits peu clair : 19,6%
  • Impossibilité d’ouvrir plusieurs onglets pour comparer facilement : 19,6%
  • Difficultés de navigation : 19,3%
  • Difficulté à entrer des information : 18,6%

Il est désormais plus que nécessaire de prendre en compte ses retours et adapter son site au besoins et demandes des utilisateurs spécifiques à un usage mobile.

L’amélioration du taux de conversions mobile fait partie intégrante des recommandations UX que nous pouvons faire, n’hésitez pas à nous contacter pour plus d’informations !

Comment choisir son agence UX

Comment choisir son agence UX Design et UX Research ?

L’UX est devenue, ces dernières années, un sujet fondamental pour tous les acteurs du Web, des plus massifs aux plus confidentiels. Pratique transverse, aux croisements de plusieurs disciplines, l’expérience utilisateur est comparable à un classique difficile (un roman de Proust, à tout hasard…) : tout le monde a son avis sur la question, sans forcément comprendre de quoi il en retourne.

Il n’est donc pas forcément facile, lorsque l’on fait appel à une agence UX, de savoir sur quels critères baser son choix final. Voici quelques conseils pour bien choisir son agence UX.

 

I. Établissez clairement les limites de votre projet

 

Commencez par bien définir votre projet. Essayez de comprendre les raisons pour lesquelles vous souhaitez faire appel à une agence UX. Si vous voulez simplement faire décoller vos ventes, peut-être que du branding ou du conseil en SMO seront plus adaptés dans un premier temps. Si vous voulez par contre driver intelligemment vos conversions sur votre plateforme e-commerce, faire baisser le nombre d’abandons de formulaire dans votre funnel de vente ou encore augmenter votre taux de rétention de façon substantielle, l’UX est clairement fait pour vous.

Dans un premier temps, n’hésitez pas à compartimenter les différents besoins que vous avez par catégorie puis tentez de pondérer leur importance pour procéder par étape. Pensez en effet à prévoir les moyens en conséquence de vos ambitions : redessiner les étapes d’un funnel sera souvent moins lourd que de refondre complètement la charte graphique de votre site. De la même façon, re-designer un formulaire prendra probablement moins de temps que de concevoir un nouveau gabarit pour vos fiches produits. Chaque détail a son importance, mais certains sont plus fondamentaux que d’autres. Il n’y a pas de mal à commencer par un petit projet avant de vous lancer dans des changements d’envergure.

 

II. Renseignez-vous

 

On parle beaucoup d’UX mais savez-vous vraiment ce que c’est ? En tant que discipline, le champ de l’UX est large et transverse, nous l’avons déjà dit. Cela n’implique pas, en revanche, que la démarche UX soit pertinente pour tous vos sujets. Par exemple, définir une stratégie rédactionnelle pour votre nouveau blog relèvera du marketing stratégique tandis que travailler les différentes accroches de vos sites pour les rendre plus intelligibles à vos utilisateurs relèvera plus de l’UX Writing1  (Voir notre article « Qu’est ce que l’UX Writing ?« ).

C’est le complément de ce que nous disions en première partie : prenez le temps, lorsque votre projet commence à prendre forme, de vous renseigner sur les possibilités et les limites qu’offrent les différentes disciplines, sur la manière dont elles s’articulent les unes avec les autres et sur la meilleure façon dont elles pourront servir votre projet.

Si l’UX est tant en vogue, c’est parce que c’est une matière à part entière, qui fonctionne en synergie avec les autres aspects du marketing, et qui un impact réel sur vos relations avec les utilisateurs de vos plateformes. N’hésitez pas à consulter régulièrement les nombreux blogs (le nôtre par exemple) pour vous tenir informé des concepts et des tendances du secteur !

arquen_audit_ux

III. Privilégiez une agence dont l’UX est le cœur de métier

 

Au cas où nous ne l’avions pas assez répété, l’UX est une matière à part entière. Cela ne l’empêche pas de partager certains de ses fondamentaux avec d’autres disciplines qui résonnent avec sa façon de fonctionner comme le SMO, la stratégie média, le content marketing et j’en passe. D’où la flopée d’auto-proclamés experts UX et autres agences de communication qui ouvrent un département “UX”. Si j’en rajoute (pardon pardon), c’est simplement pour souligner que, si l’UX s’apprend, les concepts qui la sous-tendent ne sont pas forcément faciles à saisir immédiatement et sa maîtrise nécessite une pratique longue qui, comme pour toutes les pratiques techniques, implique d’apprendre de ses erreurs2.

C’est pourquoi (pour éviter qu’elles vous soient facturées…) nous vous recommandons de faire le choix d’une agence dont l’UX est le cœur de métier et qui a déjà fait ses preuves ! Elles sont nombreuses sur le marché, auront toutes des use-cases à vous présenter, des best practices à appliquer et sauront vous guider intelligemment dans la réalisation de vos projets… UX cela va sans dire !

 

IV. Préférez une agence multi-sectorielle

 

Si la spécialisation est, d’une certaine manière, la clef du succès, elle comporte de nombreux désavantages, parmi lesquels l’acquisition d’automatismes, pertinents pour un secteur mais absolument inadaptés à un autre3.

À l’inverse, le fait d’être confronté à des sujets similaires dans des domaines différents oblige à mettre en place une plasticité qui permettra souvent de dégager des solutions véritablement efficaces dans toutes les configurations.

Privilégier une agence multi-sectorielle, c’est faire le choix de l’adaptabilité, mais aussi celui de l’expérience. La même stratégie appliquée mille fois au même problème ne fonctionnera peut-être pas lorsque les conditions auront, même légèrement, changé. À l’inverse, prendre les données de chaque problème pour leur appliquer une stratégie unique basée sur ses expériences précédentes sera, bien souvent, la clef d’une solution pertinente et réussie.

agile_ux_arquen

 

V. Choisissez une agence qui s’adapte à vous et non l’inverse

 

C’est un type de fonctionnement bien connu des ingénieurs et développeurs web : la scalabilité. C’est la capacité d’un système à maintenir ses performances et ses fonctionnalités en cas d’augmentation de montée en charge, c’est-à-dire d’augmentation de la demande. Assurez-vous que le prestataire auquel vous souhaitez faire appel sera en mesure de s’adapter à vos besoins, des plus primaires aux plus élaborés, durant toute votre relation et non l’inverse.

Si votre projet initial est bien préparé, il sera bien délimité dans le temps et dans les moyens. S’il ne l’est pas, l’équipe à qui vous le confiez devrait vous aider à le faire. Une fois que vous vous êtes entendus, il ne reste plus à l’équipe à laquelle vous confiez votre projet de s’adapter à vos besoins. Pour en être sûr, posez des questions quant à la composition de ladite équipe, tentez de savoir si elle y sera dédiée, quelle est son ancienneté.

Si vous souhaitez réaliser la mission à distance, ou encore en télétravail ? Assurez-vous que l’agence est habituée aux outils et méthodes.

Cela dépendra bien entendu de l’ampleur de ce que vous vous apprêtez à mettre en place, mais il est toujours conseillé de vous assurer, en amont, que tous les moyens nécessaires pourront être mobilisés au moment crucial pour ne rien rater !

 

VI. Rencontrez l’équipe qui s’occupera de votre projet

 

Est-ce une agence à taille humaine ? Il y a beaucoup de chance que les personnes que vous rencontrerez soient engagées de manière importante dans votre projet. Cela ne veut pas dire toutefois qu’ils seront ceux qui travailleront dessus effectivement. Est-ce une plus grosse agence ? Vous rencontrez souvent un chef de projet qui dispatchera les demandes à une équipe avec qui vous n’aurez pas de contact.

Il n’est pas absolument nécessaire de rencontrer l’équipe qui travaille sur votre projet tant que le travail est fait, me direz-vous. Et vous auriez raison. Néanmoins, dans le cas de l’UX, les choses sont un peu différentes, dans la mesure où une part du travail reposera sur la sensibilité de celui qui l’effectue. N’hésitez pas alors, pour les projets d’envergure, à demander à rencontrer a minima le manager de l’équipe pour vous assurer que vous êtes bien sur la même longueur d’onde4.

Pour toute demande et quel que soit votre projet, n’hésitez pas à contacter l’équipe d’Arquen et nous nous ferons un plaisir de répondre à vos demandes !

 


1. À ce sujet : https://www.uxbooth.com/articles/what-is-ux-writing/

2. Un concept très important dans la démarche UX. À ce sujet : https://www.webfx.com/blog/web-design/ux-design-mistakes/

3. Sur les dangers de la spécialisation : https://ideasinhat.com/2018/01/14/adam-smith-the-dangers-of-specialization/

4. Comme vous pouvez le voir dans cet article, engager la mauvaise équipe est très souvent la raison pour laquelle un projet UX peut échouer : https://www.designorate.com/failed-ux-design-process/

Animations UI

Design UI : pourquoi vous devriez miser sur les animations

Alors qu’on passe en moyenne 4h48 par jour sur Internet1, il n’a jamais été aussi crucial d’optimiser la navigation sur vos différentes plateformes afin d’offrir à l’utilisateur une expérience stimulante et intuitive. Une expérience dont il se souvient. Quand on connaît l’impact du temps de chargement sur le taux de rebond (Selon Google, la probabilité de rebond augmente de 90% lorsqu’un temps de chargement passe de 1 à 5 secondes), on perçoit facilement celui d’un design peu ergonomique (ou même simplement daté)2.

Avec le gain continu de puissance des processeurs, les designers peuvent désormais concevoir des solutions reposant sur des animations fluides, sans craindre d’alourdir leurs pages3. C’est pourquoi depuis quelques années le motion design à fait son apparition au sein démarche UX.

Sans revenir sur les principes qui sous-tendent la création graphique animée et la pertinence des choix en matière de motion design4, ni sur les moyens techniques de les mettre en place, on tentera de vous dire pourquoi et comment les animations présentent des avantages considérables lorsqu’il s’agit d’optimiser l’expérience de navigation sur vos plateformes.

En un mot : pourquoi vous devriez miser sur les animations !

 

I. Raconter

 

On dit souvent qu’une image vaut mille mots. C’est vrai dans le sens où il est souvent plus simple de faire passer un message générique, de classer dans une catégorie, d’indiquer une fonctionnalité, etc., par l’image que par le texte (suffit pour preuve la généralisation du pictogramme sur les sites Internet). Là où le texte permettra d’aller dans la précision, l’image permettra elle d’aller dans la concision et dans l’efficacité. C’est l’action narrative de l’image5. Si une image vaut mille mots, imaginez tous ceux qu’elle peut valoir quand elle s’anime. Recourir à l’animation pour raconter l’histoire de votre marque, vos valeurs ou les plus-values de vos produits vous permettra de les présenter de façon ludique tout en vous passant de longs textes, souvent peu lus par les visiteurs sur vos interfaces.

animation e-shop

Crédits : Mounir C

Conséquence immédiate du recours à l’animation : votre discours de marque est fluidifié. Si la direction artistique de vos animations est soignée, alors les utilisateurs n’auront aucun mal à identifier votre positionnement. Vous vendez des produits à vocation paramédicale ou proposez de prendre des rendez-vous chez le médecin ? Un loader en forme de caducée peut par exemple vous éviter de fournir d’amples précisions tout en rappelant régulièrement à vos prospects quel est votre cœur d’expertise. Vous n’avez pas besoin d’insister sur votre discours de marque puisque le cours de la navigation déclenche des animations typées en rapport avec celui-ci.

Exemple Loader Médical

Crédits : Alexey Ivanov

II. Éclaircir

 

Les animations peuvent également agir comme guides durant la navigation. En posant des jalons entre les différentes parties, elles aèrent et structurent la présentation de votre site ou de votre application. Positionnées à des endroits clefs, elles accompagnent l’étape suivante de votre navigation en attirant discrètement, mais continuellement, votre attention sur les possibles compléments d’informations que vous pourriez obtenir ou sur les différentes démarches à suivre.

Animation de pages UI

Crédits : ramykhuffash

Elles permettent ainsi très logiquement de mettre efficacement en valeurs vos CTA les plus importants6. Vous voulez être absolument certain que l’utilisateur s’abonne à votre newsletter mais vous avez peur qu’un pop-up soit un peu agressif ? Vous avez prévu une promotion inratable pour augmenter le nombre d’abonnés de votre service ? Vous avez peur que vos prospects aient des difficultés à effectuer l’action finale qui en ferait des clients ? Une animation est un bon moyen de mettre parfaitement en valeur l’action à effectuer pour être sûr que le message que vous vouliez faire passer est bien passé, ou que votre bouton est bien cliqué (avec une animation qui indique la réussite, c’est encore plus percutant !).

Mailchimp bouton d'envoiCrédits : Mailchimp / Brent Clouse

III. Faciliter

 

On a souvent peur que les animations alourdissent nos pages. On les conçoit comme un “plus”. Or, il est tout à fait possible (et même très recommandé) de les intégrer de façon substantielle à vos pages. À ce titre, elles peuvent même faciliter la navigation et améliorer l’expérience client. Ainsi, plutôt que de miser sur des images HD, retardant le chargement de votre page, vous pourriez (encore une fois, c’est même très recommandé), les remplacer par des animations SVG, parfaitement responsive et légères, qui habilleront et animeront votre plateforme de façon moderne et dynamique.

Exemple Atom

Crédits : Atom

Faciliter la navigation, c’est aussi faciliter le retour client, dans le sens où une expérience de navigation agréable mettra l’utilisateur dans une disposition propice à donner un peu de lui-même. Un formulaire animé et bien conçu motivera à coup sûr vos prospects à donner leur feedback. L’aspect ludique d’un bouton, une animation qui évolue au fil du remplissage du questionnaire ou qui change une fois celui-ci validé sont autant d’incentives qui pousseront vos clients/prospects à se prêter au jeu de l’action que vous souhaitez les voir faire.

Formulaire animé

Crédits : Darin

IV. Émerveiller

 

On touche ici à l’essentiel. Dès la naissance du Web, ses fonctions purement techniques ont été reprises et réutilisées pour satisfaire des fins purement esthétiques… et finalement pour servir la technique ! Entre un site techniquement innovant et un site agréable, le choix sera vite (souvent inconsciemment) fait7. Tenter d’émerveiller vos utilisateurs peut s’avérer payant à de multiples égards et l’animation est un moyen privilégié de le faire.

Payant car elle permet de minimiser la sensation d’attente durant le chargement. Un loader qui prend la forme d’un courrier qui se prépare pendant que l’envoi d’une newsletter charge, une document qui se lit pendant qu’un formulaire est traité ou, tout simplement, une phrase affichée pendant que le contenu charge sont d’excellents moyens de divertir l’utilisateur et d’occuper son impatience.

Crédits : Dribble

Payant car elle fluidifie la navigation en l’agrémentant de contenus diversifiés qui reposent l’attention et structurent de la plateforme visitée. Cela permet donc d’offrir une expérience de navigation naturelle et harmonieuse, qui s’en ressentira très probablement sur vos taux de rebond et de conversion.

Crédits : Wemind

Payant, enfin, car elle vous inscrit dans ce qui se fait de plus moderne et vous permet de vous différencier. Avec la déferlante des one-pages WordPress aux designs très similaires, aux visuels HD raflés sur les banques d’images gratuites, miser sur l’animation, c’est faire le choix de la différenciation et, ainsi, faire le choix de s’inscrire en tête des tendances, plutôt que de les épouser ou, pire, de tout simplement les suivre.

À titre d’exemple, vous pourriez jeter un coup d’oeil aux sites web fishfinger.me, buildonauts.com ou acces-is.com.

Invision à produit une vidéo intéressante sur les tendances 2019 de l’animation, n’hésitez pas à jeter un oeil !

Convaincu ? Alors n’hésitez pas ! En un tour de main, avec CSS3, un peu d’application et pas mal d’imagination, vous devriez déjà pouvoir faire des merveilles8. Pour les plus ambitieux, il existe également de nombreuses bibliothèques Open Source dans lesquelles piocher pour animer vos pages telles que Raphaël.js, Snap.svg ou SVG.js. Avec autant de ressources gratuites à disposition, pourquoi se priver ?

 

Quelques exemples d’animation en vidéo :


1. Source : Étude We Are Social en collaboration avec Hootsuite –https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018

2. Sur ce sujet : https://www.invisionapp.com/inside-design/statistics-on-user-experience/

3. https://blog.prototypr.io/the-importance-of-motion-for-ux-design-7710edcdae3a

4. La référence sur le sujet : https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

5. https://modicum.agency/blog/motion-design-will-transform-ui/

6. Pour des idées : https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5

7. Si des explications sont nécessaires : https://www.dymic.com/website-design/website-aesthetic-design-matters-business/

8. Quelques exemples ici : https://www.creativebloq.com/inspiration/css-animation-examples

hal-gatewood-613602-unsplash-scaled-1300x731

25 conseils pour designer des formulaires efficaces

Quiconque a été confronté un jour à la création d’un site internet a été, inévitablement, confronté également à la question du formulaire. Du simple email catcher au formulaire de contact, en passant par formulaire d’inscription ou de renseignement, c’est chaque fois l’occasion de se demander : comment designer un formulaire qu’on a vraiment envie de remplir ?

On conviendra facilement que ce n’est pas la partie la plus palpitante du design de votre plateforme… Mais ne vous y trompez pas ! C’est clairement l’une des plus fondamentales. C’est l’entrée privilégiée vers les informations cruciales et essentielles concernant vos prospects et clients. C’est donc tout naturellement le pivot du service que vous proposez. Du formulaire d’un ou deux champs au formulaire complet d’inscription à un service, on pourra voir qu’il existe 4 catégories sur lesquelles vous pourrez agir pour créer ou recréer des formulaires efficaces : la disposition des éléments, les champs, les boutons et l’accessibilité.

Découvrez nos 25 conseils pour concevoir des formulaires qu’on remplit à chaque fois !

 

La disposition

 

La disposition des éléments de votre formulaire est essentielle lorsqu’il s’agit de donner ou non envie de renseigner des informations personnelles. C’est la première chose qu’on aperçoit et, à ce titre, c’est celle qui déterminera inconsciemment si, oui ou non, on sera disposé à prendre le temps de remplir votre formulaire.

 

I. Privilégiez 1 seule colonne

 

Construisez vos formulaires sur une seule colonne, idéalement et si possible, au milieu de votre page. Cela permettra de concentrer toute l’attention de votre utilisateur sur l’action en cours, tout en évitant de le décourager par un formulaire qui lui semblerait interminable.

Formulaire 1 seule colonne

Source : crazyegg.com

II. Less is more : demandez le minimum d’informations nécessaire

 

Ne demandez que les informations pertinentes1. Même lorsque cela semble nécessaire, il est souvent fastidieux de remplir des formulaires extensifs. Évitez par exemple de tout demander d’un coup. Si vous souhaitez, par exemple, connaître le nombre d’enfants de vos utilisateurs, demandez-le dans un second temps ! Recueillez d’abord les informations essentielles, attendez que votre utilisateur ait mis un pied dans votre interface pour lui demander des informations complémentaires.

Formulaire informations minimum

Source : UX Planet

III. Allez du général au particulier

 

Il est plus simple de demander une action complexe, ressentie comme difficile, une fois que des actions perçues comme faciles (ou habituelles) ont déjà été effectuées. Tout le monde le ressent intuitivement et c’est ce qu’explique et confirme le principe de cohérence de Dr. Robert Cialdini.

Demandez donc d’abord des informations générales (nom, prénom, adresse…) puis permettez-vous, ensuite seulement, d’aller soit dans un niveau de détail plus précis (avec des réponses ouvertes par exemple), soit de demander des informations plus personnelles. Dans l’idéal même, ne rendez pas ce deuxième niveau obligatoire. Vous pourrez, par la suite, pousser vos utilisateurs à compléter leur profil (avec une jauge de remplissage par exemple).

IV. Groupez les champs connexes

 

L’un des principes fondateurs du gestaltisme2 indique que les utilisateurs d’un service perçoivent spontanément les phénomènes comme des formes globales plutôt que comme une juxtaposition d’éléments simples. Cela s’applique, bien évidemment, à la conception de vos formulaires. S’ils présentent plus de quelques champs, n’hésitez pas à grouper les questions connexes dans des sections communes.

Source : nnggroup.com

V. Ne diluez pas la concentration de l’utilisateur

 

C’est évident sur le principe mais plus difficile à mettre en place dans les faits, et ça mérite d’être rappelé. Minimisez au maximum les distractions pendant le questionnaire, évitez les pop-ups, les fonds sous forme d’image, les validations intempestives… Restez discret lorsque vous validez un champ ou une partie du formulaire, sauf s’il s’agit d’indiquer qu’une étape a été complétée. Bref, vous l’avez compris : faites l’essentiel pour que l’utilisateur qui remplit son formulaire ne soit pas diverti dans son attention.

VI. Expliquez pourquoi vous demandez une information sensible

 

Les informations que vous demandez à vos utilisateurs sont hautement personnelles. Pour vous, c’est un champ dans une base de données, a minima, un moyen d’optimiser vos stats et vos actions, au mieux, un moyen de choyer vos utilisateurs au plus près. Expliquez-lui pourquoi vous avez besoin de cette information personnelle, à quoi elle va vous servir et/ou comment vous l’utilisez. Cela crée une relation de confiance bénéfique pour l’utilisateur tout autant que pour vous et votre service.

Un formulaire Facebook

Source : Facebook

Les champs

 

C’est l’aspect le plus technique de la conception de formulaires efficaces. C’est aussi, et logiquement, celui auquel il faut veiller au plus près. Mais c’est également le plus simple à mettre en place !

VII. Bien placer la légende

 

Placez la légende (ou label) au dessus du formulaire correspondant et collez la bien au champ concerné. Statistiquement les utilisateurs complètent de façon plus importante les formulaires conçus de cette façon3.

Champs connexes formulaires 1
Champs connexes formulaires Z

Source : crazyegg.com

VIII. N’utilisez pas que des majuscules

 

En plus d’être agressifs, les légendes toutes en majuscules sont beaucoup moins faciles à lire et moins compréhensibles

Formulaire majuscules

Source : crazyegg.com

IX. Ne légendez pas à l’intérieur des champs

 

Il est possible de concevoir vos formulaires en changeant le texte du placeholder de vos champs (le texte à l’intérieur). Ne les utilisez pas pour légendez vos champs, pour la simple et bonne raison que la destination du champ deviendrait illisible une fois remplie, ce qui, on le comprend aisément, n’est pas très pratique lorsqu’il s’agit de relire son formulaire en cas d’erreur.

Champs intérieur légende

Source : smashingmagazine.com

Sachez qu’il existe également des placeholders “flottants” ou adaptatifs qui viendront se mettre automatiquement en haut de votre champ4 !

X. Indiquez clairement les erreurs

 

Rien de plus frustrant qu’un formulaire qu’on valide et pour lequel on indique une erreur sans qu’on parvienne à en comprendre l’origine. Faites le maximum pour préciser de façon exacte où sont situées les erreurs sur votre formulaire. S’il vous est possible de valider chaque champ en temps réel, cela évite même toute frustration !

Champs erreurs indiquées

Source : Ebay

XI. Optimisez la lisibilité des textes d’aide

 

Dans la même logique, mettez en place de textes d’aide propres à chaque champ (évitez le récapitulatif une fois le formulaire validé) et assurez vous qu’ils soient facilement accessibles et clairement lisibles par un humain (évitez les “TEXTTYPE-ERROR 9009”).

Lisibilité des textes d'aide formulaire

Source : UX Planet

XII. Montrez toutes les options s’il y a moins de 6 possibilités

 

N’utilisez les listes déroulantes que s’il y a plus de 5 possibilités. Lorsque vous avez 5 possibilités ou moins, préférez un champ cliquable (radio button) pour plus de lisibilité et moins de clics.

Options visibles formulaire

Source : crazyegg.com

XIII. Accompagnez l’utilisateur dans le remplissage

 

Au lieu d’utiliser le placeholder comme légende, pourquoi ne pas l’utiliser comme exemple ! Cela donnera une indication bienvenue pour remplir le champ en question.

Placeholder remplissage formulaire

Source : smashingmagazine.com

De la même façon, vous pouvez utiliser les contraintes de remplissage pour accompagner l’utilisateur lorsqu’il remplit par exemple son numéro de téléphone ou son code postal (les chiffres sont obligatoires et limités en nombre).

Source : Josh Morony

Petite astuce : les input type dans le HTML vous seront très utiles pour le mobile en proposant pour chaque champ le clavier adapté !

XIV. Pré-remplissez quand c’est possible

 

Si c’est possible, laissez aux navigateurs la possibilité de remplir automatiquement les formulaires (autofill). Cela permet aux formulaires d’être rempli 30% plus vite5, tout en garantissant une frustration moindre !

Préremplissage Google

Source : Google

XV. Prévoyez des champs de longueur adéquate

 

Un champ de taille adaptée évitera à vos utilisateurs de faire des erreurs et, comme pour d’autres des conseils déjà formulés, fera baisser la frustration en faisant comprendre à l’utilisateur immédiatement ce qu’on lui demande.

Placeholder remplissage formulaire

Source : Prototypr.io

XVI. Mettez en place un focus automatique

 

Prévoyez l’autofocus sur votre formulaire dès le premier champ. Cela donnera un jalon pour commencer à remplir le formulaire. Dans la mesure du possible prévoir également un focus visuel sur chacun des champs au fur et à mesure de leur sélection.

Autofocus formulaire

Source : Amazon

XVII. Indiquez uniquement les champs optionnels

 

Les étoiles rouges sur le bord des formulaires et la mention répétée du caractère obligatoire de tel ou tel champ peuvent être très agaçants durant le remplissage des questionnaires et pousser à l’abandon. Indiquer uniquement les champs optionnels rend le remplissage des formulaires bien plus agréable.

Champs optionnels formulaire

Source : UX Planet

XVIII. Organisez vos options cliquables verticalement

 

C’est ce qu’on appelle les radio buttons. Qu’ils soient limités à 1 choix ou, au contraire, qu’on puisse en cocher plusieurs, les options cliquables sont plus faciles à processer verticalement.

Options cliquables formulaire

Source : UX Planet

Les boutons

 

Troisième composante des formulaires, ils sont indispensables au bon traitement des informations. Ils sont donc à ce titre nécessairement concernés par toute démarche d’optimisation UX.

XIX. Personnalisez le texte

 

Ça paraît évident mais ce n’est pas toujours mis en place. Personnalisez le texte de vos boutons. Un bon CTA devrait toujours indiquer ce à quoi il sert !

CTA boutons formulaire

Source : Crazyegg

XX. Différenciez action primaire et action secondaire

 

Ou plus simplement tourné, marquez une différence visuelle entre l’action que vous voudriez que les utilisateurs fassent en premier (l’action primaire, par exemple, valider le formulaire) et l’action que vous préférez qu’ils fassent le moins possible ( l’action secondaire, par exemple annuler ou réinitialiser le formulaire). Selon une étude de Luke Wroblewski6, la différenciation entre les deux actions a un impact important sur le taux de remplissage et la vitesse à laquelle sont remplis les formulaires. Faites donc bien la différence !

Action primaire action secondaire boutons formulaire

Source : Luke Wroblewski

XXI. Prévoir une seule option dans la mesure du possible

 

Dans la mesure où une action secondaire peut perturber l’utilisateur, n’hésitez pas à ne prévoir qu’une seule action à l’issue du remplissage du formulaire.

XXII. Affichez le bouton de validation une fois les infos obligatoires remplies

 

Vous pourriez même dans l’idéal, et si vous avez mis en place la validation ligne par ligne, n’afficher le bouton de validation qu’une fois le formulaire rempli et les champs valides.

Cela aura pour double avantage de garder déclencher une sentiment de récompense chez l’utilisateur tout en déplaçant son focus sur le bouton apparu qu’il validera sans hésiter.

L’accessibilité

 

On oublie souvent l’importance de l’accessibilité. C’est pourtant l’un des prochains grands chantiers de Google, comme l’a été le mobile avant lui. Réfléchir en termes d’accessibilité vous permettra de porter votre démarche UX au maximum ! Il serait dommage de passer à côté de ce détail, qui n’en est pas un.

XXIII. Pensez mobile

 

C’est un poncif, mais il mérite d’être répété. Le mobile est désormais le point d’accès privilégié de nombre d’utilisateurs lorsqu’il s’agit de souscrire à un service. C’est d’ailleurs la raison pour laquelle Google a entériné le Mobile First Index il y a peu7. Concevez donc d’abord vos formulaires pour un usage mobile avant de penser desktop ! (Après avoir tout de même fait un tour dans votre outil de webanalyse et vérifier la répartition du trafic par appareil)

XIV. Pensez aux handicaps

 

Internet devrait être accessible au plus grand nombre quelque soit le handicap. Il existe de nombreuses façons de rendre accessibles vos formulaires aux personnes malvoyantes (en permettant de grossir le lettrage par exemple) ou atteinte de daltonisme (environ 5% de la population). De la même façon, faciliter le travail des aides vocales est possible. Vous pourrez faire le point sur les normes d’accessibilité en vous rendant à l’adresse de la Web Accessibility Initiative du W3C : https://www.w3.org/WAI/.

Action primaire action secondaire boutons formulaire

Source : UX Planet

XV. Faites des tests !

 

Encore et toujours ! On ne reviendra pas sur l’importance des tests utilisateurs et sur leur bénéfice à court, moyen et long termes. Testez vos formulaires, assurez vous qu’ils fonctionnent parfaitement sur tous les supports, qu’ils sont lisibles pour tous vos interlocuteurs, etc.

Les formulaires sont l’une des pierres angulaires des plateformes dans la mesure où ils constituent le point d’entrée de l’utilisateur dans le service que vous proposez. Il est donc impératif de les soigner au maximum !

N’hésitez pas à nous contacter pour obtenir un retour personnalisé sur la conception de vos formulaires. 🙂

 


1. Expedia a perdu 12 millions de dollars à cause d’une question supplémentaire… : https://www.zdnet.com/article/expedia-on-how-one-extra-data-field-can-cost-12m/

2. Pour des informations générales : https://fr.wikipedia.org/wiki/Psychologie_de_la_forme

3. Sur ce sujet : https://www.crazyegg.com/blog/guides/great-form-ui-and-ux/

4. Cf : https://www.jqueryscript.net/images/JVFloat-js-demo.gif

5. Selon Google : https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en

6. Voir l’article : https://www.lukew.com/ff/entry.asp?571

7. Pour plus de précisions : https://www.abondance.com/20180703-19395-index-mobile-first-7-points-clarifies-par-google.html

Formation ux

Formation professionnelle UX : découvrez les 7 bénéfices

La formation professionnelle est un moyen privilégié de saisir les évolutions régulières de la tech et d’en appréhender, quand ils ont lieu, les changements de paradigme. C’est notamment le cas avec l’UX, nouvelle tendance depuis quelques années, qui trouve ses racines dans des logiques marketing existant de longue date.

Quels sont les avantages d’une formation professionnelle UX ? Pour bien les comprendre, il faut revenir à l’essence de l’UX. L’User Experience (expérience utilisateur en français) est une démarche de design dans laquelle on met l’utilisateur, et son expérience de navigation, au premier plan. L’UX est l’étude des comportements, conscients et inconscients, qui impactent l’usage d’une interface.

Au quotidien, l’UX présente de nombreux avantages : parcours utilisateur optimisés, navigation fluidifiée et intuitive, produits plus attrayants… qui concourent à augmenter la qualité de votre interface et ainsi, très logiquement, à maximiser la satisfaction de vos utilisateurs.

Toutefois, la mise en place de la pratique de l’UX dans la conception de votre interface fait appel à des règles, des compétences et des bonnes pratiques qu’il faut connaître et maîtriser. Comme c’est le cas pour de nombreuses pratiques, l’UX est avant tout une affaire d’expérience. Mais, une fois cette connaissance acquise, les bienfaits seront multiples et rapidement ressentis1. Quels sont les bénéfices d’une formation professionnelle UX ? En voici 7.

I. Comprendre les ressorts de la navigation

Aborder l’UX et appréhender ses concepts permettra de répondre à 3 questions cruciales pour comprendre les ressorts de la navigation sur votre interface :

  • Qu’attend-on de votre interface (site internet, app, logiciel) ? Autrement dit que pense-t-on y trouver, produits, services, informations, etc. Il est primordial de comprendre ce que l’utilisateur attend de votre site et de faire en sorte que la bonne information lui soit transmises.
  • Qu’y fait-on et comment le fait-on ? C’est-à-dire quelles sont les actions que les utilisateurs font le plus couramment : achat, téléchargements, renseignements, contact. Souvent ces actions sont liées à la première question et en découlent. On s’attend à trouver quelque chose et on réalise certaines actions pour l’obtenir.
  • Cette expérience est-elle la plus satisfaisante possible ? C’est la question cruciale, dont les deux précédentes sont le préalable. Les bénéfices liés à une expérience de navigation agréable sont multiples2. Comprendre comment se fait cette expérience permettra d’agir facilement sur les moyens de l’améliorer, petit à petit.

–> Une formation UX permet d’apprendre à analyser les forces les faiblesses d’une interface.

II. Maîtriser parfaitement le parcours client

Une fois que vous saurez ce que cherchent vos clients, il ne restera plus qu’à les guider efficacement. Avec une bonne compréhension des mécanismes de l’UX, vous pourrez facilement, depuis l’arrivée sur votre interface jusqu’à son point de sortie, être en mesure de garantir un taux de rétention maximal pour une conversion maximisée.

En pratique, cela se traduira par l’établissement de personas correspondant aux groupes cibles de votre interface et à la compréhension de leurs comportements de navigation, afin d’établir des parcours clients et d’optimiser les funnels qui amènent à la conversion.

–> Une formation UX permet d’apprendre à analyser les parcours des utilisateurs.

III. Créer des gabarits efficaces pour tous les types de pages

Les différents volets de votre interface devraient logiquement répondre à différents besoins : une homepage, une page de produits, une page de contact, etc. Une formation professionnelle UX vous permettra de comprendre que chaque page doit avoir une utilité déterminée et qu’elle s’adresse à une typologie d’utilisateurs précise.

Cela vous permettra de concevoir des pages où l’architecture de l’information est pertinente (en prenant compte de la fameuse lecture en f3), structurée et conçue de façon à rendre la navigation satisfaisante.

Pour plus d’informations au sujet de la conception, vous pouvez consulter notre guide complet pour réaliser des wireframes pro.

–> Une formation UX permet d’apprendre à réaliser des wireframes

wireframes_formation_ux

IV. Optimiser la conversion

Plus une entreprise investit et se concentre sur le design, plus elle réalise de ventes.

Même si une entreprise ne devient pas à 100% centrée sur l’utilisateur, commencer à prendre en compte l’utilisateur dans son processus de vente aura des effets mécaniquement bénéfiques :

  • Les clients naviguent plus simplement sur une interface donnée
  • Les clients qui sont satisfaits d’interagir avec un site ont plus de chances de réaliser des transactions
  • Un processus d’achat fluide et agréable génère de la satisfaction utilisateur et de la récurrence dans les achats.

–> Une formation UX permet d’apprendre à réaliser des A/B tests et optimiser la conversion.

V. Maximiser les interactions

Les interactions avec vos utilisateurs sont cruciales pour comprendre, d’une part, comment votre produit pourrait être amélioré et, d’autre part, améliorer la relation avec vos clients. Cela entraînera une meilleure rétention de votre base existante4 et, par corollaire, une augmentation de votre ROI5.

Une démarche UX permettra de saisir comment mettre en place un retour utilisateur pertinent et non invasif.

De la même façon, une interface plaisante et agréable qui satisfait vos utilisateurs maximisera vos chances de provoquer du bouche-à-oreille6, un des vecteurs de l’adoption d’un produit par les utilisateurs.

–> Une formation UX permet de concevoir des parcours utilisateur pertinents.

VI. Éviter les dépenses inutiles

L’un des avantages indéniables d’intégrer les préconisations de l’UX dans le design de votre interface est qu’elles permettent de faire diminuer les coûts liés à son utilisation. De quelles manières l’UX peut-elle faire baisser vos dépenses ?

D’une part, même si la dépense peut vous paraître plus élevée au début (tests itératifs, correctifs), sur le long terme, adopter une interface qui met l’expérience utilisateur au cœur de son design réduira les coûts, financiers, temporels, de développement, liés à sa mise à jour et à ses évolutions, en plus de vous épargner les ratés inhérents à toute création de plateforme7.

D’autre part, vous éviterez de nombreuses dépenses inutiles liés à une mauvaise compréhension des services que vous proposez : votre produit n’est pas bien compris et donne lieux à des retours, un abonnement à des résiliations, des ventes ratées…et pousser à la mise en place d’un service de relation client, lourd en coûts structurels.

–> Une formation UX permet d’apprendre à optimiser l’allocation de ses ressources.

roadmap_formation

 

VII. Générer une base d’utilisateurs fidèles

Enfin, proposer une interface agréable et pensée ergonomiquement vous permettra de vous créer une base d’utilisateurs fidèles.

Si une mauvaise expérience de navigation fait fuir presque 90% des utilisateurs, l’inverse est valable : une expérience de navigation agréable augmentera le taux de rétention de vos prospects et clients et les fidélisera.

De la même façon, fidéliser une base client se montrera très avantageux pour la pérennité de votre activité par le biais des achats répétés : on estime qu’environ 40% du chiffre d’affaire d’une plateforme e-commerce se fait par 8% de ses clients fidèles8.

–> Une formation UX permet de comprendre les leviers de la satisfaction utilisateur.

Une formation UX peut donc s’avérer fructueuse à de multiples niveaux et avoir de nombreux bénéfices pour votre activité. N’hésitez à nous contacter pour de plus amples informations concernant les formations que nous proposons !


1. À ce titre, une infographie très éclairante : https://www.impactbnd.com/blog/user-experience-stats-infographic

2. Par exemple, presque 90% des utilisateurs ne retournent pas sur une interface sur laquelle ils ont eu de mauvaises expériences (selon Econsultancy)

3. À ce sujet : https://inferasolz.wordpress.com/tag/heatmap/)

4. Ce qui peut être intéressant quand on sait qu’il est en moyenne 25 fois plus cher d’acquérir de nouveaux clients plutôt que de retenir les clients existants : https://www.visioncritical.com/customer-loyalty-stats/)

5. Une augmentation de la rétention de vos utilisateurs de 5% peut augmenter vos profits de 25 à 95% : https://www.visioncritical.com/customer-loyalty-stats/)

6. En cas de doute : https://atelier.bnpparibas/retail/article/bouche-oreille-premier-moteur-adoption-innovation)

7. Sur ce point : https://wattx.io/blog/we-are-wattx/2018/04/27/how-investing-in-ux-will-save-you-money-and-time.html)

sondage-en-ligne

Sondage en ligne : les 10 erreurs à ne pas commettre

S’il est évident que toute bonne stratégie marketing repose sur la compréhension profonde de la catégorie de personnes que l’on vise et que sans cette compréhension, toute campagne est vouée à l’échec, il n’est pas forcément facile de recueillir de la donnée fiable, tant qualitative que quantitative.

Pour ce faire, il existe de nombreux canaux intéressants mais ils s’avèrent souvent coûteux à mettre en place.

C’est là qu’intervient le sondage en ligne : pratique, peu onéreux et efficace, il touche directement votre audience-cible. Mais attention, de nombreux écueils sont à éviter dans sa rédaction et il peut être autant un bel outil qu’une perte de temps massive, pouvant même, et c’est le pire, vous guider dans une mauvaise direction s’il n’est pas bien pensé.

Alors comment créer un sondage en ligne qui vous apporte vraiment des réponses ?

Voici 10 erreurs à ne pas commettre.

 

I. Ne pas se préparer

 

Tout bon questionnaire commence par une bonne préparation. Quand on sait que jusqu’à 34% des clients1 ont déjà arrêté de suivre une marque parce qu’elle leur envoyait des signaux marketing qu’ils ne trouvaient pas adaptés, il vaut mieux faire attention. Commencer d’abord par déterminer ce que vous voudriez savoir. Cela vous permettra souvent de choisir quel type de question vous devriez poser et quel type de réponse vous allez proposer (ouverte, à choix multiples, une échelle, etc).

De nombreux outils sont à votre disposition tels que Survey Monkey, Typeform, Google Forms. N’hésitez pas à tester différents outils afin de déterminer celui qui vous conviendra le mieux, à vous et à vos clients.

 

II. Ne pas bien définir sa cible

 

Connaissez-vous vraiment votre cible ? Il est assez commun d’avoir a priori une bonne idée du cœur de cible de son produit et de se tromper. C’est, en grande partie, la raison de l’existence du marketing analytique : confirmer (ou infirmer) le pressentiment qu’on a concernant son produit/ses clients.

Si vous souhaitez des réponses utiles et exploitables, définissez bien à quelle cible vous vous adressez en fonction des réponses que vous souhaitez avoir et des données que vous avez déjà. Fixez-vous ensuite des objectifs clairs et en rapport. Si vous n’avez pas encore de donnée, il est peut-être trop tôt pour mener un sondage en ligne et vous devriez penser à vous tourner vers des entretiens en face-à-face et définir des persona basés sur la donnée dans un premier temps. Mais c’est une toute autre question !

 

III. Ne pas rester simple

 

Vous connaissez chaque facette de votre produit mais ce n’est pas le cas de votre client. Alors formulez des questions simples et immédiatement compréhensibles, privilégiez un design clair pour une lecture immédiate. Mettez-vous à la place de votre client. Vous n’aimeriez pas vous sentir pressés par des questions trop poussées ou dont la réponse nécessite un travail particulier. Vous abandonneriez le formulaire ou pire, donneriez une réponse qui ne reflète pas ce que vous pensez.

La simplicité de votre sondage, tant visuellement que dans la formulation, évitera, d’une part, d’introduire de l’ambiguïté (qui rend de facto la réponse invalide) et, d’autre part, de faire face à un trop grand nombre d’abandons2.

 

IV. Déclencher le questionnaire au mauvais moment

 

C’est une erreur classique et facile à éviter. Mais elle arrive souvent. Quand faut-il déclencher le formulaire ? Un internaute découvre votre site et navigue sur celui-ci depuis 3 minutes. Est-ce le moment ? Ou est-ce préférable de le déclencher après la réception de son premier achat ? Tout dépend, bien entendu, de l’information que vous souhaitez rechercher. Gardez toutefois en tête que, comme il l’a été dit plus haut, les sollicitations intempestives ont un impact important sur la fidélité de vos clients.

Choisissez donc avec précaution le moment où vous déclenchez le questionnaire, préparez des scénarios, ne le soumettez pas anarchiquement à tous vos clients sans exception, prévoyez des segments et des questionnaires qui correspondent à ces segments.

 

V. Formuler les mauvaises questions

 

C’est le point épineux de tout sondage en ligne. Avec quelques garde-fous en tête, il est facile de ne pas tomber dans les 3 écueils courants que sont les biais, les questions trop larges et les formulations compliquées. Comment donc rédiger un bon sondage en ligne ?

  • N’introduisez pas de biais : il est normal de souhaiter un certain type de réponse et de formuler sa question de façon à l’obtenir3. Ne le faites pas. Les datas que vous collecteriez ainsi seraient par principe inutilisables puisque la réponse aurait été orientée.
  • Évitez les questions trop larges : Il existe plusieurs types de questions donnant lieu à plusieurs types de réponse (ouverte, à choix multiples, échelle de valeur, différentiel sémantique…). Choisissez bien le type de questions que vous posez afin de ne recueillir que l’essentiel. En plus d’un temps de traitement accru, les réponses larges dispersent la fonction essentielle du questionnaire : obtenir une réponse claire à un problème donné.
  • Soyez compréhensible : les questionnaires trop compliqués génèrent du stress. Posez des questions simples, dans un langage accessible et immédiatement compréhensible par les sondés.

On se répète encore mais gardez bien en tête que votre client n’a, de base, aucun intérêt immédiat à remplir votre formulaire. Ne lui rendez pas la tâche difficile, soyez clair, concis et neutre dans vos questions.

 

VI. Ne pas structurer son questionnaire

 

L’attention que portera la personne sondée au questionnaire sera probablement légère et souvent motivée par un incentive de quelque nature qu’il soit. Structurer votre questionnaire est donc un bon moyen d’éviter qu’elle se lasse trop rapidement. Cela se fait peut se faire de deux façons :

  • Allez du général vers le particulier : dans un premier temps, privilégiez les questions d’ordre général (“aimez-vous ceci ? buvez-vous tel type de boisson ?”), avant de bifurquer vers des questions plus personnelles (fréquence de visite, avis sur la marque, préférences marquées, etc). Il est souvent moins difficile de répondre aux premières et cela poussera à compléter le questionnaire en faisant l’effort de répondre aux dernières.
  • Divisez votre questionnaire : Le sentiment de récompense ressenti après avoir terminé une partie est largement partagé. En divisant votre questionnaire en plusieurs blocs, vous posez des jalons pour les sondés et leur donnez ainsi la sensation de ne pas s’attaquer à un ensemble monolithique interminable.

VII. Concevoir un formulaire trop long

 

Passé 7 à 8 minutes, le taux d’abandon des questionnaires en ligne tend à passer de 5 à 20%4. C’est parfaitement compréhensible de vouloir les réponses les plus fines aux questions que vous vous posez. Pensez toutefois aux sondés qui ont déjà l’impression de vous consacrer du temps bénévolement.

Ne vous éparpillez pas, soyez concis, cela augmentera vos chances d’avoir des formulaires complets et fera baisser le risque de perdre des clients fatigués par des demandes trop lourdes.

 

VIII. Ne pas proposer d’incentives

 

Quelle que soit la forme qu’il prend, l’incentive est un bon moyen de pousser les sondés à compléter votre questionnaire. Cela peut être un bon d’achat, une réduction, une carte cadeau, du contenu offert, etc. Dites-vous qu’avec l’avalanche de questionnaires en tout genre, un cadeau, si minime soit-il, est un bon moyen de sortir du lot et de maximiser vos chances de récupérer des sondages complétés !

 

IX. Ne pas faire de test

 

On le répètera encore et toujours : faites des tests ! Ce serait dommage, en effet, de perdre de longues heures de travail en raison d’un questionnaire non responsive5. Sélectionnez une partie de votre échantillon représentatif et faites-leur passer le test. Vous saurez tout de suite s’il y a un défaut : une échelle mal conçue pourrait mener à inverser sa valeur, une question ambiguë vous apportera des réponses aberrantes, etc. Une fois que tout semble fonctionner convenablement, vous êtes prêt à lancer sans stress votre sondage en ligne à grande échelle !

 

X. Ne pas prévoir de temps pour traiter les réponses

 

C’est la dernière étape de la mise en place d’un sondage en ligne et souvent la plus chronophage : le traitement des données. Prévoyez, à l’issue de votre sondage, du temps pour traiter et compiler les données, ainsi que pour en tirer les enseignements que vous souhaitez obtenir de votre questionnaire. Travaillez les réponses, analysez les tendances. Cela prend un temps considérable mais n’est-ce pas, finalement, la cerise sur le gâteau bien méritée suite à la conception d’un questionnaire à toute épreuve ?

Prêt à vous lancer ? N’hésitez pas à nous contacter pour une analyse et des conseils personnalisés concernant toutes vos futures campagnes de sondages en ligne !

 


1. Sondage Responsys : https://blogs.oracle.com/marketingcloud/does-my-customer-love-me

2. Près de 40% des réponses incorrectes dans un sondage proviennent d’une question ambiguë selon Surveymonkey

3. Sur ce point : https://www.surveymonkey.com/curiosity/a-little-bias-is-a-big-problem/

4. https://www.surveymonkey.com/curiosity/survey_completion_times/

5. On n’insistera pas sur la part du mobile, et dans la consultation des mails, et dans les processus d’achat.

outils-ux-design

Comparez les meilleurs outils UX Design : Wireframing, Prototypage, A/B testing …

Les meilleurs outils de l’UX Design

Zoning, prototypage, maquettage, wireframing… Tous ces termes utilisés dans l’UX design sont intrinsèquement liés à des outils…
Il existe une multitude d’outils, en voici une sélection !

Certain proposent les mêmes fonctionnalités, le mieux est, comme toujours, de tester. Une grande majorité proposent des périodes d’essai. Choisissez en fonction de vos usages et des intégrations avec vos outils favoris.

Découvrez notre article sur les meilleurs outils de l’UX Design :

Les meilleurs outils UX Design : Wireframing

balsamiq

Balsamiq est parfaitement adapté aux débutants, il permet de rapidement réaliser des zonings et des wireframes, il est cependant limité pour les projets d’ampleur.

Il simule une création « sur papier ». Il existe une large base d’éléments (icônes, lecteur vidéo, bouton…) déjà créés, qu’il est facile d’implémenter sur un mockup.  Balsamiq sera plutôt utilisé dans la phase d’idéation que de prototypage précis.

Balsamiq : https://balsamiq.com/

uxpin-design

UXPin est un excellent outil de prototypage, qui a la particularité d’être collaboratif. Il est possible de créer des design responsive et cliquables sur navigateur pour des tests utilisateur rapides.

UXPin : https://www.uxpin.com/

adobe-XD-design

Adobe XD permet de faire du prototypage, du design et de créer des interactions. L’outil propose également la possibilité de partager avec ses collègues ou clients votre production. Etant un produit Adobe, XD permet des intégrations à des autres logiciel de la suite Adobe, tels que Photoshop ou After effets, ce qui peut être très utile si vous travaillez régulièrement avec ces outils.

Adobe XDhttps://www.adobe.com/fr/products/xd.html

sketch

Sketch est l’application la plus en vue du moment et très répandue. Du prototypage à l’UI, l’outil permet de facilement dupliquer et modifier. De nombreux plugins viennent enrichir l’expérience : Craft, Anima… L’intégration avec Invision permet de synchroniser et diffuser vos productions très rapidement, l’intégration avec Zeplin permet de passer vos créations à des développeurs / intégrateurs avec beaucoup de facilité, pour des productions de haute qualité. Il est uniquement disponible sur Mac.

Sketch : https://www.sketchapp.com/

axure-wireframe

Axure est la référence historique de l’UX Design. Axure permet de créer des interactions complexes et aller loin dans le rendu d’un site. Moins à l’aise pour designer des applications, il ne permet pas d’intégration pour le passage en graphisme sur Photoshop ou Sketch, ce qui peut réduire la productivité. Il reste cependant un outil phare pour les UX Designers. Il est disponible sur PC et Mac.

Axure : https://www.axure.com/

framer-logo

Framer permet de designer, dessiner, animer et partager votre production.  Comme avec Adobe XD, il est possible d’animer ses écrans avec des interactions pré-conçues. L’application Mac permet également de visualiser en live une preview du code que l’on est en train de taper. Il est possible d’importer des designs depuis Sketch, Photoshop ou Figma.

Framer : https://framer.com/

figma-outil-ux

Comme les autres outils cités précédemment, Figma permet de faire du design, prototypage et des animations. Sa particularité est qu’il met en avant la collaboration, à la manière de Google Docs, avec la vue du curseur de chaque utilisateur ainsi que ses commentaires. Limiter les problèmes de versioning est au coeur de Figma. Basé sur une interface web, pas de problème si vous travaillez sous différents environnements (Mac / Windows), pas besoin de plusieurs logiciels.

Figma : https://www.figma.com/

marvel

Marvel permet de facilement créer des prototypes animés. Il suffit d’importer ses images et ajouter les interactions. Il est possible de connecter l’outil avec Sketch, Google drive et Dropbox.

Marvel : https://marvelapp.com/

atomic-design-outil

Atomic est un outil qui fonctionne sous navigateur (Chrome). Pas besoin de télécharger une application, ainsi la collaboration se fait en ligne. Une des fonctionnalités intéressante est le système d’historique qui permet revoir les itérations précédentes.

Atomic  : https://atomic.io/

Pour aller plus loin dans la conception des wireframes, découvrez notre article « Le guide complet pour réaliser des wireframes pro ».

Les meilleurs outils UX Design : Animation

Attention ! Les outils de wireframing présentés ci-dessus ont pour la majorité des fonctionnalités d’animation de prototypes.

Nous évoquons InVison à part car c’est un outil très utilisé dans le milieu de l’UX Design.

invision-ux-design

Invision est particulièrement réputé pour favoriser la collaboration entre UX, designers et chefs de projet (avec la fonctionnalité de commentaires) et pour animer des wireframes issus de n’importe quel outil cité ci-dessus.

Il est possible d’animer des wireframes à partir de simples images (JPG ou PNG), voir tout simplement synchroniser Invision avec Sketch, pour automatiquement mettre à jour les maquettes sur Invision au fur et à mesure des mises à jour, très pratique !

Invisionhttp://www.invisionapp.com/

Les meilleurs outils UX Design : Ateliers

optimal_workshop

Pour réaliser tous vos ateliers, que ce soit des ateliers de tri des cartes, des questionnaires, sondages, tests de « premier clic »… L’outil Optimal workshop facilitera leur création et vous fournira une interface qualitative et collaborative.

Optimal workshophttps://www.optimalworkshop.com/

Les meilleurs outils UX Design : Persona / User journey

Un persona est un personnage imaginaire représentant un groupe ou segment cible dans le cadre du développement d’un nouveau produit ou service.

Un customer journey, c’est raconter l’histoire d’un persona à travers les moments clés où il utilise votre solution, ou autre, pour répondre à son problème et réaliser ses objectifs.

userforge-outil-ux

Userforge est un outil simple et collaboratif de création de personas.

Userforge : https://userforge.com/

uxpressia-outil-ux

UXPressia permet de facilement créer, visualiser et partager des personas, customer journeys et impact maps.

UXPressiahttps://uxpressia.com

Les meilleurs outils UX Design : A/B Testing

L’A/B Testing est une technique de web-marketing qui consiste à proposer plusieurs variantes d’une même page afin de déterminer la version qui donne les meilleurs résultats auprès des consommateurs.

Ces 2 pages peuvent avoir beaucoup ou très peu d’éléments différents : ce pourra être uniquement un argument de vente modifié, la position d’un bouton d’action ou bien un design complètement revu.

Les tests sont réalisés à l’aide d’une solution technique, souvent en mode SaaS (Software as a Service), qui redirigera les utilisateurs sur les différents versions selon l’affluence désirée.

Outils d’A/B testing – Français

abtasty

AB Tasty est une des références de l’A/B testing, son outil est réputé et utilisé dans de nombreuses grandes entreprises pour optimiser leurs taux de conversion. AB Tasty propose aussi d’autres services, comme le session replay, les heatmaps ou encore des sondages.

AB Tasty : https://www.abtasty.com/fr

kameleoon

Kameleoon est une une solution d’A/B testing robuste et de haute qualité, connue pour son outil de test, mais aussi de personnalisation ou encore de ciblage prédictif. L’agence UX Arquen est un partenaire certifié Kameleoon.

Kameleoon : https://www.kameleoon.com/fr/

Outils d’A/B testing – USA

google-optimize

Google optimize est la seule solution d’A/B testing avec un essai gratuit. Les fonctionnalités du gratuit sont cependant limitées (impossible de mettre un test en pause ou encore de modifier un test en cours). Il permet des cependant intégrations avec Google Analytics (reporting, réutilisation des segments…) très utiles. Son intégration dans la suite Google 360 en fait un concurrent de taille.

Google Optimize : https://marketingplatform.google.com/about/optimize/

optimizely

Optimizely a été le premier acteur sur le marché de l’A/B testing, il propose une solution très performante pour mener des A/B tests, de la personnalisation sur site mais aussi sur application, il est le leader du marché mondial.

Optimizelyhttps://www.optimizely.com/

Intéressé par les tests utilisateurs, les heatmaps… ? Découvrez notre article sur les meilleurs outils de l’UX Research ou bien contactez-nous pour nos services de wireframing !

Arquen – Agence UX

usertesting-cx-goes-mainstream

[Etude Usertesting.com ] Le marché de la recherche utilisateur dans les entreprises

Le CX ou customer experience / expérience utilisateur prend une place significative au sein des entreprises. La recherche utilisateur et ses différentes méthodes de collecte de données et d’analyse est de plus en plus une priorité pour les entreprises.

Dans leur 5eme rapport annuel, Usertesting nous montre la progression de l’expérience utilisateur comme nouvelle priorité pour les entreprises. Ce changement à également modifié et fait grandir l’industrie classique de la recherche utilisateur, vers des méthodes de collecte de données plus flexibles.

Nous allons vous présentez les résultats clés de cette étude concernant le marché de la recherche utilisateur :

L’échantillon est composé de 3 900 professionnels répartis sur tous les secteurs d’activité.

 

Constat 1 : La recherche utilisateur améliore la qualité du produit / service

 

experience-utilisateur-amélioration-produit-services

L’écrasante majorité des directeurs sont d’accord sur le fait que la recherche utilisateur améliore la qualité globale de leur produit ou services.

experience-utilisateur-succès

De plus, ils ont conscience à 95,7% qu’une bonne expérience utilisateur sera critique dans la réussite de leur entreprise.

 

 

Constat 2 : La recherche utilisateur est de plus en plus systématique

 

experience-utilisateur-fréquence-utilisation

A la vue des précédents constats, il est logique que la fréquence d’utilisation des méthodes de recherche UX augmente :

3,38% vont plutôt réduire, alors que près de 55% des répondants vont augmenter leurs usages.

 

recherche-utilisateur-etapes-entreprise

On note ici l’importance de la recherche utilisateur dans toutes les phases du développement d’un produit ou service.

En amont, avant le développement et le design afin d’éviter de partir dans la mauvaise direction et se rendre compte de ses erreurs une fois des lourds coûts de développement engagés. Durant les phases de création et développement afin de valider le cap et enfin post lancement pour commencer à dégager des pistes d’amélioration pour les prochaines versions du produit ou services.

 

Constat 3 : Des méthodes encore disparates entre les équipes

 

usage-outil-recherche-utilisateur

 

Nous pouvons noter un certain déséquilibre entre les différentes équipes dans leurs usages des outils. Seul les équipes market research / user research arrivent à diversifier et prendre en compte de façon équitables les différentes sources de données.

comportement-utilisateur-analytics

L’analytics permet de récupérer de la donnée importante pour améliorer ses interfaces et l’expérience utilisateur. Il arrive parfois que les comportements soient complexes à expliquer, c’est pour cela qu’il faut coupler un audit analytics à d’autres formes d’analyse de données, plus qualitatives.

 

Constat 4 : L’A/B testing n’a pas toujours une forte valeur ajoutée

 

experience-utilisateur-succès-ab-test

 

De nombreuses entreprises mettent en placent des A/B tests. Cependant une grande majorité d’entre elle (55% !) échouent à trouver des alternatives qui fonctionnent mieux, avec moins de 40% de réussite. Pour trouver de bonnes idées, faire appel à des spécialistes avec un regard extérieur est souvent la bonne solution.

Vous pouvez trouver le rapport complet (en anglais) sur le site de Usertesting.com.

 

Intéressé par la recherche utilisateur ? Découvrez notre article sur les meilleurs outils de l’UX Research ou bien contactez-nous ! 🙂

ergonomie-UX-mobile

Les bases de l’Ergonomie et de l’UX Design sur mobile et tablette

Depuis quelques années, avec le développement des tablettes et smartphones, le sujet de l’ergonomie est de plus en plus présent dans les problématiques de design et UX destinée au web et aux applications. A première vue, il n’est pas évident d’adresser ces sujets, c’est pourquoi cet article va vous donner des bases concernant l’ergonomie mobile et tablette.

 

L’ergonomie et l’UX mobile

 

Accessibilité

 

Voici schématiquement les zones dont l’accès est le plus aisé ou complexe sur mobile et tablette :

Two illustrations of someone using a mobile phone and a tablet from Luke Wroblewski's Designing for Large Screen Smartphones articleSource: Designing for Large Screen Smartphones

Sur la version smartphone, il devient simple de comprendre la tendance actuelle à mettre le menu en bas sur les applications, notamment :

ergonomie-mobile-menu                       ergonomie-ux-menu                     ergonomie-ux-mobile-menu

Les zones en jaune ne doivent pas être évitées à tout prix, mais les éléments d’action qui y sont placés ne doivent pas être les plus utilisées par l’utilisateur.
Voici également un exemple de site mobile qui regroupe les actions clés en menu « sticky » ou « fixe » en bas de page :

menu-mobile

Position des mains

Concernant le smartphone, l’usage d’une ou deux mains peut influencer l’accessibilité :

Three illustrations showing how people use mobile devices from Luke Wroblewski's Designing for Large Screen Smartphones article
Source: Designing for Large Screen Smartphones

Selon le livre « Design Tactile » qui fait partie de notre top 10 des livres sur l’UX, la répartition serait la suivante :

  • Usage à une main : 49%
  • Usage à deux mains avec un pouce : 36%
  • Usage à deux mains avec les deux pouces : 15%

En fonction des applications, les usages vont changer : pour Google Maps, souvent utilisé dans la rue ou en déplacement, l’usage à une main sera le plus fréquent.
Pour Netflix par contre, l’usage étant plus statique, l’usage deux mains sera utilisé.

 

Interaction et lecture

 

Two illustrations showing the areas of interaction on a tablet from Luke Wroblewski's Defining Mobile article
Source: Defining Mobile: 4-5.5 Inches, Portrait & One-Thumb

Un autre élément intéressant d’ergonomie sur tablette, est la différence entre une situation de lecture et d’interaction : Nous constatons une inversion des zones !
Il est donc essentiel de savoir comment les utilisateurs se servent de votre application ou site pour designer en conséquence celle ou celui-ci.

La loi de Fitts

 

loi-de-fitts-ux

Présent dans notre lexique UX, c’est une loi bien connue des UX designers. Pour résumer, le Loi de Fitts est la suivante : plus un élément est proche et gros, plus il sera rapide de l’atteindre, et plus il sera loin et éloigné plus il sera long à atteindre. Bien que cela puisse sembler évident, l’avoir en tête lorsqu’un utilisateur interagit avec une interface complexe peut être très utile !

Coins et bord infinis

Sur des écrans avec usage de la souris, cette loi a un usage intéressant : les coins de l’écran vont fonctionner comme des gros boutons, ils sont très faciles à atteindre. Tout ce qui sera situé dans ces zones est simple d’accès. Microsoft a par exemple placé dans le coin inférieur gauche son fameux bouton « Démarrer », les actions « Fermer » en haut à droite (et haut à gauche sur Mac).

loi-de-fitts-coin

Sur un écran tactile, cette notion de coin infini est différente : on utilise des bords infinis. En effet l’usage de la souris et du doigt est très différent. Habituellement sur les OS mobile tel que IOS ou Android, cela est utilisé pour afficher les applications via un swipe vers le haut :

smartphone-ergonomie-interaction

Sur Android, un swipe depuis le haut permet d’afficher les options du téléphone.
Dans beaucoup d’applications, les bords sont désormais utilisés : Passer au produit suivant avec un swipe depuis la droite, effectuer un choix (Valider ou Refuser un profil sur une application de rencontre avec le swipe droite/gauche)….

Plus globalement : La posture

 

Autre élément à prendre en compte, la posture ou positionnement. Comment chacun va utiliser un appareil va influencer la façon d’afficher sur celui-ci (taille du texte par exemple, ou densité de l’information).

Au-delà du mobile et de la tablette, de nouveaux appareils sont utilisés de plus en plus fréquemment : Smartwatch ou encore Tv connectée. Ces appareils vont être catégorisés en 2 : Ceux où l’on est « penché vers l’avant » et ceux où l’on est penché vers l’arrière ».

appareil-ergonomie-mobile

 

N’hésitez pas à consulter nos autres articles où à nous contacter pour en savoir plus ! 🙂

Arquen – Agence UX Design