{"id":162861,"date":"2022-01-28T09:00:50","date_gmt":"2022-01-28T09:00:50","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=162861"},"modified":"2022-01-28T20:58:42","modified_gmt":"2022-01-28T20:58:42","slug":"logo-placement","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/logo-placement\/","title":{"rendered":"Where to Put Your Logo? What the Research Says"},"content":{"rendered":"<p>You\u2019ve got a <a href=\"https:\/\/wpmudev.com\/blog\/designing-logos-tips-resources\/\" target=\"_blank\" rel=\"noopener\">beautifully designed logo<\/a>. Well done. Now, what do you do with it?<\/p>\n<p>Once your high quality logo is designed and ready to go, it should appear on all your branded material, including your WordPress website. Typically, there are three schools of thought as to where logos can go: in the top-left, top-middle, or top-right corners of a page. So this begs the question: which position is right for <em>your<\/em> logo?<\/p>\n<p>If we\u2019re going strictly based on UX logic, then your logo belongs in the top-left corner of your website. No questions asked. There are two reasons for this:<\/p>\n<ol>\n<li>For those of us with a native language that reads from left to right, our eyes naturally look to the left first.<\/li>\n<li>In the earlier years of web design, logos were always on the left, and that\u2019s where most people assume they are located now.<\/li>\n<\/ol>\n<p>Despite what logic says, there are some websites that have eschewed the norm for logo placements in the center or right corner of a website. Would a unique placement of your logo fit better with your brand identity?<\/p>\n<p>Let\u2019s take a closer look at what the studies show, and see if left really is right for your site.<\/p>\n<h2>Experts Weigh In: Where to Place Your Logo?<\/h2>\n<p>According to the <a href=\"https:\/\/www.nngroup.com\/\" rel=\"noopener\" target=\"_blank\">Nielsen Norman Group<\/a>, there are three purposes that logos serve on modern websites:<\/p>\n<ul>\n<li>They remind visitors where they are. In other words, whose website am I on?<\/li>\n<li>They allow for easy navigation to the home page since most websites no longer include a &#8220;Home&#8221; button in the navigation.<\/li>\n<li>They aid in brand recognition as the logo always remains there at the top of the site, and sometimes even follows visitors as they scroll down a page.<\/li>\n<\/ul>\n<p>The <a href=\"https:\/\/www.nngroup.com\/articles\/logo-placement-brand-recall\/\" rel=\"noopener\" target=\"_blank\">NNGroup<\/a> performed two studies to find the ideal logo location. Here is what they found:<\/p>\n<ul>\n<li><a href=\"#leftvsright\">Left vs. Right<\/a><\/li>\n<li><a href=\"#leftvscenter\">Left vs. Center<\/a><\/li>\n<li><a href=\"#thewinneris\">The Winner Is&#8230;<\/a><\/li>\n<\/ul>\n<h3 id=\"leftvsright\">Left vs. Right<\/h3>\n<p>In the left-versus-right study, the NNGroup tested and observed the response of 128 users. Similar to an <a href=\"https:\/\/wpmudev.com\/blog\/ab-testing\/\" target=\"_blank\" rel=\"noopener\">A\/B test<\/a>, each user was shown only one version of a website: either the original with the logo on the left or the one the NNGroup manipulated in order to place the logo and navigation on the right.<\/p>\n<p>They gave the users a minute\u2019s time to review their version of the website. They were then asked a series of questions and shown photos of 10 hotel websites. This test aimed to establish what sort of effect logo placement had on brand recall.<\/p>\n<p>These were the results:<\/p>\n<ul>\n<li><b>Left-aligned logos lead to greater brand recall.<\/b> Specifically, the average brand recall for left-aligned logos was 39% as opposed to 21% for the right-aligned version.<\/li>\n<li><b>Left-aligned logos are more likely to be labeled &#8220;unique.&#8221;<\/b>\u00a0Despite the traditional placement of a left-aligned logo, respondents were still more likely to label a left-aligned logo as &#8220;unique&#8221; and &#8220;stylish&#8221; than one that appeared on the right.<\/li>\n<\/ul>\n<h3 id=\"leftvscenter\">Left vs. Center<\/h3>\n<p>The Nielsen Norman Group conducted an <a href=\"https:\/\/www.nngroup.com\/articles\/centered-logos\/\" rel=\"noopener\" target=\"_blank\">additional study<\/a> to discover what happens when users were exposed to a center-aligned logo. They conducted two different tests to determine the viability of a centered logo.<\/p>\n<p>Unlike the A\/B test conducted between left- and right-aligned logos, this first survey provided\u00a050 users each with one retail website to interact with. Eight of those websites had a centered logo whereas six had a left-aligned logo. They were then asked to complete different tasks that would test their ease in using the navigation and return to the home page.<\/p>\n<p>This was the result:<\/p>\n<ul>\n<li><b>Left-aligned logos are better for navigation.<\/b> In the study, only 4% of users failed to navigate home in a single click when the logo appeared on the left. When the logo was centered, however, 24% of users failed to get there in one click.<\/li>\n<\/ul>\n<p>In the second of these tests, the NNGroup presented 128 users with five different hotel websites. Four of the logos showed variations of a logo on either the left or in the center, while the fifth site included a right-aligned logo. Users were then asked a series of questions to determine brand recall.<\/p>\n<p>This was the result:<\/p>\n<ul>\n<li><b>Brand recall is unaffected by the difference between left or centered logos.<\/b> Despite presenting users with variations of the same logo in different spots, brand recall was inconsistent in this comparison between left-aligned and centered logos.<\/li>\n<\/ul>\n<h3 id=\"thewinneris\">The Winner Is&#8230;<\/h3>\n<p>After reviewing the results from the logo placement studies, it appears that logic does prevail:<\/p>\n<p><b>Left is best.<\/b><\/p>\n<p>Here\u2019s why:<\/p>\n<ul>\n<li>Many people don\u2019t think about looking in the right-hand corner of a website for a logo, and so brand recall can be severely compromised as a result.<\/li>\n<li>Many people are conditioned to look for a navigation in one of the top corners of a site, so placing a logo and\/or navigation in the center confuses the process of getting around a website.<\/li>\n<\/ul>\n<p>In summary, left-aligned logos are ideal as they are located exactly where the eye is naturally drawn.<\/p>\n<p>Just remember that web design\u2019s primary concern should always be with the user experience. While a centered logo may look sleek, it probably isn\u2019t ideal if you have more than one page on your website (and you expect people to visit those other pages). The same goes for a right-aligned logo. It may seem like you\u2019re giving your site a unique edge, but you may hurt your brand\u2019s recall in the process.<\/p>\n<p>It\u2019s also important to keep in mind that it\u2019s not just logo placement that matters. Logos should be exported in a high-quality file format, created using a legible font face, and positioned on top of white space so that background imagery, shadows, and colors can\u2019t distract from it.<\/p>\n<h3>Wrapping Up<\/h3>\n<p>If you\u2019re trying to get creative with your WordPress site\u2019s design, there are other ways to go about doing it. You could create a <a href=\"https:\/\/wpmudev.com\/blog\/no-fail-landing-page-tips\/\" target=\"_blank\" rel=\"noopener\">killer landing page<\/a>, add <a href=\"https:\/\/wpmudev.com\/blog\/web-push-notifications-pros-cons\/\" target=\"_blank\" rel=\"noopener\">push notifications<\/a>, or <a href=\"https:\/\/wpmudev.com\/blog\/designing-buttons-calls-to-action\/\" target=\"_blank\" rel=\"noopener\">revamp your CTA buttons<\/a>.<\/p>\n<p>If this study has shown us anything, it\u2019s that you shouldn\u2019t mess around with the placement of your logo. Left is always best.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019ve got a beautifully designed logo. Well done. Now, what do you do with it? Once your high quality logo is designed and ready to go, it should appear on all your branded material, including your WordPress website. Typically, there are three schools of thought as to where logos can go: in the top-left, top-middle, [&hellip;]<\/p>\n","protected":false},"author":344989,"featured_media":162870,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[10469,10468],"tags":[38,10606,9819],"tutorials_categories":[],"class_list":["post-162861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-marketing","category-reviews-opinion","tag-design","tag-logos","tag-ux"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/162861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344989"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=162861"}],"version-history":[{"count":7,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/162861\/revisions"}],"predecessor-version":[{"id":204914,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/162861\/revisions\/204914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/162870"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=162861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=162861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=162861"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=162861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}