bts防弹少年团演唱会

bts防弹少年团演唱会

超越虚假的底线:如何避免这种昂贵的用户体验错误

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

用户体验错误通常不会被发现,因为它们很安静。 它们不是破碎的图像,拼写错误的单词或不发送的表单。 不,用户体验的错误是基础性的。

对于访问者来说,无论是否有意识地检测到它们,用户体验的错误都很大。 事实上,IBM的说法很有用“易用性可能是隐形的,但它的缺席肯定不是。” [Tweet It!]

访问者离开页面完全没有意识到内容块,他们假设他们在真正拥有它们之前很久就到达了页面的末尾,他们缺少水平滚动的提示等等。错误的底部仍然活着并且很好……它正在快速扩张。

什么是“假底”?

虚假底部通常也被称为逻辑终结和完整性的幻觉。 从本质上讲,虚假底部是页面上的一个点,访问者认为该页面不会进一步滚动,尽管事实上该点下面有更多内容。

十多年来,这一直是一个问题。 然而,网站继续一遍又一遍地犯同样的错误。

通常,当人们想到假底时,他们会想到垂直滚动。 毕竟,这个词确实有“底部”这个词。 由于移动设备的兴​​起,水平滚动也变得有些熟悉。 现在,可以在可见屏幕的右侧或左侧显示内容。

因此,我们将使用术语“逻辑结束”。

逻辑终结的常见程度如何?

尽管人们普遍认为,游客仍喜欢滚动。 这是他们的第二天性,是在线体验的预期部分。

ChartBeat在一项基于全球2500万次会议的研究中发现 ,超过70%的访问者在页面满载之前滚动…

《超越虚假的底线:如何避免这种昂贵的用户体验错误》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

巨大的发现几乎每个人都滚动,无论给出(或没有给出)方向线索……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

Regeca Gordon是Huge研究团队的一员,他认为访问者会滚动,但语境提示仍然很重要……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》Rebecca Gordon ,Huge

“我们了解到参与者几乎总是滚动,无论他们如何被这样做 – 这就是解放。 虽然很难提出普遍的建议,但我们建议设计师使用最适合其背景的提示。

设计师应根据内容,业务类别和整体设计选择滚动提示。 内容功能是否阻止文本,图像或视频? 是电子商务,社论还是新闻的网站? 视觉线索如何与现有设计元素相结合? 所有这些变量都会影响滚动线索的最佳位置和效果。“ (通过巨大的)

在考虑对方向线索的需求时,您必须考虑两个因素:

  1. 访客的动机是多少?
  2. 访客对您的产品/服务/公司有多熟悉?

购买周期越多,他们滚动的可能性就越小。 为什么? 因为他们不需要更多信息,所以他们非常积极并且想要他们想要的东西。 他们可能会立即点击“定价”或“演示”或“产品”或输入他们的电子邮件而不滚动。

同样,访问者对您的产品/服务/公司越熟悉,所需的研究就越少。 第一次听到你的人更有可能滚动浏览你的主页,而不是那些已经知道你做了什么,你是谁,等等的人。

虽然巨大的结果令人印象深刻,但如果不知道研究中包含的访客的动机和熟悉程度,就无法概括结果。

我愿意打赌普通游客的“达到底线”数字要低得多。 为什么? 因为逻辑结束不仅仅是%E5%9C%A8%E6%95%B0%E5%AD%97%E4%B9%8B%E4%B8%8A%E5%8F%91%E6%8C%A5%E4%BD%9C%E7%94%A8“>

用户体验神话的Zoltan Gocza的话说,“为了确保人们滚动,你需要遵循某些设计原则,并提供让访问者感兴趣的内容。”

根据Luke Wroblewski的说法,访问者不滚动或停止滚动有两个核心原因。

看起来很简单吧? 为避免创建逻辑结束,您必须为访问者设置期望。 UIE的 Jared Spool同意,当访问者不滚动时,这是因为该网站不是为了鼓励滚动…

《超越虚假的底线:如何避免这种昂贵的用户体验错误》Jared Spool ,UIE

“自从我们发布%E4%BA%86%E5%85%B3%E4%BA%8E%E8%BF%99%E4%B8%AA%E4%B8%BB%E9%A2%98%E7%9A%84%E5%8E%9F%E5%A7%8B%E7%A0%94%E7%A9%B6%E4%BB%A5%E6%9D%A5%EF%BC%8C%E6%88%91%E4%BB%AC%E7%9A%84%E8%A7%82%E5%AF%9F%E7%BB%93%E6%9E%9C%E6%B2%A1%E6%9C%89%E5%A4%AA%E5%A4%A7%E5%8F%98%E5%8C%96%E3%80%82″ target=”_blank” rel=”noopener”>(通过UIE)

但为什么访客滚动这么重要? 如果他们直接跳到定价或产品类别,这不是更有价值吗? 不必要。

研究是任何转换的重要组成部分。 您的访问者希望确保他们能够将它发送到正确的位置,您提供他们正在寻找的东西,您值得信赖的等等。通过不设计以适应滚动,您将取消转换的那部分。 结果是合格的潜在客户和销售额减少。

Chartbeat的Josh Schwartz通过展示滚动的访客如何更多地参与其中来展示这一点……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》Chartbeat的Josh Schwartz

“[…]由于文章的实际内容大部分都是页面内容,因此向下滚动的读者在页面上花费的时间比在顶部花费的时间多得多。 我们在下图中看到了这一点,其中我们显示了那些实际滚动查看它的人主动查看页面每个区域的时间量。“ (通过Chartbeat)

《超越虚假的底线:如何避免这种昂贵的用户体验错误》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

9个最常见的逻辑终结案例

由于垂直滚动对大多数人来说比较熟悉,让我们从那里开始。 垂直逻辑结束有五种常见情况:巨大的英雄射击,太多的空白区域,熟悉的“结论”,水平线和返回顶部箭头。

1.巨大的英雄射击

这种情况可能是最常见的, 特别是在科技创业公司中。 巨大的英雄射击占据整个折叠区域。 通常,它们包括简短的标题和号召性用语按钮或电子邮件捕获表单。

示例: Mapbox

这是Mapbox主页……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

只是从看它,你会认为有低于折叠的内容? 可能不是。 当然有。 确切地说是九个内容块。

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

所有这些内容是否与有兴趣入门的人无关? 如果没有,为什么它隐藏在逻辑结束之下?

2.太多白色空间

如果内容块周围有太多空白区域,则很容易假设其下方或右侧/左侧没有任何内容。 极简主义设计运动将重点放在将白色空间融入设计中。 我不会认为这是一个错误,但是需要战略性地使用空白以避免创建逻辑结束是关键。

示例:部落

这是Tribe主页的一部分(就在下方)……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

记下所有的空白区域。 在每个内容块之后,您假设您位于页面的末尾。 每个功能都可能只是最后一个。

该模式继续沿着页面继续……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

设计的简单性在这里违背了可用性。 白色空间可能会有所帮助,但您也可能走错了方向。

请注意,当我捕获上面的屏幕截图时,我缩小到大约50%。

3.广告,行动呼吁和其他熟悉的“结论”

如果您经常阅读CXL,您会将作者生物框识别为“结论”。 这是文章结束的信号。 在其他网站上,当您看到一组广告或基于文字的号召性用语或文章推荐时,可能会出现“结论”。 现在想象一下,作者生物盒被放置在文章的中间。

示例: 福布斯

这是福布斯网站随机选择的一篇文章……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

在文章的中间,出现了“福布斯推荐”滑块。 通常,这将出现在文章的最后。 在我读完之后,该网站可能会根据我刚刚阅读的文章向我展示一些我想要的其他文章。

在这里,那个熟悉的结论根本就不是结论。 还有另外一半的文章要阅读。

示例: Cosmo

Cosmo做了类似的事……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

这是在文章的最后,但还有其他内容基于你刚才在这一点下阅读的内容。 不幸的是,这则广告将阻止许多人发现这些内容,因为这是一个熟悉的结论。

是的,Cosmo通过在广告上方添加“ADVERTISEMENT – CONTINUE READING BELOW”,比福布斯更进了一步。 尽管如此,它几乎不可见,可能会被忽略。

4.水平线

横跨整个屏幕的水平线表示逻辑结束。 虽然它们通常用于表示某个部分的结尾,但不难看出访问者如何将其解释为页面本身的结尾。 不同颜色的内容块是更好的解决方案。

示例: Undullify

这是Undullify折叠下面的内容……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

请注意横跨页面长度的水平线。 与推荐书在线以上的事实相配合,可以合理地得出结论,这是页面的底部,对吧?

实际上,水平线下面还有六个其他冗长的内容块……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

有趣的是水平线技术不再使用。 相反,内容块被赋予不同的背景颜色,使用白色空间等。

5.返回顶部箭头

您想什么时候回到顶部? 通常当你触及页面底部时。 返回顶部箭头与访问者滚动可能会有所帮助,但如果您不小心,它可以很容易地发出页面末尾的信号。 过渡线索变得更加重要。

好例子: CXL

如果您是常规的CXL阅读器,那么您熟悉我们的返回顶部箭头,当您阅读时,它会跟随您。

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

由于我们的大部分文章长度在1,500-3,500字之间,因此返回顶部按钮是有道理的。

此外,鉴于我们网站的性质,假设您没有到达页面的末尾是相对困难的。 如果您正在扫描,则可以使用滚动条查看剩余的内容。 如果你正在阅读,你不会认为文章的结尾是“网站在所有浏览器中看起来都不错吗? 在所有设备上?“由于它是一个博客,当你到达作者简介和评论时,你会期望页面即将结束。

不好的例子: Semplice

现在看看Semplice如何在他们的主页上使用返回顶部箭头……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

你能找到吗? 它在那里,但由于背景黑暗,你无法看到它。

当你继续向下滚动时,你会看到它出现……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

当然,你现在注意到了。 不幸的是,由于它不是连续可见的,因此很容易假设您在看到它时已到达页面的末尾。

返回顶部箭头也可以在主页上有用。 特别是长销售页面,但要确保箭头始终可见。 如果突然出现,访问者会认为他们已经到达页面底部。

在继续进行水平滚动之前,重要的是要注意它还不是第二天性。 移动绝对鼓励这种行为,但UX专家仍然认为水平滚动是一种失礼(特别是在桌面上)。

尼尔森诺曼集团的 Katie Sherwin解释说……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》Katie Sherwin ,尼尔森诺曼集团

“虽然水平滚动在某些情况下是可以接受的,但应谨慎使用。 请注意:桌面上的水平滚动是少数始终产生用户负面响应的交互之一。 (有趣的是,对它的蔑视是如此普遍,以至于我喜欢用它来说明不熟悉该领域的用户体验。我问他们是否可以想到一个网站水平滚动。他们经常呻吟并说他们讨厌它然后我解释了我们如何看待这样的事情并找到使它们变得更好的方法。通常它们的回答是“ 谢谢你,我希望你们中有更多人。” 。“ (通过NN / g)

现在,如果您要进行水平滚动,水平逻辑端有四种常见情况:轮播,定价页面,个人投资组合以及未能进行质量保证(QA)。

6.转盘

Peep在几年前写了一篇名为“不使用自动图像滑块或旋转木马”的文章,忽略了时尚 。 不幸的是,时尚已经陷入困境。 滑块和旋转木马(无论是否自动)的另一个原因是它们需要有意识的努力。 首先,访问者必须识别该选项,然后访问者必须逐项滚动旋转木马。

它不像应该的那样直观。 它需要大量的关注和体力。

示例: 超级

这是来自Super的手动旋转木马……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

箭头很微弱,很难被注意到。 它们也用于展示推荐书,这是一种常见的选择。 虽然这种类型的社会证明可能会产生影响,但您最后一次寻求推荐时是什么时候? 也许案例研究。 也许是民意调查的社交媒体。 但是,当您最后一次努力寻找网站上的推荐书时?

这就是我们所需要的……努力。 我愿意打赌没有多少人愿意投入。为什么不展示所有的推荐书? 或者,至少使箭头更突出。

7.定价页面

这是SaaS站点的常见问题。 由于有这么多的定价计划,横向滚动似乎是一个可行的选择。 再次,你遇到水平滚动感觉不自然和意外的问题。 大多数人不寻找水平滚动,所以很容易错过。

示例: SendinBlue

如果您每月发送9-120K电子邮件,SendinBlue有四种不同的定价方案供您选择……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

它们在这里非常清楚地标记了水平滚动箭头。 所以,您知道如果您需要每月发送更多电子邮件,您可以点击它以查看其他定价计划……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

通过将箭头放在定价计划框中,SendinBlue使水平滚动选项弹出。 由于只有两个选项,所以感觉不是费劲。

8.个人投资组合

个人投资组合是设计师和摄影师展示自己创造力的地方。 通常,这涉及“打破模具”和水平滚动。 以可用性为代价的创造力是昂贵的。 [推特!]

示例: Dean Oakley

这是Dean Oakley的设计师/开发者组合页面……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

您无法向上或向下滚动。 我尝试通过单击右侧的截止图像水平滚动。 相反,我被带到一个新的页面。 然后,我注意到“我的工作”和“联系”按钮。 所以,我点击了“我的工作”并自动滚动到该部分。

然后我点击了一次,然后被带到他的工作的更多例子……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

进入“联系”的选项已经消失。 要返回主屏幕,我需要滚动,点击一下,返回到它。 Dean在他的投资组合中有大约十几个项目,所以这是相当多的努力。

这是一个聪明的主意,但UX受到了严重打击。

9.未能进行质量保证

根据转换率专家的说法,由于营销人员未能进行质量保证,因此经常出现横向逻辑结束…

大多数网络用户不会自然地进行水平滚动。 当用户的浏览器窗口比网站设计的宽度窄时,通常会出现问题。 解决这个问题的一种方法是设计小屏幕分辨率。 另一种方法是将内容与布局分开,这样您就可以为不同的设备使用不同的样式表,或者使用自动调整为浏览器宽度的液体布局。

请务必使用多种设备,浏览器和解决方案查看您的网站。 这是一个让你入门的简单过程……

  1. 查看Google Analytics(分析)是否属于“低悬的果实”。 什么是一些流行的设备/浏览器/分辨率具有令人惊讶的低转换率?
  2. 进行启发式分析,以确定使用这些设备/浏览器/解决方案的访问者可能遇到的问题。 水平滚动是一个明显的选择吗?
  3. 如果您无法识别问题,请进行用户测试。
  4. 现在,浏览所有其他浏览器和设备。 仅仅因为你不使用古老版本的IE并不意味着你的访问者都没有。

也许右箭头看起来很明显,但使用较小屏幕的访问者却看不到5%。 进行质量保证可确保您不会遇到这些类型的问题。

对于启发式分析,您可以使用“ 真正重叠”中描述的Chrome Inspect Element过程吗?

如何鼓励继续在您的网站上

首先使用滚动热图评估您当前的滚动轮廓(您可以使用专用工具甚至是Google跟踪代码管理器 )。 问你自己…

  • 滚动在哪里停止?
  • 有什么内容块?
  • 它是否合乎逻辑?
  • 为什么?
  • 我该怎么办才能修复它?
  • 访客是否水平滚动?
  • 他们想要吗?
  • 他们点击水平滚动按钮吗? 在旋转木马上?

既然您知道自己在做什么,就可以开始优化了。

1.使用强定向线索

定向线索相当普遍。 您可能经常在主页上看到箭头或“阅读更多”。 不幸的是,并非所有方向线索都是相同的。 使用方向提示是不够的……你必须使用定向线索。

看看尼尔森诺曼集团的这个例子 ……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

两个水平滚动按钮几乎完全被忽略,尽管它们被清楚标记。

一个强大的方向提示是上下文,并为您的访问者回答以下问题…

  • 这一点下方或旁边是否有内容?
  • 这些内容对我来说是否有趣/有价值?
  • 我可以期待滚动多长时间?

好例子: 爆炸小猫

这是Exploding Kittens主页……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

你看到箭头的开头,对吧? 这是页面的其余部分……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

这是我遇到过的最强有力的方向线索的例子。 您的注意力集中在一起,您的期望已经确定,您将从一个陈述到另一个陈述。

干得好,爆炸小猫。

2.意识到UX原型

UX原型无处不在。 您上次访问电子商务网站的时间是什么时候,购物车不在右上角? 难道你不认为在移动应用程序中喜欢某些东西,你可以双击吗?

您有责任确定行业中的原型(例如SaaS,代理商,电子商务等)以及您的媒体(例如移动站点,桌面站点,移动应用程序)。 从那里,尽力适应这些原型。

如果不这样做,那么您将创建UX问题。 您的网站应该按照访问者期望的方式运行。 如果你偏离了你所确定的那些原型太远,你将最终在逻辑结束后创建逻辑结束。

不好的例子: 空气

这是主页……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

您无法向上,向下,向左或向右滚动。 由于一个位置似乎被切断,我尝试点击它。 什么都没发生。 最后,我意识到我必须将光标放在绿色区域上然后滚动。

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

在最初找到这个例子之后,我在12小时后回到了网站。 我对12小时前的滚动感到困惑。 当你假设你的访问者会很快发现一些非典型的东西时会发生这种情况。

好例子: Snapchat

相比之下,这是来自媒体的Snapchat故事……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

既然是Snapchat,我知道我可以点击查看下一个项目。 即使没有方向线索,上下文和原型也使UX变得简单。 我不知道作为Snapchat用户是如何阅读文章本身,这就是为什么单词“READ”出现在向上箭头下。

当我向上滑动时,我得到了……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

您越了解原型,您就可以更直观地制作用户体验,并且意外创建的逻辑目标越少。

3.尝试使用Cut-Off Look

如果您使用Netflix或iTunes,您就会熟悉“截止外观”。 基本上,一个项目显示为半截止,表示需要滚动。

根据转换率专家的说法 ,这取决于天生的直觉……

如果页面元素明显跨越折叠,用户将直观地理解页面继续在折叠之下。 删除所有水平线的一种简单方法是使每列中的页面元素在页面上的不同高度处结束。 这样,无论用户的计算机设置如何,至少有一个页面元素将跨越折叠。

理想情况下,跨越折叠的页面元素应该是具有众所周知形式的页面元素,因此当它们不完整时很明显。

好例子: iTunes

看看iTunes是如何做到的……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

你会看到专辑封面下面的“New and Noteworthy”被截止。 广告The Struts的横幅左侧和右侧的横幅也是如此。

因为它们都显然不完整,所以显然需要水平滚动。

4.开发模式/节奏

根据GoodUI的说法 ,关键是要发展和保持一种模式/节奏……

假底是转换杀手。 是的,滚动长页面很棒,但要小心让访问者感觉页面已经在某些部分之间的某个地方结束了。 如果您的页面将滚动,请尝试建立用户可以学习并依赖进一步向下阅读的视觉模式或节奏。

您可以通过重复标题和内容格式(包括图标或箭头),交替内容块的背景颜色,使用数字,交替图像对齐等来创建节奏。

这就是设定期望。 节奏越好,访问者就越能预测下面或旁边是否有更多内容。

示例: 渠道

看看Funnel在这里使用的一致性……

《超越虚假的底线:如何避免这种昂贵的用户体验错误》

图标,标题以黄色突出显示,3-4行描述。 重复。

同样的模式向下延伸到页面,直到页脚更宽。

结论

假底部与10年前一样普遍。 尽管人们普遍认为,假底部不仅仅是重要的。 事实上,它们不再仅仅是垂直相关的。

以下是您可以避免创建逻辑目的的方法……

  1. 评估访问者当前如何滚动并使用热图工具单击。
  2. 如果你有一个巨大的英雄射击,添加一个强大的方向提示,以吸引访客进入页面。
  3. 评估内容块周围的空白区域。 是否有人可以假设他们已经到达了页面的末尾?
  4. 您是否在页面中间有任何“熟悉的结论”,如广告,号召性用语,文章推荐等? 删除它们。
  5. 如果您有旋转木马或滑块,请确保它很容易被识别,并限制使用它所需的体力。 或者,将其完全移除。
  6. 进行质量检查以确保您的网站以每个设备/浏览器/分辨率的方式显示。
  7. 了解UX原型。 找出与您相关的内容,并尽力适应它们。
  8. 如果可以选择水平滚动,请尝试使用截止图像与方向箭头。
  9. 制定视觉模式/节奏以设定期望。

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注