10个UX技巧来建立一个高转换登录页面

在更广泛的意义上,登陆页面是访问者“登陆”网站的网页。主页通常用作登录页面,但是任何其他页面都可以作为登录页面。例如,如果您从谷歌到达OnextraPixel阅读这篇特定的文章,那么在您的情况下,这篇文章页面就是登录页面。

在网络营销的世界里,设计师也会创建特定的登陆页面来补充有针对性的广告活动。另外,在过去的几年里,许多品牌已经开始建立他们的主页,这些主页遵循的原则和他们的目标登陆页是一样的。后一种做法在单一产品品牌中尤其典型,例如web和移动应用程序(仅举几个众所周知的例子:Telegram、WhatsApp、Evernote、Slack)。

登录页面的主要业务目标是转换率优化(CRO)。设计师可以使用许多最佳实践来提高转化率(让更多的人注册、下载、购买等等)。在本文中,我将向您展示10个UX设计技巧,以及您可以用来创建高转换的着陆页面的实际示例。

1. 将您的主要业务目标转换为CTA

许多登录页面想要在同一时间完成太多的任务。然而,面对超负荷的信息,访问者往往会感到困惑而离开。在开始设计你的登陆页面之前,仔细考虑一下你的首要商业目标是什么。你希望人们下载你的应用程序吗?beta测试者吗?推出新产品?增加订阅时事通讯的人数?当你找到了答案,把主要的商业目标转变成一个引人注目的行动号召(CTA)。

例如,看看Cryptagon crypto portfolio tracker的登录页面。你可以在第一眼看到他们的主要商业目标——他们希望人们注册他们的应用程序。整个页面的信息保持一致,他们不会用任何不必要的信息分散访问者的注意力。

Cryptagon着陆页

2. 在标题中明确主要的好处

如果你想要创造一个高转化率的登陆页面,一个好的标题是非常重要的。一个好的标题应该简短、醒目、有针对性。从站点所有者的角度来看,标题指定了产品的好处,这是登录页面上经常出现的错误。然而,事实应该是相反的。只有从用户的角度展示产品的优势,标题才能将访问者转化为潜在用户。

例如,优步(Uber)的登陆页面就有一个精彩的标题。它只有两个词,但抓住了服务的本质。“Get there”口号以一个强有力的行动动词(“Get”)开头,字面意思是号召访问者采取行动。在标题下面,还有一个副标题,加强了信息,进一步说服观众尝试Uber。

超级的着陆页

3.展示产品的内部工作原理

许多人往往只相信自己的眼睛。直观地展示产品的工作原理可以说服更多的人考虑购买。如果你使用的是英雄的图片,这个方法会特别有效。英雄图像,有时也称为标题图像,是位于折叠上方的全宽图像,用作标题的背景,有时是简短的描述,以及调用-操作按钮。

贝宝(PayPal)信用卡阅读器的登录页面同时以两种不同的方式显示了产品的工作原理。在前景中,你可以看到两个读卡器和PayPal应用程序的产品照片。而在背景中,有两个人,一个店主和一个顾客,正在使用产品。这两张图片相互支持,给观众一种安全感,因为他们得到了所需的所有信息。

PayPal业务登陆页面

4. 使用不同寻常的布局

为了让你的登陆页面成功,你需要从人群中脱颖而出。有不同的方法可以达到这个目的——使用不同寻常的布局是最好的方法之一。自Bootstrap等前端框架出现以来,箱式布局在web上随处可见。因此,在一个不寻常的布局中显示信息可以使浏览者对你的产品更感兴趣。

印第安纳招聘机构Ascend的登录页面利用了这种方法。他们将文字内容安排在放大版的标志周围,其中还包括与该机构活动相关的两幅图像——一幅是兴高采烈的求职者,另一幅是印第安纳州的城市风光。很可能,他们不能找到一个更好的方法来吸引目标受众的眼球。

印第安纳登陆页

5. 包括著名品牌的标志

对于那些无意识地浏览网页以寻找足够证据证明产品是由一家值得信赖的公司生产的访问者来说,知名品牌的标识起到了视觉提示的作用。不要只考虑客户或合作伙伴的标识。如果你的产品或公司已经出现在可信的出版物中,不要犹豫,添加一个“特色”部分。或者,如果你的产品以某种方式补充或提高了一个知名品牌,你也可以把它的标志添加到你的登陆页面。

platform Web Wireframe Kit的登录页面熟练地使用了其他公司的logo来获得访问者的信任。在产品图像的正下方,他们展示了他们在wireframe工具包中使用的工具的徽标。所有的品牌都是观众熟知的,比如Sketch, Photoshop, Adobe Illustrator。他们不断地在页面下方使用标识,例如他们有一个令人印象深刻的“Used by”部分。

组织的着陆页这个组织

6. 使用独特的图形

独特的图形与不同寻常的布局具有相同的目的。他们想让页面从人群中脱颖而出,给观众留下持久的印象。如果你经常浏览网页,你会看到许多不同的方式,网页设计师把独特的图形使用。手绘的产品照片,自定义的图标集,精心制作的人物代表用户或创造者,甚至连环画。

“我做了这个团队进度跟踪应用程序”的登录页面是我见过的最好的图形之一。他们使用常见的“一个图标一个功能”的设计解决方案,然而手绘的动物字符使插图百万分之一。动物是在符合应用程序功能的情况下绘制的。例如,公鸡每天更新状态,马用蹄子在文件上盖章,等等。

我做了这个登陆页面

7. 添加数据或统计信息

在web页面上使用数字数据是我最近详细介绍的当前web设计趋势。人们每天都被大量的信息轰炸,因此平均注意力持续时间在过去几年里急剧下降。通过数字/百分比或在设计中包含图形/图表来可视化地显示用户数据,可以帮助您获得他们的信任。

Hotelchamp预订平台在其着陆页面上使用了这种设计技术。这些数字都与潜在客户相关,因为它们显示了平台如何影响用户的业务。总的来说,页面上有四个不同的数字数据(酒店数量、国家数量、预订量增加的百分比、应用程序集成的预订引擎数量)。四是一个不错的数字,因为他们展示的数据足够有说服力,但是技术还没有过度。

Hotelchamp着陆页

8. 让聊天和联系变得容易

如果你想要实现高转化率,你的登陆页面还需要提供客户服务,以便访问者可以问他们的问题。无论你提供给他们的是电子邮件表单、实时聊天气泡还是直接呼叫按钮,最重要的是联系人选项必须是可见的,并且容易获得。

在GoDaddy的SEO服务的登陆页面上,您可以看到该方法的一个优雅实现。“请求-调用”按钮出现在粘性页眉中,因此当用户向下滚动页面时,该按钮一直可用。此外,在右下角,还有一个使用对比色(紫色)的实时聊天图标。实时聊天图标也是可见的,在整个时间。给顾客提供选择是一种很好的营销策略,表明他们的需求得到了真正的满足。

GoDaddy SEO登陆页面

9. 在页面底部重复CTA

在登录页面的不同位置重复“行动呼吁”是一种众所周知的营销技巧。带有标题、简短描述和可识别按钮的行动号召应始终显示在折叠上方。许多设计人员选择重复粘贴页眉中的按钮,因为当用户向下滚动页面时,按钮将保持可见。但是,如果您有一个长滚动的登录页面,在页面底部重复CTA可能是更好的主意。

Crazy Egg heat map工具在它的登陆页面上使用了这种转换优化技术。在下面的截图中,你可以看到他们页面的底部。虽然输入字段中的占位符文本保持不变(“Your website URL”),但是按钮的标签会改变。在页面的顶部,他们使用“Analyze”动作动词,而在底部,他们切换到“Get Started”调用。

他们为什么这样做?在向下滚动之前单击顶部的CTA按钮的查看者与在整个页面中滚动以获取尽可能多的信息的查看者属于不同的用户组。因此,用不同的方式来处理它们是有意义的。不要害怕(稍微)改变你的CTA的语气,只要你认为它是合理的。

CrazyEgg着陆页

10. 使用突出的CTA按钮设计

要获得较高的登录页面转化率,您需要设计一个在整个页面上都很显眼的call to action按钮。颜色、形状、位置、布局都很重要。没有通用的规则,但是按钮必须与设计的其他部分很好地配合。

例如,Lumio bookmark organizer应用程序把它的CTA按钮放在一个粘性头的中间,这个头在整个用户会话期间都是可见的。按钮的椭圆形与Lumio的logo和圆形的社交媒体图标非常协调。黄色有一定的阳光感,“Get Lumio”按钮成为整个页面最醒目的视觉元素。

Lumio着陆页

了解更多关于登录页面设计

了解如何建立一个高转化率的登陆页面的原则只是掌握交易的第一步。看到大量的例子,分析和理解其他设计师的作品也同样重要。为了增加您对着陆页设计的了解,请查看我们的平面着陆页和使用创意图形的着陆页集合。如果你有一个WordPress网站,也不要错过我们的登录页面插件比较。

最后,别忘了我们在Facebook和Twitter上都有很棒的在线社区,有成千上万对网页设计感兴趣的会员。如果你还没有加入,现在是一个完美的时间。

2019-12-31 17:02
相关热门