网页设计Checklist:10个网站首页必备的内容元素

发布日期:2018-02-01 14:02:38

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

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

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

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

3. 主要的CTA
首页最重要的目的就是要让造访网页的人对你留下深刻的印象,甚至成为你的长青客户,因此除了主要标题、次标题之外,你还要有一个明确的行动呼吁(call to action, CTA),让人们可以明显采取「下一步」,进而有机会获取更多与浏览者相关的资讯,甚至是他的email。

比如Buzzsumo是一个专门研究现在议题热门程度的网站,一进去网站页面就告诉你,他们帮助你寻找最热门的议题、或是竞争对手的网页中什么文章是最热门的。除此之外他还能够协助你找到意见领袖,让你能够推广你的优质内容。

不过因为它是搜寻的功能,所以它的CTA呈现的方式是邀请你输入一个主题或是网址来分析内容。


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

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

大标题:Where Work Happens 说明在哪里使用
次要内容:When your team needs to kick off a project, hire a new employee, deploy some code, … 说明适用的场合
主要CTA:(Get Started)邀请使用者开始使用
而透过左手边的意象图,你可以在还没有看到文字的时候,先了解到它可能是一个与文件、报表、办公沟通相关的工具。


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


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

继续沿用刚刚Uber的例子,在第一个阶段和使用者拥有简单的接触之后,接续就是告诉使用者选搭Uber的好处。比如上车之后司机就会知道你要抵达的目的地,不需要掏钱包就可以下车,不需要事前预约,随时随地提供服务,并且提供各种款式的车型。


而国内的TaxiGo则是主打合作的司机都是经过严格的评估和挑选,避免乘客叫了车可是搭到素质较不优的司机。此外,他们强调在完成搭乘后,乘客可以对司机评分,提供意见回馈。最后则是搭乘的安全性,能让乘客在车上的每一刻都知道司机的GPS和旅程资料,并且可以分享给亲友随时追踪。


虽然Uber和TaxiGo都是叫车服务,不过在网站首页的介绍就可以看到二者锁定的族群不有道云协作大一样,可能Uber是想要招揽商务行旅客、而TaxiGo则强调优质服务品质跟评分回馈。

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

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


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

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


又如TransBiz的服务项目以协助品牌跨境美国或是Amazon销售为主,但想要做美国跨境的厂商要怎么能够相信TransBiz有能力协助他们打造品牌、成功在海外带动销量?以实际的服务案例与成果与潜在的TA对话,可以增强TransBiz的专业感和实践力。


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


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

大型连锁知名家具IKEA在台湾的首页网站导览则是这样设计:找产品、找空间、找新品及优惠、找灵感。在2017年5月以前,IKEA在台湾是没有开放线上购物功能的,后来率先于中台湾开放,在2017年的年末才陆续在全台湾开放线上购物功能。因此网站导览目前主要还是搜寻功能为重,「找xx」,当使用者点选「线上购物」时,才会看到专为线上购物设计的页面内容。


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


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

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


以TransBiz自身为例,网站有「免费资源」区,让对Amazon销售或是数位行销学习以兴趣的访客留下他们的email,以获得电子书的下载连结,后续也还会寄送2~3封的电子邮件,指引使用者到网站的其他部分对TransBiz有更进一步的了解。


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

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

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


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

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


【结语】

首页就是品牌的门面,不论你是在经营电商网站或是B2B网站,对使用者来说,他们来到你的页面就是希望能够在最短客服的时间内认识你、了解你,以及你能为他们带来什么样的帮助,或是你的产品可以解决他们什么样的烦恼。而要让人们信赖、信任并且停留在你的网站,除了要有好的网站架构之外,势必也要有好的网站内容,甚至是移动装置优化(响应式设计, RWD)也是基本的门槛了。

相关文档

山东强比信息技术有限公司   版权所有
联系电话:

4006360163


E-mail: support@qiangbi.net
备案信息:© 2015-2018 山东强比信息技术有限公司 All Rights Reserved.