UX Design : comment le design améliore l'expérience utilisateur ?

Le design participe de la fluidité d'une interface et de son ergonomie. Plus qu'un simple atout visuel, le design est un outil majeur de l'expérience utilisateur.e

Que ce soit pour un site internet, une application ou un logiciel SaaS, la notion d’interface utilisateur devient de plus en plus complexe pour les entreprises. Les utilisateurs sont de moins en moins indulgents et attendent d’une plateforme qu’elle soit performante et intuitive. L'expérience utilisateur, plus communément appelée UX Design est devenue une donnée essentielle à prendre en compte, elle est même déterminante dans la mise en place de toute plateforme et toute stratégie d'inbound marketing. Graphisme, design et expérience se retrouvent donc pour offrir une expérience unique à l'internaute, qui se trouve au coeur des convoitises. Mais comment le design impacte la notion de praticité sur une interface ? C'est ce que l'on va voir de suite !

Avant de rentrer dans le vif du sujet, voici quelques chiffres significatifs (source) :

• Si Google met 500 millisecondes de plus à charger, le célèbre moteur de recherche perd 20% de recherche. De son côté, Amazon perd 1% de ses ventes pour seulement 100ms supplémentaire.
• Amazon a généré 300 millions de dollars en plus en un an après le redesign d’un seul bouton.
• 88% des consommateurs ne sont plus enclins à revenir sur un site après une mauvaise expérience utilisateur.
• La modification du bleu des liens de Bing (#0044CC) leur a rapporté 80 millions de dollars par an.

Le choix du design de votre site n’est donc pas à prendre à la légère et il peut avoir des conséquences énormes sur votre business.

Pour bien comprendre l’importance du travail sur l’expérience utilisateur, il faut avant tout comprendre les notions qui se cachent derrière cette logique. Il s’agit de faire la différence entre l’UI Design et l’UX Design.

Qu’est ce que l’UI Design ?

L’UI Design signifie « User Interface Design ». Elle se rapporte à l'interface, soit l’environnement graphique dans lequel va évoluer l’utilisateur. Qu’il s’agisse d’un site web, d’une application ou encore d’un logiciel, l’interface utilisateur se doit d’avoir une prise en main simple et intuitive pour faciliter l’expérience de votre cible.

Qu’est ce que l’UX Design ?

L’UX Design pour « User Experience Design » est quant à elle la fameuse expérience utilisateur. Il s’agit ici de comprendre et d’anticiper les besoins des utilisateurs pour leur faciliter au maximum l’utilisation d’une plateforme. Ateliers sud résume assez bien la discipline :

Les modifications de design vont donc impacter l’UI de votre plateforme afin d’offrir une meilleure expérience utilisateur (UX). Facile non ?

UX vs UI

Afin que vous puissiez mieux appréhender le concept, voici quelques images pour saisir la différence entre l’interface et l’expérience, l’UI et l’UX. Sur ce mème célèbre, vous pourrez comprendre facilement la différence entre ce qu’a voulu créer le concepteur en fonction de ses possibilités et de ses contraintes et les attentes réelles de l'utilisateur.

Mais prenons un exemple plus proche du digital : celui d’Airbnb. Car c’est un modèle qui allie expérience utilisateur et design :

L’en-tête de la page d’accueil est particulièrement bien conçue. Un moteur de recherche est au centre de la page ; en fond, une image évocatrice fait tout de suite penser au voyage. C’est tout ! Rien de plus. Dans l’utilisation de la plateforme, la plupart des internautes recherchent un logement là où ils décident de partir en vacances. Après avoir entré leur lieu de destination, le site leur donne accès à des recommandations, il suffit ensuite de scroller. 100% fluidité et accessibilité, 100% UX Design.

Les exemples chiffrés autour de l’expérience utilisateur (UX Design)

Pour finir de vous convaincre sur l’impact que peut avoir le design sur l’expérience utilisateur, voici quelques exemples :

• Selon Kameleoon, Younited Credit a augmenté son taux de clic sur une demande de prêt de 6,82% uniquement en changeant la couleur de son bouton de bleu clair à vert.
• Une étude Formstack a démontré que pour le même niveau d’information, les formulaires en plusieurs étapes avaient un taux de conversion de 13,85% contre 4,53% pour ceux tenant sur une page. Vous pourrez trouver l’analyse de cette étude sur cet article dédié à l’optimisation des formulaires.
• Toujours selon Kameleoon, Le site du routard.com a diminué son taux de rebond de 14% après la refonte de sa home page

Mettre en place un travail d’optimisation d’une interface (prenons l’exemple d’un site web) demande en amont de réfléchir au travail à fournir. Il va falloir dans un premier temps faire une analyse et s’assurer que les basiques soient respectés. Nous vous recommandons vivement de créer une carte mentale pour organiser vos pensées.

Avant toute chose, réfléchissez bien aux objectifs de votre site web. Quels sont-ils ? Vendre des produits, développer le nombre de contacts qualifiés, réserver une chambre, créer un compte, … ? Définissez vos utilités principales. En parallèle, votre site peut proposer des fonctionnalités qui viendront nourrir vos objectifs. Mais dans les faits, tout le travail d’UX Design doit se porter sur l’atteinte de ces utilités principales.

Une fois ces informations maîtrisées, suivez les étapes qui suivent.

Respectez les conventions d’utilisation

L’utilisateur est habitué à naviguer. Il ne se contente pas de venir sur votre site pour découvrir un fonctionnement. Au contraire, partez du principe que vos visiteurs ont l’expérience de la navigation et connaissent vos concurrents. Il ne faudra donc pas perturber leur mode de fonctionnement. L’ergonomie se doit d’être transparente et confortable. Pour cela, vous devez vous plier aux conventions.

Les conventions de localisation permettent à un internaute de savoir avant même d’avoir visité votre site où se situent les différents éléments. Cela facilite la navigation et permet à l’internaute de suivre son parcours plus facilement. Quelques exemples de base à connaître :

• Logo en haut à gauche ou au milieu
• Le panier d’un site e-commerce se trouve en haut à droite
• Le module de recherche se trouve en haut
• Le menu est horizontal (le burger menu est aussi très en vogue en termes de design et de plus en plus familier)
• Les mentions légales, conditions générales de ventes se trouvent dans le footer

Le site e-commerce Superdryqui propose dès sa page d’accueil des conventions de localisation très claires, ne déroge pas à la règle.

Les conventions de présentation vont permettre aux internautes de comprendre à quoi correspondent les éléments d’un site rapidement et sans lecture obligatoire. Ces conventions sont sont représentées par des pictogrammes sur les mobiles. Parmi les pictogrammes les plus connus, on trouve :

• Le pictogramme d’un personnage pour créer un compte
• L’enveloppe ✉️ou le @ pour le contact par mail et le téléphone ✆ pour le numéro
• Les étoiles ⭐️ pour les avis
• Caddie 🛒 ou sac pour le panier en e-commerce
• Le CTA et les conditions d’inscriptions en fin de formulaire

Le site Sarbacane utilise les conventions de présentation, notamment sur sa page d’inscription.

Les conventions d'interaction sont relatives aux éléments qui permettent à l'internaute d'interagir avec la marque; elles sont certainement les plus importantes. C’est le type d'outil design qui peut avoir un impact fondamental sur vos conversions. Voici quelques exemples simples mais pertinents à intégrer :

• Pointeur de la souris qui change au survol d’éléments cliquables
• Effet de roll-over sur les boutons (modification du bouton au survol)
• Les liens hypertextes soulignés ou différents du texte classique
• Curseur visible dans les champs de pop-up

Ici un exemple du formulaire d’inscription de Hubspot : un modèle du genre et apparemment rien de complexe non ? Pourtant tout est extrêmement clair. Les bandes vertes et la croix pour les champs valides, la bande rouge pour le champ invalide. La validation du mot de passe et la possibilité de créer le compte que si tous les champs sont aux verts. Ces détails (qui sont tous des conventions d’interaction) évitent de devoir refaire le formulaire et facilitent l’expérience utilisateur.

Respectez le principe de la hiérarchisation visuelle

Le principe de hiérarchie visuelle est simple. Il s’agit de comprendre qu’un internaute intégrera plus facilement l’information si celle-ci est organisée. Il va donc falloir vérifier que sur vos pages vous respectiez ces quelques règles :

1. La taille des éléments : plus un élément est gros et plus il attirera l’attention.
2. L’utilisation de la couleur : les contrastes de couleurs permettent de mettre en évidence (ou en retrait) certains éléments.
3. Les polices et typographies de vos textes : vos orientations sur la typographie générale permet de créer une hiérarchie claire dans vos contenus.
4. L’emplacement des éléments sur vos pages : les internautes ont par défaut un sens de lecture de vos pages. Il est donc important de mettre les éléments clés au bon endroit.
5. La répétition des éléments sur vos pages : la répétition des éléments aide l’internaute à comprendre et analyser facilement votre site. C’est aussi un aspect cognitif qui va l’aider à apprécier votre plateforme grâce à « l’effet de simple exposition » dont nous allons parler un peu plus bas

Voici un exemple textuel basique mais concret de hiérarchisation visuelle. L’analyse de ces deux pages montre clairement que celle de droite est plus claire et plus agréable à lire.

Pour ceux qui souhaitent aller plus loin dans l’optimisation de leur UX Design, il existe quelques concepts supplémentaires à maîtriser. Ils ne sont pas nécessairement tous applicables à votre cas de figure, mais cela peut vous donner des pistes d’amélioration de votre site.

L’effet de simple exposition

Nous l'avons rapidement évoqué avec la hiérarchisation visuelle. L’effet de simple exposition est un concept décrit par Robert Zajonc ; il explique que l’exposition répétée à un élément va augmenter la probabilité d’avoir un sentiment positif envers ce dernier. Dans notre cas, plus vous allez soumettre l’internaute à des éléments graphiques récurrents et plus il sera enclin à les comprendre et/ou créer une interaction.

Ce concept est bien connu des publicitaires et notamment de Google avec sa régie Google Ads qui utilise le nombre d’impressions comme un KPI phare des campagnes display.

Attention toutefois à ne pas en abuser au risque de perturber le parcours utilisateur.

Le design émotionnel

« L’émotion a d’avantage d’impact sur le consommateur que le contenu ». C’est en tout cas le constat d’une enquête menée par Illigo pour le compte d’Aol. C’est la base du design émotionnel qui a pour objectif d’identifier les désirs de vos utilisateurs pour leur apporter une réponse positive. Cette réponse augmentera alors le capital sympathie pour votre marque / site.

L’une des grandes tendances du design émotionnel est la personnalisation. A/B Tasty en parle très bien dans leur article : La personnalisation on-site, l’essentiel avant de se lancer.

La loi de Hick

Sans rentrer dans les détails techniques de cette loi suivie par nombre d’UX designers, elle explique que moins l’internaute a de choix et plus le traitement de l’information est facile et rapide. Pour autant, cela ne veut pas dire que vous devez annuler tous les choix possibles. Mais gardez à l’esprit que limiter volontairement la proposition (ou la scinder) permet à un internaute de s’y retrouver plus facilement.

L’UX Design est souvent une discipline considérée comme logique. Si certaines optimisations peuvent paraître cohérentes, une fois un certain niveau de maturité atteint, c’est l’analyse qui fera la différence. Mais comment analyser l’UX Design de votre site ?

Les outils analytics

La première phase de l’analyse UX commence avec votre outil analytics. Car toute la data collectée sur vos visiteurs est là. Il s’agit ensuite de savoir comment l’intégrer dans vos optimisations. UX Republic répond en partie à cette question en vous proposant un article sur le data driven UX.

Les cartes de chaleur

Pour comprendre vos utilisateurs quoi de mieux que d’enregistrer leurs comportements en ligne ? C’est l’objectif des cartes de chaleur qui vont compiler tous ces enregistrements pour vous donner les zones chaudes et froides de vos pages web. Ici, un exemple sur le site d’Hotjar, l’un des outils les plus connus.

A/B testing et personnalisation web

L’outil ultime de l’UX Design est l’A/B testing. Il s'agit de proposer directement des modèles de pages différentes à vos internautes pour voir ce qui leur correspond le mieux et créer un site sur mesure. La Pousse Digitale propose un guide complet de l’A/B testing très complet pour mieux comprendre le concept.

Vous l’aurez compris, l’expérience utilisateur a pour objectif de remettre l’humain (et principalement vos cibles) au centre de la démarche d’optimisation. Mais créer une interface centrée utilisateur demande un travail de fond complexe et long. Cela doit rassembler des éléments clés de votre site tel que le graphisme, le fonctionnel et forcément des ressources techniques pour leur mise en place. Gardez à l’esprit que ce travail est une priorité tant les résultats sont probants.