你有发现 Apple, Airbnb 的首页吸睛元素啊?今天新的内容合作夥伴 SYNC UP 将为你解说 Hero Image 的魔力,不只抢眼,还能有效提高转换率!未来女人迷与将 SYNC UP 独家合作,给你的行销人笔记,为你整理国内外最受欢迎的行销趋势,敬请期待!

最近在电子商务和行销的趋势上,常可看到运用 Hero Image 的趋势,什么是 Hero Image?你可以到苹果的网站看看,它们并不是第一个或唯一使用此种方式的公司,但绝对是相当善于运用 Hero Image 前几名的公司。你也知道,一但苹果采用的方式通常都会成功,对吧!在你想要效法这个方式,大刀阔斧地改变自己的网站之前,先让我们来瞭解一些重要的资讯— Hero Image 是否真的有效以及如何使用它?

什么是 Hero Images?

如果你不确定什么是 hero image,你可以到AppleTommy Hilfiger's 或Ulta's的网站看看,一进入网站,首先可以看到的一张主图占据萤幕将近70%的版面,并在图片上放上连结和 CTA(Call To Actions,召唤行动也就是你希望消费者做的事情),让连结和 CTA 放在图片上显眼的位置,冲击性的主图片再加上显眼的连结和 CTA。更精确地说,Hero Image 就是将主打产品、服务或核心概念以“大版面的图片”呈现在网站上的概念。

b

这些图片通常都是最新、最热门的产品或服务,也就是你希望创造话题和带来销售的对象,你可以选择各种类型的图片,无论如何,让人一进入你的网站,视线就紧紧的被这张图片给抓住,而不是充斥着一堆复杂的资讯。

同场加映:简单十步骤!图像设计师教你做清楚好懂的图表

为什么我们喜欢 Hero Image?

基本上,大胆的放上一张大型全版面的图片,就是能够立即让网站很性感,或者应该说很有质感,任何的消费者,对于这样的网站都有更高的好感度、印象深刻、互动率也更高,试想,如果消费者对于这样的设计无感的话,为何这些国外知名品牌的网站都陆续采用此方式呢?

我们喜欢看到感兴趣的商品和相关的图片,当我们看到产品图片以高质感的方式呈现,且图片传递着讯息--产品如何符合我们的需求、解决我们的 pain point,作为一个消费者,实在很难错过这样的机会而不去购买。如果小型的产品图片能卖出一千个的话,试想大型的产品图片能刺激多少消费?而这样的 idea 正是支撑这个 Big Hero Images 的精髓。

Hero Image 真的有效吗?是的,它们真的有效!

CrazyEgg.com 说,absolutely!透过两个案例研究— Dell 和 KinderCare,它们证实了 Hero Image 能够提高转换率并降低跳离率(bounce rate:访客造访网站后未继续造访其他页面就离开的比率)。从电子商务的观点,它们也证实在法国的实验让国内销售额提高将近40%,全球销售额提高将近30%。

接着让我们再看看几个例子。

上图是Airbnb的网站首页,登入网页后即可看到此版面,其网站是运用影片的方式,所以一进入网站,即可看到躺在舒服的床上住宿的旅客翻身,或是旅客正在煮早餐、彼此交谈的画面,符合其所提供的服务以及想带给消费者的核心价值,透过这样的版面不仅能吸引网站访客的视线,更能引发访客联想舒适的住宿质感、旅游的惬意等画面令人印象深刻,提升转换率的提升也不意外。

Uber也是运用这样的 Hero Image,进入网站后即可看到全版面的主图,呈现着与其服务相关的图片,并在写显眼的位置放上slogan 和 CTA,简洁却大器的版面,提升消费者对其服务的好感。

推荐给你:让 Uber 成为你的专属司机!专访 Uber 营运长

很明显的 Hero Image 的确有效果,但你如何确认,它也能够在你的电子商务网站上成功刺激销售呢?

采用 Hero Image 的几个建议

基本上,只是单纯的放大你的首页图片并不会成功,有许多的规划和决策需要执行。首先,不要使用图库的照片,基本上人们知道图库照片的感觉,这样的图库照片很难以让你的消费者感到印象深刻,访客来到你的网站是想要看到更多和产品、服务等相关的内容,运用自家产品服务才能有最佳效果。

再者,确认这些图片在 mobile 的装置上也能有好的呈现效果,不好的响应式网页设计,无法根据使用者的装置调整网页内容的呈现,这样很难带来转换率。没有良好的响应式网页设计,在 Google 眼里是很不利的,所以你的目标就是要提对使用者体验来说,最舒服又有创意的设计。

提到使用者体验,别忘了记选择让人感到舒服愉悦的图片,连结和按钮绝对不能盖住重要的资讯,选单也要以合乎逻辑的方式呈现,颜色也要搭配你的品牌,整体的感觉不要让访客觉得有负担、混乱。

最后,Test。测试、测试和不断的测试。你的第一个测试结果,可能发现使用 Hero Image 之后转换率却反而不如之前,等等,可能这代表的是你选错图片,或是消费者找不到你的页面连结,重要资讯没有被放到正确的位置;设定一个备份的图片然后再试试看,用微幅的调整带来大大地改变,你将能够看到令人难以置信的结果。