{"id":2670,"date":"2021-04-01T19:20:09","date_gmt":"2021-04-01T11:20:09","guid":{"rendered":"https:\/\/oangle.com\/?p=2670"},"modified":"2021-04-05T11:23:37","modified_gmt":"2021-04-05T03:23:37","slug":"landing-carousels-good-or-bad-a-web-design-agency-explains","status":"publish","type":"post","link":"https:\/\/oangle.com\/wp\/landing-carousels-good-or-bad-a-web-design-agency-explains\/","title":{"rendered":"Landing carousels \u2014 good or bad? A web design agency explains"},"content":{"rendered":"\n<p>Landing carousels are the main element with multiple slides prominently at the top of the homepage of a website. They are used by many, even web design agencies. Whether they do more harm than good has been a widely debated and highly explored topic in the web design industry. Today, as a web design agency ourselves, we look at the reasons why people may choose to use landing carousels, how they can be harmful to your website and better alternatives.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why do people still use landing carousels on their websites?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">To fit multiple content into a single space<\/h3>\n\n\n\n<p>The top of the homepage is a website\u2019s prime space. Landing carousels are often used to appease multiple stakeholders without having to decide which content or promotion alone should get to be featured. However, as a web design agency, we\u2019ve realised that the huge downside of this easy way out is that users get decision fatigue and end up not making a decision or taking any action at all.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">They are not well-versed in UX design<\/h3>\n\n\n\n<p>Website owners may choose to use a landing carousel as they are not well-acquainted with UX (user experience) design. They may not be in touch with a web design agency and are not informed of alternative options that can better help them achieve their goals. As such, they resort to one of the most mainstream elements of a website\u2019s homepage. However, just because it\u2019s widely used, doesn\u2019t mean it\u2019s good. It is important to be better informed of landing alternatives and UX-friendly website practices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">They are unsure of their website\u2019s main focus<\/h3>\n\n\n\n<p>Website owners may be unsure of what their website\u2019s main focus and goal should be, which is why they try to include multiple content and messages through a landing carousel. This is bad as it gives off a bad impression of your brand. Furthermore, too many different messages means users don\u2019t take back any message at all. It is thus crucial to figure out the main objective and message of your site to know what the focus of your site\u2019s landing section should be. Other less important information can be displayed on other sections and pages. Consulting a web design agency can help with figuring out what your website\u2019s focus should be.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why landing carousels are bad from a web design agency\u2019s perspective<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Landing carousels aren\u2019t UX-friendly<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Many landing carousels don\u2019t work well responsively<\/h4>\n\n\n\n<p>In a day and age where a large percentage of web traffic comes from mobile users, having a site that works well responsively is critical.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Landing carousels can slow down your website\u2019s performance<\/h4>\n\n\n\n<p>This is because of the multiple images, animated transitions, navigation elements and extra javascript. All these contribute to slowing down your website. A slow performance can frustrate users and cause them to ditch your site for a competitor\u2019s. In addition, having a slow site speed can also harm your Search Engine Optimisation (SEO) efforts and push you further down the Google results page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Landing carousels can cause users to focus on the wrong thing<\/h4>\n\n\n\n<p>Human brains are wired to react to sudden movement. This is known as a saccade. It is our retina\u2019s natural, uncontrollable reaction. If your landing carousel\u2019s autoplay is enabled, this can cause users to focus on the movement instead of your site\u2019s actual content.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Landing carousels can take away users\u2019 sense of control<\/h4>\n\n\n\n<p>Controllability creates trust. It is natural for users to want to be in control when they navigate through your site. Therefore, if your landing carousel autoplays, it is like taking control out of your user\u2019s hands. This can affect your user\u2019s experience negatively while using your website.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Landing carousels can cause accessibility issues<\/h4>\n\n\n\n<p>Autoplaying landing carousels can have too little view time for each slide, especially for users with poor motor skills, low literacy and users who speak a native language. This can cause them to have a hard time navigating through or absorbing the information on your landing carousel, which will in turn frustrate them and cause them to leave your site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Users may not even notice your landing carousel<\/h3>\n\n\n\n<p>There is an occurrence known as \u201cBanner Blindness\u201d, which describes how users naturally ignore whatever looks like a banner or advertisement. <a href=\"https:\/\/www.nngroup.com\/articles\/auto-forwarding\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nielsen Norman<\/a> conducted an eye tracking test and found that users tend to skip over landing carousels entirely without paying any attention to them.<\/p>\n\n\n\n<div class=\"wp-block-image image-center-50\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/oangle.com\/wp-content\/uploads\/2021\/04\/eyetracking_slidersignored-web.jpg\" alt=\"Eye Tracking Test Landing Carousel\" class=\"wp-image-2683\" width=\"600\" height=\"552\"\/><figcaption>Source: <a rel=\"noreferrer noopener\" href=\"https:\/\/vwo.com\/blog\/image-slider-alternatives\/\" target=\"_blank\">VWO<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Landing carousels don\u2019t help with conversions<\/h3>\n\n\n\n<p><a href=\"https:\/\/erikrunyon.com\/2013\/07\/carousel-interaction-stats\/\" target=\"_blank\" rel=\"noreferrer noopener\">A study conducted at Notre Dame University<\/a> showed that only a measly 1% of visitors interacted with landing carousels, particularly only the first slide.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"606\" src=\"https:\/\/oangle.com\/wp-content\/uploads\/2021\/04\/carousel2-nddotedu.jpg\" alt=\"Landing Carousel Clickthrough\" class=\"wp-image-2685\" srcset=\"https:\/\/oangle.com\/wp\/wp-content\/uploads\/2021\/04\/carousel2-nddotedu.jpg 1200w, https:\/\/oangle.com\/wp\/wp-content\/uploads\/2021\/04\/carousel2-nddotedu-600x303.jpg 600w, https:\/\/oangle.com\/wp\/wp-content\/uploads\/2021\/04\/carousel2-nddotedu-768x388.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption>Source: <a href=\"https:\/\/erikrunyon.com\/2013\/07\/carousel-interaction-stats\/\" target=\"_blank\" rel=\"noreferrer noopener\">Erik Runyon<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">A web design agency\u2019s alternative options to landing carousels<\/h2>\n\n\n\n<p>Instead of a landing carousel with multiple slides, a <strong>single static banner<\/strong> with a clear message and strong CTA is a good alternative. This gives users a clear focus and direction. Short and sweet content allows users to absorb information easily and gives them full control of what they are viewing before heading onto the next section or page. <a href=\"https:\/\/www.smashingmagazine.com\/2016\/07\/ten-requirements-for-making-home-page-carousels-work-for-end-users\/\">Smashing Magazine<\/a> also noted that when testing, they observed that large and custom images on the homepage give users a good impression of the brand and reduces bounce rates.<\/p>\n\n\n\n<p>You can also consider <strong>dynamic image refreshing<\/strong>, where the banner image changes every time the page is refreshed. This is a better alternative to squeezing multiple slides together in a carousel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The decision lies in considering your users\u2019 needs<\/h2>\n\n\n\n<p>By now, you should be aware of the various negative effects landing carousels can have on your website.<\/p>\n\n\n\n<p>That being said, there are certain kinds of websites where the use of landing carousels may not be all that bad. Some websites where they can possibly work are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Gallery or portfolio websites where large and simple visual content is the main focus<\/li><li>Narrative, storytelling websites<\/li><li>e-Commerce sites to highlight new promotions and products<\/li><\/ul>\n\n\n\n<p>If you have determined that a landing carousel is a viable choice for your website and users, here are a few guidelines to ensure you\u2019re making the most out of it:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Disable autoplay<\/li><li>Disable infinite loop<\/li><li>Ensure it is responsive<\/li><li>Make sure your navigation and CTA are clear<\/li><li>Place your most important slide first<\/li><li>Use soft transitions<\/li><li>Keep text short and clear<\/li><li>Only use one h1 tag<\/li><\/ul>\n\n\n\n<p>All in all, if the users\u2019 needs, accessibility and your website\u2019s goals are not considered properly, landing carousels can bring many downsides. From Oangle\u2019s point of view as a <a href=\"https:\/\/oangle.com\/about\/\">web design agency<\/a> in Singapore, it is generally safer to avoid landing carousels altogether. Unsure of how to design or build your website\u2019s landing section, or just need some advice? With our <a href=\"https:\/\/oangle.com\/our-services\/#web-development\">expertise in various areas of web design and development<\/a>, we are always happy to help you with your brand\u2019s goals in mind. <a href=\"https:\/\/oangle.com\/contact\/\">Drop us a line<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, as a web design agency ourselves, we look at the reasons why people may choose to use landing carousels, how they can be harmful to your website and better alternatives.<\/p>\n","protected":false},"author":2,"featured_media":2672,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"Landing carousels, good or bad? A web design agency explains","_seopress_titles_desc":"As a web design agency, we look at the reasons why people may choose to use landing carousels, how they can be harmful to your website and better alternatives.","_seopress_robots_index":"","footnotes":""},"categories":[17],"tags":[],"class_list":["post-2670","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/posts\/2670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/comments?post=2670"}],"version-history":[{"count":13,"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/posts\/2670\/revisions"}],"predecessor-version":[{"id":2692,"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/posts\/2670\/revisions\/2692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/media\/2672"}],"wp:attachment":[{"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/media?parent=2670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/categories?post=2670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oangle.com\/wp\/wp-json\/wp\/v2\/tags?post=2670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}