{"id":396,"date":"2019-06-28T07:45:10","date_gmt":"2019-06-28T07:45:10","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=396"},"modified":"2020-10-27T15:01:13","modified_gmt":"2020-10-27T15:01:13","slug":"the-ux-of-hero-banners","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/the-ux-of-hero-banners\/","title":{"rendered":"The UX of Hero Banners"},"content":{"rendered":"<p>Hero banners are common but to design them well may not be easy. Here are two articles and a video related to the UX of hero banners that you probably don\u2019t want to miss.<\/p>\n<p><!--more--><\/p>\n<h3>You Might Want to Think Twice before Using a Carousel<\/h3>\n<p>Carousels are rotating hero banners. The potential pitfalls of using a carousel are that the first slide gets much more exposure, and that banner blindness could prevent the information within the carousel from being effectively communicated to the user. Furthermore, for a carousel to be user-friendly on both mobile and desktop, it needs to meet quite a few UX requirements. According to the following article, the usage of carousels is declining on e-commerce websites. Instead of using a poorly designed carousel which causes usability problems, the article suggests static images as the alternative, which are simple and effective.<\/p>\n<p><a href=\"https:\/\/baymard.com\/blog\/homepage-carousel\" target=\"_blank\" rel=\"noopener noreferrer\">9 UX Requirements for Designing a User-Friendly Homepage Carousel (If You Need One)<\/a><\/p>\n<h3>Beware of Banner Blindness<\/h3>\n<p>Users have learned that hero banners often contain marketing information which may not be valuable to them. If a carousel or hero banner looks too similar to an ad, they may simply ignore it. This behavior is explained in detail in the video below. If the information inside a hero image or the content it links to is important, make sure that there are multiple ways to access it.<\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/videos\/banner-blindness\/\" target=\"_blank\" rel=\"noopener noreferrer\">Banner Blindness: Ad-Like Elements Divert Attention (Video)<\/a><\/p>\n<h3>Scale Hero Images Properly<\/h3>\n<p>If not handled properly, the images of a hero banner could be scaled disproportionately, cropped and repositioned when the viewport changes. The article below offers several methods to resolve these problems, including scaling and cropping, carefully choosing a good image etc.<\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/small-pictures-big-screens\/\" target=\"_blank\" rel=\"noopener noreferrer\">Small Pictures on Big Screens: Scaling Up from Mobile to Desktop<\/a><\/p>\n<p>That\u2019s it. That\u2019s what we should pay attention to when designing a hero banner or a carousel. Hope you find the articles and video helpful.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hero banners are common but to design them well may not be easy. Here are two articles and a video related to the UX of hero banners that you probably don\u2019t want to miss.<\/p>\n","protected":false},"author":1,"featured_media":627,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[15,46],"class_list":["post-396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interaction-design","tag-design","tag-ux"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":6,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"predecessor-version":[{"id":680,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/396\/revisions\/680"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media\/627"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}