随着互联网产品越来越多,用户群体越来越庞大以及用户品位的多样性增加,我们会发现这样的一个规律,就是相同类型的产品,比如播放器中的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. vs 编译说明

    静态编译/MT,/MTD 是指使用libc和msvc相关的静态库(lib).   动态编译,/MD,/MDd是指用相应的DLL版本编译.   其中字母含义  d:debug    m:multi-th ...

  2. BZOJ 3990 排序

    [题目描述]: 小A有一个1~2N的排列A[1..2N],他希望将数组A从小到大排序.小A可以执行的操作有N种,每种操作最多可以执行一次.对于所有的i(1<=i<=N),第i种操作为:将序 ...

  3. Maven下载Jar包(bat脚本)

    1.创建一个bat文件叫download.bat 2.里面写入以下代码 call mvn -f pom.xml dependency:copy-dependencies 3.创建pom.xml文件 4 ...

  4. SpringBoot使用Docker快速部署项目

    1.简介 建议阅读本文最好对Dokcer有一些了解 首先我们先了解一下Docker是什么 Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口.它是目前最流行的 Linux 容器 ...

  5. Spring 注解编程之注解属性别名与覆盖

    前两篇文章咱聊了深入了解了 Spring 注解编程一些原理,这篇文章我们关注注解属性方法,聊聊 Spring 为注解的带来的功能,属性别名与覆盖. 注解属性方法 在进入了解 Spring 注解属性功能 ...

  6. kubernetes安装部署-day01

    一.基础环境的准备: 1.1.安装docker: docker的官网是:https://www.docker.com/ 1.1.1.rpm包安装: 官方下载地址:https://download.do ...

  7. 完全平方数(C语言实现)

    一.题目 一个整数,它加上100后是一个完全平方数请问该数是多少? 二.程序分析 1.题目中没有限定这个整数的范围,因此,可以在代码中#define scope 10000,即使用scope变量定义一 ...

  8. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  9. nginx(二)

    nginx rewrite ​ Nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向.rewrite只能放在server{},location{},if{}中,并且 ...

  10. [NLP-ASR] 语音识别项目整理(一) 语音预处理

      简介 之前参与过114对话系统的项目,中间搁置很久,现在把之前做过的内容整理一下,一是为自己回顾,二是也希望分享自己看的内容,中间也遇到一些问题,如果您可以提一些建议将不胜感激. 114查询主要分 ...