💬 Les Mots de l’UX/UI design

⚔️ Le monde l’UX/UI Design est rempli de termes barbares, pas toujours facilement compréhensibles …

Mais dans mon quotidien, j’utilise forcément ces mots et, selon avec qui j'échange, chacun a une connaissance différente des termes utilisés.

Au fil de mes expériences, j’ai découvert un grand nombre de notions et un vocabulaire que j’aurais aimé connaître à mes débuts. Je vous ai donc préparé une sélection des mots du web design, tout en expliquant simplement chaque notion (je l’espère 😂).

‍

Si tu veux connaitre la différence entre UX Design et UI Design, c'est par ici.

‍

‍

Accessibilité numérique

Au design inclusif, tu t’intéresseras … Est ce que tu as déjà entendu parler d’accessibilité et de design inclusif ? 🧏♂️

Qu’est ce que c’est ?

💡L’accessibilité numérique consiste à optimiser une interface et ses contenus pour les rendre compréhensibles et utilisables par toutes et tous, dont les personnes en situation de handicap.

✅ On élimine tous les obstacles de compréhension et de lisibilité, quelle que soit la façon d’accéder au site.

Le but : donner accès aux informations et aux contenus de manière équitable à tous nos utilisateurs.

‍

➡️ Un exemple

On veille par exemple à avoir de bons contrastes, un site utilisable avec un lecteur d'écran ou au clavier, une structure logique (titres, sous titres) ou encore avec un affichage personnalisable selon les besoins (grossissement des caractères, ajustement des couleurs…).

Pour en savoir plus sur ce sujet et si tu te demandes si ton propre site est accessible, je te partage une ressource en fin d’article.

‍

‍

Ancre de lien

Dans un esprit marin, nous allons parler de l’ancre de lien⚓. 

Qu’est ce que c’est ?

Une ancre de lien ou lien ancré est tout simplement un lien qui redirige vers un élément précis d’une page.

Ce type de lien est souvent utilisé dans les sites One page.

‍

➡️ Un exemple

‍

‍

Arborescence

Tu t’es déjà perdu·e sur un site avec 300 000 items dans le menu sans jamais trouver ce que tu cherchais ? 😩

Plutôt frustrant non ? 😡
C’est sûrement que personne ne s’est occupé de son arborescence depuis un bon bout de temps.

Qu’est ce que c’est ?

🌳 L’arborescence, c’est la structure d’un site : comment les pages et contenus sont organisés entre eux.

🔍 Quand elle est bien pensée, tout le monde s’y retrouve :

• les utilisateurs trouvent plus facilement ce qu’ils cherchent,
• Google indexe mieux et plus régulièrement tes pages.

Une architecture de site claire et fonctionnelle, c’est bon pour ton référencement et pour l’expérience utilisateur.
Or, elle est souvent négligée … à tort !

‍

➡️ Un exemple

‍

‍

Barre de navigation

Un autre mot pour des utilisateurs au pied marin ?  ⛵

Qu’est ce que c’est ?

La barre ou menu de navigation permet de naviguer parmi les différentes pages et contenus d’un site web. 

Elle permet de faciliter la recherche de l’utilisateur. 

Elle regroupe un ensemble de liens qui, au clic, vont rediriger l’utilisateur.

‍

➡️ Un exemple

‍

‍

Dark pattern

Du côté obscur de la force, tu ne basculeras pas …

Est ce que tu as déjà entendu parler des dark patterns ? C’est la bête noire des designers, la pratique dans laquelle tu ne veux pas tomber …

Qu’est ce que c’est ?

Les dark patterns sont le pendant noir du design persuasif et du design émotionnel.

Il s’agit de pratiques de conception trompeuses qui visent à manipuler l’utilisateur, en jouant sur ses émotions ou sa confusion. 

Il se retrouve alors parfois à accomplir une action non voulue ou à être induit en erreur par l’interface.

‍

➡️ Des exemples

Tu vois ce moment où tu regardes des billets d’avion... Et, plus tu reviens avec une même adresse IP, plus les prix augmentent...

‍

Ou encore cette pop up qui apparaît sauvagement et dont tu ne vois pas d’autres options que d’accepter (croix inatteignable ou option B minuscule)

‍

Comment ne pas tomber dedans ? 

En tant qu’utilisateur, voici quelques bons réflexes :

• Bien regarder les cases pré-cochées
• Ne pas cliquer trop vite
• Ne pas hésiter à revenir en arrière
• Faire attention aux couleurs, emplacements des éléments

‍

En tant que designer, voici quelques bons réflexes :

• Ne pas reproduire sans réfléchir des interfaces connues (ex : bandeau cookies)
• Se former (voir le lien en fin d’article)
• Informer ses clients sur les pratiques douteuses

‍

‍

Fil d’ariane

Nouveau mot surprenant : le fil d’ariane🧶
Petit indice : on ne parle pas ici de mythologie grecque mais il est quand même question d’orientation😁

Qu’est ce que c’est ?

Le fil d’ariane indique à l’utilisateur où il se situe sur un site web.

C’est un système de navigation secondaire qui permet de réduire le nombre d’actions de l’utilisateur et de l’aider à mieux s’orienter dans l’arborescence du site.

‍

➡️ Un exemple

‍

Pourquoi utiliser un fil d’ariane ?

Le fil d’ariane est utile pour les sites qui comportent plusieurs niveaux de hiérarchie (grande quantité de contenus, catégories...)

Le fil d’ariane :

• Facilite la navigation
• Prolonge le temps passé sur un site
• Apporte une aide visuelle
• Améliore votre SEO (maillage interne et mots clés)

‍

‍

Fitts Law

Est ce que tu as déjà galéré à cliquer sur un bouton trop petit ?

Oui ? C’est hyper agaçant non ? 😤

Et bien le designer, qui a conçu l’interface avec laquelle tu as galéré, avait dû oublier la loi de Fitts ! 🎯 Je t’explique ce que c’est et comment en tirer parti.

Qu’est ce que c’est ?

💡 La loi de Fitts est une règle d’ergonomie qui explique que le temps nécessaire pour atteindre une cible dépend de la distance et de la taille de cette cible.

Concrètement, tu peux rendre des interfaces plus faciles à utiliser en positionnant tes éléments cliquables :
- dans des zones faciles à atteindre,
- en les espaçant,
- en optimisant leur taille.

‍

👨‍🏫 Et du coup ?

A partir de cette loi, on comprend qu’il existe des zones de confort dans l’usage des interfaces graphiques, différentes sur ordinateur et mobile, tactiles ou non.

Il faut tenir compte de ces zones de confort pour minimiser le temps d’interaction et maximiser l’engagement.

Un utilisateur pas frustré est un utilisateur heureux !

‍

➡️ Un exemple

‍

‍

Hiérarchie visuelle

Suite du tour d’horizon du vocabulaire de l’UX/UI Design, avec la hiérarchie visuelle 🖼️

Qu’est ce que c’est et comment ça fonctionne ?

La hiérarchie visuelle d’une page web permet à l’utilisateur de savoir où concentrer son attention et son regard.

Cela permet d’ordonner l’information et de guider l’utilisateur.

‍

Pour créer cette hiérarchie, plusieurs techniques peuvent être utilisées :

• La couleur
• Le contraste
• La taille des éléments
• L’emplacement

‍

➡️ Un exemple

‍

Landing page

A l’action, tu inciteras !

Est ce que tu sais ce qu’est une landing page et dans quel cas l’utiliser ?

Qu’est ce que c’est ?

Une landing page, ou page de destination, est une page web dont le but est d'inciter à l'action.

Par exemple :
- Te contacter
- Prendre rendez-vous
- Demander un devis
- Télécharger un e-book
- Acheter directement en ligne

Pourquoi et quand créer une landing page ?

Elle est un outil propice pour transformer le visiteur en prospect potentiel et même en client.
C’est aussi une solution adaptée si vous n’avez pas le temps ni le budget pour créer un site web plus complet.

‍

➡️ Un exemple

‍

‍

Ligne de flottaison

Dans un univers un peu plus maritime, voici le 3ème mot du webdesign : la ligne de flottaison 🛟.

Qu’est ce que c’est ?

La ligne de flottaison d'un site internet est une ligne invisible qui sépare la partie visible de la page de la partie invisible (accessible après avoir scrollé).

‍

➡️ Un exemple

‍

Fun fact

Le concept n’est pas récent et remonte aux débuts de l’imprimerie.

« Above the fold » signifie « au-dessus du pli ».

‍

Les journaux, imprimés sur de grandes feuilles de papier, étaient pliés et seule la moitié supérieure du papier était visible.

Pour capter l’attention des lecteurs, cette partie devait présenter un contenu attractif.

‍

‍

Maquettes graphiques

Est ce que tu as déjà entendu parler des maquettes graphiques ? C’est l'étape qui précède l’intégration de ton site et elle est indispensable, voici pourquoi !

Qu’est ce que c’est ?

La maquette donne un aperçu du rendu final d’un site avant que celui-ci soit développé.

Il s’agit d’une version détaillée de chaque page qui intègre les couleurs, les typographies, les pictogrammes et montre le style visuel du site.

Pourquoi faire des maquettes ?

Le fait de travailler sur des maquettes graphiques avant l’intégration va permettre de prendre des décisions sur le style et les détails graphiques.

Cela permet de gagner du temps, puisque toutes les décisions importantes ont été prises et validées en amont.

‍

➡️ Un exemple

‍

‍

‍

Wireframes

Aka fil de fer. 🌍Et oui, comme beaucoup de mots dans le monde du design, il est en anglais. Pas le choix que de maîtriser un minimum la langue de Shakespeare 😉

Qu’est ce que c’est ?

Les wireframes sont des maquettes fonctionnelles, un schéma simplifié des pages de votre site.
Ils peuvent être plus ou moins détaillés mais permettent d’avoir les bases de chaque page : quelles sections, quelles fonctionnalités, comment les contenus sont agencés les uns par rapport aux autres ...

A quoi ça ressemble ?

Les wireframes permettent de se concentrer sur l’organisation, l’expérience utilisateur, l’aspect fonctionnel du site.

Ils sont donc visuellement neutres : en nuances de gris, sans images (contrairement aux maquettes graphiques).

‍

➡️ Un exemple

‍

Pour finir :

J’espère que ces explications vous ont intéressés et que ces termes vous semblent plus clairs 😊

👉 Et pour vous, c’est quoi le mot le plus incompréhensible du webdesign ? Vous pouvez m’envoyer un message sur LinkedIn pour me suggérer un nouveau mot.

‍

A bientôt pour d’autres mots de l’UX/UI !

‍

Liens et ressources complémentaires

• Qu’est ce qu’un site one page ? Avantages et inconvénients : https://www.margaux-teste.fr/articles/site-one-page 

• Savoir si son site est accessible : https://access42.net/ressources/site-web-accessible/

• Pour ne pas designer avec des dark patterns, c’est par ici : Concevoir sans dark patterns, Guide à l’intention des designers : 1. Introduction

‍