{"id":16361,"date":"2020-02-06T10:30:25","date_gmt":"2020-02-06T09:30:25","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=16361"},"modified":"2025-08-20T17:18:58","modified_gmt":"2025-08-20T15:18:58","slug":"ui-ux-elements-navigation-a-connaitre","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/","title":{"rendered":"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre"},"content":{"rendered":"<p>Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une <a href=\"https:\/\/graphiste.com\/blog\/application-mobile-ux-design\">application<\/a> est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en 2023, la facilit\u00e9 d\u2019utilisation tout comme <strong>l\u2019exp\u00e9rience utilisateur<\/strong> sont primordiales puisque les internautes et mobinautes peuvent facilement aller \u00e0 la concurrence si un \u00ab\u2009produit\u2009\u00bb ne leur convient pas.<\/p>\n<p>Mais connaissez-vous les termes li\u00e9s aux \u00e9l\u00e9ments de navigation afin de pouvoir \u00e9changer avec un professionnel du <a href=\"https:\/\/graphiste.com\/blog\/webdesign-ux-ui-tendances-2021\" target=\"_blank\" rel=\"noopener noreferrer\">design UX-UI<\/a>\u2009?<\/p>\n<p>Si ce n\u2019est pas le cas, le guide ci-dessous va vous \u00eatre d\u2019une grande aide&nbsp;!<\/p>\n<h2>1. Navigation<\/h2>\n<p>Elle est l\u2019ensemble des techniques et actions qui guident l\u2019utilisateur lorsqu\u2019il est sur un site web ou dans une application. Cet ensemble lui permet d\u2019interagir avec le produit et d\u2019atteindre les objectifs qu\u2019il s\u2019\u00e9tait fix\u00e9s en venant le consulter.<\/p>\n<blockquote><p>Attention\u00a0: D\u00e8s la cr\u00e9ation de l\u2019interface utilisateur, la <a href=\"https:\/\/graphiste.com\/blog\/meilleure-navigation-site-web\">navigation<\/a> doit donc \u00eatre prise en compte et c\u2019est la mise en place de diff\u00e9rents \u00e9l\u00e9ments (menus, barres, liens ou encore boutons\u2026) qui va la simplifier.<\/p><\/blockquote>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/erreurs-navigation-site-web\">7 erreurs \u00e0 ne pas commettre pour la navigation de votre site<\/a><\/p><\/blockquote>\n<h2>2. Menu<\/h2>\n<p>\u00c9l\u00e9ment cl\u00e9 de la navigation sur un site internet ou une application, il pr\u00e9sente l\u2019ensemble des interactions possibles avec l\u2019interface. Il peut <strong>r\u00e9pertorier les commandes<\/strong> ou bien les cat\u00e9gories servant \u00e0 <strong>organiser les contenus<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-16368\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-exemple.png\" alt=\"menu website\" width=\"800\" height=\"600\" \/><\/p>\n<p>Pouvant occuper diff\u00e9rents espaces au sein de l\u2019interface, le menu doit \u00eatre positionn\u00e9 pour r\u00e9pondre au mieux aux attentes de la cible.<\/p>\n<p>En effet, <a href=\"https:\/\/graphiste.com\/blog\/creer-mega-menu-efficace\" target=\"_blank\" rel=\"noopener noreferrer\">un menu bien con\u00e7u<\/a> doit contribuer \u00e0 ce que les utilisateurs d\u2019un site ou d\u2019une application atteignent plus rapidement leurs objectifs.<\/p>\n<p>Pour information, l\u2019apparence du menu et ses fonctionnalit\u00e9s sont \u00e9galement \u00e0 ne pas n\u00e9gliger pour optimiser le design UI d\u2019un produit.<\/p>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/alternative-menu-hamburger\">Navigation sur mobile\u00a0: 4 alternatives au menu hamburger<\/a><\/p><\/blockquote>\n<h2>3. Barre<\/h2>\n<p>Elle est une section de l\u2019interface utilisateur pr\u00e9sentant des \u00e9l\u00e9ments cliquables qui donnent la possibilit\u00e9 \u00e0 l\u2019internaute ou au mobinaute de conna\u00eetre les diff\u00e9rentes \u00e9tapes de l\u2019interaction avec le produit.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-48241 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695.jpeg\" alt=\"\" width=\"828\" height=\"660\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695.jpeg 828w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695-300x239.jpeg 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695-768x612.jpeg 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695-60x48.jpeg 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695-370x295.jpeg 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695-270x215.jpeg 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695-570x454.jpeg 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/1480695-740x590.jpeg 740w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/p>\n<p>On distingue toutefois&nbsp;:<\/p>\n<ul>\n<li><strong>La barre d\u2019onglets<\/strong>, situ\u00e9e en bas de nombreuses applis, qui permet de basculer d\u2019une section \u00e0 l\u2019autre d\u2019une application tr\u00e8s ais\u00e9ment ;<\/li>\n<li><strong>La barre de chargement<\/strong> qui indique \u00e0 l\u2019utilisateur l\u2019action en cours et son avancement sous forme de pourcentage le plus souvent ;<\/li>\n<li><strong>La barre de progression<\/strong> qui fournit des informations sur un processus en cours, comme le volume sonore sur une plateforme de streaming musical.<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/mobile-guide-ultime-reussir-designs\">Mobile\u00a0: le guide ultime pour r\u00e9ussir tous vos designs<\/a><\/p><\/blockquote>\n<h2>4. \u00c9l\u00e9ments CTA (Call-To-Action)<\/h2>\n<p>Il s\u2019agit d\u2019\u00e9l\u00e9ments interactifs (onglets, liens ou boutons) qui invitent l\u2019internaute ou le mobinaute \u00e0 entreprendre une action. Autrement dit, ils sont des \u00e9l\u00e9ments cl\u00e9s d\u2019une interaction efficace entre un utilisateur et le produit.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-48240 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d.webp\" alt=\"\" width=\"840\" height=\"630\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d.webp 840w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-300x225.webp 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-768x576.webp 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-60x45.webp 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-370x278.webp 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-270x203.webp 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-570x428.webp 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-740x555.webp 740w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/743125876f59c8d7f9a99156ff02b66d-80x60.webp 80w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>Leur positionnement et leur apparence sont essentiels puisque si de mauvaises d\u00e9cisions sont prises, l\u2019utilisateur risque de se sentir perdu. Or, avec une exp\u00e9rience utilisateur \u00e0 la baisse, c\u2019est probablement le <a href=\"https:\/\/graphiste.com\/blog\/utiliser-contenu-interactif\" target=\"_blank\" rel=\"noopener noreferrer\">taux de conversion<\/a> de votre produit qui va diminuer.<\/p>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\">Inspiration\u00a0: 15 animations CSS pour dynamiser vos call-to-action<\/a><\/p><\/blockquote>\n<h2>5. Boutons<\/h2>\n<p>Pr\u00e9sents sur toutes les interfaces utilisateur, les boutons sont les \u00e9l\u00e9ments gr\u00e2ce auxquels un utilisateur va pouvoir \u00ab\u2009commander\u2009\u00bb une information au syst\u00e8me et obtenir le retour interactif appropri\u00e9.<\/p>\n<figure id=\"attachment_16390\" aria-describedby=\"caption-attachment-16390\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-16390\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/neuphormisme-cta-bouton-e1580486902609.png\" alt=\"Neumorphism UI Elements\" width=\"700\" height=\"525\" \/><figcaption id=\"caption-attachment-16390\" class=\"wp-caption-text\">Cr\u00e9ation par Filip Legierski sur Dribbble<\/figcaption><\/figure>\n<p>Autrement dit, le <a href=\"https:\/\/graphiste.com\/blog\/choisir-forme-bouton\" target=\"_blank\" rel=\"noopener noreferrer\">bouton<\/a> est l\u2019\u00e9l\u00e9ment par lequel l\u2019utilisateur va communiquer avec le site web ou l\u2019application.<\/p>\n<p>Comme vu pr\u00e9c\u00e9demment dans les \u00ab\u2009<a href=\"https:\/\/graphiste.com\/blog\/affordance-ux\">\u00e9l\u00e9ments CTA<\/a>\u2009\u00bb, les boutons peuvent permettre d\u2019acheter un produit, d\u2019ouvrir la messagerie mail, de t\u00e9l\u00e9charger des donn\u00e9es, etc.<\/p>\n<blockquote><p>Il en existe une tr\u00e8s grande vari\u00e9t\u00e9, tant sur le plan de la forme que de l\u2019apparence visuelle. Beaucoup affichent \u00e9galement l\u2019action qu\u2019ils permettent de r\u00e9aliser sous forme de textes.<\/p><\/blockquote>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-8447\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/animation-bouton-min.gif\" alt=\"\" width=\"635\" height=\"476\" \/><\/p>\n<p>Les designers UI consacrent g\u00e9n\u00e9ralement beaucoup de temps \u00e0 la conception des boutons lors d\u2019un projet d\u2019application ou de site web. L\u2019objectif est qu\u2019il soit le mieux int\u00e9gr\u00e9 possible et qu\u2019il ne soit donc ni trop visible ni trop effac\u00e9. Un \u00e9quilibre pas toujours simple \u00e0 trouver\u2026<\/p>\n<p>Trois boutons sont extr\u00eamement populaires et se retrouvent sur de nombreuses interfaces\u00a0:<\/p>\n<ul>\n<li><strong>Le menu hamburger<\/strong> (compos\u00e9 de trois lignes horizontales les unes au-dessus des autres) qui permet d\u2019\u00e9tendre le menu de l\u2019appli ou du site lorsque l\u2019on clique ou tapote dessus ;<\/li>\n<li><strong>Le bouton \u00ab\u2009+\u2009\u00bb<\/strong> qui permet d\u2019ajouter, selon le contexte, un contenu, un contact, une cat\u00e9gorie&#8230; ;<\/li>\n<li><strong>\u00ab\u2009Partager\u2009\u00bb<\/strong> qui permet de partager ais\u00e9ment un contenu sur les r\u00e9seaux sociaux, chacun d\u2019entre eux proposant des boutons personnalis\u00e9s \u00e0 leur couleur.<\/li>\n<\/ul>\n<p>Mais ce ne sont l\u00e0 que trois exemples parmi beaucoup d\u2019autres\u2026<\/p>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/5-regles-boutons-call-to-action\">Web design\u00a0: 5 r\u00e8gles pour vos boutons call-to-action<\/a><\/p><\/blockquote>\n<h2>6. Toggle switch ou commutateur<\/h2>\n<p>Il s\u2019agit d\u2019un bouton reprenant la forme d\u2019un commutateur et permettant d\u2019activer ou de d\u00e9sactiver tr\u00e8s ais\u00e9ment une option sur un site web ou une application.<\/p>\n<figure id=\"attachment_16391\" aria-describedby=\"caption-attachment-16391\" style=\"width: 459px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\" wp-image-16391\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/shot.gif\" alt=\"toggle switch commutateur\" width=\"459\" height=\"344\" \/><figcaption id=\"caption-attachment-16391\" class=\"wp-caption-text\">Activate Button par Aaron Iker sur Dribbble<\/figcaption><\/figure>\n<p>Afin que les utilisateurs ne rencontrent pas de difficult\u00e9s avec les commutateurs, il faut veiller \u00e0 ce que ces derniers soient clairs et explicites.<\/p>\n<p>Pour aider \u00e0 la bonne compr\u00e9hension des commutateurs, il est possible de jouer sur un contraste de couleurs ou de pr\u00e9voir une animation. Point positif, cela contribue aussi \u00e0 la convivialit\u00e9 de votre produit.<\/p>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/checkbox-toggle-switch-differences\">Checkbox et Toggle Switch\u00a0: lequel choisir pour vos questionnaires\u2009?<\/a><\/p><\/blockquote>\n<h2>7. Checkbox<\/h2>\n<p>Il est un \u00e9l\u00e9ment de navigation fr\u00e9quemment mis en place lorsque l\u2019utilisateur est amen\u00e9 \u00e0 d\u00e9cider s\u2019il veut ou non profiter de telle ou telle option.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-48242 size-full aligncenter\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/checkbox-liste.png\" alt=\"\" width=\"478\" height=\"220\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/checkbox-liste.png 478w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/checkbox-liste-300x138.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/checkbox-liste-60x28.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/checkbox-liste-370x170.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/checkbox-liste-270x124.png 270w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/p>\n<p>On la retrouve par exemple souvent dans les sections d\u00e9di\u00e9es au param\u00e9trage ou dans des listes. Le principe est simple puisqu\u2019il suffit de cocher la case.<\/p>\n<p>Souvent, les designers UI veillent \u00e0 ce que les cases coch\u00e9es et leur signification apparaissent dans un coloris diff\u00e9rent afin d\u2019am\u00e9liorer l\u2019exp\u00e9rience utilisateur.<\/p>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/regles-utiliser-inclusive-design\">UX\/UI Design\u00a0: 5 r\u00e8gles d\u2019or pour utiliser l\u2019Inclusive Design<\/a><\/p><\/blockquote>\n<h2>8. Lien hypertexte<\/h2>\n<p>Les barres de navigation ne sont pas le seul moyen de passer d\u2019une page \u00e0 l\u2019autre puisque des liens hypertextes peuvent \u00e9galement le permettre. En effet, en cliquant ou tapotant sur un lien, l\u2019utilisateur va acc\u00e9der directement \u00e0 l\u2019information recherch\u00e9e.<\/p>\n<p>Si le maillage de vos contenus est particuli\u00e8rement bien r\u00e9alis\u00e9, il est possible de cr\u00e9er des parcours de lecture complets. Les liens peuvent aussi, tout comme les boutons CTA, s\u2019av\u00e9rer pertinents pour cr\u00e9er des tunnels de conversion particuli\u00e8rement performants.<\/p>\n<blockquote><p>\u00c0 lire aussi\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/ui-ux-interfaces-erreurs-a-ne-plus-faire\">UI\/UX\u00a0: 7 erreurs \u00e0 ne plus faire sur vos interfaces<\/a><\/p><\/blockquote>\n<h2>Notre conseil<\/h2>\n<p>Comme nous venons de le voir, le <a href=\"https:\/\/graphiste.com\/blog\/methodes-simples-ameliorer-ux-ui-design\">design UI<\/a> dispose de son propre vocabulaire et il n\u2019est pas toujours \u00e9vident de comprendre la diff\u00e9rence entre les diff\u00e9rents \u00e9l\u00e9ments de navigation.<\/p>\n<p>Aussi, <a href=\"https:\/\/graphiste.com\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>faites confiance \u00e0 un professionnel<\/strong><\/a> qui saura prendre les bonnes d\u00e9cisions et vous livrer un produit sp\u00e9cifiquement pens\u00e9 pour que les internautes et mobinautes soient satisfaits.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une application est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en 2023, la facilit\u00e9 d\u2019utilisation tout comme l\u2019exp\u00e9rience utilisateur sont primordiales puisque les internautes et mobinautes peuvent facilement aller \u00e0 la concurrence si un \u00ab\u2009produit\u2009\u00bb ne leur convient pas. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":16369,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[101,27],"tags":[],"class_list":["post-16361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une application est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une application est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-06T09:30:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:18:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Laura Michaud\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Michaud\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre\",\"datePublished\":\"2020-02-06T09:30:25+00:00\",\"dateModified\":\"2025-08-20T15:18:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/\"},\"wordCount\":1235,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg\",\"articleSection\":[\"UX design\",\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/\",\"url\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/\",\"name\":\"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg\",\"datePublished\":\"2020-02-06T09:30:25+00:00\",\"dateModified\":\"2025-08-20T15:18:58+00:00\",\"description\":\"Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une application est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UX design\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/ux-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\",\"name\":\"Laura Michaud\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"caption\":\"Laura Michaud\"},\"description\":\"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/michaudlaura\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/laura\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre - Graphiste Blog","description":"Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une application est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/","og_locale":"fr_FR","og_type":"article","og_title":"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre - Graphiste Blog","og_description":"Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une application est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en","og_url":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2020-02-06T09:30:25+00:00","article_modified_time":"2025-08-20T15:18:58+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg","type":"image\/jpeg"}],"author":"Laura Michaud","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Laura Michaud","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre","datePublished":"2020-02-06T09:30:25+00:00","dateModified":"2025-08-20T15:18:58+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/"},"wordCount":1235,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg","articleSection":["UX design","Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/","url":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/","name":"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg","datePublished":"2020-02-06T09:30:25+00:00","dateModified":"2025-08-20T15:18:58+00:00","description":"Permettre aux utilisateurs de naviguer ais\u00e9ment dans un site web ou dans une application est la mission qui est fix\u00e9e aux designers UI. Il faut dire qu\u2019en","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/01\/une-graphiste-UX-UI-design-element-navigation-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"UX design","item":"https:\/\/graphiste.com\/blog\/webdesign\/ux-design\/"},{"@type":"ListItem","position":4,"name":"UI\/UX design\u00a0: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2","name":"Laura Michaud","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","caption":"Laura Michaud"},"description":"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.","sameAs":["https:\/\/www.linkedin.com\/in\/michaudlaura\/"],"url":"https:\/\/graphiste.com\/blog\/author\/laura\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/16361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=16361"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/16361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/16369"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=16361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=16361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=16361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}