通过 PWA 我们让新用户转化率提升了 104%

标签: pwa 用户 转化率 | 发表时间:2017-04-29 10:31 | 作者:阿里国际UED
出处:http://www.zhihu.com
文章关键词:PWA、Google、Android、Mobile Site;
阅读本文大约需要 10 分钟。

过去的2016年里,你一定不下数次听到 PWA 这个词,但它究竟是什么呢?

PWA 其实是一种渐进式的的无需用户安装、可被随时唤起的 Web App , 融合了 Native App 的结构、交互、降级方案等的更优体验技术,使得用户通过浏览器打开网站时,获得有如原生 App 般的顺滑体验。

Google 的官方文档中是这样介绍的:

PWA(Progressive Web App), Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users.

利用最新的技术带给用户最好的无线体验。按照官方文档,PWA具有这些特性:Reliable, Fast, Engaging。

可靠的(Reliable):

瞬间加载,即使在不稳定的网络下也不会显示 downasaur(小恐龙页面),通过预加载缓存关键资源,消除对于网络的依赖,确认用户在无网络或者网络情况较差情况下的即时可靠体验


快速的(Fast)


快速响应并带给用户平滑的动画体验,没有卡顿

参与感(Engaging) 原生 App 一般的体验,具有沉浸式的用户体验,可以将 Progressive Web App 安装在用户的主频幕上,甚至没有浏览器的头部,给用户提供一种如原生 App 的全屏体验。


但说了这么多,关于 Progressive Web App 我们应该关注些什么呢?

  • 独立的 Logo
  • 快速加载 App Shell 模型
  • 添加到主屏幕,从主屏幕启动
  • App-like 启动画面
  • Web App Manifest
  • Service Worker 离线缓存
  • 推送通知 Push Notification

简单概括描述一下,PWA 是一种给用户提供无需下载、快速启动、顺滑体验的一项移动端技术。

独特的识别性,快速与 Native App 进行区分

PWA 可以拥有一个桌面图标。Flipkart不仅重新设计了 icon,还将 PWA 改名为 Flipkart Lite。


使用App Shell 快速加载页面

App Shell 预加载页面的框架结构和基础 UI 元素,渐进式缓存,动态加载内容。

很多网站在加载页面时都会遇 loading 等待的问题,这段时间里其实服务器在紧张的传输数据给客户端,再由客户端将结构渲染出来、内容填充进去。可惜用户并没有耐心等待,大家极有可能在这短短几秒内就关闭页面走掉了。

通过 App Shell 快速加载,可以减少用户界面中的白屏感受,让用户知道数据正在填充回页面。


无需下载,随时唤起

PWA 让 Web 应用能够像原生应用一样添加到主屏,无需通过应用商店下载,减少了用户安装原生 App 的成本。

用户可以通过 Chrome 等浏览器的侧边栏添加(下图左)或者通过 Chrome 弹出的 Add to Home Screen Banner 选择同意添加(右图)。可将 PWA 自带的 icon 生成一个桌面 App 图标,方便用户随时唤起。

友好的启动页

在无线页面中,所有的元素都是实时渲染的。所以 PWA 增加了类似 Splash screen的等待画面,显示品牌logo和品牌名,以便在这个等待时间内,预加载第一个页面所需的资源,缓和用户的等待时间。


沉浸式的的全屏体验 Web App Manifest

用户点击被保存在桌面的 PWA icon ,进入全屏的 PWA 界面。没有了浏览器头部,Progressive Web App 和 Navtive App 几乎没有界面上的差别。用户在浏览和使用页面的过程中,完全感知不到卡顿,所有的动效和反馈都是接近原生体验的,这对于像欧美这些应用下载意愿较低的用户而言无疑是更进一步提升了在手机端的使用体验。


无网络也能访问

当你处于无网络时,可以继续使用PWA,会自动加载你已经缓存的内容得以在离线时继续访问。这对于像巴西这类流量资费偏贵的用户来说可以节省很多不必要的浪费。

不同网站对于 Service Worker 的使用也不同:

  • Flipkart 在无网络状态下,置灰展示所有页面信息,所有已经加载的内容可以继续浏览,但是给到用户的感觉过于消极;
  • Digikala 在无网络状态下,仅使用灰色提示用户已经离线状态;
  • Alibaba 在无网络状态下,通过品牌定义的报错颜色提示用户出于离线状态,但是由于整体页面都比较明亮,用户感知不到处于离线状态;
  • Currency Converter 在无网络状态下,缓存的汇率比例可以继续离线使用;可以看到不同产品对于自己产品诉求的不同,使用离线提示的方案也会各有不同。


不安装也能推送通知 Push Notification

Push 是如今的产品必不可少的一个营销工具,我们需要通过它传递信息、唤醒用户。但通常的 Mobile Site 是不具备 Push 能力的。但 PWA 却可以,它能像 App 一样接收网站讯息,通知用户网站产生了新的内容或者和用户相关的通知,促使用户的回访。


与很多喜欢尝鲜的团队一样,2016 年初我们开始与 Google 团队合作,推动 PWA 技术在 AliExpress 上的落地。希望通过“新设计带来新体验;新技术推动新变革” 来看看 PWA 对于电商平台的意义。

结果是非常令人惊奇和满意的。AliExpress 发现新用户的转换率增加了 104%。在 Safari 的转化率也上升了82%。现在用户每次访问的页面数量是原先的两倍,也大大提升了用户浏览页面的时间。


AliExpress 的 Mobile Site 存在已经有些年头了,逻辑也不必 App 简单,想要重新开工并不是件容易的事情。而对于设计团队,我们的精力主要放在了以下几个方面:

无线“格式化”

抛弃了原有 PC 年代的 Header 和 Footer 的形式,以更符合 Web App 的特性。

优化交互结构

使用了类 App 的头部导航结构,整合页面中的功能,更合理的利用首屏的高度,更充分的展示有效内容。

界面升级

不仅在 UI 界面层遵循了 Material Design ,也在功能动效的还原上接近原生体验。

结果喜人,但过程同样也是坎坷不易的。有些 tips 给到大家。

01. 为你的 PWA 设计一个有识别性的 icon ,区别于 Native App icon(如果你有的话)。

由于市面上有较多投放尺寸,所以桌面启动icon需要适配各种场景,包含的内容:

  • Android Chrome 桌面图标及开机画面
  • iOS Safari 桌面图标及全屏开机画面
  • 浏览器 favicon Windows Phone 图标
  • 其他配置

推荐使用 Favicon Generator for all platforms: iOS, Android, PC/Mac... 来生成各种尺寸的图标及配置。

02.梳理原有交互框架结构,使得页面层级更轻量,流程更简洁。确认 App Shell 首先预加载的框架结构和 UI 元素,为每个页面设计渲染加载图片。

扩展阅读

感谢大家的阅读,希望本文对你理解 PWA 有所帮助。

--------- 招聘分割线 ---------

国际 UED 是阿里唯一一支国际化设计团队, 为集团的国际及国内业务提供设计支持。我们在杭州、深圳、北京、香港、美国、俄罗斯都有 Office,如果你对我们的工作感兴趣欢迎加入我们。

目前团队开放职位:

  1. 资深前端开发工程师
  2. 资深交互设计师
  3. 用户研究专家
  4. 资深视觉设计师
  5. Content Manager

简历投递邮箱: [email protected]

如果你是无线开发工程师,我们这里也同样非常欢迎。来邮件吧!



来源:知乎 www.zhihu.com
作者: 阿里国际UED

【知乎日报】千万用户的选择,做朋友圈里的新鲜事分享大牛。 点击下载

相关 [pwa 用户 转化率] 推荐:

通过 PWA 我们让新用户转化率提升了 104%

- - 知乎每日精选
文章关键词:PWA、Google、Android、Mobile Site;. 过去的2016年里,你一定不下数次听到 PWA 这个词,但它究竟是什么呢. PWA 其实是一种渐进式的的无需用户安装、可被随时唤起的 Web App , 融合了 Native App 的结构、交互、降级方案等的更优体验技术,使得用户通过浏览器打开网站时,获得有如原生 App 般的顺滑体验.

怎样通过更好的用户体验促进网站转化率的提升

- - 互联网分析
原文出处: Optimizing Conversion Rates:It’s All About Usability,编译: Beforweb. 对电子商务网站来说,可用性和用户体验的改善,对转化率的提高是有显著效果的. 所谓的改善,不仅包括更好的视觉效果与内容架构,更重要的是,怎样以更专业化的、让人信赖的方式在正确的时间传达正确的信息,与潜在客户进行有效的沟通.

电商命脉:转化率提高法

- 雪冬 - 月光博客
  行业内,一般电子商务站点转化率为3%.但也有很多站点的转化率做到了10%,而极个别顶尖零售商转化率做到了15%,他们是怎么做到的.   纽约时报畅销书作家Bryan Eisenberg在一次个人演讲中揭示了高转化率网站的秘密和实现方法,以下是他演讲的精髓部分:. 从根本上讲,转化率是衡量你说服访问者进行你预想销售结果的表现,是任何一家电子商务公司在作出努力后所希望得到的结果.

再说转化率:变现的算法

- - 所有文章 - UCD大社区
很有趣,过年时候写的文章 《说说转化率》,三个月后被几个地方转载了,当时我还觉得自己的科普很没意义似的. 就着最近经常被各种记者和同行问到的“蘑菇街的变现转化”的问题,整理一下,就用上一篇的方式,再跟大家分享一下好了. 我们上次说了,像我们蘑菇街这种解决用户“买什么”问题,并为电商引导成交的网站而言,很重要的一块收入,就是来自电商网站的佣金.

网站转化率与漏斗模型

- - 人人都是产品经理
摘要:漏斗模型适用于网站中某些关键路径的转化率的分析,以确定整个流程的设计是否合理,各步骤的优劣,是否存在优化的空间等. 试着去了解用户来你的网站的真正目的,为他们提供合理的访问路径或操作流程,而不是一味地去提高转化率. 前段时间刚完成了一个分析网站流程的每个步骤的流失率,并用漏斗模型进行展示的需求,这里跟大家来分享一下.

视觉营销让转化率如此彪悍!

- duyao678 - 所有文章 - UCD大社区
渴望得到大家惨无人道的支持,一个小小的玩笑过后我们步入今天的主题. 和以往的分享会有2点不同,1,我要做的不是什么教程,而是给大家一种引导. 2,我决定以两张视觉营销领域十分出名的图片和一个问题做为开场. 这是一张婴儿纸尿裤的平面广告初稿,并不是很有创意,因为它产品的卖点是用文字说明的(大标题). 初稿完成后老外们找了很多的人来看,记录下他们浏览不同位置的先后顺序和重点查看的位置,来进行视线轨迹研究,发现人们往往把他们的卖点(大标题)放在最后浏览.

表单设计与转化率的提升

- - 所有文章 - UCD大社区
无论是用于注册、支付还是联络,我们总是需要通过表单来获取用户的信息. 不幸的是,在现实当中,总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮. 这里面原因有很多,例如表单篇幅太长、不大友好、不那么值得信任,或是用户还没真正准备好进行交易等等. 这种情况每发生一次,我们就失掉了一个潜在用户. 怎样将表单设计的让尽量多的访问者更愿意完成填写,这是设计师们必须面对的挑战.

数据分析提升电子商务转化率

- - 互联网的那点事
消费者网上购物的平均时间,拿去年的6月跟今年的6月比较,从20分钟减少到了17分钟. 另一方面,客户停留在网站上的时间减少的同时,多数电商的转化率只有0.5%左右. 在注意力越来越分散的今天,99.5%的客户是流失掉的,电商要如何去了解这群客户的购物行为特征,并且使之转化为订单量. 对于电商来讲,人均浏览网页的时间,就是正在变得稀缺的竞争资源.