Le design de l'expérience utilisateur (UX) et de l'interface utilisateur (UI) remonte à la nuit des temps, mais elle ne s’appelait pas encore comme ça. En tant que discipline cohérente, l'UI design a été codifié dans les années 1970 au sein d'entreprises comme Xerox, puis popularisé dans les années 1990 avec l'adoption plus large de l'ordinateur personnel.
Depuis lors, l'UI design a continué à évoluer et à s'adapter aux nouvelles technologies et dispositifs. Vous pouvez mettre en œuvre le design d'interface utilisateur, souvent abrégé en design d'UI, sur l'ensemble de votre site e-commerce en suivant certaines recommandations. Voici comment vous lancer.
Qu'est-ce que l'UI design ?
L'UI design est le processus de création de la mise en page visuelle et de l'apparence des logiciels, applications, sites web et de toute interface numérique avec laquelle l'utilisateur interagit. L'agencement des boutons sur une page, le texte qui vous guide à travers les étapes pour créer un compte avec un nom d'utilisateur et un mot de passe et les icônes qui vous accompagnent dans votre expérience d'achat sont des exemples de composants d’UI. L'objectif du design d'UI est de créer des interfaces simples, esthétiquement plaisantes et fonctionnelles qui aident les utilisateurs à accomplir leurs tâches.
Pourquoi l'UI design est-il important ?
Un bon design ne se contente pas d'être attrayant : il peut améliorer votre chiffre d’affaires. Une étude largement citée (lien en anglais) a suivi la performance d'entreprises portant beaucoup d’attention à leur design pendant une décennie. Résultat ? Des performances doublées par rapport aux 500 plus grandes entreprises cotées en bourse aux États-Unis. L'une des manières les plus simples de mettre en avant le design est de passer par l'interface utilisateur de votre site web.
Design UI vs. design UX
Les designers d’UI travaillent généralement en étroite collaboration avec les designers d'UX. Bien que liées, ce sont deux disciplines distinctes. Alors que l'UI design se concentre sur les éléments visuels et interactifs du produit, tels que la mise en page, la typographie, les couleurs, les icônes et les boutons, le design d'UX s'intéresse à l'expérience utilisateur globale, y compris des concepts plus vastes comme l'objectif général du produit et les sentiments de l'utilisateur à son égard. Les deux sont cruciaux pour un résultat réussi : un design d'UI solide soutient la stratégie UX sous-jacente.
Prenez le téléphone, par exemple. Au début, vous deviez dire à un opérateur humain à qui vous souhaitiez parler. Puis ce fut le temps du cadran rotatif, éliminant le besoin d'opérateurs humains mais ajoutant un mécanisme de rotation chronophage. Finalement, le pavé numérique a été mis en place, avec une disposition de boutons qui a survécu au téléphone traditionnel et est devenue la norme pour les téléphones mobiles. Les numéros abrégés, les listes de contacts et les assistants vocaux ont encore simplifié ce processus.
Cette évolution suit l'interface utilisateur du téléphone : les boutons et les moyens par lesquels nous interagissons avec lui. Son expérience utilisateur, en revanche, englobe l'UI de l'appareil, mais aussi les actions qu'il effectue, notre compréhension de ses capacités, notre satisfaction après utilisation, etc. Par exemple, votre satisfaction lors de la réservation d'un trajet sur une application de covoiturage est influencée non seulement par l'interface de l'application, mais aussi par la facilité de trouver un conducteur, le temps d'attente estimé, et le comportement du conducteur pendant le trajet.
7 principes importants du design d'UI
Au cours des dernières décennies, quelques règles d'or du design d'UI ont émergé. En voici sept à garder à l'esprit :
- Mettez l'utilisateur à l'aise
- Laissez l'utilisateur contrôler l'expérience
- Rendez votre site intuitif
- Pensez à l’accessibilité
- Informez les utilisateurs lorsque l’action a fonctionné…
- Mais prévoyez une solution quand elle ne fonctionne pas
- Adoptez l'itération
1. Mettez l'utilisateur à l'aise
Ici, l'utilisateur est votre client. Pour améliorer son expérience de navigation, il est essentiel de créer un environnement accueillant sur votre site web. Voici comment rendre la navigation plus intuitive et conviviale :
- Less is more. Quelles que soient vos préférences artistiques, le minimalisme est la clé du design d'UI. Un bon design implique de retirer tout ce qui ne contribue pas à vos besoins. Les polices flashy, les informations inutiles et les textes trop verbeux sont des coupables fréquents.
- Gardez la hiérarchie visuelle claire. La loi de Fitts suppose qu’il est plus facile et rapide de cliquer sur des cibles plus grandes que sur des cibles plus petites et éloignées. En d'autres termes, assurez-vous que les éléments importants comme les boutons d'achat sont bien visibles et que les photographies et informations clés attirent naturellement le regard.
- Allez à la simplicité. Un excellent design d’UI utilise un langage simple, des polices lisibles et une palette de couleurs épurée. L'espace négatif (ou espace blanc) sur la page est également souhaitable.
- Restez cohérent. Les éléments de design d'UI comme les boutons, les micro-textes, la mise en page et les palettes de couleurs doivent rester uniformes sur l'ensemble de votre site. Suivez les conventions de design, comme placer un menu en haut de la page.
- Évitez tout jargon. Faites en sorte que vos visiteurs se sentent à l'aise sur votre site en utilisant un vocabulaire qui n'est pas intimidant et ne contient pas de termes techniques inutiles.
En d'autres termes, votre objectif est d’avoir un design propre et attrayant, avec des éléments visuels auxquels vous avez réfléchi et qui fournissent aux utilisateurs les informations dont ils ont besoin, quand ils en ont besoin.
2. Laissez l'utilisateur contrôler l'expérience
l'UI design est également une occasion de mieux connaître votre public. Grâce à des recherches marketing, ou même des informations démographiques disponibles via des comptes de réseaux sociaux, vous pouvez en savoir plus sur leurs besoins et intérêts. Obtenez des insights en vous mettant à la place des utilisateurs et en cartographiant leurs raisons de visiter votre site. Quels boutons et informations visuelles les utilisateurs souhaitent-ils voir en premier ? Que pourraient vouloir les utilisateurs plus expérimentés, un peu moins mis en évidence sur le site ? En priorisant votre audience, vous laissez leurs besoins dicter l'interface.
Une autre manière de laisser les utilisateurs contrôler l'expérience est de leur permettre d'annuler une action sans conséquences négatives. Cela rend l'exploration du site plus accessible et sécurisée, étant donné qu'ils peuvent toujours revenir en arrière s'ils se retrouvent face à des séquences de saisie de données fastidieuses. Les fils d'Ariane, qui montrent aux utilisateurs d’où ils viennent et où ils vont, les aident à se faire une carte mentale du site et à trouver des informations plus facilement.
3. Rendez votre site intuitif
Les bonnes interfaces utilisateur sont intuitives, l’utilisateur sait directement où trouver les différentes informations. Même les marques les plus « disruptives » ne perturbent pas les attentes des utilisateurs dans leur design d'UI. Au contraire, l'objectif est d’obtenir une expérience utilisateur fluide.
Des modèles, des choix de polices et des mises en page dont tout le monde a l’habitude réduisent la charge cognitive de vos visiteurs. Cela signifie également que vous n'avez pas à réinventer la roue ou à justifier chacun de vos choix de design. Si les petits menus à trois lignes en haut de chaque application fonctionnent, c’est parce qu’on sait tous ce qu’on y trouve.
4. Pensez à l’accessibilité
Le daltonisme touche environ 5 % de la population masculine et 0,5 % de la population féminine chez les adultes. L’Union mondiale des aveugles rapporte que 253 millions de personnes vivent avec une forme de cécité ou de déficience visuelle. D’après les chiffres de l’OMS, 430 millions de personnes sont atteintes de surdité ou de perte auditive.
Un bon site web, c’est un bon site pour tout le monde. L'Initiative pour l'accessibilité du web (WCAG) fournit aux designers d’UI des recommandations détaillées. Une règle de base est de ne pas se fier à un seul élément pour l’ensemble de la communication. Deux boutons « Oui » et « Non » pourraient être aussi affublés d’une coche et d’une croix. Les rendre verts et rouges peut ajouter une couche de communication supplémentaire, garantissant à tous les utilisateurs de naviguer sur le site, même s’ils sont atteints de daltonisme ou que leurs compétences en lecture sont limitées.
Le principe précédent, rendez votre site intuitif, est de mise ici aussi. Des symboles et des phrases standards permettent de garder tout le monde à bord. Des icônes comme le panier d'achat, le signe euro et les coches sont largement reconnues et permettent à tous les utilisateurs de naviguer facilement.
5. Informez les utilisateurs lorsque l’action a fonctionné…
Les utilisateurs aiment savoir quand les choses fonctionnent. Envisagez d'ajouter une légère animation lorsqu’ils cliquent sur un bouton pour confirmer l'action, une page de remerciement pour clore une transaction ou un formulaire réussi, une barre de progression si une fonction prend du temps à charger, ou une série d'exigences qui deviennent progressivement vertes lors de la création d'un mot de passe. Tous ces éléments donneront à vos visiteurs cette petite satisfaction de savoir que tout fonctionne.
6. …Mais prévoyez une solution quand elle ne fonctionne pas
On l’a tous fait : cliquer avec rage sur un bouton lorsqu’un site ou un logiciel ne fonctionne pas on le voudrait. Une bonne UI évite cette situation en fournissant des retours immédiats et informatifs.
Prévoyez une solution lorsque les choses ne se déroulent pas comme prévu. Les messages d'erreur bien conçus et les pages d’erreur 404 sont clairs et utiles, redirigeant l'utilisateur vers autre chose. Ce genre de détails montre aux clients qu'ils se trouvent dans un environnement de shopping fonctionnel et digne de confiance. C’est comme si on leur disait « ne vous inquiétez pas, nous sommes au courant et nous sommes en train de trouver une solution ». Vous vous souvenez peut-être de la fameuse baleine de Twitter, soulevée hors des vagues par une volée d'oiseaux, qui apparaissait lorsque la plateforme rencontrait une panne de service. La baleine a été retirée à l'été 2013 mais reste un symbole nostalgique des débuts de Twitter lorsqu'il peinait à gérer un volume de trafic élevé.
7. Adoptez l'itération
Pensez le processus de design comme une boucle itérative sans véritable point d'arrivée. Il s'agit de répéter des étapes pour s'améliorer. Après le déploiement, prenez un moment pour voir comment votre design fonctionne avant d'évaluer les données et d'apporter des ajustements.
Adopter l'itération peut prendre plusieurs formes : écouter les retours des clients, engager des utilisateurs pour tester un site web, ou encore plonger dans les analyses pour trouver les pages avec un taux de rebond élevé ou une conversion inférieure aux attentes. De petits changements dans le design d'une page de paiement peuvent réparer un entonnoir de vente troué.
Tous les utilisateurs et toutes les entreprises sont uniques. Il vous faudra donc un peu d'essai-erreur mais, avec un peu d'ajustement, un bon design d'UI peut rendre votre site plus beau, convivial et rentable.
FAQ sur les principes de design d'UI
Quels sont les principaux principes de design d'UI ?
Les principes clés du design d'UI sont :
- Mettez l'utilisateur à l'aise
- Laissez l'utilisateur contrôler l'expérience
- Rendez votre site intuitif
- Pensez à l’accessibilité
- Informez les utilisateurs lorsque l’action a fonctionné…
- Mais prévoyez une solution quand elle ne fonctionne pas
- Adoptez l'itération
Quelles sont les phases du design d'UI ?
Les six phases du design d'UI sont l'analyse (déterminer les objectifs et les attentes de l'utilisateur et de l'entreprise), le design (esquisser, créer des maquettes et prototyper un véritable flux utilisateur à travers le site web), le développement (transformer le design en un produit web utilisable), le déploiement (tester les bugs et lancer), l'évaluation (mesurer l'efficacité du design d'UI par le biais de tests utilisateur, de retours et d'analyses), et l'itération (utiliser les résultats de l'évaluation pour peaufiner le design).
Qu'est-ce qui fait qu’un design d'UI est bon ?
Un bon design d’UI doit contribuer à l’atteinte des KPI, être esthétiquement plaisant, intuitif pour les utilisateurs et largement accessible.
