从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计;2015年网页设计趋势预测中,响应式仍在继续。这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮。这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势。

源起

2010年5月,伊桑.马科特(Ethan Marcotte)在“A List Apart”写了一篇开创性的文章(题为“Responsive Web Design” ),他利用三种已有的工具:流动布局(fluid grids)、媒介查询(media queries)和弹性图片(scalable images)创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。 Ethan Marcotte力劝设计师们要去利用那些Web独有的特性去进行设计: “我们可以将不同联网设备上众多的体验,当作是同一网站体验的不同侧面来对待,而不要为每种设备进行单独剪裁而使得设计彼此断开,这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验,但还要把基于标准的技术也嵌入到我们的设计中去,这样才能使得我们的设计不仅灵活,而且还能适应渲染它们的各种媒介。” Ethan Marcotte证明了一种在多种设备上都能提供卓越体验的方法的存在,而且这一方法不会忽视不同设备的差异,也不会强调设计师的控制权,而是选择了顺其自然并拥抱Web的灵活性。

这里简单介绍下上面的提到的三个概念:流动布局(fluid grids)、媒介查询(media queries)和弹性图片(scalable images)原本都是指现有的一些技术手段,但在做响应式设计研究的过程中,这些概念还是有更广泛的意义,设计师也应该有所了解:

  1. 流动布局:原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念:在响应式设计的布局中,不再以像素(px)作为唯一单位,而是采用百分比或者混合百分比、像素为单位,设计出更具灵活性的布局方式。
  2. 媒介查询:媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询,可以获取到设备及设备的特性,并给出求同存异的方案,从而解决之前在单纯的布局设计中遗留的问题。
  3. 弹性图片:伴随布局的弹性,图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。个人认为弹性图片是Ethan Marcotte提出设计产品时提出的概念,我们在后续的研究中可以以图片为典型,扩大研究范围:除了图片,还应该包括图标、图表、视频等信息内容的响应方式研究。

盛行

响应式设计的概念从提出至今,一直不断蔓延扩散,并得到各方认可的主要原因:

  1. 外部环境:快速增长且日趋加剧的可联网设备的多样化,让现今已不再有标准的屏幕尺寸;
  2. 自身特色:严格定义的响应式一般是指响应式Web设计,而Web凭借其特有的灵活性和可塑性,可以适应各种尺寸和配置的设备,可以无处不在。
  3. 内部需求:响应式设计概念一提出,各大网站及平台都希望能够采用这秉一应万的模式,可以更灵活地去适配更多设备,尤其是现在移动设备大爆棚的时代。

当然也并不是所有的情况都理所应带应该采用响应式设计,那么什么情况下更适合采用响应式呢?

  1. 你想节约成本地去适应更多场景:> 资源都是有限的,但总是希望能利用有限的资源去获得更大的价值。虽然比起开发设计一个普通的网站来说,要打造一个响应式站点,所需要的人力和时间资源都会有所增加,但比起为不同设备分别打造多个版本的成本还是要低很多;从维护的角度来说,也会轻松很多。
  2. 你并不清楚要设计开发的全新产品更适合哪个场景:> 与其通过预测挑选核心设备再进行分别设计,倒不如先花些心思将网站打造得更具弹性,使其在各种设备中都拥有尽可能优秀体验。因为在各方面都未知都情况下,做预测会加剧过程风险,使得结果存在巨大的挑战性。
  3. 你希望网站可以兼容未来的新设备:> 新的设备层出不穷,与其被动地进行更新维护,不如主动应万变,成为响应式。 当然这里只是说更适合,其实个人认为只要项目资源和时间允许,基本上大部分网站都可以去尝试实现响应式;而对于初次尝试响应式设计的,也可以从“简单浏览型页面”开始。

模式

目前大多网站中选择成为响应式的设计模式主要有两种:

  1. 基于设备:通过主流设备的类型及尺寸来确定布局断点(break point),设计多套样式,再分别投射到响应的设备。
  2. 内容优先:根据内容的可读性、易读性作为确定断点(break point)的标准,即在对内容进行布局设计的时候,可以无视设备,有内容决定何时需要采用不同的呈现方式。

个人还是倾向内容优先的方式,这是真正符合响应式设计核心策略的模式,也是对未来友好的方式。 从过去基本上是基于pc的几个尺寸,选择最佳的标准尺寸去设计页面;到现在移动设备已经玲琅满目,同时电视、穿戴设备也慢慢开始起来,已经不再有固定的尺寸;未来,将是更加无法预知的设备环境;那么什么才是王道呢?——就是内容本身! 变化总是来得快且狠,我们要做的就是抓住那根可以贯通全局的线!

在内容优先的策略中,有三点思维模式可以贯穿整个响应式设计的过程:

  1. 忘记设备:因为我们不知道用户会用什么样的设备来访问网站,因此,我们必须尽可能地把所有情况都囊括进来;所有的东西(布局、组件等)都能与不同类型的设备和平台相兼容。
  2. 优雅降级:虽然这个概念一开始是技术实现上对新的特性在老的浏览器上无法很好实现时的折中做法,但在此仅想表达在对布局做弹性设计时,内容从宽到窄的变化呈现,必须经过重重筛选,留存最核心的内容块。这种模式非常适合对已存在的pc页面产品进行响应式设计改造。
  3. 渐进增强:此概念是在Steven在2003年的SXSW活动上提出的。在本质上来说,就是把优雅降级倒过来:先创建一个基本体验,侧重让内容以一种简介的方式来展现;之后,在保证基本体验的前提下,开始着手做有关显示的布局和交互。而在此,也借用来说明下对于响应式设计的内容策略中,内容从窄到宽的变化呈现中,可以让内容的丰富度也相应地有所增加。这种模式与移动优先策略是相匹配的。

当然,目前响应式也是有存在各种争论的,也许你有一个很好的理由不用响应式网页设计?但我想没人会说,“让我们摆脱响应式设计吧”,而实际上,越来越多的网站选择成为响应式。2014年如此,2015年也还是会继续,因为这已经不是种趋势,而怡然是种常态了。

未来的路

虽然响应式设计的优势和趋势已被普遍认可,但目前响应式设计的模式的普及还是有很多难题需要突破:

  1. 响应式图片:目前弹性图片的做法主要是:缩放、剪裁、分条件加载等实现方法本质上都只是一个技巧,只是治标不治本地掩盖了问题,并未真正完美地实现图片的弹性。
  2. 跨端的交互:在响应式设计中,我们不仅要需要考虑桌面用户的使用习惯,还必须兼顾不同尺寸的手持设备。比如在桌面端无尽优雅的Hover,在移动端却是无比糟糕的体验,如何“求同存异”,让各端体验均能最佳,还是需要继续深入探究的。
  3. 性能:性能估计是在响应式开发中最大的痛,按条件加载、隐藏或显示什么内容,都会比单一条件判断的代码结构来的繁琐,并影响体验及维护。尤其是移动性能上,更多样的设备具有更加复杂的使用环境,如何识别设备,并让设备在不同环境均能良好体验,也是一根硬骨头。
  4. 合作流程:响应式设计远远不止是一种简单的设计策略,它为Web项目带来的是一整套全新的、完整的方法,还应该包括一种新的、可以更好地利用这一模式的工作流程。

最后,我想说下响应式体现的是一种高度适应性的设计思维模式。在响应式设计探究的道路上,响应式本身不是唯一目的,基于任意设备对页面内容进行完美规划的设计策略及工作流程应该是我们更大的课题~

人物角色可以从很多维度来划分,例如用户目标、用户场景、用户行为、体验周期、用户价值、……,根据实际情况,人物角色可能按一个维度划分,或结合多个维度进行划分。 为设计服务的人物角色,用户目标是人物角色划分中最重要,也是必不可少的一个维度。 对于资讯/信息型的分析对象,对资讯/信息的关注度能够很好地体现用户的使用目标。 本文以1688网站用户对供应商信息关注度的问卷调查案例为基础,来介绍基于用户尺度评价的人物角色分类方法,主要分为以下几个过程:  

1 获得尺度评价结果

1.1调研目标 通过了解用户对供应商不同信息的关注度,为产品详情页面供应商信息的组织与呈现提供设计参考与依据。

1.2调研内容 根据目前供应商信息中所展示的内容,以及公司档案中的相关信息,结合以往相关调研结果,总共进行17项供应商信息的关注度调研(详见因子分析结果列表,因子分析结果列表中只列出了16项,根据因子分析理论,“保障”没有纳入到最终的因子分析中去)。

查看更多

用户满意度调查是用户体验工作中重要一项活动。在了解整体满意度、一级指标满意度、二级指标满意度外,还需要了解下一级指标对上一级指标的权重,帮助确定各个方面的工作优先级,为产品优化改进方向提供决策依据。下文将简单介绍一下几种满意度指标权重的计算方法。

Part 1. 权重计算的作用

指标权重可以更合理的评分用户满意度,指导用户体验优化方向。

满意度调查的主要作用有:

无标题

  • 了解当前产品用户满意度(产品的用户满意度怎么样?)
  • 发现产品的满意度短板(满意度中的哪方面用户最不满意?)
  • 确定改进方向(哪些方面是需要优先改进的?)

不同评价指标对整体满意度的影响力是不一样的,但之前我们基本上默认不同指标的影响力是相同。

在计算满意度时,在多级指标结构的满意度评价中,采用算术平均方法来使用二级指标计算一级指标、使用一级指标计算整体满意度是。这样的计算方法是存在不合理性。

在计算用户满意度改进优先级时:

  • 在没有权重的情况,不同指标的改进优先指数=(极大值-得分)/(极大值-极小值);
  • 在有权重的情况,不同指标的改进优化指数=权重*(极大值-得分)/(极大值-极小值)。

在确定满意度指标改进优先级时,不但考虑满意度指标的提升空间,同时考虑指标权重(即影响力),这样满意度指标改进优先级更加合理。

查看更多

最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能;具体demo可以参见下图:

(如上图,宽屏模式,1180下,每页3个offer)
对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了。现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能。
按照传统的一般做法,用jQuery可写成如下:
查看更多

如果我们想知道浏览某个页面的用户到底在看些什么?一般往有如下几种方法:1.查看点击流数据,如CTR(Click through rate,点击转化率/点选率)、点击热图(Heat Map,可用于测试不同的布局方式、配色方案等对整体效果造成的影响);2.眼动测试,可得到用户的注视轨迹、某一区块的注视时间、注视点个数、回扫次数,及注视热图等。3.用户访谈和用户测试,定性了解用户的浏览行为及其背后的原因。

方法1属定量分析,方法2和方法3属于定性研究。针对于用户对页面信息关注度问题的研究,页面的点击数据并不是一切,我们无法准确分析那些不能产生有效点击的浏览行为,而定性研究虽然可以挖掘用户关注的信息及其原因,但是无法量化,说服力不足。所以一般采用定量和定性方法结合来研究。

本文要探讨的是基于定量与定性分析之间的灰色方案,即利用问卷的选择题来挖掘分析用户对页面信息的关注度。问卷调研既可以了解用户的行为和态度,又由于收集量较大,具有一定的说服力。问卷中,对于涉及点击行为的指标,可以结合点击数据进行验证分析;对于不涉及点击行为的指标,可先利用定性研究(如用户访谈)确定调研内容、设计选项,再利用问卷收集数据来量化用户观点。

选择题设计的注意点:

1.题型的选择。

题型可以有多选题、单选题、评分题。根据调研内容确定题型。如想知道用户比较关注的信息版块,而现有的信息版块个数较多,超过了5个(数据参考:渡劫  调研问卷中多选题的分析方法探讨(2)),就用多选题,如图1;如果小于5个,比如现有旺铺的产品版块分类基于4种常见方式,则可采用评分题,如图2。评分题与多选题的区别在于评分题让用户评价更为细腻,但填答成本较高,所以适用于选项较少(一般不超过5个)的题目。如果调研内容需要明确最为关注、最常使用等性质的信息,则应采用单选题迫选,以明确问题。

查看更多

Javascript-Selectors

如何在寸土寸金的首页上使页面的价值最大化,是每个网站设计者最关心的话题。

用户关注的页面长度、宽度都是有限的。宽度自不必说,一般网站都会根据自己网站最大用户群的硬件条件来设置;长度虽然没什么限制,但很少有用户有耐心看完太长的页面。

这个有限的区域相当于一个超市,页面内容相当于商品,超市要决定如何放置商品,就需要清楚每类商品所能带来的价值,然后综合协调摆放,使整体利益最大化。

超市在衡量商品价值时,不会一件一件的去衡量,而会把一种类型商品作为一个整理来衡量。 在网页内容的设计过程中,同一主题的内容经常会作为一个区块的方式展现在页面上,例如中文站首页的“卖家即时供应”、小商品首页的“饰品混批”等等。这一个区块的价值就是网站运营者或者设计者需要了解的“一种类型商品”的价值。

页面区块图1

那么如何计算区块的价值呢?

查看更多

yuancheng

一.  前言

远程测试的优点已经无需赘述,在产品开发项目周期短暂,来回实验室时间及路费成本高昂,用户遍布全国各地难以邀约的情况下,远程可用性测试正在成为“实现传统可用性测试80%好处和70%效果”的最佳替代品。
在远程测试的实际可行操作中,第一步所要做的就是搭建一个稳定,安全,且满足测试需求的测试环境。 中文站用研组最近在这方面进行了积极尝试,并得到一定成果。

001
图1:传统实验室可用性测试

  二. 传统方式的远程测试系统搭建

在传统远程测试(图2)中,我们通常可以采用如下两种方式搭建测试系统:
方法1:先让参与者在自己的电脑上安装屏幕共享软件的server端,然后主试通过viewer观看其操作,并在自己的屏幕上进行录屏。
方法2:参与者远程连接到主试电脑并进行操作,同时在主试电脑上录屏。

002
图2:传统远程测试系统

与传统可用性测试(图1)相比,远程测试的好处是不言而喻的:

  1. 1.  招募参与者更容易,范围也更广。提高了邀约成功率,且潜在的参与者将从“居住或工作在测试地点附近的人”扩大到“任何有快速internet连接的人”,这意味着全国各地的用户均可参加测试。
  2. 2.  研究周期大为缩短。邀约成功率的提高,无需考虑参与者往返时间,以及可以在任意时间安排测试,这些都为整个项目开发节省下了宝贵的时间。
  3. 3.  在用户真实操作和使用环境下进行测试,更有利于发现实际问题。
  4. 4.  效果几乎相同。远程测试发现的问题类型和数量很可能与现场测试相同。

但这两种传统的远程测试搭建方法本身都有其缺陷和不足之处:
第一种方法只适用于demo存在于线上,或者供测试的demo不存在保密方面的问题可以无阻碍的传送给参与者的情况(在实际商业环境的项目中这种情况很少存在);且参与者在共享屏幕前需要在自己的电脑上安装一个软件(webex或gotomeeting,有时还要进行相应的设置),这对于操作及计算机知识水平都较低的用户(恰恰是中文站的典型用户,相信在其他网站用户中也占相当一部分数量)来说存在着相当的顾虑和障碍(安装设置麻烦,担心有病毒等等),这就在挑选参与者时又多出了一层限制,减少了邀约成功率,并且也相应延长了远程测试所需要花费的时间。
第二种方法适用于demo存在于线上或公司内部的电脑线下环境里,但若直接让用户访问我们平日工作用电脑,将存在很大的安全隐患问题;且园区的办公网络环境存在特殊性(如外网IP统一等),在这种情况下,外部用户无法直接连接到公司内部的任何一台普通电脑。

查看更多

聚焦

在网页运营改版过程中,经常有设计师或者运营同事有这样的疑问:我的页面到底产生了多大价值?这个页面引导的用户接下来访问了多少商品的页面?有没有产生交易?有没有到我想让用户去的那些页面?

如果使用数据库查询,固然可以得到一些结果,但查询过程过于复杂,数据量大的网站查询耗时太长,很难灵活应用到普通页面。本文提出一种相对简单的分析方法可以解决这个问题。

每个用户在网站上的访问轨迹在网站日志或者数据库中,都是一串URL,有的只访问了一两步,有的访问了成百上千步,如何在如此复杂繁多的数据中找到用户在访问某个页面(例如服装首页)之前或者之后n步,有多少人访问过特定页面(例如交易页面)?

先抛开这个问题,我们想象这样一个场景:在一个大会场中,熟人坐在某个座位上,如果我们知道他们的位置,我们的眼睛很容易聚焦到这几个位置,自动忽略其他座位的人,请参看图1。同样,人们在观察周围事物时,经常会把精力聚焦到自己关心的事物上,下意识忽略其他。我们曾经做过这样的实验,我们的报告厅有4个很大的外置式扩音器,分列在两侧。注意不是那种不显眼的内置式,任何人只要稍微留心就会看到。而当我们要求会场的人闭上眼睛回答会场有几个扩音器时,很少有人能给出正确答案,因为大部分人会关心更重要的东西,比如会议内容,提问问题,甚至是如何找个舒适的位子也比扩音器的多少更让人关心。

图1

1

回到我们网站碰到的问题,某个项目的设计师关心的页面并非全部,而只是几个与之页面有关的页面和部分重要的指标页面。因此我们可以去除相关性不大的页面,只保留关心页面,从而缩短用户路径,大大提高计算效率。

另外,我们把索引的思想引入分析过程中,把网页的URL按照一定规则(例如正则表达式)替换成简单字符,把相关性不大的页面统计替换为同一个字符(例如“0”),把一些过渡性的页面替换成某个字符(例如”p”),如此以来,每个用户的访问路径就可以表示为一个字符串,例如”a,c,0,0,0,a,p,p,c,0,c,d,0,0,0”。也有的用户的访问路径全为相关性不大的页面,此时,路径为”0,0,0,0,0,0,0,0,0,0,0,0,0,0”,这表示用户并未访问到目标页面,如果不需要计算用户比例或用户分类,那么这样的记录我们可以删除掉。

查看更多

A/B测试:实现方法

A/B Testing 实现方法

上文介绍了 A/B 测试的基本概念,接下来我们继续探讨如何实现 A/B 测试。

我们先来看一个图:

A/B testing 部署概念图

(注:感谢Algo提供本图。)

上图展示了 A/B 测试的实现原理。从左到右,四条较粗的竖线代表了 A/B 测试中的四个关键角色:客户端(Client)、服务器(Server)、数据层(Data)、数据仓库(Data Warehouse)。从上到下代表了三种访问形式:无 A/B 测试的普通访问流程(Non AB test)、基于后端的 A/B 测试访问流程(Back-end AB test)、基于前端的 A/B 测试访问流程(Front-end AB test)。

一般情况下,用户在一次浏览中,会从客户端(Client)发起一个请求,这个请求被传到了服务器(Server),服务器的后台程序根据计算,得出要给用户返回什么内容(Data),同时向数据仓库(Data Warehouse)添加一条打点信息,记录本次访问的相关信息。这个过程也就是图上横向的流程。数据仓库收集到足够的数据之后,就可以开始进行分析(Analytics)了,这也即是图中右上角的部分。

A/B 测试需要将多个不同的版本展现给不同的用户,即需要一个“分流”的环节。从上图中我们可以看到,分流可以在客户端做,也可以在服务器端做。传统的 A/B 测试一般是在服务端分流的,即基于后端的 A/B 测试(Back-end AB test),当用户的请求到达服务器时,服务器根据一定的规则,给不同的用户返回不同的版本,同时记录数据的工作也在服务端完成。

基于后端的 A/B 测试技术实现上稍微简单一些,不过缺点是需要技术部工程资源介入,另外收集到的数据通常是比较宏观的PV(Page View)信息,虽然可以进行比较复杂的宏观行为分析,但要想知道用户在某个版本的页面上的具体行为往往就无能为力了。

基于前端的 A/B 测试则可以解决上面的问题。它的特点是,利用前端 JavaScript 方法,在客户端进行分流,同时,可以用 JavaScript 记录下用户的鼠标行为(甚至键盘行为,如果需要的话),直接发送到对应的打点服务器记录。这样的好处是不需要技术部(如果你们和我们一样,前端工程师与后端工程师分属不同部门的话)参与,并且可以比较精确地记录下用户在页面上的每一个行为,甚至包括后端方法难以记录到的无效点击!

下面,我将重点介绍一下我们在基于前端的 A/B 测试上的一些实践。

查看更多

A/B测试:基本概念

1-1

网站设计中,我们经常会面临多个设计方案的选择,比如某个按钮是用红色还是用蓝色,是放左边还是放右边。传统的解决方法通常是集体讨论表决,或者由某位专家或领导来拍板,实在决定不了时也有随机选一个上线的。虽然传统解决办法多数情况下也是有效的,但A/B 测试(A/B Testing)可能是解决这类问题的一个更好的方法。

所谓 A/B 测试,简单来说,就是为同一个目标制定两个方案(比如两个页面),让一部分用户使用 A 方案,另一部分用户使用 B 方案,记录下用户的使用情况,看哪个方案更符合设计目标。当然,在实际操作过程之中还有许多需要注意的细节。

查看更多

摘要:在进行互联网用户浏览行为的定量研究中,我们采用数据挖掘的方式对网站日志进行分析,用可视化技术展现日志的有效信息,开发了一个基于网站日志的可视化分析系统。这个分析系统通过用户产生的服务器日志数据自动还原出网站结构,按照页面流量阈值绘制站点地图,并将关键的页面流量数据及其他商业指标进行可视化处理,标注在这张特殊的网站地图上。这个分析系统能够让用户研究员更加实时直观地了解网站用户动态,获得网站重要页面及产品的直观图像甚至健康状态。

关键词:网站日志,数据挖掘,可视化,多维缩放,相关性分析

1. 引言

随着互联网的飞速发展,人们的工作和生活越来越依赖网络,尤其在金融、电子商务等领域里,传统的交易模式已经被快速便捷的网络交易模式所取代。网站用户数量及其访问率随之迅猛膨胀,如何更加快速实时了解用户访问行为模式,帮助改善企业网站的用户体验,成为越来越备受关注的课题。数据挖掘技术和网络信息的可视化为该课题提供了有效的解决途径。

2. 日志数据挖掘

2.1 概述

数据挖掘是从大量的数据中,抽取出潜在的、有价值的知识(模型或规则)的过程。用户在访问网站过程中,服务器会将用户的访问轨迹记录在网络日志中。对这些日志进行分析,研究者将会发现很多有价值的信息。

我们研究小组研究开发了基于网络日志的网站用户行为可视化系统G2G(the Guide to Galaxy)。在该系统中,我们采取的分析过程主要包含数据预处理,数据提取,数据可视化三个部分。本节我们将分别阐述分析过程以及实现原理。

2.2 数据预处理

数据预处理部分包括数据清理和数据补充。

对于访问量较多的大型网站,日志数据往往也会相对庞大。在提取有效信息之前,我们需要过滤掉无效信息,例如出错记录、图像文件请求记录以及公司内部员工由于工作需要产生的访问记录等干扰记录;另外,如果研究目的不是分析研究网络爬虫行为,我们也需要过滤掉这些非人为产生的记录。

对于用户访问的URL,很多研究者更倾向于从宏观角度研究,更关心这是属于哪一种类型的URL。因此,我们需要在每个URL上补充一个类别标记,以便于我们在可视化展示的过程中,研究者很容易看到各类URL的访问情况。

2.3数据提取

每条访问记录里包含如下信息:当前访问URL、来源Refer(用户访问当前页面的前一个来源页面,例:用户从A页面的某个连接进入B页面,则B页面的Refer是A页面;如用户直接在地址栏输入页面B的URL并转向B页面,或直接从收藏夹打开B页面,则B页面的Refer为空)、访问时间、IP地址、CookieID(用来标识用户)、浏览器信息等。这些正是我们需要提取的信息,经过程序处理,我们将把这些信息读取到数据结构里,图1描绘了数据提取在整个分析过程中的作用。

BI1

1 数据提取过程

在图1中,左边柱状图为网站日志,我们截取某个时间段的日志,提取出以上信息,还原为各单独用户的访问序列,形成索引节点,最终在可视化界面上以多种维度显示有价值的信息。

2.4数据可视化

我们的系统分为三个页面,图2是时间步数序列图,图3是URL分布图,图4是行业用户群关系图。

tu3

2 时间序列图

图2纵坐标为时间:0:00-24:00,横坐标为用户访问步长:1步-800步。每个像素代表用户在一分钟内有多少用户访问过,颜色越红表示访问用户越多。例如,当某个用户的访问步长是100步时,则在横坐标为100处,纵坐标为用户访问时间处标注颜色。如果用户在接连不断的访问网站,则在相应位置会出现一条纵线。

URL分布图

3 URL分布图

图3上的每个圆圈代表网站的一个URL,圆圈大小代表访问量,越大代表访问量越高。颜色代表转换率,越蓝代表转换率越高。基本上,蓝色节点可以看做是起点,橘黄色节点可看做是终点。

URL的排列采取目录结构方式,内圈代表最简单的目录,越往外圈,目录越深。例如,某个URL名称为a/b/c.html,则a作为一个URL在最内圈,a/b在次外圈,a/b/c.html在第三圈。在很多情况中,a和a/b只是纯目录结构,并非实际页面,并没有用户会访问到它们。因此以正方形表示,以此为圆心的空心圆圈大小代表其子节点的总访问量。在上例中,a的空心圆圈的大小就是a/b,a/b/c.html,a/d,a/d.html等等形如“a/*”的页面的访问量之和。

行业用户群关系图

4 行业用户群关系图

图4展示了不同行业用户群之间的互相发送反馈行为的情况,可以作为行业相关性分析的一个重要参考。图中不同的圆代表不同的行业,圆越大代表该行业的用户群越活跃,圆的颜色越偏向红色说明该行业相对被关注得越多,越偏向蓝色则说明该行业相对被关注得越少。最有价值的信息是不同圆之间的距离,距离越近说明两者之间相关度越高。圆与圆之间的连线表示两个行业之间存在足够的联系。

2.5 实现方法及原理

由于涉及到海量日志信息的处理以及大量节点图形的表现,为了在可视化显示上尽可能地做到高效,我们采用Xlib来实现图形展示。

其中,在绘制URL分布图时,由于有些情况下需要快速绘制上万甚至十几万的节点及连线,此时使用Xlib自带的绘图函数已不能满足需求,于是我们采用了内存缓冲的方式,先用高效的算法在内存缓冲区中画出图形,再缓冲区输出到屏幕上图形显示区域。

另外,由于需要表现的信息维度较多,我们从多种角度表现信息,例如视觉角度的颜色、大小、位置关系等,而用户访问路径等信息则通过交互方式来展现。

行业相关性分析的数据来源于不同行业用户之间的发送反馈的记录,我们将一段时间内(比如24小时)所有反馈记录提取出来,得到任意两个用户群之间的联系方向与次数。

提取的反馈结果虽然包含了所有用户群之间的确切联系,但其所表现的关系是一种不直观的高维关系,我们采用了多维缩放方法,在尽可能保持节点(用户群)之间相对关系的情况下将表格转化成为平面二维图形。

3. 日志分析结果

3.1 交互方式

G2G系统除了可以显示网站结构,访问量,转化率等信息之外,还被加入了丰富的交互功能,允许用户研究员选中或者搜索某个页面(节点),查看当前页面的主要用户来源和流向,并打印出URL列表。

URL分布图2

5 URL分布图

图5中显示了样本时间内访问网站内博客用户的下一步去向,在图的最下方显示最主要的几个来源和去向。

同时它也支持按照session或者cookie对用户的群体行为进行多步回溯,从中发现用户浏览网站或者产品使用上的群体行为。

另外,研究员可以在图1中选中某个区域,点击搜索,在图2中将会只显示选中区域时间段内的日志信息,因此我们可以对某些时间段做针对性分析。

在行业相关性分析的界面,研究员可以点击选中某个节点,此时将显示由这个节点发出的指向其它节点的箭头,这些箭头代表当前选中节点所代表的用户群与其它节点用户群之间的主动联系关系。箭头的长短与相关性强度成反比,箭头越长说明相关性越弱。

现在这个系统可以在普通笔记本上在10分钟内处理1000万访问量级别的日志样本。假设再加上实时的日志数据,或许这个系统也将改变网站产品设计和内容运营的方式,让网站运营成为一个“Real Time Game”。

3.2 用户访问模式发现与分析

在利用G2G查看数据的过程中,我们会发现很多用户访问模式。

有些信息很明显,例如从图2上,我们很容易看出一天24时内,何时是访问高峰期或低谷期,因此可以选择合适的时间做一些更换服务器等维护工作。

我们也可以轻松查看到外站的搜索引擎会把用户引导到哪些页面,从而判断哪种搜索引擎更有效。

用户访问步骤对比图

6 用户访问步骤对比图

图6展示了不同搜索引擎所引导的用户在我们网站上的访问路径。研究中发现,左边搜索引擎引导的用户数量偏少,后续访问行为也不强劲,而右边搜索引擎效果相对较好,不仅用户数量多,而且这些用户黏性大,能够在网站上持续访问。

对于本站页面,如果用户没有按照我们引导的路径访问,则可能说明这些页面的用户体验存在问题,我们可以及时发现并做新的尝试。

另外,我们在研究中发现一个有趣的现象,在阿里巴巴十周年时,从淘宝访问阿里巴巴的用户,大部分被引导到阿里巴巴十周年栏目。

研究者如果对数据比较敏感,或者能够从多种角度查找信息,则会发现更多有价值的模式。

3.3 行业相关性分析

不同行业的用户之间互发反馈的行为,也让我们对行业之间的相关性有了量化认识。

来自不同行业的用户群之间存在着许多联系,大部分联系与我们的常识或猜想一致,比如“纺织、皮革”行业与服装行业显示出了高度的相关性。但有时也会发现一些在我们平时的思维中不是那么显而易见的相关性。

另外,除了相关性外,无相关性也是值得关注的信息。比如冶金矿产与家居用品在图中显示出了很弱的相关性,这和我们的常识一致。但有些意外的是,服装和服饰两个行业的相关性也表现得很弱。

通过对行业相关性的分析,我们可以了解不同用户群之间的相关度如何,是否与我们预期的一致,是否有一些我们没有想到的关联,并由此进一步判断用户群的分类是否存在优化的空间,这些信息对于产品陈列相关工作有较大的价值。

3.4 前景展望

在用户研究的过程中,定量研究与定性研究应该是相辅相成的。定性研究对于访谈用户的选择经常会遇到困难,定量研究可以通过数据挖掘,寻找每个行业的活跃用户,或者访问指定路径的用户,定性研究可以有针对性的对这些用户进行访谈分析。同时,定量研究也可以分析这些用户日常在网上的行为轨迹,从而验证访谈结果。

对于指定URL,研究需要了解的不仅仅是上一步下一步的路径,用户是通过哪些路径到达此处,又会转往何处,这一系列的路径更有研究意义,所以需要提取经过指定URL的最健壮的几条路径,从而达到给用户分类的目的。

在网站中,特定用户群体的行为也会备受关注。例如诚信通会员,使用特定浏览器的会员,是否有过网上交易行为的会员,他们的访问行为如何?是否按照我们预期的路径访问?定量研究可以通过在预处理时增加关联数据的方法,挖掘出这些会员的访问路径。

另外,从网站设计者的角度来看,对于设计者预想的流程,有多少用户会买账,在哪个节点被卡住,是非常重要的信息。我们可以通过选定多个URL,列举访问这些URL的用户人次的方法实现。

对于每次比较重要的分析结果,我们可以保存到数据库中,并以图表的形式呈现变化趋势。尤其是改版前后,重要数据的变化趋势可以告诉我们用户对新版本的接受程度。

4. 结束语

在改善用户体验领域,国内外在定量方面的研究还相对较少,而网站用户的行为轨迹对网站来说是一笔很巨大的财富,如果能够充分利用这些信息,将对网站的发展意义重大,我们期待更多研究者参与网站用户行为的可视化研究领域。

参考文献

[1]     C. Shahabi,AM zarkesh,J. Adibi,V. Shah, Knowledge Discovery from Users Web—page NaVigation Proceedings of the 7th International Wbrkshop on Research Issues in Data Engineering (RIDE’97)High Performance Database Management fbr Large—Scale ApplicatiOns,pp.20,April 07. 08,1997.

[2]     J. SriVastaVa, R. Cooley, M. Deshpande,P. N. T. an. Web Usage Mining: Discovery and Applications of Usage Patterns ffom Web Data. SIGKDD Exploration,January 2000,pp: 12—23.

[3]     毛国君. 数据挖掘原理与算法. 清华大学出版社

[4]     Keim D.A. , Information virsualization and visual data mining. IEEE Transactions on Visualization and Computer Graphics, 2002, 8(1),pp: 1—8

[5]     Card S.K., Mackinlay J.D., Shneiderman B., Readings in Information Visualization: Using Vision to Think. New York: Academic Press/Morgan Kaufmann, 1999.

更真实的理解用户

人种志

引言
我们的设计有没有缺陷?
使用者是否会自动按照设计师的意图去使用?
人们真的会产生良好愉悦的感受?

查看更多

数据的可视化

http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/

http://www.visualcomplexity.com/vc/

 让枯燥的数据可被迅速理解

前段时间跟这suggest项目走,没想到这么一个小小的输入框居然会带来那么多的问题。

首先来比较一下几个主流的搜索引擎的suggest效果。为了更直观地说明问题特列了几个比较点:1、取词规则;2、结果数显示;3、匹配提示;4、右键复制粘贴功能;5、中文输入法下回车键的相应(在中文输入法下按回车键直接输入英文);6、事件响应。 

一、Google:http://www.google.cn

取词规则:前向匹配

结果数显示:有,只保留前三位有效数字,剩余全部补0,不足三位精确显示。

匹配提示:无

右键复制粘贴功能:支持

中文输入法下回车键的相应:支持

事件响应:选词时:鼠标移动不改变输入框内内容,且只支持鼠标事件提交,键盘移动同时改变输入框的内容。提交时:鼠标按键(包括左右键)后将鼠标所对准的词直接提交,键盘上按回车键后将输入框内的词直接提交。

Google不愧为互联网的老大,各个产品在体验上都做得非常的精致。对于像右键(剪切/粘帖)之类的操作提供了完美的支持。

g.jpg
二、Yahoo:  http://www.yahoo.com

y11.jpg

取词规则:全词匹配

结果数显示:无。

匹配提示:有,所匹配的词深色显示.

右键复制粘贴功能:不支持

中文输入法下回车键的相应:英文站点无法测,中国雅虎http:cn.yahoo.com不支持)

事件响应:同Google

 雅虎的提示感觉速度很慢,或许是因为全词匹配所以加上了匹配词提示的功能,这样不会让人觉得很突兀。提示框最多只显示5条记录,在下面加了个“上下”翻页的button,个人感觉不是很方便。因为搜索的目的性是很强的,在前5条的现实中没有的话我想大多数人都会选择继续自己的输入而不是去翻页查找suggest中剩余的内容,谁知道有没有呢!在搜索提示框右上方提供了关闭自动提示的功能,下方也有折叠/展开的功能,个人觉得suggest只是一个辅助功能,没有太大的必要对它本身提供太多让用户操作的功能。不支持右键功能也略显遗憾。

三、网易有道:http://www.yodao.com/

取词规则:前向匹配

结果数显示:有,只保留前三位有效数字,剩余全部补0,不足三位精确显示。

匹配提示:无。

右键复制粘贴功能:不支持

中文输入法下回车键的相应:不支持

事件响应:选词时:鼠标、键盘移动的同时都改变输入框的内容。提交时:鼠标按键(只有左键)、键盘上按回车键后将输入框内的词直接提交。

w.jpg

网易的这个有道出来不久,不过个人感觉体验一般。和雅虎一样有关闭提示功能的选项。不过雅虎在关闭提示功能后还有一个按钮可以开启,这个有道在关闭提示功能后的提示就太不明显了,而且没有状态的改变。就是输入框右侧的那个按钮,点击后又“打开提示功能”的按钮。但是我觉得要真是关闭了想重新开启还真难,因为提示的按钮实在不明显,而且个人觉得文案也有问题。“关闭提示功能”我个人理解只是这一次关闭,即点击后提示框消失,没想到它是一直消失了,在测试的时候还纳闷是不是网易突然不提供这suggest功能了呢。另外对于事件的响应上感觉也很有问题,在中文输入法下每输一个拼音就会向服务器端发送请求,对服务器压力很大(这点用户感觉不到)。

 四、说完了别人再来看看我们自己。http://china.alibaba.com

aa.jpg

取词规则:前向匹配

结果数显示:有,只保留前三位有效数字,剩余全部补0,不足三位精确显示。前面还多了个“约”字。

匹配提示:无

右键复制粘贴功能:不支持

中文输入法下回车键的相应:不支持

事件响应:同Google

因为我们采取的也是前向匹配词的方法,所以匹配提示这块个人觉得也没太大必要,反正就是前面的词么。文案上在结果数前加“约”字是因为我们的后台词典并不是同步的,在匹配数比较少的情况下,显示的数目和实际的结果数可能会有很明显的出入(比如实际只有3条,但因词典没有同步更新,匹配数显示还是为4条),所以加上约字就比较合理。只取前三位数字我想也是这方面的考虑。Google和“有道”的词典不知是怎么设置的,尝试了下好像特别少的情况没有出现过,所以没法判断。在显示上根据rank值而不是数量排序,只显示前10条结果,并且如果结果超过12个字则不显示(12个字够精确了不需要在suggest了,个人理解)。在事件上改成同Google一致即可以事件鼠标选择后直接提交,省去了多按此回车键的麻烦,又可以解决上次谭校长用户测试过程中出现的鼠标放在输入框下而导致直接选中词提交的问题。因为技术上还有些细节没有解决,所以暂时还不支持右键功能和中文输入法下回车键输拼音的相应功能(不好意思)。在与后台的交互上,对比网易,通过“缓存”已输入词和对input内容值的判断减少了很多服务器间的请求,速度上比以前有了很大的提高,基本可以实现同步。

体验上的事情不是很懂,随便写了下希望大家拍砖!呵呵。过几天再付上“技术实现篇”和大家一起交流。

1-我们的产品存在非常严重的可用性问题。这个问题要解决不是UED一个部门解决的。需要引起高层的相关重视。比如搜索的文案,用户不理解。搜索和注册地区下拉菜单,有的是按拼音顺序,有的按热门顺序,引起用户迷惑。注册反馈用户没有或者无法识别。

2-在测试技术上,我们前期的准备还是有漏洞。如长时间的录象对设备要求的困难考虑不足,造成数据无法存储。再如录音设备问题,还有设计任务如何满足用户独特的背景和通用情形问题等。

3-可用性测试的机制化问题。能否作为一个基本环节,由各个交互设计师把关?

最近通过各种途径(如看书、看paper、请教高手等)学习数据挖掘,现将现在的一些基本概念和大家分享。需要说明的是我写的这些仅仅是数据挖掘的基本概念,能够完成让大家了解什么是数据挖掘。进一步的内容还在继续学习中……

1-Web数据挖掘是指从与WWW相关的资源和行为中抽取感兴趣的、有用的模式和隐含信息。 Web信息的多样性决定了Web挖掘任务的多样性,Web数据挖掘总的来说分为内容挖掘、结构挖掘和日志挖掘三类。我们主要是进行日志挖掘。

2-一般Web日志挖掘的过程分为以下三步:
(1)数据准备:对Web日志内容进行预处理,删除无用数据,识别用户会话,完善访问路径。
(2)模式识别:采用相应的数据挖掘算法,对预处理之后的数据进行挖掘,生成模式。
(3)模式分析:排除模式识别中没有价值的规则或模式,将有价值的模式提取出来。

我们的主要工作集中在2-3步,第一步涉及很多算法问题,由数据仓库负责。

3-我们关注的用户模式主要是用户的访问模式。

现在在这个部分的挖掘开发了很多技术。比如统计方法中的频次统计等。另外聚类、分类和关联识别也是常用的方法。具体的工具还有Longest Repeated Subsequence、KMean Clustering、Longest Common Subsequence等。

4-数据挖掘是基于海量数据的,它可以避免现有可用性测试样本量小的局限。但是,数据挖掘也有局限。它不能像可用性测试那样获得用户的所有行为。因此,这两种技术的配合应该是非常理想的选择。

密码保护:日志分析

这是一篇受密码保护的文章,您需要提供访问密码:

用户研究总是有用的吗?

 (同发阿里联盟blog)

是否所有的产品都需要用户研究?用户研究在什么时候对产品有帮助?这几个问题是我一直在思考的。用户研究究竟应该在什么时候进行,有什么作用。就我的经验而言,用户研究并不适用于所有的产品。我简单总结了一下:

用户研究非常适合于:

–产生新产品的idea;

–了解用户和你(设计者)的差异,包括环境、行为、技能水平和动机等;

–深入的基础性研究;

–用户的生活形态。

用户研究比较适合于:

–用户可以操作和描述的多步骤任务;

–完全不了解用户的情况;

相反地,用户研究不很适合于以下情形:

–单步用户行为;

–一个缺乏交互行为的页面设计;

–一个通常性行为,用户和设计者不会有差异的行为;

–证明某个idea或需求。

记得有一次,有PD给我们提出要求,你能否证明一下这个地方用红色好还是蓝色好。我无语。我觉得这样的命题本身就是伪命题,设计本身不是可以证明的,但可以评估。于是他就说了,帮我评估一下。我又评估了一下,觉得在识别性上可能有问题。对了,就是这句话:用户研究可以发现问题,但解决问题,那还是需要设计的。至少目前如此。