{"id":24114,"date":"2023-05-19T10:30:00","date_gmt":"2023-05-19T08:30:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=24114"},"modified":"2025-08-20T17:26:27","modified_gmt":"2025-08-20T15:26:27","slug":"web-design-secrets-liste-deroulante","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/","title":{"rendered":"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes"},"content":{"rendered":"<p>Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux <a href=\"https:\/\/graphiste.com\/blog\/ux-ui-booster-design-formulaire\" target=\"_blank\" rel=\"noopener noreferrer\">formulaires<\/a> de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs.<\/p>\n<p>G\u00e9n\u00e9ralement tr\u00e8s longues et inesth\u00e9tiques, elles ont tendance \u00e0 rebuter tout en \u00e9tant incontournables dans bien des cas.<\/p>\n<p>Sachez toutefois qu\u2019il existe 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes sur votre site et ne plus rendre fous vos utilisateurs.<\/p>\n<h2>1. Opter pour la bonne ergonomie de liste d\u00e9roulante<\/h2>\n<p>Non, vous n\u2019\u00eates pas contraint de proposer toujours le m\u00eame type de liste d\u00e9roulante \u00e0 vos utilisateurs.<\/p>\n<figure id=\"attachment_24117\" aria-describedby=\"caption-attachment-24117\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-24117\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/liste-deroulante.png\" alt=\"liste d\u00e9roulante anatomie\" width=\"700\" height=\"839\"><figcaption id=\"caption-attachment-24117\" class=\"wp-caption-text\">Source&nbsp;: uxdesign<\/figcaption><\/figure>\n<p>Vous pouvez opter pour celle qui offre le plus de confort d\u2019usage. Il existe en effet diff\u00e9rentes formes de listes d\u00e9roulantes&nbsp;:<\/p>\n<ul>\n<li>La version standard prend la forme d\u2019un <strong>champ de saisie de texte cliquable<\/strong>, qui se d\u00e9ploie alors en liste. \u00c0 n\u2019utiliser qu\u2019en cas de liste tr\u00e8s courte.<\/li>\n<li>Le <strong>menu d\u00e9roulant avec suggestion automatique<\/strong> vous propose les r\u00e9sultats de la liste correspondant aux premi\u00e8res lettres de votre recherche.<\/li>\n<li>La<strong> liste d\u00e9roulante avec saisie semi-automatique et suggestion automatique<\/strong> offre le m\u00eame avantage que la pr\u00e9c\u00e9dente, \u00e0 la subtilit\u00e9 pr\u00e8s qu\u2019elle vous sugg\u00e8re la fin du mot recherch\u00e9. Une forme tr\u00e8s aboutie de liste d\u00e9roulante pour vos utilisateurs\u2009!<\/li>\n<\/ul>\n<figure id=\"attachment_24118\" aria-describedby=\"caption-attachment-24118\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-24118\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/1wRk5yIbMc5DWT76Jd-ycfA.png\" alt=\"liste d\u00e9roulante\" width=\"700\" height=\"241\"><figcaption id=\"caption-attachment-24118\" class=\"wp-caption-text\">Source&nbsp;: uxdesign<\/figcaption><\/figure>\n<ul>\n<li>La <strong>liste d\u00e9roulante avec multis\u00e9lection<\/strong> permet \u00e0 l\u2019utilisateur de s\u00e9lectionner plusieurs \u00e9l\u00e9ments dans la liste.<\/li>\n<li>Si votre liste est tr\u00e8s longue (ce qui est d\u00e9conseill\u00e9), optez pour une <strong>liste d\u00e9roulante qui regroupe les \u00e9l\u00e9ments en cat\u00e9gories<\/strong>, ce qui facilite la recherche.<\/li>\n<li>Le <strong>s\u00e9lecteur de date<\/strong> peut s\u2019utiliser, mais uniquement pour planifier des r\u00e9unions ou des \u00e9v\u00e9nements. Dans tous les autres cas, les gens n\u2019ont pas besoin de conna\u00eetre le jour de la semaine qui va avec la date s\u00e9lectionn\u00e9e. \u00c9vitez aussi le calendrier d\u00e9roulant qui permet de faire d\u00e9filer les dates jusqu\u2019\u00e0 trouver (enfin) celle recherch\u00e9e\u2026 Rien de tel pour donner le bourdon \u00e0 vos utilisateurs qui doivent entrer leur date de naissance.<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/ui-design-10-commandements-a-suivre-interfaces\">UI Design&nbsp;: 10 commandements \u00e0 suivre pour vos interfaces<\/a><\/p><\/blockquote>\n<h2>2. Choisir le style de sa liste d\u00e9roulante<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24119\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/liste-deroulante-design.png\" alt=\"\" width=\"700\" height=\"285\"><\/p>\n<p>L\u2019apparence de la liste d\u00e9roulante peut \u00e9galement aider votre usager \u00e0 l\u2019utiliser correctement.<\/p>\n<ul>\n<li>En lieu et place du style classique, vous pouvez opter pour une liste d\u00e9roulante avec un <strong>menu d\u00e9tach\u00e9<\/strong>. Ce dernier s\u2019installe au-dessus ou en dessous de la fen\u00eatre de d\u00e9roulement.<\/li>\n<li>Pour un rendu plus ludique, vous pouvez choisir un menu d\u00e9roulant avec des<strong> bordures arrondies<\/strong>.<\/li>\n<li>En ajoutant de simples<strong> ic\u00f4nes au d\u00e9but de chacune des entr\u00e9es<\/strong> de votre liste d\u00e9roulante, vous casserez l\u2019aspect ennuyeux de cette derni\u00e8re.<\/li>\n<\/ul>\n<blockquote><p>Attention&nbsp;: \u00c9vitez toutefois la version avec images qui peut n\u00e9cessiter une maintenance p\u00e9nible \u00e0 chaque mise \u00e0 jour de la liste. D\u2019autant que lesdites images sont g\u00e9n\u00e9ralement assez peu visibles en raison des dimensions limit\u00e9es des champs de votre menu d\u00e9roulant.<\/p><\/blockquote>\n<h2>3. Ne pas n\u00e9gliger les diff\u00e9rents \u00e9tats de d\u00e9roulement<\/h2>\n<p>Chaque fois qu\u2019un utilisateur interagit avec l\u2019une des entr\u00e9es de votre liste d\u00e9roulante, celle-ci doit imp\u00e9rativement changer d\u2019\u00e9tat ou d\u2019apparence.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24121\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/autosuggest-723x319-1.png\" alt=\"\" width=\"723\" height=\"319\"><\/p>\n<ul>\n<li>Pour commencer, la liste d\u00e9roulante est g\u00e9n\u00e9ralement positionn\u00e9e en <strong>\u00e9tat actif<\/strong>. Si cet \u00e9tat est d\u00e9sactiv\u00e9, elle se grise et interdit alors \u00e0 votre visiteur de l\u2019utiliser.<\/li>\n<li>La classe <strong>hover<\/strong> permet de signaler au survol les \u00e9l\u00e9ments cliquables de votre liste d\u00e9roulante.<\/li>\n<li>La <strong>surbrillance<\/strong> est utile pour les utilisateurs qui utilisent la tabulation pour naviguer dans une interface. La liste est mise en surbrillance lorsqu\u2019elle est s\u00e9lectionn\u00e9e et l\u2019utilisateur n\u2019a plus qu\u2019\u00e0 taper sur entr\u00e9e pour l\u2019ouvrir.<\/li>\n<li>L\u2019\u00e9tat de mise au point, ou <strong>focus<\/strong>, met en lumi\u00e8re un \u00e9l\u00e9ment interactif, et prend g\u00e9n\u00e9ralement la forme d\u2019une fl\u00e8che directionnelle.<\/li>\n<li>Une fois l\u2019entr\u00e9e s\u00e9lectionn\u00e9e, votre liste retourne \u00e0 son \u00e9tat actif de d\u00e9part, \u00e0 la diff\u00e9rence pr\u00e8s qu\u2019elle sp\u00e9cifie \u00e0 pr\u00e9sent l\u2019\u00e9l\u00e9ment s\u00e9lectionn\u00e9 par l\u2019utilisateur.<\/li>\n<li>Enfin, l\u2019\u00e9tat de <strong>retour d\u2019\u00e9chec<\/strong> est \u00e0 pr\u00e9voir. En cas de champ incomplet, l\u2019\u00e9tat actif de votre liste d\u00e9roulante se pare d\u2019une bordure rouge.<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/application-mobile-ux-design\">Appli mobile&nbsp;: pourquoi faire attention \u00e0 l\u2019UX Design\u2009?<\/a><\/p><\/blockquote>\n<h2>4. Choisir entre espace r\u00e9serv\u00e9 ou vide<\/h2>\n<p>Lorsqu\u2019elle n\u2019est pas encore s\u00e9lectionn\u00e9e, l\u2019espace r\u00e9serv\u00e9 de votre liste d\u00e9roulante peut rester vide ou pr\u00e9senter du texte incitatif et explicatif.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24120\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/liste-deroulante-3.gif\" alt=\"\" width=\"500\" height=\"400\"><\/p>\n<ul>\n<li>Laisser ce champ vide est sans doute l\u2019option la plus simple.<\/li>\n<li>L\u2019espace r\u00e9serv\u00e9 peut mentionner un texte indicatif (gris\u00e9) de type \u00ab\u2009S\u00e9lectionner\u2009\u00bb ou \u00ab\u2009Choisir\u2009\u00bb.<\/li>\n<li>Derni\u00e8re option, vous pouvez opter pour une liste d\u00e9roulante qui fait appara\u00eetre l\u2019une des options de votre liste dans l\u2019espace r\u00e9serv\u00e9. \u00c9vitez toutefois cette option de pr\u00e9s\u00e9lection que l\u2019utilisateur peut valider sans y avoir pris garde.<\/li>\n<\/ul>\n<blockquote><p>Attention&nbsp;: La meilleure solution ici est celle de la coh\u00e9rence avec le reste de votre formulaire. Si l\u2019ensemble de vos champs de texte sont tous pourvus d\u2019un espace r\u00e9serv\u00e9, utilisez-en un pour votre liste d\u00e9roulante. Sinon, abstenez-vous-en.<\/p><\/blockquote>\n<h2>5. V\u00e9rifier l\u2019accessibilit\u00e9 de sa liste d\u00e9roulante<\/h2>\n<p>La question d\u2019accessibilit\u00e9 est aujourd\u2019hui au c\u0153ur de toutes les pr\u00e9occupations. Il en va de m\u00eame pour le menu d\u00e9roulant qui doit \u00eatre accessible \u00e0 tous et sur tout type de support.<\/p>\n<p>Voici une liste de points de v\u00e9rification pour s\u2019en assurer&nbsp;:<\/p>\n<ul>\n<li>L\u2019\u00e9tat actif de la liste d\u00e9roulante, \u00e9tiquette incluse, doit \u00eatre <strong>sup\u00e9rieur \u00e0 44&nbsp;pixels<\/strong>.<\/li>\n<li>Les entr\u00e9es de la liste doivent pr\u00e9senter une <strong>hauteur sup\u00e9rieure \u00e0 44&nbsp;pixels<\/strong> et un <strong>espace de 8&nbsp;pixels<\/strong> entre elles.<\/li>\n<li>Les <strong>couleurs<\/strong> doivent r\u00e9pondre aux normes de conformit\u00e9 AAA.<\/li>\n<li>La liste d\u00e9roulante doit offrir syst\u00e9matiquement un \u00e9tat de <strong>surbrillance<\/strong>.<\/li>\n<li>Votre liste d\u00e9roulante personnalis\u00e9e doit <strong>s\u2019ouvrir et se fermer correctement<\/strong>, m\u00eame lorsque la fen\u00eatre du navigateur est trop basse.<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/ui-ux-elements-navigation-a-connaitre\">UI\/UX design&nbsp;: 8 \u00e9l\u00e9ments de navigation \u00e0 conna\u00eetre<\/a><\/p><\/blockquote>\n<h2>Notre astuce pour d\u00e9velopper une liste d\u00e9roulante<\/h2>\n<p>La liste d\u00e9roulante plait \u00e9norm\u00e9ment aupr\u00e8s des visiteurs. Facile d&#8217;utilisation, intuitive et ergonomique, elle appara\u00eet g\u00e9n\u00e9ralement comme un tr\u00e8s bon ajout pour votre site internet.<\/p>\n<p>D\u00e9posez une <a href=\"https:\/\/graphiste.com\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>annonce gratuitement sur Graphiste.com<\/strong><\/a> pour concevoir votre futur site internet\u2009!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux formulaires de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs. G\u00e9n\u00e9ralement tr\u00e8s longues et inesth\u00e9tiques, elles ont tendance \u00e0 rebuter tout en \u00e9tant incontournables dans bien des cas. Sachez toutefois qu\u2019il existe 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes sur votre site et ne plus rendre fous [&hellip;]<\/p>\n","protected":false},"author":69,"featured_media":50063,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[101,27],"tags":[],"class_list":["post-24114","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>UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux formulaires de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs. G\u00e9n\u00e9ralement tr\u00e8s longues et\" \/>\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\/web-design-secrets-liste-deroulante\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux formulaires de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs. G\u00e9n\u00e9ralement tr\u00e8s longues et\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/\" \/>\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=\"2023-05-19T08:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:26:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"C\u00e9dric Reymbaut\" \/>\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=\"C\u00e9dric Reymbaut\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes\",\"datePublished\":\"2023-05-19T08:30:00+00:00\",\"dateModified\":\"2025-08-20T15:26:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/\"},\"wordCount\":1139,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png\",\"articleSection\":[\"UX design\",\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/\",\"url\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/\",\"name\":\"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png\",\"datePublished\":\"2023-05-19T08:30:00+00:00\",\"dateModified\":\"2025-08-20T15:26:27+00:00\",\"description\":\"Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux formulaires de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs. G\u00e9n\u00e9ralement tr\u00e8s longues et\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png\",\"width\":1024,\"height\":618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#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\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes\"}]},{\"@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\/fd068361dcde9cff7ed7697f613f839c\",\"name\":\"C\u00e9dric Reymbaut\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"caption\":\"C\u00e9dric Reymbaut\"},\"description\":\"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/cedric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes - Graphiste Blog","description":"Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux formulaires de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs. G\u00e9n\u00e9ralement tr\u00e8s longues et","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\/web-design-secrets-liste-deroulante\/","og_locale":"fr_FR","og_type":"article","og_title":"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes - Graphiste Blog","og_description":"Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux formulaires de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs. G\u00e9n\u00e9ralement tr\u00e8s longues et","og_url":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2023-05-19T08:30:00+00:00","article_modified_time":"2025-08-20T15:26:27+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png","type":"image\/png"}],"author":"C\u00e9dric Reymbaut","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"C\u00e9dric Reymbaut","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes","datePublished":"2023-05-19T08:30:00+00:00","dateModified":"2025-08-20T15:26:27+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/"},"wordCount":1139,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png","articleSection":["UX design","Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/","url":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/","name":"UX Design\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png","datePublished":"2023-05-19T08:30:00+00:00","dateModified":"2025-08-20T15:26:27+00:00","description":"Les listes d\u00e9roulantes int\u00e9gr\u00e9es aux formulaires de nos sites internet sont trop souvent mal per\u00e7ues par les utilisateurs. G\u00e9n\u00e9ralement tr\u00e8s longues et","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/01\/Image-a-la-une-liste-deroulante.png","width":1024,"height":618},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/web-design-secrets-liste-deroulante\/#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\u00a0: 5 secrets pour ma\u00eetriser les listes d\u00e9roulantes"}]},{"@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\/fd068361dcde9cff7ed7697f613f839c","name":"C\u00e9dric Reymbaut","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","caption":"C\u00e9dric Reymbaut"},"description":"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.","sameAs":["https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/"],"url":"https:\/\/graphiste.com\/blog\/author\/cedric\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/24114","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\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=24114"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/24114\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/50063"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=24114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=24114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=24114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}