Prioritizing Your Content Properly<\/h2>\n\n\n\n
We talked about the importance of your site\u2019s content hierarchy a bit in part four<\/a> of our series, but we\u2019ll expand more upon that basic analysis here. Content prioritization, or your content hierarchy, means nailing down the exact order in which your audience should digest the information on your site to ensure they have the best, fullest understanding of the benefits of your product or service.<\/p>\n\n\n\n To this point, you may have heard designers talk about the importance of placing important information above the fold<\/a>. \u201cAbove the fold\u201d is an old newspaper term that transitioned to web design terminology in the early days of the internet. It refers to any content that is displayed to the user visiting your site, without scrolling\u2014much like a newspaper would put the most important story above its mid-page fold. <\/p>\n\n\n\n However, the concept of above-the-fold content, much like most print newspapers, is a bit outdated for a few reasons. For starters, many users now visit websites from smaller screens (like phones and tablets) as mobile traffic continues to outpace<\/a> desktop. For that reason, many site visitors expect<\/em> to scroll, so above-the-fold content holds less weight than it once did. <\/p>\n\n\n\n That\u2019s not to say above-the-fold content can\u2019t be useful\u2014landing pages<\/a> offer a great example\u2014but be wary of placing too much importance on it. When you\u2019re designing, think about the Serial Position Effect<\/a> instead. <\/p>\n\n\n\n A term coined by German psychologist Hermann Ebbinghaus, the Serial Position Effect refers to the fact that people are most likely to remember the first and last items on a list. This is because our brains show favoritism to items we see first (primacy effect) and items we\u2019ve seen most recently (recency effect).<\/p>\n\n\n\n This tactic works well when you need users to recall only one or two important takeaways from your content (perhaps a product name or a major benefit). For more complex topics with multiple steps or a lot of information to process, however, you\u2019ll want to take a different approach.<\/p>\n\n\n\n A Progressive Disclosure<\/a> tactic is a better way to help your users understand highly complex topics. It refers to the technique of spreading information across multiple screens and requiring interactions to move from one to the next. This helps lower the chance that your end user will feel overwhelmed by the information presented. Truncated content and accordion displays<\/a> are just two of the common ways designers use progressive disclosure in web design.<\/p>\n\n\n\n Both of these effects will help you tap into the natural human thought patterns that can solidify your message in the minds of consumers. Before they even start reading your content, though, users might decide to navigate through your site for something specific. The next section will help you make that process seamless for your visitors.<\/p>\n\n\n\n Most website navigation buttons are structured in one of two ways: in a bar across the top of the page or in a hamburger menu<\/a> off to one side. This type of navigation has become almost second nature for users, and as the saying goes, \u201cif it ain\u2019t broke, don\u2019t fix it.\u201d<\/p>\n\n\n\n When you\u2019re designing your navigation, it\u2019s easy to follow the standard, but there are a few instances where you might want to shake up your structure. The first idea you should concern yourself with is Hick\u2019s Law<\/a>. <\/p>\n\n\n\n In the early 1950s, two researchers, William Edmund Hick and Ray Hyman, examined the relationship between the amount of stimuli and the amount of time it took an individual to make a decision. Their conclusion? Too many options is paralyzing. An expansive navigation menu with tons of clickables, then, may be too overwhelming to new users.<\/p>\n\n\n\n Instead, your navigation buttons should be clear, well-placed, and few. For larger sites, nest buttons of lower importance under the umbrella of another button in your navigation. For example, Amazon\u2019s top-level navigation is fairly simple, but by hovering, users get an expanded view of their options.<\/p>\n\n\n\n By limiting the number of buttons you initially display to viewers, you help them narrow down their choices and make better navigatory decisions. You can also use the primacy effect<\/a> to push your users to take the action you\u2019d most like them to take. <\/p>\n\n\n\n While most websites organize their navigation in the same way (About page, then Services or Products, then Contact), placing your most important content first will help it gain more visibility. So, if your primary objective is getting potential clients to contact you, try placing the Contact page button first in your navigation.<\/p>\n\n\n\n The navigation menu is where many designers struggle to find the right balance between their aesthetic vision and the end user\u2019s experience. The aesthetic-useability<\/a> effect<\/a> refers to the correlation between a pleasing design and a user\u2019s tendency to overlook functional issues.<\/p>\n\n\n\n As it happens, users do<\/em> tend to judge a book by its cover, and they\u2019ll be more forgiving of functional problems if the site they\u2019re on looks nice. So, when you\u2019re completing your UX testing, take extra care to look through feedback from users who focus on the positive effects of your design but have little to say about how it operates. Drill into their results to make sure that they\u2019re not forgiving your functional failures in favor of praising your design.<\/p>\n\n\n\n Even though users are spending more time online than ever before<\/a>, they\u2019re becoming less likely<\/a> to give out personal data. This is probably one of the reasons most people have at least two email addresses<\/a>. <\/p>\n\n\n\n Only one is the primary email address that\u2019s checked regularly. The other is, unfortunately, rarely checked. Either it\u2019s an old account the user has lost access to, or it\u2019s being used when an email address is required for access to something, but the person behind the username doesn\u2019t want a ton of marketing emails flooding their main inbox.<\/p>\n\n\n\n When a user fills out a form field to contact your business or download gated content, whether it\u2019s actively or subconsciously, they go through a quick cost-benefit analysis in their minds. They\u2019re thinking about whether or not filling out the form is worth giving up space in their inbox\u2014and in their mind.<\/p>\n\n\n\n The best way to ensure your value outweighs your users\u2019 hesitation is to make your form fields as easy to use as possible. While it\u2019s tempting to ask a user for lots of demographic information so you can get the most qualified lead possible, doing so runs the risk of losing them entirely. Optimize your forms for auto-fill to help your users input their information even more quickly, saving them from some of the cost of submission. <\/p>\n\n\n\n Additionally, if you find there are questions you feel you\u2019d like to include but that may require too much of some users\u2014like a field for a short comment\u2014making it optional will allow visitors the opportunity to lower their cost of entry even further.<\/p>\n\n\n\n You can also create psychological incentives for filling out a form field throughout the user journey to help push your visitors to submit. This is called priming<\/a>, which is the act of intentionally using words or images that are relative to one another to create faster, more memorable associations in the brain. These small triggers can mean the difference between a user inputting their \u201cjunk email address\u201d or their primary one.<\/p>\n\n\n\n A simple way some web designers prime their visitors to fill out a gate or contact form is through semantic priming<\/a>. You can use semantic priming to create linguistic associations that subconsciously push visitors to submit a form. For example, when marketers promise a \u201cquick\u201d or \u201ceasy\u201d solution to an issue with the content on the other end of the gate, those trigger words may also color the way in which the visitor sees the action of typing in their personal data. <\/p>\n\n\n\n When you\u2019re an online seller, your checkout process is one of the most important aspects of your site\u2019s design. It\u2019s the make or break moment for conversion, so if something goes awry or if it takes too long, you may miss out on a sale.<\/p>\n\n\n\n This is when a lot of marketing teams will rely on digital banner campaigns to remind users about their product. However, the effects of \u201cbanner blindness\u201d can curb the progress of even the best laid digital campaign.<\/p>\n\n\n\n Banner blindness is a type of selective disregard<\/a> in which people will naturally ignore things they deem irrelevant to the task at hand. That\u2019s why it\u2019s so easy to tune out digital ads when you\u2019re scrolling for a recipe or billboards when you\u2019re driving. The brain will auto-filter as much irrelevant information as it can, and since ads are everywhere, they\u2019re one of the first things to go. So, how to combat banner blindness? <\/p>\n\n\n\n If possible, abandoned cart emails or on-page pop-up messages can help turn your potential buyer into an actual buyer. These messages are an attempt to bring the user\u2019s attention back to the checkout process. To further spur the subconscious into action, use the Zeigarnik effect<\/a>.<\/p>\n\n\n\n This is an observation made by Lithuanian psychologist Bluma Zeigarnik that stipulates tasks which have been interrupted or are unfinished are more easily recalled than tasks that are complete. It\u2019s the reason television shows often include cliffhangers; you\u2019re more likely to remember\u2014and return to\u2014something that feels unfinished.<\/p>\n\n\n\n So, when you display a pop up about a user\u2019s abandoned cart, including an incomplete progress bar or numbered list of steps will help them recall what they were doing when they left their cart, including the \u201ccheckout\u201d mindset they were in. That incentivizes the buyer to go back and finish what they were doing. The proposed satisfaction of a completed task may be the final push the user needed to finish their purchase.<\/p>\n\n\n\n The call to action is arguably the most important piece of your site. No matter what your goals are in creating a website\u2014a sale, gathering data, building a social following\u2014the call to action is where you get to ask for it.<\/p>\n\n\n\n For most sites, you\u2019ll probably have multiple calls to action with varying degrees of importance placed on them. If your primary goal is to sell products, for example, you\u2019d probably still have secondary requests like subscribing to a newsletter or referring a friend. This is great, because not every user wants to follow the exact same journey, so giving them options allows them to choose their own path.<\/p>\n\n\n\n This is another instance in which Hick\u2019s Law comes into play. Also called the paradox of choice<\/a>, this occurs when an excessive amount of options causes decision paralysis among users. To save your users from the paradox of choice and help them make quick decisions, identify and strictly adhere to using only two-to-three calls to action. This will help speed up your user\u2019s processing time and allow them to narrow down the best choice for their needs more effectively.<\/p>\n\n\n\n As one of the most important aspects of your site, the call to action should also call for a lot of attention. An easy way to make these sections stand out is by using the Von Restorff effect<\/a>. Also known as the isolation effect, this is the observation that, when multiple stimuli are presented, an item that is noticeably different from the others will be more easily remembered. <\/p>\n\n\n\n So, when you\u2019re creating your calls to action, identify and differentiate the one choice you\u2019d most like your visitors to take. To continue using the example above in which users are asked to either buy a product, subscribe to a newsletter, or refer a friend, there\u2019s a clear primary goal: making a sale.<\/p>\n\n\n\n By differentiating the sales call to action from the other two using colors, size, shape, typography, placement, or some other physical element, you call greater attention to your most important request. While every page should have at least one call to action, you can promote one over another and incentivize users to take the most important action using the Von Restorff effect.<\/p>\n\n\n\n There is so much more to uncover and understand about the psychological impacts a website\u2019s design can have on its users, and this series only scratches the surface. That\u2019s why we\u2019re continuously dissecting design from all angles and curating content with freelancers and design professionals in mind.<\/p>\n\n\n\n While we’re passionate about sharing great developer and designer resources, we’re even more passionate about creating the best WordPress hosting<\/a> experience for our customers. Check out our plans<\/a> to learn more about your options with WP Engine!<\/p>\n","protected":false},"excerpt":{"rendered":" Every choice a designer makes will impact the way a consumer interacts with t a product, service, or company. This is especially true for the way a website is organized. In this final installation of our series on the psychology of design, we\u2019ll take a deep dive into some of the principles of psychology that…<\/span><\/span><\/p>\n","protected":false},"author":318,"featured_media":142358,"template":"","resource-topic":[1396],"resource-role":[895,1397,897],"resource-type":[916],"class_list":["post-46120","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nStructuring Your Navigation<\/h2>\n\n\n\n
Creating Gates and Form Fields Your Visitors will Use<\/h2>\n\n\n\n
Solidifying Conversations Through Carts and Checkouts<\/h2>\n\n\n\n
![\"Checkout](\"https:\/\/wpengine.com\/wp-content\/uploads\/2023\/04\/internal-1.jpeg\")
Creating the Call to Action<\/h2>\n\n\n\n
![\"\"](\"https:\/\/wpengine.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-06-at-3.09.51-PM-1024x612.png\")
The Minds Behind Great Design<\/h2>\n\n\n\n