随着互联网产品越来越多,用户群体越来越庞大以及用户品位的多样性增加,我们会发现这样的一个规律,就是相同类型的产品,比如播放器中的QQ影音和暴风影音,再比如小游戏平台中的腾讯游戏和联众等等,他们的功能是相同的或者是相似的,但是对于用户来说,每个人都有着不同的使用喜好。

其实无论用什么平台,都能完成同样的任务,那么对于用户来说,在同等产品当中他们是如何选择的呢?除了一些比如大品牌效应等等平常的因素,用户体验的好坏会成为用户在选择产品中的一个重要因素。假如我们在使用一个播放器放电影,发现经常出现卡顿和声音走音的现象,那么我相信这个用户很可能就会选择其他的产品。在互联网时代,用户体验越来越成为企业所重视的内容,从中也衍生出来了用户体验管理这么一个新生的事物。我今天就来给大家普及一下用户体验管理-UEM的相关知识。

一、什么是UEM以及UEM使用场景

UEM这个词大家可能比较陌生,UEM是USER EXPERIENCE MANAGEMENT的缩写,中文翻译为用户体验管理,它所要达成的目标是能够实时了解互联网产品或应用的真实用户体验。

这么说可能还是有一些抽象,简单来说UEM就是一种工具,这种工具可以实时收集很多数据,比如说用户所访问页面加载时间的长短、在访问页面是否出现了比如图片无法加载的问题、用户是通过何种设备比如是用手机还是电脑访问的应用,它走的是中国移动还是中国联通的流量等等。在收集完很多类型的数据之后,UEM会对数据进行归纳和处理以供分析人员使用,这样开发的公司或者运营商就知道了用户在应用当中的体验情况了,比如用户在访问哪些页面的时候比较卡,大部分用户是通过手机访问还是电脑访问等等。有了这样的数据,厂商就可以持续不断改进用户体验,让产品做得越来越受用户喜欢而且好用。这就是UEM所做的工作。

UEM的使用场景非常广泛,可以说只要是需要了解用户在应用上体验好坏的地方,都需要UEM。目前比较常见的场景是PC网站和手机端网站的用户体验,很多厂商也在做手机APP端体验管理的内容。相信在不久的将来,用户体验管理的应用场景会越来越多,内容也会越来越丰富。

二、UEM核心功能

用户体验一般分为移动应用体验(UEM App)和浏览器应用体验(UEM Web)两部分。对移动应用的用户体验支持,国内外很多厂商的产品都较为成熟和完善,大家在网上能够找到很多可以参考的项目,UAVStack开源项目目前主要关注于面向浏览器应用的用户体验。

一般来说,UEM的核心功能包括以下内容:

三、UEM常用实现技术

现在在UEM领域,常用的实现技术还是"探针"技术。也就是通过在页面HTML当中插入一段JAVASCRIPT代码(这里称为"探针"),这段代码可以实时获取和发送页面访问的一些数据,后台再对这些数据进行清理和收集,最后对数据进行统计画图或者以表格形式进行展示。其他的技术还有通过获取浏览器或者服务器上收集的数据来收集用户访问相关内容,但是目前用的比较少。

四、"探针"技术捕获数据解密

UEM的核心在于浏览器探针,通过自动注入到监测网页的JS代码,对实际用户访问的网页性能数据进行全样本采集和分析,找到影响用户体验问题本源,帮助用户持续优化Web应用性能。

浏览器探针的作用在于以下几点:

  • 采集浏览器基本信息
  • 采集页面性能数据(Navigation Timing API)
  • 采集AJAX性能数据+请求/响应数据
  • 采集JS错误数据(包括:出错页面或脚本URL,引用页面URL,Error Message,错误位置:行号,列号,等等)
  • 采集页面追踪数据(Resource Timing API)
  • 将捕获的数据上传到UEM Server,便于进行后续的存储、多维度分析、预警和优化等。

浏览器探针是根据浏览器状态来采集页面性能数据的。每次页面请求,当获取到onload事件结束,则以事件结束时间定义为页面完成时间。当有异步请求再次加载内容,那么这些异步请求记录在AJAX数据当中。基于采集到的数据,可以得到以下页面性能指标:

基于这些指标,页面加载流程的分解和可视化将会变得十分简单。

五、页面加载流程可视化

页面加载流程可视化是UEM数据统计的一个重要手段,是UEM成果的通俗展示方式。上图是页面加载流程可视化的一个示意图。上述页面性能数据是实时上传的,但数据上传分四个时机:整个页面加载完成后上传、离开页面时上传、发生JS错误时上传和有AJAX请求时上传。此外,浏览器探针是自动注入到监测网页的,UEM Server会监听应用服务器的输出,当用户开启自动注入功能,UEM Server会在应用服务器的输出函数内自动注入UEM的浏览器探针,通过大量的实验室数据对比,自动注入UEM浏览器探针对服务器性能几乎无影响。

UAV官网地址:HTTPS://UAVORG.GITHUB.IO/MAIN

GITHUB地址:HTTPS://GITHUB.COM/UAVORG/UAVSTAC

作者:何建欣、谢知求

来源:宜信技术学院

UEM“探针”技术及用户体验管理的更多相关文章

  1. 全面产品管理-从细微处认识"用户体验"

    转载: 让我以一个故事开始本文,我觉得这个故事能概括大多数人听到“用户体验”这个术语时的想法. 我经常访问的一个财经网站给我发了一封电子邮件,请求我点击里面的一个链接,对一些信息进行审核.所以我就点了 ...

  2. CDN高级技术专家周哲:深度剖析短视频分发过程中的用户体验优化技术点

    深圳云栖大会已经圆满落幕,在3月29日飞天技术汇-弹性计算.网络和CDN专场中,阿里云CDN高级技术专家周哲为我们带来了<海量短视频极速分发>的主题分享,带领我们从视频内容采集.上传.存储 ...

  3. paip.提升用户体验----gcc c++ JIT-debugging 技术

    paip.提升用户体验----gcc  c++ JIT-debugging 技术 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http ...

  4. Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?

    什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...

  5. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  6. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  7. Ladda – 把加载提示效果集成到按钮中,提升用户体验

    Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...

  8. 运用预加载提升H5移动页面的用户体验

    原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...

  9. 提升网站用户体验—WebP 图片的高效使用

    一.WebP 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...

随机推荐

  1. Navicat Premium Mac破解版安装方法

    第一步:这部分暂时存到文本编辑器中 公钥: -----BEGIN PUBLIC KEY-----MIIBITANBgkqhkiG9w0BAQEFAAOCAQ4AMIIBCQKCAQB8vXG0ImYh ...

  2. 为什么QQ能上却打不开网页呢?

    互联网是一个复杂又有趣的玩意儿,接下来我来分享一个案例: 网页打不开,但奇怪的是QQ可以正常使用??? 网页打不开的原因:电脑上Tcp/IP设置中没有使用自动分配的DNS服务器,而且自行设定的DNS服 ...

  3. ZigBee按键查询实践

    按键查询 即硬件上电后,程序开始运行,当检测到按键按下,触发按键语句,执行按键触发的事件: 玩单片机需要清楚两件东西,第一个是单片机的电路图,另一个则是单片机的寄存器: CC2530是51的升级版,我 ...

  4. Java第五次作业--面向对象高级特性(抽象类与接口)

    Java第五次作业--面向对象高级特性(抽象类与接口) (一)学习总结 1.在上周完成的思维导图基础上,补充本周的学习内容,对Java面向对象编程的知识点做一个全面的总结. 2.汽车租赁公司,出租汽车 ...

  5. Unix及Linux编辑器vi/vim基本使用方法

  6. Netty-Channel架构体系源码解读

    全文围绕下图,Netty-Channel的简化版架构体系图展开,从顶层Channel接口开始入手,往下递进,闲言少叙,直接开撸 概述: 从图中可以看到,从顶级接口Channel开始,在接口中定义了一套 ...

  7. [leetcode] 290. Word Pattern (easy)

    原题 思路: 建立两个哈希表,分别保存: 1 模式 :单词 2 单词 :是否出现过 水题 /** * @param {string} pattern * @param {string} str * @ ...

  8. [leetcode]python 448. Find All Numbers Disappeared in an Array

    Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...

  9. 一个简单的JS倒计时

    看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时.全当学习JS. 主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时) ...

  10. 使用Kubeadm创建k8s集群之部署规划(三十)

    前言 上一篇我们讲述了使用Kubectl管理k8s集群,那么接下来,我们将使用kubeadm来启动k8s集群. 部署k8s集群存在一定的挑战,尤其是部署高可用的k8s集群更是颇为复杂(后续会讲).因此 ...