\u00ab Un peu d’animation ici<\/span> ! Un soup\u00e7on d’imprim\u00e9 l\u00e9opard l\u00e0<\/span> ! \u00bb<\/p>\n\n\n Mais, comme c’est souvent le cas avec les choses qui brillent, il est facile d’en faire trop \u2014 surtout si ta cr\u00e9ativit\u00e9 r\u00e9duit la fonctionnalit\u00e9 de ton site.<\/p>\n\n\n Que tu souhaites vendre un produit ou partager quelques articles de blog<\/a><\/span>, tu ne construis pas vraiment le site pour toi. Ce sont les visiteurs de ton site qui doivent \u00eatre satisfaits du design et de l’interface utilisateur. C’est l\u00e0 que l’exp\u00e9rience utilisateur (UX) entre en jeu. Maintenir un fort accent sur l’UX lors de la construction de ton site devrait se traduire par une augmentation des conversions et une r\u00e9duction des taux de rebond.<\/p>\n\n\n Dans cet article, je vais te donner un cours acc\u00e9l\u00e9r\u00e9 sur l’UX et expliquer ce que fait un designer UX. Ensuite, nous passerons en revue quelques astuces pour reconna\u00eetre un bon design UX lorsque tu y es confront\u00e9. Enfin, je te montrerai comment utiliser l’UX pour cr\u00e9er un meilleur site web<\/a> pour ton public. N’h\u00e9site pas \u00e0 sauter directement \u00e0 la section qui te sera la plus utile !<\/p>\n\n\n Pr\u00eat \u00e0 discuter strat\u00e9gie UX ? Commen\u00e7ons !<\/p>\n\n\n En termes simples, l’exp\u00e9rience utilisateur (UX) est la mani\u00e8re dont l’interaction avec la technologie fait ressentir \u00e0 un utilisateur. L’UX s’applique \u00e0 toute technologie, d’une application \u00e0 une console de jeux.<\/p>\n\n\n Quand il s’agit de sites web, le design UX vise \u00e0 optimiser l’interaction entre l’utilisateur humain et la page. Un site construit selon des principes UX solides devrait laisser l’utilisateur avec le sentiment d’avoir accompli ce qu’il \u00e9tait venu faire sans frustration.<\/p>\n\n\n Cela peut te donner envie de tout donner sur le design visuel du site web. Cela pourrait inclure des animations tape-\u00e0-l’\u0153il et d’immenses carrousels d’images<\/a>. Si tu te souviens de MySpace, tu as probablement encore des cauchemars \u00e0 propos de paillettes anim\u00e9es et de versions MIDI de chansons de Blink-182 . . . ouille<\/span>.<\/p>\n\n Mais la conception UX a beaucoup moins \u00e0 voir avec l’apparence d’un site qu’avec la mani\u00e8re dont il est utilis\u00e9. Pour \u00eatre efficace, ton site web devrait \u00eatre une exp\u00e9rience compl\u00e8te \u2014 pas juste des mots et des images sur une page.<\/p>\n\n\n Les utilisateurs oublieront des donn\u00e9es, comme le montant qu’ils ont pay\u00e9 pour les produits qu’ils ont command\u00e9s. Cependant, l’exp\u00e9rience de la commande devrait \u00eatre agr\u00e9able et sans effort. Cette exp\u00e9rience restera avec eux, augmentant les chances qu’ils ach\u00e8tent chez toi encore et encore.<\/p>\n\n\n Si ton site offre une mauvaise exp\u00e9rience utilisateur, tu pourrais observer le r\u00e9sultat inverse. Les utilisateurs qui se sentent stress\u00e9s ou en col\u00e8re lorsqu’ils utilisent ton site iront probablement vers un site de tes concurrents. Ils ont de nombreuses options et aucune raison de revenir sur un site difficile \u00e0 utiliser.<\/p>\n\n\n Si tu n’es toujours pas convaincu que l’UX est important pour ton site web, voici quelques statistiques cl\u00e9s :<\/p>\n\n\n Tout ceci sert \u00e0 illustrer l’importance d’un bon design UX lors de la cr\u00e9ation d’un site web.<\/p>\n\n\n\n\n L’UX est tellement essentielle qu’il existe une profession enti\u00e8re d\u00e9di\u00e9e \u00e0 son optimisation. Les t\u00e2ches quotidiennes d’un designer UX varieront en fonction des types de projets qu’il aborde. Cependant, l’objectif est g\u00e9n\u00e9ralement le m\u00eame. Le travail du designer UX est d’optimiser l’exp\u00e9rience de l’utilisateur<\/span> lors de l’interaction avec la technologie num\u00e9rique tout en tenant compte du bien-\u00eatre de l’entreprise.<\/p>\n\n\n Pour atteindre cet \u00e9quilibre, le designer UX suit un processus qui r\u00e9sulte en plusieurs <\/a><\/span>livrables<\/a><\/span>.<\/p>\n\n\n Avant de commencer le design proprement dit, il y a beaucoup de recherches UX \u00e0 faire. Par cons\u00e9quent, le designer peut d’abord cr\u00e9er une ou plusieurs personas d’audience<\/a><\/span>. Cela permet au designer de comprendre les besoins de l’utilisateur.<\/p>\n\n\n Ensuite, le designer UX peut pr\u00e9senter un sch\u00e9ma de flux utilisateur potentiel pour aider \u00e0 explorer les diff\u00e9rentes mani\u00e8res dont un utilisateur pourrait interagir avec le site web. Il peut ensuite traduire ces informations en un prototype. Les prototypes peuvent \u00eatre aussi simples qu’un <\/a><\/span>wireframe<\/a><\/span>, un plan sommaire de ce \u00e0 quoi pourrait ressembler une page web finale. Le designer peut \u00e9galement cr\u00e9er un prototype plus visuellement robuste ou m\u00eame un qui peut \u00eatre interactif.<\/p>\n\n Les responsabilit\u00e9s du concepteur UX ne se terminent pas avec le design final. Une fois le site lanc\u00e9, il peut r\u00e9aliser des tests d’utilisabilit\u00e9 ou examiner les analyses d’utilisation pour identifier et r\u00e9soudre les probl\u00e8mes potentiels.<\/p>\n\n\n En d’autres termes, ils sont impliqu\u00e9s dans toutes les \u00e9tapes de la cr\u00e9ation et du lancement d’un site web.<\/p>\n\n\n\n\n Si tu g\u00e8res ton propre design UX, c’est ta responsabilit\u00e9 de d\u00e9fendre ton public tout en t’assurant que tu obtiens ce que tu veux de ton site. Pour cela, la premi\u00e8re \u00e9tape est d’apprendre \u00e0 reconna\u00eetre un design UX robuste.<\/p>\n\n\n Avec cela en t\u00eate, examinons quelques exemples d’UX dans la pratique. Il y a quatre \u00e9l\u00e9ments cl\u00e9s auxquels tu voudras pr\u00eater une attention particuli\u00e8re.<\/p>\n\n\n Un mauvais design de navigation peut rendre n’importe quel site web inutilisable. La navigation \u00e0 travers un site doit \u00eatre fluide et intuitive. Le menu de navigation doit \u00e9galement \u00eatre accessible quel que soit l’appareil utilis\u00e9 par un visiteur.<\/p>\n\n\n La navigation par fil d’Ariane<\/a><\/span> est une mani\u00e8re pour les concepteurs de pr\u00e9venir la perte des utilisateurs, surtout si un site web comprend de nombreuses pages.<\/p>\n\n Il est \u00e9galement important de faire attention aux liens. Les concepteurs web qui utilisent une UX solide s’assurent que tu peux identifier les liens lorsque tu les vois. Cela signifie souvent les souligner et utiliser une couleur de texte diff\u00e9rente. Ils utiliseront \u00e9galement un texte d\u2019ancre significatif<\/a><\/span>, ainsi tu sais o\u00f9 le lien te m\u00e8ne<\/a> avant de cliquer dessus.<\/p>\n\n\n\n\n Une partie importante d’une UX r\u00e9ussie consiste \u00e0 comprendre comment les gens interagissent avec diff\u00e9rentes parties d’un site web. Par exemple, la plupart des gens ne lisent pas normalement le contenu d’une page web. Ils le parcourent<\/a><\/span> et s’arr\u00eatent pour lire s’ils trouvent quelque chose d’int\u00e9ressant.<\/p>\n\n\n Le contenu est analysable si un utilisateur peut parcourir rapidement un article de blog ou une page de vente et repartir avec une id\u00e9e claire de ce qu’il communique.<\/p>\n\n Garder les paragraphes courts est une mani\u00e8re de cr\u00e9er du contenu facile \u00e0 parcourir. Ces paragraphes devraient \u00eatre fr\u00e9quemment interrompus par des titres, des listes et des images. Les designers peuvent \u00e9galement utiliser des citations saillantes, du texte en gras et des \u00e9l\u00e9ments similaires.<\/p>\n\n\n\n\n L’animation est un moyen efficace de se d\u00e9marquer dans un oc\u00e9an de sites web et d’attirer l’attention d’un utilisateur<\/a><\/span>. Elle ajoute un \u00e9l\u00e9ment amusant et peut contribuer \u00e0 cr\u00e9er une exp\u00e9rience m\u00e9morable pour l’utilisateur.<\/p>\n\n\n Cependant, il y a une bonne et une mauvaise mani\u00e8re de le mettre en \u0153uvre.<\/p>\n\n\n Une animation subtile peut fournir un retour<\/a><\/span> pendant que tu attends que la transaction se termine. Une animation peut \u00e9galement tourner en boucle pendant que tu peines \u00e0 te concentrer sur la lecture d’une description de produit. Ces approches cr\u00e9ent deux exp\u00e9riences tr\u00e8s diff\u00e9rentes. L’abus d’animation peut \u00e9galement affecter l’exp\u00e9rience utilisateur sur les appareils mobiles.<\/p>\n\n\n Optimiser un site web pour les utilisateurs mobiles<\/a><\/span> est indispensable. Si tu es comme la plupart des gens, tu utilises g\u00e9n\u00e9ralement ton t\u00e9l\u00e9phone<\/a><\/span> pour acc\u00e9der \u00e0 internet. Si tu tombes sur un site difficile \u00e0 utiliser sur ton appareil, tu vas probablement simplement l’abandonner.<\/p>\n\n\n Au-del\u00e0 de choisir un th\u00e8me r\u00e9actif<\/a><\/span>, tu peux prendre des mesures suppl\u00e9mentaires pour t’assurer que ton site fonctionne bien sur tous les \u00e9crans. Par exemple, tu peux tester ton site web avec l’outil de test mobile-friendly de Google<\/a><\/span>.<\/p>\n\n Cet outil t’alertera sur les probl\u00e8mes qui emp\u00eachent ton site d’\u00eatre adapt\u00e9 aux mobiles. Tu pourrais d\u00e9couvrir qu’une police particuli\u00e8re est trop difficile \u00e0 lire sur un petit \u00e9cran, par exemple, ou que les boutons sont trop petits pour \u00eatre tap\u00e9s facilement.<\/p>\n\n\n\n\n Maintenant que tu sais ce qu’est une bonne UX, comment l’appliquer \u00e0 ton site ?<\/p>\n\n\n Tu ne feras probablement pas de recherche de march\u00e9 intensive ou de prototypage avec des wireframes de haute fid\u00e9lit\u00e9. Pourtant, mettre ton chapeau de concepteur UX peut t’aider \u00e0 cr\u00e9er un site que toi et ton public adorerez.<\/p>\n\n\n Tout d’abord, il est important de savoir pourquoi tu as un site web et ce que tu souhaites qu’il accomplisse. Par exemple, es-tu :<\/p>\n\n\n Ensuite, apprends \u00e0 conna\u00eetre ton utilisateur id\u00e9al ou ton client potentiel. <\/a>Cr\u00e9er un persona utilisateur<\/a><\/span> te permettra d’imaginer comment ton public cible pourrait interagir avec ton site web. Ce persona peut \u00eatre aussi simple que qui est la personne, ce qu’elle veut, et ce qui l’emp\u00eache de l’obtenir. Il est crucial que tu identifies ce dont l’utilisateur a besoin pour r\u00e9ussir sur ton site.<\/p>\n\n\n Rappelle-toi que l\u2019accessibilit\u00e9 est une partie int\u00e9grante de l\u2019UX<\/span>. Tu peux avoir des visiteurs qui utilisent des technologies d\u2019assistance, donc envisage de faire de l\u2019accessibilit\u00e9 une priorit\u00e9<\/a><\/span> lors de la construction de ton site.<\/p>\n\n\n Tu peux aussi consulter les sites de tes concurrents<\/a> pour voir ce qui fonctionne pour eux. L’ic\u00f4ne du panier est-elle toujours dans le coin sup\u00e9rieur droit ? Peut-\u00eatre que la tienne devrait l’\u00eatre aussi. Tu peux \u00eatre cr\u00e9atif sans r\u00e9inventer la roue ; les utilisateurs ne devraient pas avoir \u00e0 deviner comment fonctionne ton site pour atteindre leurs objectifs.<\/p>\n\n Enfin, la performance du site<\/a><\/span> joue un r\u00f4le cl\u00e9 pour l’exp\u00e9rience utilisateur. Les pages lentes feront partir les visiteurs<\/a><\/span> avant m\u00eame que le site ait le temps de se charger. Il existe de nombreuses fa\u00e7ons d’acc\u00e9l\u00e9rer votre site, bien que votre meilleure option soit de commencer avec un h\u00e9bergement de qualit\u00e9<\/a><\/span>.<\/p>\n\n\n\n\n\n\n \u00c0 ce stade, tu as probablement compris que le design UX n’est pas quelque chose que l’on optimise en une seule fois. Il y a beaucoup plus \u00e0 explorer dans ce domaine que ce que nous pouvons couvrir dans un seul article.<\/p>\n\n Heureusement, il existe de nombreuses ressources UX de qualit\u00e9 auxquelles tu peux te r\u00e9f\u00e9rer pour continuer \u00e0 am\u00e9liorer ton site web<\/a> :<\/p>\n\n\n Si tu combines ces ressources avec de la recherche et de la pratique, tu devrais te retrouver \u00e0 mettre en \u0153uvre de bonnes pratiques d’exp\u00e9rience utilisateur en un rien de temps.<\/p>\n\n\n Tu n’as pas besoin d’\u00eatre un designer UX professionnel pour cr\u00e9er un site web avec lequel ton audience adorera interagir. Il suffit de comprendre ce qui rendra la vie plus facile \u00e0 tes visiteurs et d’avoir la volont\u00e9 de construire un site qui offre cette exp\u00e9rience.<\/p>\n\n\n UX d\u00e9crit ce que ressentent les utilisateurs lorsqu’ils interagissent avec ton site web. Optimiser l’UX de ton site signifie garantir qu’il poss\u00e8de une navigation claire, cr\u00e9er du contenu facile \u00e0 parcourir, le tester pour sa r\u00e9activit\u00e9, et plus encore. Il y a beaucoup \u00e0 apprendre, mais il existe \u00e9galement de nombreuses ressources utiles et des designers comp\u00e9tents qui peuvent aider.<\/p>\n\n\n\n
<\/a>Une Introduction \u00e0 l’Exp\u00e9rience Utilisateur (UX) et Pourquoi Elle Est Importante<\/span><\/h2>\n\n\n
![\"Un](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/6b708057-701f-400a-a361-338e99be9977_dh-what-is-ux-5.jpg\")
<\/figure><\/div>\n\n\n
<\/a>Le R\u00f4le du Designer UX<\/span><\/h2>\n\n\n
![\"Un](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/b8af0872-4f45-4c9e-875b-b33249d5346f_dh-what-is-ux-1.jpg\")
<\/a>Comment Reconna\u00eetre Un Bon Design UX<\/span><\/h2>\n\n\n
1. Navigation<\/h3>\n\n\n
![\"Site](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/e9db2b0f-8fd6-4c8e-9a30-2ec3dd58b0a2_dh-what-is-ux-4.jpg\")
<\/figure><\/div>\n\n2. Contenu<\/h3>\n\n\n
![\"Contenu](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/ff4a85e0-503f-4fa1-a6df-f6562ea1c60e_dh-what-is-ux-3.jpg\")
<\/figure><\/div>\n\n3. Animation<\/h3>\n\n\n
4. R\u00e9activit\u00e9<\/h3>\n\n\n
![\"Exemple](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/3a63f433-6f6b-4615-8e3c-2a4ee5b2cc0f_dh-what-is-ux-2.jpg\")
<\/figure><\/div>\n\n<\/a>Comment Utiliser l’UX Pour Concevoir un Site Pour Ton Audience<\/span><\/h2>\n\n\n
\n
![\"Exemples](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/97d495ea-4402-48c2-ba2d-08c28adf3cb1_dh-what-is-ux-7.jpg\")
<\/figure><\/div>\n\n![\"Ad](\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\"){kind=spacer}
<\/div>\n\n\n\n\n <\/a>Ressources UX<\/span><\/h2>\n\n\n
![\"Page](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/30b88ca7-c692-4741-b779-c00397bbd7ed_dh-what-is-ux-6.jpg\")
<\/figure><\/div>\n\n\n
Con\u00e7ois Une Excellente Exp\u00e9rience Utilisateur<\/span><\/h2>\n\n\n