大多数人认为网站设计是你看到的。
但是史蒂夫·乔布斯几年前曾经提到我们说“设计是如何运作的”。
同样的原则适用于您的网站设计。
当然,网站看起来不错,很重要。
但是,更重要的是您的网站正常运行 – 将流量转变为热门的线索和全新的客户。
不幸的是,情况并非如此。
例如,您在某些顶级网站上看到的许多常见设计功能已被显示为影响转化。
不相信我 看看下面这七个数据支持的例子,看看你是否犯了同样的潜在危险的错误。
图片库
告诉我,如果这听起来很熟悉
您在Themeforest上发现了一个美丽的新WordPress主题。
这是您正在寻找的功能的完美组合。很干净 它具有当代设计。
另外,只有50美元!
这甚至比基本的定制设计便宜几千美元!
您尽快购买并开始设置。只有几个小时的时间,而且…好吧,这并不完全正确。
你不能把你的手指放在它上面,但有些东西感觉到了。
所以你回到原来的版本来比较两者,看看为什么你们不符合说服你购买的原始文本。
那就是当它击中你:图像!
今天的设计趋势相对较小。现在看看你正在阅读的这个例子。
它有很多的空白,几个粗体重音色和干净的排版。
否则,将其分开的唯一其他事情是高质量的图像。
他们完美匹配,好像有人在设计网站(他们所做的)之前想到了这一点。
互联网上最好的网站通常都有一些专业的摄影和定制图像,旨在增强整体美感。
当没有发生这种情况时,尝试从随机不同的地方拍摄照片可能很难。
那么你采取的第一个捷径是什么?
启动Pixabay找到一些免费的高品质图像。
库存图像适用于像这样的博客文章。
但是,他们经常可以在您网站的转换驱动页面上反击。
在这里,我会告诉你的。
Visual Website Optimizer运行了一个简单的拆分测试,将一张真实的照片与库存照片对齐。
这是唯一的页面变化,因为他们想看看哪些驱动了更多的CTA点击(新注册)。
最初,通过推动更多的CTA点击,实际图像优于股票形象。它也改善了注册,提高了38.4%。
库存照片不仅仅是减损整体经验和审美。它们也可能损害网站的信誉。
这与小型网站发生了很大的关系。看看这个例子:
这看起来很糟糕,可能会损害他们的信誉,但如果它像我们刚刚看到的那样降低转化率,那就特别糟糕。
图像是强大的,因为人们只需要13毫秒来潜意识地理解它们。
图像也有能力将参与度提高94%,因此它们是推动行动和转化的最佳方法之一。
那么你应该总是使用最好的,最大的和最高分辨率的照片?
嗯,不完全是
这就是为什么
很好看,高分辨率,超大图像
正如我们刚刚看到的那样,转换关键页面上的股票照片可以通过损害可信度来减少转化。
但这并不一定意味着巨大的,美丽的视觉效果也是完美的选择。
例如,在一个网站上查看这个漂亮的全屏视频背景:
看起来不错,对吧?
它横跨您的大型桌面显示器,看起来像素完美。
那么可能有什么坏处呢?
这个。
不幸的是,这是非常缓慢的。
加载需要12秒,这意味着它可能会损失 31%的流量!
人们不喜欢等待,无论网站的外观如何。
如果这还不够糟糕,Google最近的移动页面速度基准测试报告发现,“ 如果加载需要七秒钟,有人从您的站点弹起的概率将增加113%。”
好消息是,Google最近给了我们一个新的改进工具来使用和测试我们的进度 – 测试我的网站。
我在上面提到的网站上进行了测试,看到它在业界的表现。
幸运的是,“测试我的网站”报告提供了一些建议,以查看哪些问题正在拖动您的页面加载时间最多。
看看这个网站应该做什么。
“优化图像”位于列表的顶部,当您回到参考早期的视觉效果时,这并不奇怪。
但等一下 为什么我们谈论速度而不是转换?
除了强迫您的流量离开之外,慢速速度也被证明可以伤害SEO 和转化。
我们之前提到的Google报告中发现的同样的Google报告发现, “由于元素数量 – 文本,标题,图像数量在400页至6000页之间,转换概率下降了95%。”
哇!95%?
加快页面加载时间是一个复杂的话题,值得一个自己的帖子,但这里有三个要注意的快速提示:
- 如果可能,裁剪并调整图像大小以适应您网站上的特定尺寸。
- 然后如果可能,压缩文件大小与WP Smush.it。
- 最后但并非最不重要的是,使用CDN(如CloudFlare)托管和传送您的图像。
3.加权CTA
问题:您下面的两个CTA中的哪一个您首先点击?
你的猜测和我一样好!
他们都很糟糕
在这里唯一可能的保存恩典是一个CTA位于另一个CTA之下。不过,否则,他们看起来或多或少相同。
他们的总体尺寸是一样的,“点击这里”副本,而一个很好的努力,也具有相同的精确重量和背景。
换句话说,读者没有视觉提示哪些选项是主要的和次要的。
你不清楚你应该点击哪一个。
这是一个问题,因为“人们需要领导”,MarketingExperiments.com说。
在一个实验中,研究人员使用三个平等加权的CTA进行了一页的合并,将其合并成一个主要的一个。
这个决定背后的逻辑很简单:“人们需要知道他们能够获得最大价值的地方。所以,指出他们对主要的号召性采取明确决定性的方向。“
为了说明这一点,营销实验运行了类似的测试,显示了通过更改CTA按钮的设计可以产生的直接影响。
看看这两者之间的区别。
这一次,测试通过帮助访问者做出更容易的决策,产生了64%的转化增长。
混乱的消息
这是另一个大问题。
您的网站的消息有多清晰?
我们来看一个例子。
看看您是否可以弄清这个着陆页有什么问题。
对于初学者,没有人正在阅读整个文本墙。
第二,行话和复杂的“企业”语言几乎难以辨认。
您应始终将网站的阅读水平保持在不到7年级或8年级的阅读水平。
研究表明,容易理解的东西(单词,名字等)实际上被视为更可信!
管理咨询公司麦肯锡指的是复杂的写作,“ 谈论你的客户。”
实质上,你说的是一件事,但客户关心的还是别的。
你不认为“消息传递”与设计有什么关系?看下面这个例子,告诉我,如果你还是这样想的话。
这是一个积极的例子。该页面是简单的和即时的。
该设计强调了标题周围的空白,并引起了对蓝色CTA部分的关注。
这是图片完美。
5. 极其薄设计
不要让我想到是关于设计和推动转化的可用性的最好的书之一。
这本书的前提是从标题中显而易见的。
它表示网站应该像人们期望他们一样工作。
你有没有见过一个孩子第一次拿起iPad?
他们通常只需要几秒钟就知道如何开始使用它。
理想情况下,网站应该是一样的。不幸的是,他们并不总是。
例如,有时平面设计趋势可能会太过分。
完成后(如下面的示例),它可以简化页面,以便他们立即可以理解。
然而,如果做得不好,他们可能会缺少通知用户下一步做的信号。
这是一个例子。
看看这个图像,这是CrazyEgg软件的热图。
热图表明,没有人点击这些图像,即使它们应该是!
页面本身看起来不错,但平面设计没有提示用户应该点击这些元素。
因此,没有人正在查看这些项目案例研究页面。因此,没有人在招聘那家公司!
即使简单的标题,按钮或悬停效果也会让用户知道他们应该点击这些页面元素。
例如,从HubSpot中查看此示例。
你可以看到它是一个图像CTA(像前面的例子)。
而不是假设你知道它是什么,或者为什么你应该点击,有提示可以帮助你。
- 标题: “免费模板”
- 分目: “免费营销目标设定模板”
- 复制: “确定您的营销目标,并通过此免费的Excel模板为明年设定截止日期。”
- 图像: Mac笔记本电脑与目标设置模板的示例。
- CTA:按钮与下一个“获取您的模板”和一个箭头。
看到不同?
他们没有任何机会。
当你看到它时,你确切知道该怎么做 而额外的细节也可以帮助您确定为什么要点击它。
清洁,逻辑组织
页组织事宜。
重要的是转换。
例如,您的“关于”页面应该称为“关于”,而不是“团队”或“领导力”,“团结”或“我们是谁”。
虽然其他页面标题可能很聪明,但并不是每个人都会立即了解每一个页面。
这就是为什么导航中的所有页面都非常简单和常用。
信息架构(IA)是类似的,它涉及组织您的网站的信息。
某些页面的组织应该类似,以便人们知道如何找到新产品,即使他们以前从未访问过您的网站。
这就是我的意思
你去Zappos.com寻找一双新鞋子。
在顶部,你看到他们是按性别(女人和男人),然后年龄(孩子),然后部门,品牌和销售分裂。
这使得它非常容易上手。
然后点击下拉菜单(如“女士”)后,它会展开,以展示“鞋子”类型,然后是“服装”和“附件”组织的更多选项。
看到?你可能从来没有去过这个网站。他们有成千上万的产品。但是找到你要找的东西很容易和合乎逻辑
Nordstrom在他们的网站上做了类似的事情:
它开始于女性,男性,儿童,家庭,美容和销售之间的类似故障。
然后,当你更深入一层时,它分成“用例”(新到达,趋势,假期,婚礼)和类别(服装,鞋子,手袋,配件)。
换句话说,他们帮助“表达”了一些最常见的选择。
他们现在要更容易(更快)找到。此外,它保持顶级导航尽可能简单,所以用户不会被淹没。
如果这些庞大的电子商务网站仍然可以将他们的网页组织成一个简单,流线型的层次结构,我们也可以这样做。
B2B观众喜欢长篇深入的内容页面。
然而,有时候用户可能会感到困惑,他们在哪里或其他信息是围绕这个内容。所以他们最终离开了。
您可以使用小的视觉线索,但是,像下面的示例中的子导航,巧妙地让用户准确地知道它们在哪里。
当用户向下滚动足够远或跳到新页面时,子导航悬停将更新为新的选择。
这将立即为他们提供关于他们刚刚离开的地方,他们现在在哪里以及他们应该去哪里的线索。
旋转木马滑翔机
我已经救了最后一次。
而且,“最好的”,我的意思是最糟糕的。
几乎所有网站都可以使用旋转木马滑块,从B2B到B2C甚至是电子商务。
我们之前只是赞美Zappos.com,而在这里,他们正在使用一个轮播滑块来自动滚动不同的选项。
我对他们没有一些偏见。
我只是没有转盘的粉丝,因为他们已经被证明(时间和时间再次)摧毁的转换,而不是改善。
例如,哈里森琼斯为搜索引擎土地研究,发现没有人点击转盘!
看看这些转盘点击率。不那么热,对吧?
当然,我明白为什么你可能想要一个旋转木马滑块。
您想要炫耀贵公司,产品或服务的所有独特方面。
但是,诀窍只是一次只能做一次。否则,你冒着太多的风险太快,因此几乎没有打破0.16%的点击率。
电子商务公司在特定季节要突出或炫耀所有新品牌,旋转木马很常见。
例如,这里是Forever 21使用滑块:
H&M,他们的信用,做了一些有点不同。他们使用两个静态部分来更好地关注用户的注意力。
顶部有一个销售电话,底部有一个产品。
结论
您的网页设计应该看起来不错。然而,这并不意味着它也不能很好地工作。
理想情况下,您应该始终使用真实(适当大小)的图像,快速与访客共鸣。
这样做会在用户反弹之前为您的消息和CTA购买足够的时间。
接下来,您的设计功能应该很容易理解。
这意味着一个简单的组织,常规的命名约定,以及一些提醒访问者他们应该在页面上做什么的小视觉线索。
无论你做什么,都会转动转盘滑块。
您看过哪些网页设计功能有助于或损害转化?