Apple
Vulgarisation, WebDesign, Webmastering

Ancre, Fil d’ariane, Footer… Et si on vulgarisait ce jargon ?

Dès que l’on s’intéresse à l’ergonomie et au design de son blog ou site web, on croise inéluctablement toute une pelletée de termes auxquels on ne comprend pas grand chose. Ou dont on devine éventuellement le rôle de certains mots, de par leur définition en français. Car il faut bien l’avouer, même si beaucoup de mots relatifs au webdesign ainsi qu’au blogging et webmastering, sont en français, d’autres en revanche, sont majoritairement utilisés dans leur version anglaise. Des exemples ? Prenez donc les termes comme : Header, Footer, breadcrumb, anchor, UX, Hero Image… On peut également compléter cette liste d’exemples avec : Template, body, background, font…

Bref, même si on peut rapidement comprendre à quoi correspondent divers termes, pour d’autres en revanche, ce n’est pas aussi évident. C’est pourquoi il est question aujourd’hui de vulgariser un tant soit peu, une partie de ces mots qu’on croise régulièrement.

Commençons par les ces termes relatifs à la navigation sur un Blog ou site web :

Termes relatifs à la Navigation et ergonomie d’un Blog ou site Web

Breadcrumb ou Fil d’Ariane

Le terme Breadcrumb qui est la version anglaise de ce que nous appelons chez nous le fil d’Ariane. Et qu’est donc le fil d’Ariane ? C’est tout simplement ce lien parfois présent sous le logo/bannière d’un site ainsi que sous le menu de navigation, mais la plupart du temps présent au dessus du corps d’un article ou d’une page. Il permet de vous situez sur un site et de savoir à quel endroit vous vous trouvez. Il permet dans la foulée, de remonter dans votre navigation car il est souvent présenté sur forme de liens cliquables.

Exemple en image :

Fil d ariane breadcrumb definition en image

Anchor ou Ancre

Le terme Anchor est la simple traduction de ce que nous appelons chez nous une Ancre. Et dans l’univers de la navigation sur une page web, l’ancre est un lien interne qui vous permet de naviguer plus facilement au sein d’une même page ou d’un même article. Ce type de lien est particulièrement apprécié quand un article est long et exhaustif, mais aussi lorsqu’on souhaite ne consulter qu’une partie d’un article ou par exemple d’un tutoriel. L’exemple le plus courant que l’on croise sans forcément s’en rendre compte, est probablement celui de Wikipédia. Voici un exemple imagé de liens ancrés :
Lien ancré sur wikipedia un grand classique

Termes relatifs aux fréquentes zones du corps d’un site ou Blog

Header

Lorsqu’on navigue sur un blog ou site, on a tellement l’habitude de voir l’architecture classique qu’on ne réalise même plus qu’on a quasi toujours un Header. Et le Header, c’est quoi alors ? C’est cette zone tout en haut d’un site ou blog, qui contient la plupart du temps, le logo ou la bannière ainsi que très couramment, le menu de navigation. On y trouve de plus en plus souvent un champ de recherche ainsi que pour les sites de commerces en ligne, un onglet “accès à mon compte” ou “panier“.

Avec l’avènement de la navigation web via petits écrans (smartphones et tablettes), ces headers, qui correspondent donc à l’entête d’un site ou blog, ont vocation à devenir moins hauts et plus compacts, toujours dans l’idée de faciliter au maximum la navigation et donc dans la foulée, l’expérience utilisateur (UX). Les Headers sont souvent un réel enjeu stratégique pour les sites dont le branding est travaillé, notamment si de la vente est accostée. Il faut en dire un maximum via un header, car c’est la première partie d’un site ou blog qu’un internaute voit. Exemple de Header d’un célèbre site :

header du site de mediapart

Footer

Autre terme en anglais pour désigner une partie d’une zone d’un blog ou site beaucoup moins stratégique que le header. Mais qui cependant permet la plupart du temps d’insérer des liens aussi indispensables qu’utiles. Le Footer correspond donc en anglais, au pied de site pour nous autres francophones. Dans le pied de site, on retrouve couramment divers liens, comme le liens vers les mentions légales d’un blog ou site, un lien vers les éternelles et palpitantes CGV, CGU… Exemple du footer, à savoir pied de site du même journal que précédemment :

Footer du site mediapart

Body

Là, il faut bien admettre que traduire ce terme est facile. Quant à comprendre ce que corps désigne dans l’ergonomie d’un site ou blog, c’est plus simple en image. En effet, le corps d’un blog ou site web correspond la plupart du temps à l’espace présent entre le Header (entête) et le footer (pied de site) et donc à l’espace dédié au contenu pur et dur.

Dans l’image qui suit, le body, donc le corps, est la partie en vert :

mises en page de sites ou blogs

Sidebar

La Sidebar ou barre latérale correspond quant à elle à cette barre qu’on retrouve généralement à gauche ou à droite d’un blog ou site web. Parfois même des deux côtés, tout comme il peut être décidé par un webmaster ou webdesigner de la supprimer purement et simplement. Sur l’image juste ci-dessus de fréquentes mises en page utilisées, la sidebar est en rose. Elle contient généralement un appel à l’action (CTA = Call To Action) tout en haut, avec par exemple une proposition d’abonnement à une Infolettre, des icônes avec liens vers des comptes de réseaux sociaux…

Background

Le background correspond lui à l’arrière-plan qu’on peut aussi appelé “Fond” d’une page web. Auparavant, on trouvait divers blogs et sites dont les arrière-plans étaient en réalité des images. C’était parfait pour rendre + vivante une page de blog ou de site web. Mais pour diverses raisons, d’optimisations, de bonnes pratiques ou encore d’ergonomie, la tendance est au minimalisme et aux couleurs unies pour ce qui est des arrières-plans de page web. Le Blanc restant largement majoritaire. Offrant une meilleure lisibilité avec l’éternel texte noir sur fond blanc.

Et les Acronymes ?

UX

Ce terme est désormais présent partout dès qu’il est question d’ergonomie, de sites web, de blogs ou de navigation sur internet ou sur une application. L’UX signifie en anglais User Experience, ce qui en français correspond à l’eXpérience Utilisateur. Dans tout projet web, il est donc logiquement impossible d’avancer sans tenir compte de cette UX. Et s’il est question d’UX pour tout ce qui touche au digital, l’expérience utilisateur semble enfin entrer dans tous les univers afin qu’une meilleure accessibilité et utilisation soit proposée pour tout produit créé ou amélioré.

UI

Tandis que l’UX fait référence à l’expérience utilisateur, L’UI quant à elle, fait référence à l’Interface Utilisateur. Dans l’univers digital, l’UI est donc différente mais complètement connectée à l’UX. L’interface utilisateur est en effet, la partie visible que tout internaute utilisera lors de sa navigation sur une application ou un site web (ou blog). Aujourd’hui, pour tout nouveau produit web, qu’il s’agisse d’un site, blog ou d’une App, l’interface utilisateur se doit d’être simple, accessible et idéalement : Agréable. D’où cet usage très fréquent de cet acronyme.


Voilà, c’est tout pour cette fois, et c’est déjà pas si mal :) Très vite, d’autres articles du même type arriveront pendant l’été !

Ancre fil d ariane footer ux vulgarisons ce jargon

 

  •  
  •  
  •  
  • 8
  •   
  •  
    8
    Partages
Previous Post Next Post

You Might Also Like

3 Comments

  • Reply Benjamin Doumerc 27 juillet 2019 at 02:40

    Super article. C’est vrai que quand on trempe dans la creation de site, pour nous c’est assez naturel tout ça. Mais quand on découvre…On est vite perdu !

    On pourrai également appliquer ça au webmarketing avec les termes de lead (prospect), landing page (ou Squeeze Page) pour la page de capture (même si la définition littérale est “page de destination”), les optins,…

    Bref BEAUCOUP de termes à définir :)

    • Reply GG 27 juillet 2019 at 10:55

      Bonjour Benjamin ! C’est justement prévu et en cours pour la partie webmarketing :) je prends en revanche mon temps et travaille à découper correctement la chose vu que comme tu le dis, c’est un gros morceau

      • Reply Benjamin 27 juillet 2019 at 13:03

        Super il me tarde déjà de le lire !

    Leave a Reply

    %d blogueurs aiment cette page :