Qu'est-ce qui se cache derrière certains termes UX ?

Parfois j’ai l’impression de parler chinois !


Aujourd’hui, je voudrais attirer votre attention sur certains termes UX, que moi j’emploie au quotidien et qui en réalité n’est pas forcément connu de tous !


J’ai appris de plus en plus à prendre le temps d’expliquer certains termes à mes clients, mes amis, ma famille afin qu’ils comprennent mieux ce que je fais et ce que je dis ! J’ai compris l’importance ces dernières années de devoir vulgariser ce que je raconte, car ce qui est une évidence pour certains ne l’est pas forcément pour tous…


Voilà ce qui se cache derrière certains termes UX !


Du coup j’ai décidé de vous parler wireframe et zoning, breadcrumb et fil d’ariane, bug et insecte, hover et survol, affordance, ligne de flottaison, thumb zone et zone de confort, scroll et défilement !

1️⃣ Zoning et Wireframe

👉 Lorsqu’on conçoit un site/blog/app il est essentiel de passer par une phase de zoning et de wireframes.⁣

▶️ ZONING⁣
Un zoning est un dessin simple et rapide représentant les éléments principaux que vous souhaitez mettre dans vos pages (textes, images, menu, etc). Pas besoin d’être un expert en dessin : utilisez des formes simples, comme un carré pour une image, un trait pour un texte, un rectangle pour un bouton, un rond pour un pictogramme. C’est tout.⁣

▶️ WIREFRAME⁣
Un wireframe est une version plus aboutit d’un zoning car on va commencer a détailler le zoning (la place des titres et textes, l’emplacement des images, les différents boutons et leurs positionnement, etc).⁣

✅Pour faire simple, le zoning est une première ébauche comme un “brouillon” et le wireframe est la version “au propre” et détaillée. ⁣

⚠️[Tips] Cette phase doit se faire sans penser au graphisme ou au visuel.⁣
👌🏻Posez les bases de votre site/blog/app.⁣
✍🏻Travaillez en noir et blanc uniquement.⁣

A QUOI CELA SERT ?⁣
Cette phase de zoning et wireframe est primordiale lorsque vous concevez vos business en ligne ! C’est une phase qui va concrétiser toute votre réflexion stratégique. C’est le moment où vous couchez sur papier les éléments essentielles et fondamentaux pour vos sites/blog/app.⁣

🔢 Durant cette phase, il vous faudra hiérarchiser chaque éléments dans vos pages pour savoir ce qui est le plus important pour votre business !⁣

🎨 Une fois que cette phase est terminée vous pouvez commencer à réfléchir à la représentation visuelle de cette page, au graphisme, aux couleurs, aux typographies, aux images, etc !⁣

2️⃣ Breadcrumb ou fil d’Ariane

Lorsqu’on conçoit un site il est essentiel de laisser paraître votre fil d’Ariane !⁣⠀
⁣⠀
PETITE HISTOIRE⁣⠀
📖Selon le mythe originel, le fil d’Ariane a été utilisé par Thésée pour sortir du labyrinthe après son combat avec le Minotaure…⁣Cela l’a guidé !⠀
⁣⠀
Dans le web, c’est pareil ! Le fil d’Ariane est utilisé par vos utilisateurs pour être guidé entre toutes vos pages…⁣⠀
⁣⠀
LE FIL D’ARIANE⁣⠀
👉 Un fil d’ariane est un élément de navigation permettant d’indiquer à l’utilisateur où est-ce qu’il se situe dans votre site.⁣⠀
⁣⠀
C’est un élément qui, en règle générale, n’apparaît pas sur votre accueil mais qui doit figurer sur toutes les autres pages. Surtout si vous avez un site de e-commerce pour ne pas perdre vos utilisateurs dans toutes vos catégories de produits.⁣⠀
⁣⠀
A QUOI CELA SERT ?⁣⠀
Souvent situé en haut de vos pages ou en bas de page, cela permet à l’utilisateur de se repérer dans votre site. Savoir ou se souvenir de la catégorie dans laquelle il est par exemple.⁣⠀
⁣⠀
Le fil d’ariane est un élément souvent “oublié” ou “négligé” voir même qui n’apparaît pas dans la plupart de vos template wordpress, wix, autres, de base. Mais ce n’est pas pour autant qu’il ne faut pas l’intégrer !⁣⠀
⁣⠀
⚠️ [Tips] Pour WP, vous pouvez utiliser Yoast, qui permet de travailler votre SEO (si ce n’est pas déjà fait, Go l’installer !) et d’ajouter un fil d’Ariane à votre site/blog.⁣⠀
⁣⠀
✅ SEO FRIENDLY⁣⠀
Le fil d’Ariane est un élément qui va aussi booster naturellement votre SEO (le référencement naturel de votre site).⁣⠀
⁣⠀
☝️[Tips] Pour faciliter la navigation sur ordinateur et mobile, ce dernier est de plus en plus situé en bas de page.⁣⠀

3️⃣ Bug ou insecte

Il nous est tous déjà arrivé d’avoir un bug sur nos sites internet ! Mais savez-vous pourquoi on appel cela un bug ? ⁣⠀
(*Je n’ai pas marqué insecte juste pour la traduction ou parce que le printemps nous sourit)⁣⠀
⁣⁣⠀
PETITE HISTOIRE⁣⁣⠀
📖L’histoire raconte que l’utilisation du mot “bug” pour exprimer un dysfonctionnement sur un site est né dans les années 40 car de nombreuses insectes à l’époque, étaient attirer et venaient s’introduire dans les systèmes informatiques (car il y faisait chaud) ce qui causait des problèmes.⁣⠀
⁣⁣⠀
👉Aujourd’hui on utilise le mot bug pour signifier n’importe quel blocage en général. On dit même à des personnes “T’as bugué ?”⁣ si elles nous répondent pas.⁣⠀

4️⃣ Hover ou survol

Le hover* (ou *survol) en est le comportement d’un élément sur un site au survol de la souris. ⁣⠀
⁣⠀
ASPECTS ➕ et ➖ DES ANIMATIONS DE SURVOL⁣⠀
⁣⠀
➕ La réaction visuelle des éléments au passage de la souris permet à l’internaute de mieux comprendre l’interface pour y circuler plus facilement. ⁣⠀
⁣⠀
➖ Les animations de survol comme on vient de le dire fonctionne au survol de la SOURIS sur un élément. Mais sur mobile, on a pas de souris alors que devienne ces éléments ?⁣⠀
⁣⠀
👉 Utiliser les animations de survol avec intelligence… En effet, sur mobile le survol ne fonctionne, donc toutes les animations de survol présente sur votre site doivent être inactive sur mobile pour ne pas gêner l’utilisateur dans sa navigation sur mobile.⁣⠀
⁣⠀
⚠️[Tips : le pire reste l’affichage d’une information au survol : par exemple, un titre, description ou lien qui s’affiche au survol sur une image. Si vous ne pensez pas l’affichage de ces informations de façon spécifique sur mobile. Votre utilisateur ne les verra JAMAIS.⁣⠀

5️⃣ L’affordance

L’affordance, c’est la capacité d’un objet, d’un élément de votre site à suggérer son utilisation, sa fonction.⁣⠀
⁣⠀
Par exemple : un bouton. Dans la tête de vos utilisateurs, une représentation visuelle d’un bouton va suggérer à l’utilisateur qu’il doit cliquer dessus pour accéder à autre chose.⁣⠀
⁣⠀
AFFORDANCE⁣⠀
L’affordance c’est, en quelque sort, offrir à vos utilisateurs les moyens de se servir d’un élément sans mode d’emploi. ⁣⠀
⁣⠀
👉 Les affordances sont tous des appels à l’action comme : tirer, pousser, appuyer, tapoter, cliquer, effleurer, porter, etc. Ce sont tous des moyens d’interagir avec un objet ou une interface.⁣⠀
⁣⠀
Par exemple : ⁣⠀
. la poignée d’une porte, incite l’utilisateur à appuyer dessus pour pouvoir ouvrir la porte ;⁣⠀
. une chaise, invite l’utilisateur, par sa forme à s’asseoir dessus ;⁣⠀
. une icône de loupe sur un site, va indiquer une recherche ;⁣⠀
. une flèche, indique un sens de navigation (sur un site ou des panneaux routiers par exemple) ;⁣⠀
. etc.⁣⠀
⁣⠀
⚠️[Tips : ces éléments sont tellement évident pour vos utilisateurs qu’ils pourraient être déroutant pour eux de leur faire prendre un autre aspect ou un autre sens. C’est pourquoi il est important d’essayer de se différencier, d’innover, d’être incitatif tout en restant claire et pas trop éloigné des habitudes de vos utilisateurs.]⁣⠀

5️⃣ Ligne de flottaison ou the fold

Lorsqu’on conçoit un site il est essentiel de penser à sa ligne de flottaison !⁣⁣⠀
⁣⠀
PETITE HISTOIRE⁣⁣⠀
📖Les anglais l’appel “the fold” ce qui signifie “le pli”, comme le pli d’un journal. En effet, lorsque vous achetez un journal il est souvent plié en deux et seul le contenu au dessus de ce pli est visible au premier coup d’oeil.⁣⠀
⁣⠀
LA LIGNE DE FLOTTAISON⁣⠀
👉 Dans le web, c’est le même principe, la ligne de flottaison, est la ligne imaginaire horizontale à partir de laquelle le contenu n’est visible qu’en scrollant.⁣⠀
⁣⁣⠀
La seule différence et pas des moindres, c’est que sur le web votre ligne de flottaison dépend surtout de la taille des écrans (et il y a beaucoup de taille d’écrans différentes, ce qui ne simplifie pas les choses !)⁣⠀
⁣⁣⠀
COMMENT FAIRE ?⁣⁣⠀
Pas de panique, ⁣aujourd’hui vos utilisateurs scroll sur vos pages, sans problème ! C’est dans leurs usages, leurs habitudes. ⁣⠀
⁣⠀
Cela qui rend du coup, cette ligne de flottaison beaucoup moins importante à prendre en considération. Néanmoins la partie visible de “l’iceberg” reste tout de même déterminante pour inciter votre utilisateur à poursuivre sa démarche de navigation.⁣⠀
⁣⠀
☝️Quelques éléments qu’il est important de retrouver au dessus de cette ligne imaginaire : ⁣⠀
1. votre menu de navigation ;⁣⠀
2. votre identité (logo, nom, baseline) ;⁣⠀
3. et surtout, que ces éléments se chargent de suite.⁣⁣⠀
⁣⠀
✅L’essentiel c’est que vous présentiez vos informations essentielles pour que l’utilisateur comprenne votre message et ce qu’il va découvrir dans votre site. MAIS vous ne pouvez pas tout faire tenir sur un seul et même écran alors ce qu’il faut faire, c’est inciter votre utilisateurs à découvrir le reste de votre page.⁣⠀

5️⃣ Thumb zone ou zone de confort

Lorsqu’on conçoit un site il est essentiel de penser à la zone de confort de vos utilisateurs !⁣⁣⠀
⁣⠀
PETITE HISTOIRE⁣⁣⠀
📖La zone de confort est l’espace d’un écran qui est le plus facilement atteignable par l’utilisateur. ⁣⠀
⁣⠀
LA ZONE DE CONFORT⁣⠀
Elle va dépendre de la façon dont l’utilisateur va tenir ou utiliser le support qu’il utilise.⁣⠀
⁣⠀
La grande majorité des personnes utilisent leur smartphone de façon verticale (potrait) et le tiennent avec une seule main (la droite).⁣⠀
⁣⠀
Mais attention cela peut varier selon les utilisateurs et la taille de l’écran : certains le tienne à deux mains (tablette) ou avec la main gauche pour pouvoir taper l’écran avec leur index,(dédicace à ma grand-mère), etc.⁣⠀
⁣⠀
Cela peut varier aussi en fonction de ce que consulte l’utilisateur, si c’est un jeu sur mobile il peut davantage le tenir en paysage par exemple.⁣⠀
⁣⠀
ELLE EST OÙ ?⁣⁣⠀
👉 Sur mobile, la zone de confort en portrait sera du coin inférieur gauche (accessible par le pouce) jusqu’au centre du bord droit (environ). En mode paysage ce seront les zones latérales de l’écran que vos utilisateurs atteindront le plus facilement.⁣⠀
⁣⠀
👉 Sur tablette, la zone de confort sera à la fois les coins inférieurs droits et supérieurs gauche.⁣⠀
⁣⠀
⁣👉 Sur ordinateur, la zone de confort est déterminer par le curseur de la souris, c’est donc l’ensemble des coins de l’écran (car c’est là que la souris se bloque toute seule) et le centre de l’écran. ⁣⠀
⁣⠀
✅ L’essentiel c’est que vous y pensiez lorsque vous concevez vos interfaces sur les différents supports, car il est important de placer ses éléments stratégiques dans cette zone de confort, facilement accessible pour l’utilisateur.

5️⃣ Scroller ou faire défiler

On passe notre temps à scroller sur nos écrans ! Que ce soit sur ordinateur, tablette ou mobile, on ne fait que scroller ! J’ai même l’impression quand je parle que c’est un verbe qui fait partie de la langue française ! Parce que je scrolle, tu scrolles, l’utilisateur scrolle, nous scrollons tous, vous scrollez et tous les utilisateurs scrollent !⁣⠀
⁣⠀
Je n’ai même pas besoin de vous expliquer ce que ça veut dire ! Mais par contre j’ai envie de vous dire d’où ça vient !⁣⠀
⁣⁣⠀
PETITE HISTOIRE⁣⁣⠀
📖A la base cela vient des parchemins que l’on déroulé pour lire la suite…(“Aaaaaaaaaaaah”)⁣⠀
⁣⠀
Ben voilà, vous savez tout ! Aujourd’hui c’est pareil on scroll pour dévoiler le reste de la page et lire la suite du contenu qui s’y trouve !⁣⠀
⁣⁣⠀
👉 Le scroll est un moyen de navigation qui permet essentiellement de dévoiler et lire un contenu dans son ensemble. Il est particulièrement adapté aux appareils mobiles, aux activités d’exploration et de découverte ou à un affichage de flux d’informations (comme une discussion par exemple).⁣⠀
⁣⠀

5️⃣ Footer ou pied de page

Bon je vous passe la définition de ce qu’est un pied de page. Dans le web
ce dernier s’intitule “footer” et correspond au dernier espace de votre site web, en bas de vos pages et qui est un élément qu’il ne faut surtout pas négliger !

LE FOOTER, c’est double tranchant !
Bien souvent le footer est soit trop fournit (y en a de partout, on sait plus quoi regarder !) soit complètement vide (un pauvre lien mentions légales qui se perd par là…)

👉 Et pourtant, c’est un élément essentiel de vos sites et il faut apprendre à bien les construire ! Un des rôles principaux du footer est de mettre en avant les informations qui ne sont pas présentent dans la navigation générale.


Lire aussi : Comment attirer davantage vos utilisateurs ?


☝️ Quelles sont les termes UX que vous avez découvert  ?

J’espère que cet article vous sera utile, n’hésitez pas si vous avez des questions ou des remarques, à les mettre en commentaires ! 👇

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *