UX – Expérience Utilisateur : Définition et Bonnes Pratiques 

UX. S’il y a deux lettres qu’on voit partout dès qu’on parle de marketing, de Relation Clients ou de webdesign, c’est bien celles-là ! Alors j’imagine que vous avez une idée de ce qu’est l’UX (Expérience Utilisateur). Je pense aussi que vous savez pourquoi elle est au cœur des priorités aujourd’hui. C’est bien le cas ? Un petit rafraîchissement sur le sujet ne ferait pas de mal ? C’est ce que je vous propose. Clarifions de façon synthétique ce qui se cache derrière cette notion d’User Experience. Vous trouverez aussi quelques bonnes pratiques à mettre en place si vous voulez améliorer l’Expérience Utilisateur de votre site web, et plus globalement de votre marque.

UX - User Experience - Définition de l'Expérience Utilisateur

Découvrez ce qui se cache derrière l’acronyme UX

UX : définition

UX est l’acronyme de User eXperience. Ce terme renvoie à l’expérience vécue par un utilisateur lorsqu’il interagit avec un “système”, bien souvent dans un contexte d’interaction homme-machine (IHM). Il englobe ainsi l’ensemble des ressentis, des perceptions et des interactions que vit la personne lorsqu’elle utilise le système en question (un site web, un logiciel informatique, une application mobile, etc.).

Comment dit-on User Experience en français ?

User Experience (UX) est la traduction d’Expérience Utilisateur en anglais. Cette notion d’expérience est essentielle, car elle englobe un aspect émotionnel qui est décisif dans le rapport entre un être humain et un système informatique/applicatif.

Concrètement, qu’est-ce que l’Expérience Utilisateur ?

En Marketing Clients, l’Expérience Utilisateur désigne la facilité avec laquelle un individu va utiliser le système (souvent un site internet, un produit digital ou une application) que lui met à disposition une entreprise. Si l’expérience est peu satisfaisante, voire désagréable, l’utilisateur risque de ne plus vouloir utiliser le système en question. Il aura alors un ressenti négatif sur l’entreprise.

Dans le cas d’un site web, l’UX dépend de nombreux facteurs ergonomiques et techniques (webdesign, responsive, etc.). Elle revêt aussi une dimension émotionnelle. Car l’UX, c’est l’ensemble des ressentis de l’internaute lorsqu’il navigue sur les pages du site web. Autrement dit, l’Expérience Utilisateur implique de se mettre à la place du visiteur afin de lui offrir la meilleure expérience possible. La notion de parcours fait partie intégrante de l’UX (on parle d’ailleurs de parcours utilisateur). Car il s’agit d’optimiser chaque élément avec lequel l’internaute va entrer en relation quand il interagit avec le site web (et donc la marque derrière).

Vous voyez les sites internet qui proposent une interface standardisée, impersonnelle, moche, avec un effet cheap ? Vous avez en tête ces sites sur lesquels il est (très) difficile de trouver l’information que vous cherchez ? Eh bien, ces sites-là sont des exemples de mauvaise UX. Le type d’expérience qui donne juste envie de cliquer sur la petite croix en haut à droite pour fermer le site web (et ne surtout pas utiliser ses services).

Vous l’avez compris, ne pas soigner son UX est catastrophique pour un business qui dépend d’un système informatique. Le risque alors est que le prospect n’aille pas plus loin dans le processus d’actions : s’abonner à la newsletter, commander un produit, acheter un service, recommander la marque, etc. Mais comment améliorer l’UX d’une marque ?

Comment devenir User Friendly ?

Améliorer l’UX d’un site web et/ou d’un produit informatique implique de tout faire pour apparaître User Friendly. C’est-à-dire facile et agréable à utiliser (on parle aussi d’utilisabilité). Dans le cas d’un site internet, il doit être simple et efficace, tout en permettant d’accéder en quelques clics aux informations-clés. La navigation doit y être fluide et intuitive.

Voici 4 chantiers prioritaires si vous voulez proposer une Expérience Utilisateur positive sur un site web :

  • Soigner le “Header” : constitué du Menu et du fil d’Ariane du site, il aide l’internaute à savoir où il est et à accéder rapidement aux pages qu’il recherche.
  • S’assurer d’être “mobile friendly” : le site doit s’afficher correctement sur smartphone (il est possible de vérifier s’il y a des problèmes d’affichage sur mobile dans les paramètres de personnalisation de l’apparence du site).
  • Mettre en avant les boutons d’appels à l’action : ils sont là pour inciter le visiteur à agir (cliquer pour lancer la vidéo, cliquer pour commander le produit, cliquer pour s’abonner, etc.). Nous vous invitons à lire notre article sur le Call-To-Action si vous souhaitez en savoir plus.
  • Personnaliser le parcours de l’utilisateur : il faut se mettre à sa place et se demander ce qu’il souhaite faire à chaque étape. Par exemple : lire un article informationnel, télécharger un contenu à haute valeur ajoutée, s’abonner pour ne pas louper les promotions, puis acheter un produit qui répond à son problème spécifique.

UX et UI design

La notion d’UX est directement liée à celle d’UI. L’UI désigne l’Interface Utilisateur (User Interface), c’est-à-dire le lien entre la machine et son utilisateur. Elle correspond au design lorsqu’un internaute navigue sur un site web et évalue la facilité avec laquelle il accède aux informations contenues sur le site. Cette facilité dépend d’éléments visuels tels que le choix des polices, des icônes ou encore l’agencement des éléments graphiques sur le site web.

Il y a une différence entre UX et UI : l’UX intervient en amont de l’UI et du développement même du système informatique. Elle inclut en plus des éléments tels que la définition de la stratégie globale, du visuel et de l’identité de marque. L’UX intègre donc l’Interface Utilisateur, mais prend aussi en compte les besoins de l’utilisateur afin qu’il atteigne ses objectifs. L’UI, elle, se concentre uniquement sur l’esthétique, le goût et les couleurs.

UX et CX

Il y a un autre terme très lié à l’UX : la CX (Expérience Client). Celle-ci désigne la totalité des interactions entre une entreprise et ses clients. Même si l’Expérience Client a tendance à supplanter l’Expérience Utilisateur dans les conversations des marketeurs, les deux notions ne désignent pas exactement la même chose. Car la CX a un champ d’application plus vaste encore que celui de l’UX.

La Customer Experience ne se limite pas au caractère agréable et ergonomique de l’usage d’un produit ou d’un service. Elle englobe l’ensemble des points d’interaction avec une marque qui font que l’expérience client est positive ou négative.

Pour résumer, voyez ces notions marketing comme des poupées russes : CX > UX > UI.

Avant d’être technique, l’UX est une invitation à faire appel à votre bon sens : mettez-vous à la place de l’individu derrière l’écran. Pensez avant tout à l’expérience vécue par l’utilisateur. Faites alors en sorte que votre système/produit/vitrine soit soigné, simple et intuitif. Tel est le grand enjeu de l’Expérience Utilisateur : véhiculer une image positive qui donne envie d’utiliser vos produits et services.

Partager :
En tant que fondateur de CustUp, Antoine Coubray est très attaché aux notions d’UX, de CX et d’UI. N’hésitez pas

En tant que fondateur de CustUp, Antoine Coubray est très attaché aux notions d’UX, de CX et d’UI. N’hésitez pas à découvrir les autres acronymes du marketing client !

[custup_nom_silo]
[custup_form_optinmonster]
[custup_form_optinmonster]
[custup_form_blog_inline_optinmonster]
<script type="text/javascript"> jQuery(document).ready(function( $ ) { var captchaCgyUi = grecaptcha.render( 'captcha-CgyUi', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; jQuery(document).delegate( '#dj_envoyer_inscription-CgyUi', 'click', function(){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var email = jQuery('#dj_form_optinmonster-CgyUi input[name="email"]').val(); var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "recaptcha_response", jQuery("#dj_form_optinmonster-CgyUi .g-recaptcha-response").val()); jQuery("#dj_form_optinmonster-CgyUi .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-CgyUi .panel-primary").css('display', 'block'); jQuery("#dj_form_optinmonster-CgyUi .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_optinmonster-CgyUi .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-CgyUi .panel-danger span").html(result.alerte); jQuery("#dj_form_optinmonster-CgyUi .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_optinmonster-CgyUi .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-CgyUi .panel-success span").html(result.message); jQuery("#dj_form_optinmonster-CgyUi .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Blog-Inline", "eventAction": "clic", "eventLabel": "https://www.custup.com/ux-experience-utilisateur-definition-bonnes-pratiques/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captchaCgyUi); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captchaCgyUi); } }); } return false; }); }); </script> <div id="dj_form_optinmonster-CgyUi" class="form_inline"> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group pull-left"> <input class="form-control form-inline" type="text" id="dj_email" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-CgyUi"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group envoyer text-center pull-left"> <button id="dj_envoyer_inscription-CgyUi" class="dj_envoyer_inscription" type="submit">Je m'abonne !</button> </div> </div>
[le Nom du Silo]
[le Nom du Silo]
[custup_icon]
<img src="https://www.custup.com/wp-content/themes/custup/public/img/icon.png" alt="Merci pour votre visite" class="skip-lazy" width="28" height="27"/>
[custup_form_exit]
<script type="text/javascript"> jQuery(document).ready(function( $ ) { var captchasIB8E = grecaptcha.render( 'captcha-sIB8E', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; var email = ""; jQuery(document).delegate( '#emailsIB8E', 'change', function(){ email = jQuery(this).val(); }); jQuery(document).delegate( '#dj_envoyer_inscription-exit-sIB8E', 'click', function(){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "exit", 1 ); data.append( "recaptcha_response", jQuery("#dj_form_optinmonster-exit-sIB8E .g-recaptcha-response").val()); jQuery("#dj_form_optinmonster-exit-sIB8E .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-exit-sIB8E .panel-primary").css('display', 'block'); jQuery("#dj_form_optinmonster-exit-sIB8E .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_optinmonster-exit-sIB8E .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-exit-sIB8E .panel-danger span").html(result.alerte); jQuery("#dj_form_optinmonster-exit-sIB8E .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_optinmonster-exit-sIB8E .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-exit-sIB8E .panel-success span").html(result.message); jQuery("#dj_form_optinmonster-exit-sIB8E .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Exit", "eventAction": "clic", "eventLabel": "https://www.custup.com/ux-experience-utilisateur-definition-bonnes-pratiques/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captchasIB8E); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captchasIB8E); } }); } return false; }); }); </script> <div id="dj_form_optinmonster-exit-sIB8E" class="form_inline popin-exit"> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group pull-left"> <input class="form-control" type="text" id="emailsIB8E" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-sIB8E"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group envoyer text-center pull-left"> <button id="dj_envoyer_inscription-exit-sIB8E" class="dj_envoyer_inscription" type="submit">S'inscrire !</button> </div> </div>
[custup_scroll_nom_silo]
[custup_form_silo_scroll_optinmonster]
<script type="text/javascript"> var email = ""; jQuery(document).ready(function( $ ) { var captcha6It92 = grecaptcha.render( 'captcha-6It92', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; jQuery(document).delegate( '#email6It92', 'change', function(){ email = jQuery(this).val(); }); jQuery(document).delegate( '#dj_envoyer_inscription-6It92', 'click', function(e){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "id_article", 22302); data.append( "recaptcha_response", jQuery("#dj_form_optinmonster-6It92 .g-recaptcha-response").val()); jQuery("#dj_form_optinmonster-6It92 .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-6It92 .panel-primary").css('display', 'block'); jQuery("#dj_form_optinmonster-6It92 .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_optinmonster-6It92 .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-6It92 .panel-danger span").html(result.alerte); jQuery("#dj_form_optinmonster-6It92 .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_optinmonster-6It92 .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-6It92 .panel-success span").html(result.message); jQuery("#dj_form_optinmonster-6It92 .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Silo-XXX-Scroll", "eventAction": "clic", "eventLabel": "https://www.custup.com/ux-experience-utilisateur-definition-bonnes-pratiques/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captcha6It92); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captcha6It92); } }); } return false; }); }); </script> <div id="dj_form_optinmonster-6It92"> <form> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group pull-left"> <input class="form-control" type="text" id="email6It92" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-6It92"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group envoyer text-center pull-left"> <button id="dj_envoyer_inscription-6It92" class="dj_envoyer_inscription" value="xx" type="submit">S'inscrire</button> </div> </form> </div>
[custup_count_abonnes_liste_mailchimp]
4517
[custup_form_horizontal_optinmonster]
<script type="text/javascript"> var email = ""; jQuery(document).ready(function( $ ) { var captchaWQZpp = grecaptcha.render( 'captcha-WQZpp', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; jQuery(document).delegate( '#emailWQZpp', 'change', function(){ email = jQuery(this).val(); }); jQuery(document).delegate( '#dj_envoyer_inscription-WQZpp', 'click', function(){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "recaptcha_response", jQuery("#dj_form_horizontal_optinmonster-WQZpp .g-recaptcha-response").val()); jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel").css('display', 'none'); jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel-primary").css('display', 'block'); jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel").css('display', 'none'); jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel-danger span").html(result.alerte); jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel").css('display', 'none'); jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel-success span").html(result.message); jQuery("#dj_form_horizontal_optinmonster-WQZpp .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Blog-Floating-Bar", "eventAction": "clic", "eventLabel": "https://www.custup.com/ux-experience-utilisateur-definition-bonnes-pratiques/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captchaWQZpp); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captchaWQZpp); } }); } return false; }); }); </script> <div id="dj_form_horizontal_optinmonster-WQZpp" class="dj_form_horizontal_optinmonster"> <input type="hidden" name="recaptcha_response" value=""> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group dj_email_content pull-left"> <input class="form-control" type="text" id="emailWQZpp" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group text-center dj_email_envoyer pull-left"> <button id="dj_envoyer_inscription-WQZpp" class="dj_envoyer_inscription" type="submit">Valider</button> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-WQZpp"></div> </div> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> </div>