{"id":1811,"date":"2017-08-29T06:00:19","date_gmt":"2017-08-29T13:00:19","guid":{"rendered":"https:\/\/membermouse.com\/?p=1811"},"modified":"2020-05-19T16:47:23","modified_gmt":"2020-05-19T23:47:23","slug":"praticas-recomendadas-de-ux-para-criar-sites-de-associacao","status":"publish","type":"post","link":"https:\/\/membermouse.com\/pt\/ferramentas-para-desenvolvedores\/praticas-recomendadas-de-ux-para-criar-sites-de-associacao\/","title":{"rendered":"UX Best Practices for Building Membership Sites"},"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[content_upgrade cu_id=\"1810\"]Don\u2019t miss: 7 Sign-Up Pages That Will Totally Convert Non-Members[content_upgrade_button]Click Here[\/content_upgrade_button][\/content_upgrade]\r\n<h2><strong>Consider Your Goals<\/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>Consider User Behavior<\/strong><\/h2>\r\nHumans are notoriously unpredictable, and managing member behavior can be difficult. But, thankfully, there are a few things that members tend to do fairly consistently: browse, search and contribute.\r\n<h3>Browsing<\/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>Content previews with bold headlines<\/li>\r\n \t<li>Thumbnail imagery<\/li>\r\n \t<li>Calls-to-action to help users browse<\/li>\r\n \t<li>Clear access to additional content (categories, directories, archives)<\/li>\r\n \t<li>Content in a variety of forms (forum threads, posts, articles, uploads, 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=\"Membership\" width=\"1530\" height=\"730\" \/>\r\n<h3>Searching<\/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>Contributing<\/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>Community forums<\/li>\r\n \t<li>Content and forms that allows tagging other members<\/li>\r\n \t<li>Sharing options for member photos and videos<\/li>\r\n \t<li>Uploading member-generated content<\/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\nThe key to success for any of these methods, is that member engagement must be effortless. UX designers should include strong CTAs, prominent buttons and simple forms to allow users to input, review and publish quickly and easily.\r\n<h2><strong>Consider Sign-In UX<\/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\nHere are some things to include in your pre-sign-in pages:\r\n<ul>\r\n \t<li>Strong CTAs that invite users to join<\/li>\r\n \t<li>Value propositions for non-members<\/li>\r\n \t<li>CTAs and visual cues showing members where to login<\/li>\r\n<\/ul>\r\nSome things to include in your post-sign-in pages could include:\r\n<ul>\r\n \t<li>A community activity feed<\/li>\r\n \t<li>Personalized links<\/li>\r\n \t<li>Latest content<\/li>\r\n \t<li>CTAs to register for events, download content, etc.<\/li>\r\n \t<li>Notifications of events or community news<\/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=\"successful-membership-site-directory\" width=\"600\" height=\"596\" \/>\r\n\r\nWhile each page includes different elements and has a\u00a0different purpose, it\u2019s best to use the same branding and style guide for both to create a sense of unity among users.\r\n<h2><strong>Consider Member Profiles<\/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=\"portal-default\" width=\"1200\" height=\"1178\" \/>\r\n\r\nWhen considering profile design, consider the following:\r\n<ul>\r\n \t<li>Personal and professional affiliations<\/li>\r\n \t<li>Privacy concerns<\/li>\r\n \t<li>Photos and avatars<\/li>\r\n \t<li>Badges and awards for community engagement<\/li>\r\n \t<li>Membership level listing (if applicable)<\/li>\r\n \t<li>Edit buttons for updating your own profile<\/li>\r\n \t<li>View-only state for seeing another member\u2019s profile<\/li>\r\n \t<li>\u201cRenew membership\u201d CTAs<\/li>\r\n \t<li>Links to newsletters or featured content<\/li>\r\n \t<li>Forum topics or categories<\/li>\r\n \t<li>Event and news notifications<\/li>\r\n<\/ul>\r\nThe main goal of a good member profile is to showcase his or her personality for other members, to improve overall engagement and to provide updates and important information for the member, too.\r\n<h2><strong>Final Thoughts<\/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.\r\n\r\n[content_upgrade cu_id=\"1810\"]Need some inspiration for your pre-sign-in pages? Check out our list[content_upgrade_button]Click Here[\/content_upgrade_button][\/content_upgrade]","protected":false},"excerpt":{"rendered":"<p>Os sites de associa\u00e7\u00e3o s\u00e3o especiais. Aqui est\u00e1 o que voc\u00ea precisa saber sobre como projetar uma excelente experi\u00eancia do usu\u00e1rio para eles...<\/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\/pt\/wp-json\/wp\/v2\/posts\/1811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/users\/10821"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/comments?post=1811"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/posts\/1811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/media\/3170"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/media?parent=1811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/categories?post=1811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/tags?post=1811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}