42 个移动端启动页面优化 Tips

标签: 产品设计 | 发表时间:2015-09-21 03:11 | 作者:P迪
分享到:
出处:http://www.alibuybuy.com

我们都听过这句话,“你只会有一次机会去打造第一印象”, 当涉及到移动端的启动页面时,这句话会更加令人信服. 在最基本的层面上,启动页面将会是消费者同你网站的第一次接触.

拥有好的第一印象是很重要的. 今年早些时候我们发布了这篇文章, 《响应式设计不是一种移动端优化策略》 ,它专门讲为你的移动通信媒介打造专用移动端启动页面来将访问者转换成消费者的重要性.

Responsive-design-

 移动端统计数据:

  • 今年美国智能手机的移动商务收入为148亿美元. (Statista)
  • 到 2016, 移动端本地搜索有望创造32亿美元的收入,相比之下,桌面端为102亿美元. (Kelsey 报告)
  • 50%的智能手机用户曾通过他们的手机进行过消费(Prosper Mobile Insights).
  • 73% 的智能手机用户声称他们曾使用移动端 web 而不是 app 来进行购买( JumpTap.com).

下面是42个移动端启动界面的优化建议,它们能帮助你将更多的移动端访问者转换成付费顾客,这些建议分为如下类别:

  •  策略
  •  基础
  •  AB 测试

策略

1. 知道从哪里开始 —— 创建一个完整的移动端 web 是昂贵的,且会耽误许多的时间。所以起步的最好方式是通过跟踪分析,了解转型中的痛点和漏洞。一旦你了解了这些,你就会明白从哪里开始了。你所要在转型中关注的应该是流量,用户量和购买模式.

2. 了解你的顾客的目标 —— 确保你能了解移动端和桌面端用户的目标有何不同。你是不是想要他们拥有完全一样的体验呢?我们使用 web 和移动端相比有所不同,其体验是不同的,而且又是我们因为完全不同的原因同时使用两种或者三种设别.。要考虑到你的访问者会在你的移动端站点上做些什么,理解他们尝试要达成的目标是什么,并且创建一个用户导游来帮助他们更快跟敏捷的达成其目标。

3. 定义你的目标 —— 一旦你了解并且也定义好了访问者的目标,那你就要定义好启动页面的目标并在心里针对那个目标设计一种体验。扔掉那些不重要的信息、针对过个调用的动作按钮以及其它的噱头。要专注于启动页面最重要的元素,以及如何让它们帮助你的访问者完成你的目标。

4. 改变他们的生活:有无数的公司在做同样的事情。人们在移动端的站点上花费的时间很少,并且需要在几秒中之内理解你(页面上)最有价值的部分。记得要关注客户和他们的利益。至少要说明:“我们是世界上最好的”,多一些可以说:“这将会改变你的生活”。

Screen-Shot-2014-11-17-at-9.32.23-AM

5. 定义所需的操作 –  你希望访问者在你的移动登录页上,知道一个他所需要的操作,那就要制定一个清晰的行为召唤(call to action),最好是明显的,具有逻辑性的,这能让访问者明确地移动到下一步。

6. 在重要的位置表述 – 一个访问者应该能够很快就区分他们,而不是去阅读复杂的文本和故事。确保你有价值的位置是在页面的顶部。你的标题和行为召唤(call to action)应该在折页(fold)(当访问者登录到页面的时候就能看到的部分)之上,这样能更快速地让访问者取其所需。

7. 清晰地知道后果 – 重要地是让访问者能清晰地理解,如果他们提供信息,你将会如何使用收集到的信息。

基础

8.  忘记滚动 —— 要创建出适合一个移动端屏幕边界的页面,并且这样的页面不需要滚动。这一点同时适用于横屏和竖屏模式.

9. 同时为横向和纵向的屏幕做设计 —— 大多数人在设计移动端启动界面时都会考虑到纵向视图, 但是有赖于访问者会横着拿他们的手机,所以他们也可能会在横屏模式下浏览你的移动端网站。要确保你的移动端启动界面针对这两种情况都能进行缩放.

Localization-on-mobile-pages

10. 使用本地化设置 —— 启用了 GPS 的设备可以运用特殊的本地化内容来减少文化差异的摩擦,提高转换率。 在你的注册表单中你可以通过他们输入的邮编侦测到访问者的国别和城市。 可以让“邮编”作为你的第一个地址信息输入项,并好好利用这一项信息来做点事情。

11. 移除外部链接 —— 通过移除连接到网站其它部分的外部链接,你可以控制访问者的浏览过程,使其更专注于你需要他们做出的动作。记住,移动端浏览器新的tab —— 打开立即就会是访问者原理你所设定的目标位置。要使其编程一次快速轻松的浏览过程,而别让他们跑到别的地方去了。

12. 去掉杂七杂八的东西 —— 集中在重点上,尽可能保持页面整洁,减少摩擦,保证按钮之间的间距足够大。杂七杂八的东西以及文字和颜色越少,访问者越愿意完成这项渠道。

13. 保持流程和设计的一致性——不要使访问者感到惊讶或被愚弄,在手机登录界面上使用他们在广告上看到的相同信息和设计。与信息保持一致,将有助于使页面的访问变现,同时提供广告品质。

14.别让用户缩放——登录页面的焦点由你决定。登录页面的设计方式将决定用户在网站上的操作。如果让用户缩放,他们将选择网站的焦点,而不是你。

IMG_0277

15.点击呼叫——很多移动搜索用户的目标都是立刻获取联系。相比复制粘帖号码,直接使用“点击呼叫”按钮将更容易让用户快速开始对话。在开始前,设置好你的电话追踪器以便跟踪来电。

16. 调整键盘 — 确保在每个表格区域中使用合适的键盘。访问者可以不用改变键盘输出而快速的插入数字或者邮件。

17. 保持表格最小化 — 所有设备上的注册表单都让人沮丧,手机上的注册表单更是如此。由于在手机上输入非常费劲,所以在可能的情况下尽量避免打开文本域。确保表格够大够清楚,可使用全屏,并使字段和提交按钮大的可以用拇指点击(忽略右边区域,因为它太小不能拖拽)。

18. 简化搜索—让访问者可以很容易的快速找到他们需要的内容。将搜索元素放在核心位置,可以保证用户可以快速的找到他们所需要的。(记住,这并不是最重要的因素,所以不要让它反超其他元素)

20. 允许“稍后购买 —— 有时候我们没有足够的实际或精力来完成注册或购买流程。可以在其他设备上通过 email 或加到购物车的简单方式,让使用者可以很容易的在其他设备上稍后完成购买流程。

21. QA,QA,再QA —— 因为手机网站在你自己的手机上测试通过,并不意味着它可以在别人的手机上也可以。在开始前,在谷歌 Analytics上核查,以找出访问者最常使用的的手机屏幕。确保在多种设备上检查你的登录界面,并在一段时间内进行跟踪。

22. 要求少一些 —— 为了减少摩擦、提高转化率,可对访问者要求少一些。在开始时,只获取所需要的最重要的信息,稍后再获取额外的信息。手机屏幕很小、时间宝贵,如果难以操作,人们将不会逗留。

23.使副本最小化 —— 大多数访问者不想通读文章的好几个段落。将最重要的信息放在登录页面上,使访问者快速移动到下一步。

24. 强调你的行动引导
行动的引导是一个访问者在启动页面看到的第一样东西。提供一个快速的方式让用户跟着你的行动引导,完成整个流程。让你的行动引导按钮可视,并且容易通过触摸屏点击。

通过 Naked Wines 检验以下示例:

  • 大量文本
  • 行动引导按钮被切断

IMG_0274

25. 优化你的表单 – 让的的表单尽可能的简单,让访问者快速完成你的表单,尝试着分离成多个简单的步骤。

26. 标题尽量短 – 标题长度不要超过 3-4 词,尽量一行显示。

27. 构建限制数据大小 – 移动数据连接会比家庭宽带连接慢,用户并没有那么多耐心等待移动网站的加载。确保符合移动用户的需求,更轻量级。

28. 远离 Flash –也许在 Web 上看着不错(无法转换),但在移动端并不合适。使用 HTML5,GIFs 和 JPEGs 会更好一些。

29. 将导航位置考虑进来 – 我们使用智能手机来看电视,开车,购物和完成各种功能。应使移动端顺眼,并使用图标来进行快速导航(包括短文字说明)。

30. 拥抱第三方社交平台登录 – 第三方登录有着很高的转化率,对于鼓励访客和你的商品进行社交互动是个极佳的方式。

31. 提供移动独享 – 大多数人更喜欢使用 PC 屏幕来下单。为了提高转换率,可尝试提供移动端独享,以减少与 PC 端正面竞争,增加销售。

32. 为动作而设计 – 将所有的可点击元素设计为按钮(不仅仅是文本链接), 确保它们足够大,并留白以突出。

iconixx_calculation-2

33. 少即是多——尽量使用少一点的文字,去除所有不必要的设计元素,只留下功能要素。

34. 消息个性化——智能手机提供了很多重要的用户信息。手机为用户提供了如 GPS 和基于位置服务的一体化特性,如:运往华盛顿!

35. 考虑字体因素——让文本更易读。使用更大的字体、行间距和字间距让文本容易阅读和略读。

36. 使   SEO 优化而不破坏转换策略——避免在手机登录页面使用大量文字,或者引入可伸展的 div 而引发混乱。这将缩短页面,使用户可以点击他们感兴趣的内容。

手机上的 AB 测试

Screen-Shot-2014-11-17-at-9.37.05-AM

37. 测试关键绩效指标(KPI)—— 开始测试前,确定你的商业目标,然后把它们转换为数字化的关键绩效指标(KPI)(例如注册数量、购买数量、下载次数)。一旦确定了关键绩效指标,就要确保建立正确的跟踪机制。

38.达到显著效果 —— 当你运行测试时,确保在达到显著效果前一直运行,你可以使用 Google Experiments 或者 A/B test calculator 来知道何时达到这个效果。达到显著效果可以确保你尽可能的从测试中了解更多,并知道它们的正确性。

39.避开特殊日期——在可以提供最真实的测试结果的环境下开展测试。避免在节假日、特殊活动或者结账日测试。

40.保持系统性——为了达到清晰并可理解的测试结果,确保在一段时间运行一个测试,或者如果你有足够的流量来同时运行多个测试组。

41. 测试策略,不是元素
当你处理好所有技术性问题和元素之后,可以增加用户转换率,但是要确保有测试策略,这样能更好的理解你的用户。测试按钮颜色或者标题只会让你关注某一个点。为了能获得最大的胜利,从你的测试中获取更多有价值的东西,你需要开启测试情绪化策略。

42. 使用一个清单 – 建议使用一个清单来记住以上讲述的所有启动页面优化的策略,确保没有漏掉任何重要的部分。一个清单也可以确保你和你的团队为每个项目都能按照这些策略去优化。

结束

响应式设计并不是一个移动优化策略。为了得到更多的移动访问者,创建专用的启动页面和启动页面的不同用户体验是成功的关键。


© 推荐 for 互联网的那点事. | 猛击下载: iPhone客户端 猛击下载: Android客户端

相关 [移动 优化 tips] 推荐:

hive 优化 tips

- - CSDN博客推荐文章
一、     Hive join优化. 也可以显示声明进行map join:特别适用于小表join大表的时候,SELECT /*+ MAPJOIN(b) */ a.key, a.value FROM a join b on a.key = b.key. 2.     注意带表分区的join, 如:.

42 个移动端启动页面优化 Tips

- - 互联网的那点事
我们都听过这句话,“你只会有一次机会去打造第一印象”, 当涉及到移动端的启动页面时,这句话会更加令人信服. 在最基本的层面上,启动页面将会是消费者同你网站的第一次接触.. 拥有好的第一印象是很重要的. 今年早些时候我们发布了这篇文章, 《响应式设计不是一种移动端优化策略》 ,它专门讲为你的移动通信媒介打造专用移动端启动页面来将访问者转换成消费者的重要性..

数据库的优化tips

- - CSDN博客数据库推荐文章
数据库   TIPS::. 1、用于记录或者是数据分析的表创建时::使用Id作为主键,1,2,3...表示消息条数,用户账号id用于做外键,一个用户对应唯一个accountId.                                     一个accountId可以对应多条数据;. 2、创建索引::    例如需要根据注册版本号和注册游戏ID来查询另外一些字段的时候,就可以根据版本号和游戏ID来创建索引::相当于就是根据查询条件来建索引;.

Cassandra性能优化的一些小tips

- - 邓的博客
最近,datastax的开发博客上发了一篇文章 How not to benchmark Cassandra (不要这样压测Cassandra),文章说了压测Cassandra时应该避免的几个地方. 其实,对于正常使用情况下提升Cassandra的性能,避免某些瓶颈,里面的有些tips还是非常有用的,所以摘录出来,本文并非原文翻译,而是选择了其中几点,并总结了自己优化Cassandra的一些实践,如果有需要,请直接查看链接.

mysql tips两则

- - jackyrong
mysql tips两则,都可以用来查看当前执行的语句. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

Android开发Tips

- - CSDN博客推荐文章
欢迎Follow我的 GitHub, 关注我的 CSDN.. 介绍一些, 在Android开发中, 会经常使用的小知识点.. submodule与git可以保持实时同步. 导入, 路径多于一个, 前面不添加冒号(:).. 使用PackageManager.. // 检查App是否安装 private boolean appInstalledOrNot(String uri) {.

HTML 5中的tips两则

- - jackyrong
1 input type中的required属性,支持正则表达式,比如. 2 同时支持HTML 5的vidio,也支持flash. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

移动端网络优化

- - Trinea
介绍下针对移动端的网络优化,不限于 Android,同样适用于 iOS 和 H5. 这篇文章首发在微信公众号 codekk. 本文为性能优化系列第四篇,目前性能调优专题已完成以下部分:. 性能优化总纲——性能问题及性能调优方式. 性能优化第四篇——移动网络优化. 性能优化第三篇——代码优化. 性能优化第二篇——布局优化.

一些PHP Coding Tips[2011/04/02最后更新]

- 硬盘被格 - 风雪之隅
作者: Laruence(. 本文地址: http://www.laruence.com/2011/03/24/858.html. 以下是一些PHP Coding Tips. 当然, 这些Tips并不一定仅仅局限于PHP. 大家有什么好的心得, 欢迎直接回复本文与更多的人分享. 本文长期更新, 请关注PHP Coding Tips.

tsung: 好文: PHP performance tips - Google Webmaster

- 小汐 - Planet DebianTW
Google 提供的 PHP 效能調校(Optimize performance)的幾點原則, 詳細可見此文:. 原文: Let's make the web faster - PHP performance tips. 作者: Eric Higgins, Google Webmaster.