你没有第二次机会为你的网站打造第一印象!你的网站首页是你的网页设计中最重要的页面,通常它也是带来最高流量的页面,而要如何造访你的网站的使用者,对你留下深刻的印象,一目了然你在做什么,甚至留下他们的联络方式,最后还成为你的客户。

这10个网站首页必备的内容元素你都做到了吗?这篇让你好好对照检查自己的网站

1. 大标题

你必须在三秒内告诉浏览你的网站的使用者,你在做些什么。你的大标题可能只有简短的几个字,但是它将会是在你的整个网站里最重要的一个环节。因此你必须要尽可能用最短的时间,吸引使用者的目光。

2. 次标题

此标题则是进一步针对你所要提供的商品或服务做简短的说明,最好是能够为主要目标的痛点,提供解决的方式。

3. 主要的CTA

首页最重要的目的就是要让造访网页的人对你留下深刻的印象,甚至成为你的长青客户,因此除了主要标题、次标题之外,你还要有一个明确的行动呼吁(call to action, CTA)。让人们可以明显采取“下一步”,进而有机会获取更多与浏览者相关的信息,甚至是他的email。比如Buzzsumo是一个专门研究现在议题热门程度的网站,一进去网站页面就告诉你,他们帮助你寻找最热门的议题、或是竞争对手的网页中什么文章是最热门的。除此之外他还能够协助你找到意见领袖,让你能够推广你的优质内容。

网页设计排版分析:麦进斗出海告诉你(1)

4. 意象图片

透过清楚明了的简易图片,可以辅助说明你的产品或服务,让人们只要透过图像就能直觉地想到你所贩卖的商品或服务。而最好的图片是能激起使用者的情绪,让他们能够有所行动。

从Slack这个通讯软件的首页你可以重新再将上述重要的3点回顾一次。

·大标题:Where Work Happens说明在哪里使用

·次要内容:When your team needs to kick off a project, hire a new employee, deploy some code, … 说明适用的场合

·主要CTA:邀请使用者开始使用

而透过左手边的意象图,你可以在还没有看到文字的时候,先了解到它可能是一个与文件、报表、办公沟通相关的工具。

网页设计排版分析:麦进斗出海告诉你(2)

又或者象是Uber的官方网站,点进去是简单的标题和一个人在开车的样子,就和他所提供的服务相符,让人们可以在看到图片的时候知道Uber是跟车子、或是一个人在开车有相关连。

5. 好处

除了在上一个阶段对造访者做简短的自我介绍之外,更重要的是,你要让使用者更进一步了解你,能为他们带来什么样的好处,为什么要选择你们家的产品或服务而不选择其他品牌或厂商。

在好处这块,你要思考的是,尽管你与竞争对手卖的假设都是同一类型的商品,但你要针对哪一种最主要的族群下手?对你的哪一类TA说话?

或是你也可以像Dropbox这样,是透过不同的颜色板块,每一个板块做好处的说明。但建议颜色不要那么多、尽量以简单清楚为主,不然颜色太多的话,使用者可能也没有耐心读完那些花花绿绿的内容。

网页设计排版分析:麦进斗出海告诉你(3)

6. 推荐证言、实际案例

要让初次造访你的网站的使用者或者是重复浏览的使用者加深对你的信任,就是透过使用者见证、实际的案例分享,图文并茂地为你的产品或服务背书。

hahow好学校是一个在线课程募资的平台,在首页的最下方你可以看到「学生的满分反馈」。根据不同的课程内容,有不同的使用者反馈见证,为hahow这个平台背书,让使用者信任能够在hahow募资的课程,或是推荐的课程,本质上都是经过hahow严格把关且精挑细选过的。

网页设计排版分析:麦进斗出海告诉你(4)

另外象是许多做电商会使用的平台媒介Shopify也在它们的首页中间加入了使用者见证,为想要使用Shopify架自营电商官网的使用者添增信心。

7. 网站使用导览

什么是网站使用导览呢?

就是使用者到你的网站之后,他要如何更进一步认识你、了解你、怎么与你联络、你的商品或服务页面在哪里等这些信息。一般来说常见的会包括:关于我们、联络我们、产品种类/服务介绍、常见疑问。

大型连锁知名家具IKEA在台湾的首页网站导览则是这样设计:找产品、找空间、找新品及优惠、找灵感。

在2017年5月以前,IKEA在台湾是没有开放在线购物功能的,后来率先于中台湾开放,在2017年的年末才陆续在全台湾开放在线购物功能。因此网站导览目前主要还是搜寻功能为重,「找xx」,当使用者点选「在线购物」时,才会看到专为在线购物设计的页面内容。

网页设计排版分析:麦进斗出海告诉你(5)

但若是偏向软件类的网站或是应用程序工具,网站导览的方式则比较不同,通常会有预约实际使用的简短会议、价格这两个TA使用者最关心的内容(怎么用?多少钱)。

网页设计排版分析:麦进斗出海告诉你(6)

8. 懒人包下载处

为了要获得使用者更进一步的联络方式,你可以使用一些方法让访客留下他们的信息。以内容为主或是B2B的网站可能就是提供信息的懒人包,让使用者觉得你是很专业的,或者是让他们能够透过这个懒人包在短时间内了解你能为他们带来什么样的好处或是价值。

而除了获取他们的email之外,你也可以搭配Chatbot建立一个对话讯息的群组,让首次和你的网站有所互动的使用者,可以持续接收你的实惠信息。

网页设计排版分析:麦进斗出海告诉你(7)

假设你是一个卖家具的厂商,想要获取潜在零售商的资料或是小型店家贩售的资料,那么你就要思考,什么样的内容可能会是零售业者想要知道的,或是他们通常会在网络上做什么类型信息的搜集,而你的网站可以在短短两页pdf的内容里整理出他们会想要的内容,透过email或是留言。

9. 主要服务项目

除了列出能够为使用者带来的好处之外,你也可以列出你的主要服务项目内容,特别是软件的网站,你可以显示不同的服务方案之价格比较,或者是你希望使用者多造访的商品型录,让使用者初访你的网站首页时就可以对你有更深层的认识,进而点选其他页面再进一步了解你。

协助建立电商网站平台的Shopify(又出现了!),在网站首页的下方写出了Shopify更细节的功能内容,让想要使用Shopify作为自营电商网站的使用者,可以在首页就对Shopify有更进一步的了解,同时也能增加停留在网站的时间。

网页设计排版分析:麦进斗出海告诉你(8)

10. 额外的信息

访客通常不会在第一次造访你的网站的时候就成为你的顾客,因此你要打造一些让使用者能够发掘更多信息的地方,比如说最新文章最新产品最新发表,或是下面Banner要很清楚补足在首页大区块未完整呈现的部分。

下面这个例子就是搜集email的协助工具Mailchimp的下排Banner内容

网页设计排版分析:麦进斗出海告诉你(9)

【结语】

首页就是品牌的门面,不论你是在经营电商网站或是B2B网站,对使用者来说,他们来到你的页面就是希望能够在最短的时间内认识你、了解你,以及你能为他们带来什么样的帮助,或是你的产品可以解决他们什么样的烦恼。

而要让人们信赖、信任并且停留在你的网站,除了要有好的网站架构之外,势必也要有好的网站内容,甚至是移动装置优化(响应式设计, RWD)、App优化(AWD)也是基本的门槛了。

更重要的是,你的网站设计与内容也要与时俱进。不要还停留在只要有网站就好这样老古板的想法!要打造一个能解决潜在消费客群的网站,并且让网站自带流量,那么,你的网站才真正具有价值!

,