{"id":1811,"date":"2017-08-29T06:00:19","date_gmt":"2017-08-29T13:00:19","guid":{"rendered":"https:\/\/membermouse.com\/?p=1811"},"modified":"2026-06-16T14:05:41","modified_gmt":"2026-06-16T18:05:41","slug":"meilleures-pratiques-en-matiere-dinterface-utilisateur-pour-la-creation-de-sites-dadhesion","status":"publish","type":"post","link":"https:\/\/membermouse.com\/fr\/developer-tools\/ux-best-practices-for-building-membership-sites\/","title":{"rendered":"Meilleures pratiques UX pour la cr\u00e9ation de sites d'adh\u00e9sion"},"content":{"rendered":"You have landing pages, CTAs, contact forms and all of the basic design features just like everyone else. But the difference between a membership site and a normal site is that you also have people returning on a daily or weekly basis for a very specific purpose: community.\r\n\r\nHaving a community-based site is not just about creating a static work of art. You have to create something interactive that fosters a sense of community and contribution.\r\n\r\nDesigning for a highly interactive site comes with certain challenges and requires certain solutions, especially if you\u2019re going to make the user experience rich and fulfilling for everyone involved.\r\n\r\nHere are a few of the best practices to keep in mind while diving into the design of a community-based membership site\u2026\r\n\r\n\n<h2><strong>R\u00e9fl\u00e9chissez \u00e0 vos objectifs<\/strong><\/h2>\r\nIn the words of Jeff Horvath, \u201cA good user experience, like a measurable ROI, doesn\u2019t typically happen by accident. It is the result of careful planning, analysis, investment and continuous improvement.\u201d\r\n\r\nPlanning for the unique needs of a community is different than planning for visitors to a blog, or shoppers to an e-commerce site. Online communities are more organic, and the value comes from natural interactions rather than content or product promotion.\r\n\r\nA community-based site will essentially have two goals in mind: to promote the community and to make it easy to contribute. Every part of your UX needs to revolve around these two things.\r\n\r\nSo what does that entail, exactly?\r\n<h2><strong>Tenir compte du comportement de l'utilisateur<\/strong><\/h2>\r\nLes humains sont notoirement impr\u00e9visibles et la gestion du comportement des membres peut s'av\u00e9rer difficile. Mais, heureusement, il y a quelques choses que les membres ont tendance \u00e0 faire de mani\u00e8re assez constante : naviguer, chercher et contribuer.\r\n<h3>Navigation<\/h3>\r\nKeeping members happy is about giving them a certain level of value for their membership. Your users are constantly asking, \u201cShould I stay?\u201d and \u201cHow long do I need to be here?\u201d\r\n\r\nIf you\u2019re looking to provide value for members while giving them a chance to consistently return to your site, browsing is the perfect way to do that. Your design should immediately tell members where to go and what to look at.\r\n\r\nConsider including elements such as:\r\n<ul>\r\n \t<li>Pr\u00e9visualisation du contenu avec des titres en gras<\/li>\r\n \t<li>Images en vignettes<\/li>\r\n \t<li>Des appels \u00e0 l'action pour aider les utilisateurs \u00e0 naviguer<\/li>\r\n \t<li>Acc\u00e8s clair \u00e0 des contenus suppl\u00e9mentaires (cat\u00e9gories, r\u00e9pertoires, archives)<\/li>\r\n \t<li>Contenu sous diverses formes (fils de discussion, messages, articles, t\u00e9l\u00e9chargements, images, etc.)<\/li>\r\n<\/ul>\r\n<img class=\"embed-center size-full wp-image-1816\" src=\"https:\/\/membermouse.com\/wp-content\/uploads\/2016\/08\/Membership.png\" alt=\"L&#039;adh\u00e9sion\" width=\"1530\" height=\"730\" \/>\r\n<h3>Recherche<\/h3>\r\nIf your members aren\u2019t browsing for general content, they\u2019ll be searching for specific information. At some point they will expect a functioning, helpful, and relevant search tool that doesn\u2019t put the burden on them to wade through unnecessary or irrelevant content.\r\n\r\nSearch filters should focus on content types, members, topics, content dates and user ratings to give a variety of search options for optimal user experience.\r\n<h3>Contribuer<\/h3>\r\nOne of the biggest advantages of a membership site is contribution. Unlike blogs where the most interaction you\u2019ll receive is a like, share or comment, community-based sites tend to provide more interactive value.\r\n\r\nGood UX options for member contribution include:\r\n<ul>\r\n \t<li>Forums communautaires<\/li>\r\n \t<li>Contenu et formulaires permettant d'\u00e9tiqueter d'autres membres<\/li>\r\n \t<li>Options de partage des photos et vid\u00e9os des membres<\/li>\r\n \t<li>T\u00e9l\u00e9chargement de contenu g\u00e9n\u00e9r\u00e9 par les membres<\/li>\r\n<\/ul>\r\n<img class=\"embed-center size-full wp-image-1820\" src=\"https:\/\/membermouse.com\/wp-content\/uploads\/2016\/08\/v4-op-sc-forum.png\" alt=\"v4-op-sc-forum\" width=\"1018\" height=\"592\" \/>\r\n\r\nLa cl\u00e9 du succ\u00e8s pour chacune de ces m\u00e9thodes est que l'engagement des membres doit se faire sans effort. Les concepteurs UX devraient inclure des CTA forts, des boutons bien visibles et des formulaires simples pour permettre aux utilisateurs de saisir, r\u00e9viser et publier rapidement et facilement.\r\n<h2><strong>Consid\u00e9rer l'interface utilisateur de l'inscription<\/strong><\/h2>\r\nAnother major difference between the UX for a regular site and a membership site is login.\r\n\r\nYour membership site will essentially have two fronts: your homepage before sign-in and your homepage after sign-in.\r\n\r\nYour after sign-in page contains different content and features \u2013 usually access to a member dashboard or other interactive options not available to visitors \u2013 but the branding and general feel of the post sign-in page should be the same.\r\n\r\nFor example, Kathryn Hocking\u2019s E-Course Launch Formula program does a great job of sticking to branding, style guides, and theme throughout her whole site, including her pre-sign-in content, her sales page, emails and even into her members area (post-sign-in pages).\r\n\r\n<img class=\"embed-center size-full wp-image-1814\" src=\"https:\/\/membermouse.com\/wp-content\/uploads\/2016\/08\/ecourse-launch-formula1.jpg\" alt=\"ecourse-launch-formula1\" width=\"600\" height=\"536\" \/>\r\n\r\nVoici quelques \u00e9l\u00e9ments \u00e0 inclure dans vos pages de pr\u00e9-inscription :\r\n<ul>\r\n \t<li>Des CTA forts qui invitent les utilisateurs \u00e0 s'inscrire<\/li>\r\n \t<li>Propositions de valeur pour les non-membres<\/li>\r\n \t<li>CTA et signaux visuels indiquant aux membres o\u00f9 se connecter<\/li>\r\n<\/ul>\r\nVoici quelques exemples d'\u00e9l\u00e9ments \u00e0 inclure dans vos pages d'inscription :\r\n<ul>\r\n \t<li>Un flux d'activit\u00e9s communautaires<\/li>\r\n \t<li>Liens personnalis\u00e9s<\/li>\r\n \t<li>Dernier contenu<\/li>\r\n \t<li>CTA pour s'inscrire \u00e0 des \u00e9v\u00e9nements, t\u00e9l\u00e9charger du contenu, etc.<\/li>\r\n \t<li>Notifications d'\u00e9v\u00e9nements ou de nouvelles de la communaut\u00e9<\/li>\r\n<\/ul>\r\n<img class=\"embed-center size-full wp-image-1819\" src=\"https:\/\/membermouse.com\/wp-content\/uploads\/2016\/08\/successful-membership-site-directory.jpg\" alt=\"annuaire des sites d&#039;adh\u00e9sion r\u00e9ussie\" width=\"600\" height=\"596\" \/>\r\n\r\nBien que chaque page contienne des \u00e9l\u00e9ments diff\u00e9rents et ait un objectif diff\u00e9rent, il est pr\u00e9f\u00e9rable d'utiliser la m\u00eame image de marque et le m\u00eame guide stylistique pour les deux pages afin de cr\u00e9er un sentiment d'unit\u00e9 parmi les utilisateurs.\r\n<h2><strong>Tenir compte des profils des membres<\/strong><\/h2>\r\nAnother more complicated aspect of member sites is the member profiles themselves. UX designers should think of these profiles like a member\u2019s online identity \u2013 they are snapshots that give each member a sense of belonging, so what you allow them to include (or not include) in their profile matters.\r\n\r\nA good profile page should include elements of an online persona \u2013 an \u201cabout me\u201d section, link to a personal website, contact information, photos, etc. \u2013 as well as featuring examples of how they\u2019ve contributed to the community.\r\n\r\n<img class=\"embed-center size-full wp-image-1817\" src=\"https:\/\/membermouse.com\/wp-content\/uploads\/2016\/08\/membersuite-portal-annotations.jpg\" alt=\"portail par d\u00e9faut\" width=\"1200\" height=\"1178\" \/>\r\n\r\nLorsque vous envisagez la conception d'un profil, tenez compte des \u00e9l\u00e9ments suivants :\r\n<ul>\r\n \t<li>Affiliations personnelles et professionnelles<\/li>\r\n \t<li>Pr\u00e9occupations en mati\u00e8re de protection de la vie priv\u00e9e<\/li>\r\n \t<li>Photos et avatars<\/li>\r\n \t<li>Badges et r\u00e9compenses pour l'engagement communautaire<\/li>\r\n \t<li>Liste des niveaux d'adh\u00e9sion (le cas \u00e9ch\u00e9ant)<\/li>\r\n \t<li>Boutons de modification pour mettre \u00e0 jour votre propre profil<\/li>\r\n \t<li>\u00c9tat de consultation seulement pour voir le profil d'un autre membre<\/li>\r\n \t<li>\"CTA \"Renouveler l'adh\u00e9sion<\/li>\r\n \t<li>Liens vers des bulletins d'information ou des contenus vedettes<\/li>\r\n \t<li>Sujets ou cat\u00e9gories du forum<\/li>\r\n \t<li>Notifications d'\u00e9v\u00e9nements et de nouvelles<\/li>\r\n<\/ul>\r\nL'objectif principal d'un bon profil de membre est de pr\u00e9senter sa personnalit\u00e9 aux autres membres, d'am\u00e9liorer l'engagement g\u00e9n\u00e9ral et de fournir des mises \u00e0 jour et des informations importantes pour le membre \u00e9galement.\r\n<h2><strong>R\u00e9flexions finales<\/strong><\/h2>\r\nDesigning for a community site is ultimately more about UX than it is about making things pretty, but both things go hand-in-hand.\r\n\r\nIt\u2019s important to have a strong design but to focus on elements that are unique to communities like having browser-friendly content, powerful search engines and areas for members to contribute.\r\n\r\nIt\u2019s also best practice to focus on creating a good UX for non-members before they sign in, as well as for members after sign-in, with a highly functional member dashboard and profile that showcases personas and allows for further engagement.\r\n\r\nIf the UX is done right, the community will grow and be of increasing value to members and non-members alike.","protected":false},"excerpt":{"rendered":"<p>Les sites d'adh\u00e9sion sont particuliers. Voici ce qu'il faut savoir pour concevoir une interface utilisateur de qualit\u00e9...<\/p>","protected":false},"author":10821,"featured_media":3170,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_strive_checklists":"\"\"","_strive_active_checklist":"","_strive_post_notes":"","footnotes":""},"categories":[67],"tags":[65,53,91,90],"class_list":["post-1811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-tools","tag-membership","tag-membership-business","tag-user-experience","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/posts\/1811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/users\/10821"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/comments?post=1811"}],"version-history":[{"count":1,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/posts\/1811\/revisions"}],"predecessor-version":[{"id":22150,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/posts\/1811\/revisions\/22150"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/media\/3170"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/media?parent=1811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/categories?post=1811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/tags?post=1811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}