作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
默罕默德Junaid
验证专家 在设计

Muhammad是一名高级产品设计师和战略家,为世界各地的公司提供引人注目的客户体验, 包括阿尔斯特银行和拜耳公司.

阅读更多

专业知识

以前在

卡夫亨氏
分享

疫情推动了软件服务的蓬勃发展,帮助我们联系、工作、学习和娱乐. 如今,SaaS客户拥有比以往更多的选择. 你如何将如此复杂的产品的亮点打包成尖锐的, 值得信赖的SaaS登陆页面?

在疫情期间,使用Zoom的与会者人数 爆炸 从2019年12月的1000万增加到2020年4月的3亿, 和125年,全世界有5000个学校系统使用这个平台,在孩子们不能上课的时候接触到他们. 利用云计算的公司正在蓬勃发展: 根据 Bessemer Venture Partners, 该行业目前的总市值为2万亿美元, 与前五大供应商paypal合作, Adobe, Salesforce, Shopify, 和zoom的销售额同比增长了70%.

上诉 消费者SaaS产品的一大优点是,您不必购买产品,只需订阅即可. 可能会有应用程序,但你也可以通过任何网络浏览器使用这些服务. 与预先购买相比,它们通常更具成本效益,因为你只需要为你使用的东西付费.

但是软件服务很难用几句话和图片来解释,更不用说销售了. 消费者可能比一年前更精明了, 但他们仍然不是专家, 而且,特定软件服务的价值主张可能很复杂. 一个登陆页面需要在提供足够的信息来鼓励点击,而不是让你的客户感到厌烦之间取得适当的平衡.

因为软件服务的存在是为了帮助客户把事情做得更好或更简单, 以最佳方式传递消息是您的目标. 以用户为中心的设计方法将帮助您更有效地接触客户.

满足用户的需求

作为软件服务提供商, 您应该已经很好地了解了用户的关注点和挑战, 他们想用你的产品解决什么问题. 让这些用户体验洞察也告知你的登陆页面.

最近,我为一个名为Cohere的客户成功产品设计了一个登陆页面. 它不仅发行了,还经历了几次发行. 公司在产品开发过程中收集的见解以多种方式影响了页面的设计.

该公司的大多数客户都在使用Cohere:

  • 帮助解决客户的担忧和问题.
  • 转化潜在客户并帮助他们入职.
  • 监控客户在各自网站上的活动,了解客户与界面的交互.

我们使用这些数据对登陆页面进行细分,以展示针对这三种场景的功能. 用户可以在每种情况之间切换,以查看产品在每种情况下的工作情况.

Cohere的登陆页面分为三个主要的用户需求.

通过展示价值来实现你的目标

每个登陆页面都必须引导用户达到一个明确的目标. 用于消费者软件服务提供商, 他们的目标通常是吸引用户注册免费试用版,并在一段时间后选择过渡到付费服务,或者选择最简单的免费版本,并选择付费获得更多功能.

松弛, 例如, 希望新客户免费注册, 无消费合约试验, 因此,它展示了无论团队规模如何,应用程序都可以工作, 项目类型, 或者契约类型.

登陆页面突出了松弛在各种情况下提供的价值, 首先允许用户选择团队的规模. 这一选择提供了几个类似规模公司的相关例子, 让用户更容易理解他们的团队如何使用它.

松弛的登陆页面允许用户在不同的团队规模之间切换,以帮助他们可视化他们的组织如何使用该平台.

这让用户保持足够的粘性,继续向下滚动以获得更多普遍的好处,如视频聊天和与外部团队合作的能力. 该页面总结了与生产力和社区相关的各种统计数据, 除此之外,您还可以选择现场免费试用或与销售代表联系以获取更多信息.

明智地选择你的英雄(形象)

你只有 50毫秒 为了吸引用户的注意力,你必须非常有选择性地选择展示什么. 对于SaaS产品来说,这是一个额外的挑战,因为没有有形的产品可以推销. 展示产品的特性是很重要的, 预测并回答用户的问题,而不需要分散注意力的视觉效果或无关的信息.

项目管理工具背后的团队 周一 通过使用截图突出显示所有可定制的方式,是否能够出色地捕捉产品的价值主张.

周一.Com以其可定制性领先,以便向用户传达一种可能性.

标语“无限制的工作”抓住了人们的注意力,满足了人们的需求,激起了人们的好奇心. 副标题通过总结产品的价值主张来增加趣味性,并邀请潜在客户更多地了解它如何应用于他们的生活. 将邀请以问题的形式表达鼓励与网站的互动. 下面是为各种特定行业量身定制的工作流程的视觉效果, 促使用户思考它如何适用于他们的产品.

强调好处而不是功能通常是有帮助的. 如果你的产品难以形象化,或者难以用几个朗朗上口的词来概括,这是一个很好的策略. 不要炫耀产品的所有功能,你可以专注于对用户来说最重要的东西.

Pipedrive的登陆页面很好地说明了使用其客户关系管理(CRM)系统的价值. 该页面简洁地展示了产品的所有主要优点,避免了滚动的需要. 一目了然,用户可以:

  • 获取客户关系管理的背景和知识.
  • 可视化的结果,他们可以预期从使用产品.
  • 了解Pipedrive的产品如何脱颖而出.
  • 了解产品如何适用于大型团队,这是吸引大公司的关键.

Pipedrive简洁地说明了用户可以使用该产品完成的所有操作, 帮助他们了解它如何适合他们的工作流程.

最后,考虑一种交互式方法. SaaS产品可能很乏味,但它们的登陆页面不必如此. 交互设计可以让用户参与足够长的时间,以便你传达产品信息和价值, 还有你的品牌故事.

Cuberto代理公司为手机银行应用Wickret设计的登陆页面概念使用了交互和简约的设计来保持用户的兴趣.

用户向下滚动页面时遇到的交互式副本, 以及自定义光标使屏幕元素动画化的巧妙方式, 使简单的消息传递变得生动. 注意“下载”中的微交互如何帮助它在页面的其他部分中脱颖而出.

这是一个有趣的,引人入胜的方式来展示一个极简主义的产品.

考虑移动用户的设计

一半 你的用户将通过他们的移动设备浏览你的网站. 但是你的登陆页面并不仅仅需要缩小到一个更小的屏幕, 它需要针对移动设备进行优化.

注意用户在手机上可以进行的交互类型,并简化页面结构,以便用户可以无缝地导航. 当一个网站仅仅是响应, 内容通常被转移到一个较小的网格中,并垂直堆叠. 这种内容架构的更改可以降低消息传递的能力, 因此,您必须考虑垂直堆叠布局是否最适合您的设计. 在某些情况下,水平轮播或标签等替代解决方案可能更有效.

在移动设备上不能很好地传达你的产品可能会导致你的转化率下降. 视频信息服务Loom在将其网站上使用的交互式组件和视觉故事转换为移动设备方面做得很好,方法是在需要的地方简化内容架构,并使用选项卡的替代方法.

Loom的移动登录页面针对手持设备进行了优化.

从头开始建立信任

想象一下,你走进一个满是陌生人的房间,不知道自己是否走对了地方. 这与用户访问新产品网站的感觉类似. 在聚会上,一旦你看到一些熟悉的面孔,你就会开始感到更舒服.

同样的道理也适用于SaaS产品. 即使客户有他们想要解决的问题, 学习并将新产品集成到他们的日常工作中可能会令人生畏. 这可能会让客户难以合理解释交出联系方式和付款信息的风险.

你可以 以多种方式促进信任:

  • 确保有SSL证书.
  • 简明扼要地构建你的URL.
  • 确保没有不必要的重定向.
  • 避免那些听起来像是迫切需要线索的文案.
  • 让你的页面直观且易于使用.

这些都是与用户建立融洽关系的简单方法,并创造一种让他们感到被重视和知情的体验. 但你不应该止步于此.

向用户展示它如何为他们工作

您可以通过证明您知道客户可能如何使用您的产品来减少不确定性和项目可信度. 向他们展示你的产品如何适应他们的日常生活,可以很快回答很多问题.

例如,星期一.Com提供了一个快速浏览,帮助用户了解他们将如何与网站互动.

周一.Com演示了用户如何与产品交互.

原型工具Framer更进一步, 用动画显示在帧器界面中工作原型的开发. 额外的交互性使用户能够点击不同的项目,以便更好地了解可能性.

Framer的登陆页面显示了在工具中创建原型的延时动画.

社会认同是必不可少的

社会认同对于SaaS产品来说尤为重要. 向你的客户展示值得信赖的合作伙伴对提高用户尝试你的产品的意愿大有帮助.

松弛的社会认同体现在它的演示屏幕上. 用户可以看到知名客户如何使用该应用程序.

社会认同的另一个重要形式是积极的同伴压力. 你在订餐前或在网上购买某件东西之前,多久会查看一次餐馆的正面评价? 根据 到BrightLocal, 87%的消费者就是这么做的.

背书可以是一个强大的工具,但它们必须提供信息并与用户相关. 如果做得好,他们可以同时做几件事. Zoom展示了评论如何:

  • 表现出你是受欢迎的. Zoom的代言表明,该产品得到了各行各业大公司的认可和使用.
  • 在顾客之间建立一种社区意识. 分享来自许多客户的反馈和想法可以沟通一个庞大的用户基础, 什么能让新顾客感觉更受欢迎.
  • 促进信誉. 用户看到的是由可识别的客户进行的购买-为您的产品提供可信度并建立信任.

Zoom使用知名客户的评论来增加信任.

右脚结束

即使用户已经浏览了整个页面, 他们可能没有准备好做决定的原因有很多:

  • 他们对您的SaaS产品感兴趣,但想了解更多信息.
  • 他们有问题或担忧还没有得到解决.
  • 他们不信任产品或品牌.

如何设计页面底部来解决这些问题? 第一个, 确保有一个清晰的区域, button, 或者链接,用户可以访问即时支持或联系可以解决他们的问题和担忧的人. 您可以提供额外的机会,通过聊天或提供常见问题解答.

另一种吸引好奇但不情愿的用户的方法是提供额外的视角. 如果免费试用不是你的首选, 然后,提供一个演示可能有助于吸引仍在观望的用户. 或者,您可以提供来自各种用户的案例研究.

你的页脚应该为用户打开一扇门, 让他们创造一个更强大的, 与您的产品建立更个性化的联系. 不要仅仅把它看作是页面的结尾:把它看作是用户新旅程的开始.

混搭才能成功

转化率并不是一个适用于所有产品的统一公式. 而, 一个成功的SaaS登陆页面将包括一个变量的编译, 这是可以控制的, 调优, 并组成一个网站,以实现三个c:

  • 传达了 用最有效的方式讲述你的产品故事.
  • 捕捉 用户的注意力、兴趣和行为.
  • 转换 他们.

###

了解基本知识

  • 什么是好的SaaS登陆页?

    除了利用一般的登陆页最佳实践, 一个好的SaaS登陆页面还应该针对产品的关键用户目标, 使用测试期间获得的数据, 并通过消除产品如何工作或融入用户生活的不确定性来建立信任.

  • 登陆页应该包括什么?

    登陆页应该包括, specific call to action; relevant imagery; copy that highlights benefits, not features; social proof; an uncluttered layout; and mobile friendliness.

  • 如何优化登陆页?

    您可以通过针对应用程序的关键用户进行定制来优化SaaS登录页面, 使用产品开发过程中获得的数据. 您还应该通过展示产品如何适应用户的生活来减少不确定性.

聘请Toptal这方面的专家.
现在雇佣
默罕默德Junaid

默罕默德Junaid

验证专家 在设计

拉合尔,旁遮普,巴基斯坦

2020年1月29日成为会员

作者简介

Muhammad是一名高级产品设计师和战略家,为世界各地的公司提供引人注目的客户体验, 包括阿尔斯特银行和拜耳公司.

阅读更多
作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

卡夫亨氏

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.