为什么要花费这么多时间和精力吸引访问者来到你的网站,然后让他们在看到第一页或第二页后就离开呢?
将一个已经在你网站上的访问者引导到另一个页面比吸引一个新访问者要便宜得多。
猜猜怎么着?这也更有价值。如果一个访问者正在浏览多个页面,那他们可能会喜欢你。他们阅读的每篇文章或页面都会增加品牌认知和信任,这将带来后续的转化。
如果我们告诉你,你可以将一个访问者浏览的页面数翻倍、三倍…甚至四倍,这对你有兴趣吗?
假设你还没有花大量时间来优化用户体验(ux),你可以看到一点努力带来的惊人结果。
本文将向你展示5种最有效的方法来提高用户体验,从而立即提高页面浏览量。
用户体验不是艺术,而是科学
阻止网站所有者进行用户体验优化的原因是它听起来像一件复杂的事情。
你可能认为只有开发人员才能理解它。
但实际上,它非常简单,不需要专业知识。当然,拥有经验将帮助你更快地看到结果,但任何人都可以开始改进他们访问者的用户体验。
首先,什么是用户体验?
这是一个广泛的术语,可能会引起混淆。用户体验涵盖了你网站内容对某人访问的所有部分的影响。最好用莫维尔蜂窝图来概括:
有七个不同的要素构成了良好的用户体验:
我们即将展示给你的五种改进用户体验的方法属于这七个类别之一。
你需要知道的最后一个重要事项是,用户体验对每个人来说都是独特的。
有时,两个网站可以进行相同的更改,一个网站的用户体验会改善,而另一个网站的用户体验却会恶化。这取决于你的访问者。
对你来说,这意味着即使你同意我们在本文中向你展示的某些内容,也要在你的网站上进行测试,看看它是否真的会带来积极的改变。
用户体验不是主观的。它应该由真实用户的数据支持。
1. 链接不仅仅是为了优化seo,它们也是为了用户
太多时候,网站所有者会犯一个错误,那就是根据他们认为搜索引擎会如何反应来进行更改和营销决策。
我们过去也犯过这个错误。几乎每个人都犯过这种错误。
当你在文章中插入链接时,它不应该仅仅是因为你读到了google会奖励链接到权威网站的内容。相反,应该是因为它为你的访问者增加了价值。
你看到我们有多少链接链接 quick sprout 和 neilpatel.com的帖子 吗?
为什么链接对用户体验有好处?
- 链接可以回答问题:如果这是一个非常常见的问题,你可以写一个段落来回答它。但是如果你认为只有少数读者可能会问这个问题,你可以为他们提供一个链接。
- 链接可以合理地引导读者到下一步:当你写东西时,你必须选择一个范围(你要涵盖的内容)。即使一个相关的话题非常有趣,你可能没有空间来涵盖它。相反,一个链接可以将读者连接到另一篇文章,让他们继续探索这个主题。
- 链接可以建立信任:还记得用户体验的七个因素吗?可信度是其中之一。在一个以数据驱动的帖子中,链接到来源和资源可以让读者对你提供的信息更加有信心。
如果你包含正确的链接,你可以让用户自定义他们的体验,这总是积极的。
还有一件事我们需要谈谈……
你应该包含内部链接还是外部链接:我会尽量简单地解释。无论是在你的网站上还是在其他网站上,总是链接到对你的访客最有价值的资源。
请注意,如果其他文章与当前文章高度相关,通常情况下,其他文章在价值上更有优势,因为读者已经熟悉你的工作并且喜欢它。
显然,内部链接会增加访问者在你的网站上浏览的页面数量。一个新网站可能没有太多有价值的内容可以链接到,但是一个已经创建了多年内容的网站(例如quick sprout)将在每篇文章中有大量相关的内容可以链接到。
正如我们之前提到的,外部链接可能有助于让搜索引擎更加信任你。这是一个小的潜在好处。
真正的好处是,如果你链接到一个很棒的资源,你的访客会把它和你联系起来(你刚刚帮了他们一个忙)。这会建立更多的信任和更多的忠诚读者。这就是为什么可能不是最好的策略链接到在谷歌上找到的第一个资源。要深入挖掘以找到真正有价值的东西。
最后,记住每个链接不会经常被点击(通常是1-10%)。但是所有这些链接加在一起。如果你在文章中添加额外的10个内部链接,你很可能会从一个访问者那里获得10-20%的页面浏览量。
这是一个很大的差异。想象一下,只通过一个简单的改变,你的每月常规页面浏览量从10,000增加到11,000或12,000。
2. 你的访客中有一些是乌龟
我们超长的帖子(大约5,000字)通常有很多图片。
我们包含图片的原因有很多,但主要是为了打破内容,使其更易读。
我们之所以能这样做,是因为我们的大多数博客访问者使用台式机/笔记本电脑。想想看:谁有时间在手机屏幕上阅读5,000字的内容?
我们提到这一点是因为移动浏览和桌面浏览不仅在屏幕尺寸上有所不同,而且在速度上也有所不同。
大多数使用计算机的人可以在不到一秒的时间内下载几百千字节甚至几兆字节的内容。
同样的情况在手机上并非如此。移动连接速度范围从0.6 mbps到9.5 mbps。显然,一些移动用户能够快速加载你的网站,但很多人不能。
大多数手机用户都接受他们的互联网浏览速度会比正常速度慢一些,但没有你想象的那么多。
有报道称,83%的消费者希望网页在2秒内加载完成,但这些数据是基于桌面用户的。
手机用户希望网页在一到两秒内加载完成,所以还有一些余地。但是平均网页加载时间达到了9秒,这离好得很远。
这是一个问题,因为加载速度慢的网页不仅仅令人烦恼,还会让访问者远离你的内容。如果网页加载时间超过3秒(在桌面上),将有百分之四十的访问者离开你的网站。对于移动用户来说,可以将这个时间延长至6秒,但仍然比移动网站的平均速度要慢。
页面速度测试的问题在于:许多网站所有者已经对他们的网站进行了页面速度测试,发现没有问题。不幸的是,平均页面速度测试存在一个缺陷。
大多数流行的页面加载速度测试(例如,gtmetrix、pingdom)默认使用非限速连接。这将连接速度排除在外,仅关注技术方面。
现在,这很重要。这样你就可以看到你是否有任何重大的速度问题。问题是,使用这种测试得到的页面加载时间只代表你的用户的一小部分(尽管它是相当大的一部分)。
考虑一下:我们使用标准默认设置在gtmetrix上测试了quick sprout。测试通过了,非常好。
你也可以创建一个免费账户,然后将连接速度设置为4g慢速,这是许多移动用户仍然使用的速度(75%的用户)。
当我们再次运行quick sprout的测试并获得一个完全不同的加载速度:416毫秒。
如果你对其他页面运行此测试,你经常会看到加载时间超过原始2秒限制的两倍以上。这意味着仅仅比这个原始限制稍微快一点还不足够。
我们不会在这里写一个完整的页面速度优化指南,但我们将介绍一些最有效的方法来优化你的网站以适应移动用户。
要素1 – http请求:任何页面速度测试工具都会向你展示的主要指标之一就是http请求的数量。
每个html中的脚本、图片、css文件等都会发起一个http请求以获取信息。每个请求都需要时间来处理。加载网页时,大约80%的时间花在了发起http请求上。
你可以通过减少浏览器所需的http请求来加速你的网站。
怎样做到这一点呢?
最简单的方法就是尽可能合并css文件和图片。一个优化不良的wordpress主题很常见,同一页面上会请求三个或更多的css文件。将所有的css文件复制到一个文件中,并删除对已删除文件的任何引用。
大多数网站还可以通过创建css sprites来减少请求次数。精灵图是包含多个图像的图像文件。css代码告诉浏览器每个图像的位置。
应该为在每个页面上都会调用的所有图像(如导航图像或标志)创建精灵图。
为了使这个过程更简单,可以使用像sprite generator这样的工具。只需将图像拖放到提供的画布上即可。位置详细信息的css将自动生成。
当您添加完所有常用图像后,可以下载css精灵图(在顶部),然后在页面中调用它,而不是多个单独的图像。
以上是大多数网站上减少多个http请求的两种快速方法,但实际情况要复杂得多。这是一个稍微更详细的指南,以获取更多信息。
因素#2-页面大小:使用速度工具测量的另一个主要指标是页面大小(以字节为单位)。理想情况下,您的页面不应超过几百千字节(有时不可避免超过)。
如果您的页面速度有问题,您可能需要减少使用的图像数量,但在这之前可以做一些事情。
首先,压缩您的图像。大多数图像文件都有占用大量空间的无用元数据。使用像optimizilla这样的工具,或者像wp smush这样的wordpress插件,来减小文件大小。
其次,使用http压缩来压缩文件在传输时的大小。最常见的http压缩形式是gzip。在w3 total cache插件中勾选gzip选项以在wordpress中使用gzip压缩。
最后,尽量简化您的网站。不要在侧边栏或页眉中包含过多的图像。尽可能使用简单的文本和html。
因素#3-托管和交付:即使您正确执行了所有这些技术操作,如果您的托管和交付效果不好,访问者可能无法快速加载您的页面。
托管部分非常简单。如果您每月支付5美元的共享计划,您的网站将永远不会很快。除非您刚开始,否则请使用专门为您的网站提供的严肃托管服务器。
我们建议为诸如图像之类的静态文件使用内容传递网络(cdn)。这将会增加您的成本,但您的网站将增长更快,访问者的转化率也会更高,这是值得的。这里有一个选择一个好的cdn的指南。
额外提示-通过提高相关性来欺骗用户,使他们更满意:当一栋楼的居民抱怨电梯等待时间过长时,楼主们没有加快电梯的速度,而是给居民提供了一些可以在等待时消遣时间的东西。楼层管理员安装了镜子,以便居民在等待时可以照镜子看自己,抱怨停止了。
虽然这不是一个完美的类比,但等待页面加载可能会像等待电梯到来一样令人沮丧和无聊。访问者意识到他们在为内容牺牲时间。他们越享受您的内容,他们就越不会在意等待。我们怀疑我们的很多读者,包括您在内,愿意等待超过2秒钟来加载新的博客文章。
“如果用户在网站上找不到想要的内容,他们会认为下载时间比实际上要慢。相反,如果用户在网站上快速而容易地找到所需内容,他们会认为下载时间比实际上要快。在过去的10年里,我们在可用性测试中始终观察到这些认知。”- shari thurow
这对您的网站意味着什么?
这意味着,添加目录以帮助访问者找到他们正在寻找的答案,编写高度相关的元描述,并突出文章的重要部分,可以让读者感到等待页面加载是值得他们时间的。
一个满意的读者比一个沮丧的读者更有可能点击您网站上的其他链接。
3. 消除干扰,让信息优先
您的信息必须在落地页或博客文章中处于中心位置。
这是您的访问者来这里阅读的内容。这属于多个用户体验类别,但主要是可访问性。
如果您使内容易于访问,读者将继续阅读。如果您让它变得困难,许多人要么立即离开,要么对访问您网站上的另一页不感兴趣。
虽然网站的设计各不相同,但大多数网站都存在3个常见的干扰源,应予以消除。
以下是如何修复这些问题…
策略#1 – 最小化或消除侧边栏:大多数博客都忽视了侧边栏。您需要非常考虑将什么放入侧边栏,或者甚至是否需要一个。
medium目前是最受欢迎的博客平台之一,以其易读性而闻名。medium文章没有侧边栏 – 只有内容:
<img_7>
无侧边栏布局没有干扰,因此读者只关注文章。
使用此布局的其他人不仅能够增加页面浏览量,还能将转化率提高26-71%。
这可能是一件好事,但有时您希望每次访问时都向读者展示您网站的某些元素,即使可能会让他们分心。
如果您继续使用侧边栏,请仅在其中包含最重要的信息,例如:
- 注册
- 个人简介
- 顶部文章链接
- 产品/服务链接
这就是我们在博客上所做的:
<img_8>
请注意,侧边栏中没有任何华丽的东西。读者知道它在那里,但如果他们对侧边栏信息不感兴趣,他们可以专注于文章内容。
策略#2 – 考虑取消滚动元素:这是棘手的。在用户向下滚动时,使页面的某些部分固定并随之滚动可以提高转化率。但是如果过度使用,将对用户体验产生负面影响。
您需要测试您添加的任何滚动元素。比较页面停留时间和每个访问者的页面数的指标,看看它是否值得。
我们使用了一些滚动元素,但不多。看看neilpatel.com上的顶部菜单随页面向下滚动的方式:
<img_9>
另外,我们在quick sprout上有一个细长的<link_23> hello bar </ link>。
请注意,这两种情况下元素都不会分散注意力,只占屏幕的一小部分。
但是当您开始添加滚动的页眉、页脚、社交分享按钮或侧边栏时,页面会很快变得繁忙起来。无论内容有多好,这样的页面都会令许多读者失去兴趣:
<img_10>
策略#3 – 延迟或消除弹出窗口:另一个敏感的问题 – 弹出窗口对于改善电子邮件注册转化率非常有效。但它们也会让用户感到恼火,从而导致每个访问者的页面数减少。
我们过去在quick sprout上尝试过使用弹出窗口,并从转化的角度获得了良好的结果:
如果你打算使用弹出窗口,要减少其对用户体验的负面影响。
不要在页面加载时就弹出窗口,因为那样肯定会吓跑访问者。相反,至少等待10秒钟——60秒可能更好。
你在显示弹出窗口之前等待的时间越长,它就越不会让人讨厌。如果读者已经阅读了30秒到1分钟,要求他们关闭一个简单的弹窗并不会有太大压力。
4. 一致性比创意更重要
为了获得信誉,你的品牌必须保持一致。
为了易用性,你的布局和内容必须保持一致。
当访问者多次返回你的网站时,他们应该知道会有什么。如果他们想要找博客文章,应该很容易找到。如果他们想要雇佣你,同样的事情也是如此:与你取得联系应该很容易。
关于一致性和用户体验,有两个主要因素需要考虑。
因素1 – 品牌和符号:你的品牌由许多不同的东西定义,主要是你的标志和符号。
我们所说的符号,是指像 谷歌的汉堡菜单 这样的东西:
这个符号在谷歌产品中,包括chrome和几乎所有的android应用中,表示一个带有设置的菜单。当一个谷歌用户想要找到设置时,他们就会找到那个汉堡菜单。
无论你的产品是什么,你应该在所有形式的沟通中使用相同的符号和术语:你的博客、落地页、电子邮件和产品本身。
看看quick sprout的品牌形象。一段时间后,你会开始认出他们的标志和配色方案:
如果你去 facebook页面,你会看到完全相同的标志和配色方案:
但是想象一下,如果你从quick sprout的博客转到一个具有不同标志和不同配色方案的落地页。你会觉得这里有些不对劲,可能会关闭页面——失去了可信度。
你所有的博客文章和网站内容应该看起来像是属于一起的。
最后,如果你使用与功能相关的图标和符号,那么对于读者来说更加清晰。
图标可以独立存在,也可以与图片/链接结合使用。
例如,如果你在侧边栏中链接到一个类似quick sprout的工具,你可以包含一个放大镜图标。
或者,如果你的博客摘录中有“阅读更多”这样的文字,你可以在后面加一个箭头,表示还有更多内容。
因素2 – 样式:样式包括配色方案,但不仅限于此。你还需要考虑字体类型、大小、布局、写作风格等等。
一个能保持一致样式的人,就是 bernadette jiwa,一位文案撰写者。她的博文和电子邮件都采用相同的格式(下面是一篇博文):
电子邮件中的链接颜色、文字大小和字体都是相同的:
始终如一地帮助读者知道会发生什么,提升他们的用户体验,无论在哪个平台上。
如果你在我们的电子邮件和博客上,我们敢打赌你已经注意到我们的电子邮件有一个共同点:它们的布局完全相同。
开头有一个锚文本为“最新(网站)文章”的链接。
之后,有一个独立的链接,链接到文章,并以文章标题作为锚文本。
最后,我们给你一个快速介绍这篇文章的机会,并再次呼吁你去阅读这篇文章。
通过几封邮件后,你会注意到这种模式并知道可以期望什么。这对我们和你来说都是好事。对你来说好,因为你知道可以期望什么,以及如何获取内容。之所以如此,是因为我们知道你知道(跟着我们)你可以从这些链接中的任何一个链接进入新文章。
如果在某些邮件中,我们只包含第一个链接,在其他邮件中只包含最后一个链接,会发生什么?你将不知道可以期望什么。当然,很多读者仍然可以找到链接,但其他人会直接滚动到顶部的第一个链接忽略掉,或者看不到底部的最后一个链接。
5. 让重要元素变大
不,我们不只是在说让选项巨大。当我们说“巨大”时,我们指的是可见性。
为了使内容尽可能易于使用,读者需要能够轻松地识别出最重要的部分。
这是我们的意思:看看任何一个具有良好用户体验的站点,每个页面上都会有一个焦点:
在这种情况下,它是一个电子邮件选项框。尽管有大的图片和菜单选项,但使用颜色和大小使选项框突出。
还有另一个例子:
unbounce使他们的注册按钮非常显眼。
这两个例子都展示了对比的力量。
如果你想让某些东西在网页中脱颖而出,给它一个截然不同的颜色-它会引起注意。
但提高可见性对于其他目标也很重要,不仅仅是电子邮件注册或账户创建。
考虑一下内容中的链接。这些链接应该易于看到和点击(使用)。
一些网站将链接隐藏在灰色中或不添加下划线,认为读者会点击链接并且不会返回。你和我都知道,如果你的内容很棒,你的读者总会回来。此外,本文第一部分还讨论了其他好处。
例如,在neilpatel.com中,链接显示为鲜艳且非常显眼的橙色文本。此外,我们使用了相当大的字体大小。即使在移动设备上,链接也很容易看到和点击:
考虑到其中许多链接指向站点上的其他页面,当访问者对它们感兴趣时,这是一件好事,那么为什么不想要突出它们呢?
橙色链接是使用对比的另一个例子。
您还可以通过强调使元素突出。这可以通过与其他元素分隔(添加更多的空白),使用独特的字体,或使用粗体或斜体效果来完成。
例如,brian dean在backlinko中使用了一个特殊的黄色框来突出他的内容升级。此外,他还使用了粗体来使前几个词突出:
快速确定用户正在寻找的内容对于可用性至关重要。我们建议通过使用类似于crazy egg的软件来获取您网站的新访客,并跟踪他们的鼠标移动。
通过观察大多数读者的注意力集中在哪里,您可以在访问页面时看到他们自然关注的内容。然后,您可以调整元素并测试差异,直到达到期望的效果,例如将访问者引导到注册、链接或特定内容。
结论
对于你花费时间来获得流量,你应该花更多时间来优化用户体验。
如果你至少实施本文中的一些方法,你可以大幅提高你的页面浏览量。
如果你目前每月获得1万个页面浏览量,你认为更容易的是:获得额外的3,000个访问者还是将平均每个用户访问的页面数量提高30%?
在大多数情况下,第二种选择更容易。
不过要记住,优化用户体验不是一夜之间的过程。记住你需要对任何改动进行并进行迭代改进,直到给你的访问者提供他们所寻找的内容。
我们挑战你不断思考、测试和改进你的网站的用户体验,随着你的品牌的发展。
如果你有任何问题或者可以分享一个用户体验实验的结果,请在下方留言。