这3个UX用户体验是你在外贸独立站转换率优化上不能忽视的

对于一个普通人来说，用户体验（UX: User Experience）和转换率优化（CRO）似乎是同一件事，因为它们都涉及为客户创造最佳的用户体验。

在独立站转化率优化是，运营者或UX设计师到底需应该对用户体验UX了解些什么？可以通过哪些方式改变独立站的UX来完成CRO目标？

01 要提高转化率，第一印象至关重要

据研究表明，对一个人形成第一印象只需要1秒。

对于网站来说，这个时间更短，你的用户会在短短的0.5秒内形成对网站的印象。他们决定继续浏览，很大程度上取决于他们在这半秒内对你网站的看法。

这个第一印象取决于很多因素：网站加载速度、排版、颜色、图片、间距、对称性、文字数量、字体等等。

虽然你不能全部都改变和优化，但有修改某些东西的确可以使首次访问者的印象更强烈。

1. 改进首屏设计

根据Chartbeat的数据，66%的网站用户把时间都花在了首屏以下的内容上（首屏的意思就是：用户在不用向下滚动鼠标的情况下，在电脑上看到的一整屏的区域）。ClickTale也有类似的结果，它发现人们在76%的网页上使用了滚动条，也就证明了大家的确是看了非首屏的内容。

然而有一个重要提示：只有当人们发现首屏的内容足够吸引人时，才会深入到以下的内容中。即使如此，用户的大部分时间还是花在了首屏，正如Jakob Nielsen的这项眼球追踪研究所显示的那样。

那么，如何才能让折页上面的区域更吸引人呢？介绍三种简单但效果很好的方法。

A. 使用视觉提示来鼓励互动

让人们在这里停留更长时间的一个有力方法是通过视觉线索鼓励人们进行互动。

以Airbnb的主页为例：

首屏的视频”播放”按钮是一个可立即识别的视觉提示，这样可以鼓励访问者的互动。

另一种策略是使用视觉提示来暗示在首屏的下方还有额外的内容。DistanceToMars.com就是一个很好的例子：

向下指向的箭头告诉访问者，如果他们向下滚动页面，会有更多的内容。

B. 使用动画来改变页面内容

另一种吸引用户停留的策略是通过动画改变页面内容。

例如，眼镜公司Ditto，展示了其眼镜变化的模型。换款本身以图形的方式突出显示，直观地表明页面内容在变化。

这是一种聪明的方式，不仅可以向客户展示你的商业模式，还可以让客户对你的产品感兴趣。

C. 使用一个特别的导航样式来鼓励向下滚动

放弃标准的顶部导航菜单，使用视觉提示来引导读者向下浏览。

Urban Walks网站提供了一个很好的例子。该页面没有使用顶部导航菜单，而是在页面右侧使用了一个菜单来引导读者。

这告诉访问者，在页面的更下方还有更多的内容。这也使上下移动变得更加容易，而无需任何滚动。

2. 提高独立站加载速度

网站的速度对其成功至关重要：

根据一项调查，40%的人放弃了一个加载时间超过3秒的网站。

亚马逊计算出，如果他们的页面加载速度慢一秒，每年就会让他们损失16亿美元的销售额。

谷歌也计算出，只要将搜索结果的速度减慢十分之四秒，他们每天就会损失800万次搜索。

简单地说，网站速度很重要。尽管你可能会有不同的想法，但这是一个设计问题，也是一个工程问题。

以下是作为设计师可以做的几件事来提高网站速度。

A. 在页面上方使用文字而不是图片/视频。

图片通常是影响页面大小的最大因素。如果你想让更多的访问者留下来，可以尝试去掉首屏的图片，用文字代替。

例如，InvisionApp的主页在首屏有很多图片和背景视频。根据Pingdom的数据，页面大小高达16MB，加载时间接近3秒。

相比之下，Basecamp的主页只有少量的图片和大量的文字。它的加载时间仅为1.32秒，大小仅为1.2MB。

B. 使用CSS图标字体代替图片

如果你的独立站上使用图标（icon），你可以通过用图标字体替换图标图像，因为：

图标字体使用矢量，而图像使用光栅图形，前者大小较小（以字节计）。

图标字体（如FontAwesome）包含在一个文件中，这样可以最大限度地减少HTTP请求。

根据PicTonic的数据，相比使用图标图片，使用图标字体可以减少14%的页面加载时间。

3. 在布局中使用熟悉的设计模式

根据Google的研究，用户在不到0.5秒内就会对一个网站形成初步的”直觉”，而他们是否会停留，往往取决于这种直觉。

这项研究的主要发现是，”视觉复杂度低、原型性高”的网站被认为具有很强的吸引力。

简单来说，让你的网页设计简单而熟悉。如果你去追求创新的、非常规的布局，人们可能会不太会喜欢。

例如，用户习惯于以一种熟悉的方式浏览电子商务类的网站。所以，坚持这种模式是一个更好好主意。

看看Etsy是如何通过显示购物车、注册和带有下拉菜单的类别来保持他们的主页与其他电子商务网站一样接近：

一个让用户感到很困惑的独立站不太可能有很好的转化（并导致糟糕的用户体验）。遵循大家已经熟悉的设计模式是很重要的。

02 用清晰度和易用性来促进转化率

虽然你必须在网站设计中力求简洁，但不要忘记”易用”和”转换”才是你的最终目标。

这对于用户体验和CRO来说同样重要。只要有可能，就应力求清晰和易用。举个例子，这里有两个弹窗：

第一个选项可能更简短，但第二个选项对用户更友好，而且不太可能导致错误的点击。让按钮变得不言自明，实际上简化了整个对话。

如果你是在卖东西，第二种选择很可能会让你获得更多的销量。

那么你应该如何运用这个规则呢？这里有几个策略：

1. 在设计中拥抱简洁

如果你想让更多的人在你独立站上做一些事情，比如：点击一个按钮，提交一个询盘，甚至阅读一篇博客文章，那么做减法可能会更好。

从本质上讲，你想用更少的文字表达更多的内容。

MailChimp的登陆页面就是一个完美的例子。整个页面只是一个单一的屏幕，只有不到100个字。

简洁的信息加上展示产品的GIF动图，简明扼要地表达了价值主张。

2. 利用视觉层次感来强调你的信息

在任何页面上（以及现实生活中），人们都会先被最大的元素所吸引。

这是设计中所有视觉层次结构的基础，你要做的就是把你最重要的信息（就是那些可以帮助你的转换目标的信息）在尺寸上变得明显大于其他信息。

以Moz.com主页为例：

独立站价值主张的字体大应该最大，这样才能立即吸引浏览者的注意力。

3. 使用排版来支撑你的转化目标

排版设计不仅仅是挑选一种漂亮的字体那么简单，排版远比这更复杂和深刻。

每一种字体都有自己个性，你应该选择目标受众喜欢或能产生共鸣的字体。

例如：有些字体由于其固有的设计或文化原因，被视为”权威”或”值得信赖”的字体，例如，Helvetica被视为一种”官方”字体，因为它经常被用于政府税收表格。

在为你的设计挑选字体时，选择一些与你的受众关心的事物产生共鸣的字体，或者能够放大你的信息的影响力的字体。

例如，《经济学人》就以客观和现代为荣。一个干净的无衬线字体（sans serif）很适合它的订阅页面。

4. 使用颜色来吸引人们对页面特定区域的注意

除了品牌，颜色还可以用来传达视觉层次，建立元素之间的关系，吸引用户的注意力。

在决定颜色时，一个很好的经验是：深色的颜色往往会带来更多的视觉重量，尽量用较浅的颜色来平衡这些。

例如，这个网站使用大胆的黄色来强调标志和平衡深色背景。

在HubSpot定价页面上，中间层计划的亮橙色立刻吸引了浏览者的注意力。

03 创造“有说服力的设计”（Persuasive Designs）

我们知道，提高可用性对提高用户去完成特定目标的很有帮助。

然而，通过故意阻碍用户的行动，你可以让更多的人被转化，通常是以牺牲长期的客户忠诚度和信任度为代价的。在设计中，这些都是属于耍花招的手法。它们可能会增加转化率，但不一定能带来更快乐的客户或更健康的企业。

一个合乎商业道德的替代方案是使用一个“说服、情感、信任”的设计框架，将用户推向你的转化目标。

按照CodeComptuerlove的说法，这个框架有四个步骤。

下面来详细了解一下：

1. 消除障碍，让人们轻松执行每一个动作

在“说服设计”过程中的第一步，也是最简单的一步，就是让它很容易执行行动。

这意味着让你的按钮和CTA应该很容易被找到和被点击。在任何时候，用户都不应该困惑于下一步该采取什么步骤或采取步骤的最佳路径是什么。

例如，亚马逊通过视觉标记让用户很容易看到他们在结账过程中的位置。

2. 建立信任，说服人们采取行动

一旦用户点击了CTA，你的下一步应该是获得用户的信任并鼓励他们采取更进一步的行动。这是一个两部分的过程。

信任建立的第一部分是改变你的页面设计。你可以使用几种转换策略来实现这一点，例如。

添加与你合作过的品牌的logo

添加信任标记

添加值得信赖的权威机构的推荐信

信任建立的第二部分是确保用户确切地知道当他们执行一个动作时会发生什么。

例如，在HipMunk主页上，搜索框明确标识，点击”搜索”将显示”顶级航空公司和旅游网站的航班”。

一些简单的东西，如清楚地标明你的CTA也是很有帮助的。在亚马逊上，产品页面上的两个按钮清楚地表明了它们将执行什么操作，”添加到购物车”或”一键购买”。

3. 提供情绪化的触发器，让访问者执行一个动作

信任对于促进行动是好的，但它的效果却不如情感触发器。

Facebook在这方面做得特别好。它的整个用户界面都是为了突出你的朋友和家人在网站上采取的行动。由于你对朋友投入了感情，你会觉得更有必要去模仿一下。

例如，在每一个页面上，Facebook都会准确地显示出你的朋友们到底有多少人也喜欢了这个页面。

如果你的这么多朋友都在执行一个动作（比如本例中的页面），你有可能也会更有动力去点个赞或关注一下。

4. 用劝导性的触发器来促使用户采取行动

当你把上面所有的内容结合起来，你就可以创建一个强大的说服触发器，让用户采取行动。

回到Facebook，该网站上最强大的触发器之一是它的通知图标。这个鲜艳的红色在全蓝色的网站上是一个强大的视觉提示。

当你点击通知时，你会看到你的朋友们刚刚进行的行动的确切描述。这建立了信任，并给你一个情感触发器来采取行动。当你点击一个通知时，它会将你带到准确的页面或地方，方便你开始任何的行动。

这就是对说服力设计的巧妙运用，它在不迷惑用户的情况下完成了这一切。

04 总结

你的目标是在不影响转化率的前提下，为用户创造令人信服的体验。如果你遵循上面的建议，你不仅能达到你的用户体验目标，还能在这个过程中获得更多的转化率。

另外，上面展示的并不是适用于所有人。你可以借用建议来做你的研究，但一定要用测试来支持你的判断。只要你去优化，你就会看到很多惊喜。

（来源：四两网）

以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。

（来源：四两转化率优化CRO）