L’UX (user expérience) et l’UI (User interface), sont deux concepts indissociables. Pourtant rares sont les sites web proposant une interface de qualité, fonctionnelle et adaptée à l’utilisateur.
Mieux vaut un beau cadeau dans un bel emballage, non ?
Qu’est-ce que l’UX design ?
User experience ou expérience utilisateur, ce terme fait référence à l’expérience qu’a l’internaute lorsqu’il navigue sur un site web, L’objectif ici est de proposer à l’internaute une interface facile, et même agréable à utiliser. Donner l’illusion de la simplicité.
Les principe de l’UX design
Pour définir une expérience utilisateur, nous pouvons nous référer aux travaux de Jesse James (pas le gangster hein) Garret et de son diagramme ou plutôt de son nid d’abeilles. Mais surtout fiez-vous à votre bon sens…
Voyons un peu plus en détails les composants de ce diagramme :
- Utilité : Mon contenu, mes produits, mes services et mes choix sont-ils utiles à l’internaute ?
- Utilisabilité : La simplicité d’utilisation est nécessaire pour la création d’interface homme-machine.
- Désirabilité : être attractif, répondre aux besoins émotifs des consommateurs et faire appel à leur sens esthétique.
- « Trouvabilité » : La facilité à naviguer d’un contenu à un autre pour l’utilisateur et à trouver ce qu’il cherche.
- Accessibilité : Des sites web accessibles aux personnes en situation de handicap.
- Crédibilité : Gagnez en crédibilité dans votre domaine et vous gagnerez la confiance des utilisateurs.
- Valeur : Le résultat en somme, plus de clients, de profit, de notoriété, etc. Tout est affaire d’objectifs. Bien définit à l’avance bien sûr…
L’UX prend en compte le système dans sa globalité, le contexte et l’utilisateur au cœur de développement du projet. Avec pour objectif une efficacité plus importante. En définissant bien au préalable toutes ces composantes, vous pourrez construire votre site et votre projet sur des bases solides.
Qu‘est-ce que l’UI design ?
User interface ou l’interface utilisateur est l’ensemble des éléments graphiques et visuels d’un site web pour le rendre attrayant, comme la couleur, la typographie, la mise en forme des textes… L’objectif du design d’interface est de créer un design qui soit à la fois esthétique et fonctionnel, en s’appuyant sur les recherches en expérience utilisateur.
Complémentarité UX/UI design
Vous l’aurez compris l’ux et l’ui sont complémentaire, l’UX établit la structure et la stratégie pour répondre aux besoins des utilisateurs, tandis que l’UI design donne vie à cette vision en créant une interface utilisateur esthétique et fonctionnelle. Ensemble, ils forment une équipe dynamique qui vise à offrir la meilleure expérience utilisateur possible et permet ainsi de renforcer la crédibilité de l’entreprise.
Le zoning, le wireframe et la maquette
Une fois les besoins de votre cible analysé et les objectifs définis pour l’expérience utilisateur, alors vous pouvez commencer le zoning et créer des Wireframe. Ceux-ci vous aideront à suivre votre ligne directrice et à avancer rigoureusement vers vos objectifs pour concevoir une interface utilisateur et un design magnifique !
Zoning
Le zoning est la première étape essentielle dans le processus de conception d’une page web. C’est à ce stade que l’on dispose les éléments et les blocs de contenu clés pour avoir une vision d’ensemble de la structure de la page. le zoning facilite la collaboration entre les membres de l’équipe de conception et guide efficacement le développement ultérieur du design.
Wireframe
Un zoning plus détaillé révèle déjà les prémices du design et du contenu de manière très précise. Cette étape cruciale dans la construction d’un site web permet de s’aligner sur les exigences d’utilisation et d’adapter en conséquence le design et la disposition des éléments. En travaillant en amont sur le zoning, vous pouvez identifier et résoudre d’éventuels problèmes de navigation et d’ergonomie, ce qui assure une expérience utilisateur fluide. Bien que cette phase soit laborieuse, elle vous fera gagner un temps précieux lors de la conception et du développement, en minimisant les retours en arrière et les modifications coûteuses.
Maquette
Une maquette est une représentation statique ou interactive et détaillée qui montre à quoi ressemblera réellement le site web. Elle se concentre principalement sur l’aspect graphique et le design du site. Une fois la maquette finalisée, vous pouvez procéder à des tests utilisateurs pour évaluer et optimiser l’expérience utilisateur.
Le Logo : Indiquer l’emplacement du logo. Peut être représenté par un rectangle ou bien par le logo en niveaux de gris ou basse définition.
L’architecture : L’ensemble de la structure du site. Titre de niveau 1 en gras, sous-titre etc. L’idée est de garder une certaine cohérence.
Les images : Le plus souvent représentées par un rectangle avec X.
Le texte : Vous pouvez intégrer le texte réel, l’idée du contenu qui y sera présenté, du lorem ipsum ou bien (comme ci-dessus) des bandes symbolisant un paragraphe.
Les liens : Très souvent en bleu souligné.
→ Un petit lien pour faire de jolies Wireframe facilement : https://wireframe.cc/
La loi de Jakob : Ne pas réinventer la roue
La loi de Jakob repose sur l’idée qu’un site web devrait offrir une interface familière aux utilisateurs, similaire à celle d’autres sites qu’ils connaissent déjà. Elle prend en compte les habitudes de navigation existantes des utilisateurs sur le web, soulignant ainsi l’importance de ne pas trop pousser l’originalité au risque de dérouter l’utilisateur.
Ce que dit Google
Ont le sait, l’objectif premier de Google est d’offrir les meilleurs résultats de recherche aux internautes. Dans cette optique, Google a intégré les “Core Web Vitals” à son algorithme de référencement afin de garantir une expérience utilisateur optimale. Ces indicateurs sont devenus officiellement un facteur de classement en juin 2021. Ils sont spécifiquement conçus pour évaluer les aspects fondamentaux de l’expérience utilisateur sur un site web, en se focalisant sur trois métriques principales :
- LCP (Largest Contentful Paint) :
Il mesure le temps nécessaire pour que le plus grand élément visible de la page soit entièrement chargé pour une meilleure expérience utilisateur. L’objectif de temps de chargement doit être de 2,5 secondes.
- INP (Interaction To Next Paint) :
Il évalue la réactivité d’une page en mesurant le temps écoulé entre le premier clic ou l’interaction de l’utilisateur et la réponse du navigateur. L’objectif du temps de réponse doit être de moins de 200 milliseconde
- CLS (Cumulative Layout Shift) :
Il quantifie la stabilité visuelle d’une page en mesurant le taux de changement inattendu du contenu durant le chargement d’une page. L’objectif est de se situer entre 0 et 0,1
UX + UI = efficacité et rentabilité
Vous l’aurez compris l’UX et l’UI, n’ont pas lieu de s’affronter, ils doivent travailler de concert avec pour seul objectif, plaire aux utilisateurs, générer du trafic efficace et de la rentabilité. D’ailleurs dans les agences ; ergonome, webdesigner, développeur, directeur marketing et UX designer, travaillent en étroite relation, malgré leurs sensibilités différentes.
Quelques liens utiles (en anglais) pour en savoir plus sur l’UX et l’UI :
→ Les grands principes du design : https://hackdesign.org/lessons/20
→ Comprendre l’utilisateur dans l’expérience utlisateur : https://hackdesign.org/lessons/12
→ Le prototypage, simple et rapide : https://hackdesign.org/lessons/10
