当大卫遇上歌利亚:在数据可视化与探索中将智能手表与大屏幕结合(When David Meets Goliath: Combining Smartwatches with a Large Vertical Display for Visual Data Exploration)

随着大屏幕技术的发展和普及,其在展示、交互、合作方面的优秀性能使其更广泛地应用于可视化与数据探索。大屏幕的高分辨率和充足的显示空间可以支持展示更多信息,提供了多人协同分析的空间,并可以组合多种交互方式使探索过程更加自然。然而使用大屏幕进行可视分析仍存在很多挑战,诸如工具和菜单栏遮挡视图、用户无法触及屏幕较远位置、交互距离过长引起疲劳、多用户合作时面临冲突等问题。针对这些挑战,跨设备交互——使用个人设备(如手机、iPad、智能手表等)与大屏幕结合分析是一种常见的解决办法。相比于其他设备,智能手表具有轻便、操作便捷、解放双手、注意力转换少(部分操作无需注视手表)的优点,但相关研究中缺少将智能手表与大屏幕可视分析系统结合的工作,因此这篇文章[1]专注于解决这个问题,使智能手表作为存储和发送数据的存储器、提供额外视图和交互的中介和远程定位的控制器,提供了一套将大屏幕与智能手表结合的设计理论和系统,如图1,不仅能保障在多用户合作过程中个人探索的准确性,同时能降低个人操作对屏幕整体的影响,最后他们通过用户体验的结果验证了该系统的有效性。

图1,(A)使用触摸大屏和智能手表的可视化系统(B)使用智能手表展示条形图用于数据比较(C)使用远程控制功能选择大屏幕上的视图

文章以警察分析师探索犯罪数据为实例场景,目标是通过对城市历史犯罪的多维度数据进行模式分析,建立切实可行的巡逻治安方案,并在一段时间后评估方案的有效性。所用设备为支持多人触摸的大屏幕和有调节转环的智能手表,作者们首先通过d3.js和web编程完成具有多种可视化视图的网页,以便研究如何将原有大屏幕可视化与智能手表结合。该系统的任务为以下四类:1)选择或过滤感兴趣的犯罪信息;2)获取信息并编辑(重新encode);3)把数据在不同视图间相互关联;4)比较多份犯罪信息。要求支持多人探索合作。

为了降低注意力转换的代价,减少单个用户探索对整体的影响,并支持其在远处也能够对大屏幕操控,设计者们给这两个不同的设备赋予不同的角色:大屏幕用来展示多维度数据的多种视图,用户通过点击选择数据对象,同时视图坐标轴的属性也支持点选编辑,视图布局可以通过拖拽来改变;智能手表作为第二块展示屏,主要有三个功能:1)存储设备,手表需要存储来自大屏幕的信息(包括数据和属性设定)2)个人和大屏幕交互的中介,支持用户编辑数据,并将编辑好的数据推送回大屏幕;3)远程控制器,能够让用户在远距离和大屏幕交互,如选中视图。

图2,智能手表上的操作。(A)水平滑动,(B)竖直滑动,(C)旋转转环,(D)远程指向

文章设计了4种在手表上的基本交互方式:水平滑动,如图2(A):往肩膀方向滑动,用于从大屏幕获取数据,往手掌方向滑动,用于向大屏幕推送数据;竖直滑动,如图2(B):查看列表;旋转转环,如图2(C):用于进行过滤操作;远程指向,如图2(D):通过内置传感器感知到用户手臂运动方向变化,用于远程控制大屏幕选中视图,使用双击手表屏幕开启该模式。系统定义了三种交互距离,如图3(A):直接触摸;大屏幕附近;远距离。文章假定用户在大屏幕上进行最初选择时是直接点击的,然后通过走动在远近距离相互转换,并且通过移动手臂在远处改变所选择的视图。为了保证单人操作的独立性,文章设计了”Focus”的概念,如图3(B),被选中的视图周围会加一个边框。Focus摒弃了以往我们熟悉的”highlight & link”的设计理念,消除视图关联,使得只有被选中的视图才会反映用户在手表上进行的操作。

图3,(A)三种交互距离(B)被选中的focus周围会加边框

为了更好地存储来自大屏幕的信息,系统设计了Item Sets的概念,它是指一些确定类型的实体合集。Sets类型包括数据对象和配置属性(如坐标轴维度、color mapping、视图类型等),在智能手表内部以列表形式存储。数据sets表现形式为mini chart,如图4(左2图),配置属性sets的表现形式是具有代表性的图标,如图4(右2图)。这些集合可以在智能手表内部进行交、并、补操作,用户也可以获取到之前存储的sets。

图4,Item Sets的表现形式

同时,为了对来自大屏幕的视图(包括其数据和配置属性)进行进一步编辑,系统设计了Connective Areas的概念,对视图进行解构。如图5,视图分为marks, canvas, axes和origin四个区域,marks表示被绘制出来的某些数据元素,canvas表示该视图中所有data items,axes表示坐标轴属性,origin表示视图整体属性(如视图类型等),用户在大屏幕上选择一个部分之后,就可以把该部分对应的sets下载到手表中进行编辑。

该系统的基本操作流程为,用户从大屏幕某个视图通过tap或lasso获取了数据并进行查看阅览,然后他在大屏幕上focus了另一个视图(可以通过点选,也可以通过远程选择)。用户希望新的视图可以展示这些数据或其变化。当用户在手表上进行了某些操作后,他可以通过长按或双击,在大屏幕的当前选中视图上进行几秒钟的预览。当他进行了数据推送操作后,数据变化的结果才会最终体现在大屏幕上。

图5,Connective Areas对视图的解构划分

利用上述交互和概念可以实现很多可视化中常用的功能,如比较、高亮、排序等,如图6(A),用户将下载的data item sets展示在了新的视图上,系统会以重叠插入的方式进行展示,用这个功能可以快速比较两组数据的差异,并且在数据集切换的时候,用户只需要滑动手表表面,不需要再切换视线。如图6(B),用户在手表上选择的集合被高亮显示在当前散点图上。如图6(C),用户在手表上更改了坐标轴上属性的顺序,散点图也被重新排序。此外,用户还可以通过滑动表上的转环对数字类型的变量进行filter,通过在表盘上绘制zigzag形状可以删除当前sets。

图6,(A)以insert方式进行数据比较(B)高亮数据(C)对坐标轴维度进行排序,可以修改数据绘制结果

文章为验证系统的有效性,将大屏幕与智能手表结合的系统与只用大屏幕的系统(在大屏幕上设计了对应功能的菜单)进行用户体验对比。要求完成的任务类型为:选择特定数据;寻找极值;比较数据。用户共需回答9个问题,最后进行问卷调研,结果如图7显示。绝大部分参与者认为,大屏幕与智能手表结合能够支持更灵活的数据分析,视线转换少使得比较数据过程更加方便,整个交互过程更为自然快捷。

图7,用户体验问卷调研结果

笔者认为,在大屏幕的跨设备交互领域,基本的系统框架可以概括为获取数据、数据编辑、数据送回这三个步骤,不同移动设备展示能力和操作方式的不同均会影响这三个阶段的设计结果。这篇文章专注于研究如何能够让智能手表和大屏幕更好的结合,item & set的概念较为新颖,不仅能编辑数据,也能编辑视图属性;focus的概念限定了获取数据和发送数据的区域,降低了个人操作对整体展示内容的影响;同时,因为智能手表展示区域较小,使用connective area对我们熟悉的可视化视图进行细致的解构,使得可编辑的内容适应手表大小,是设计中的又一大亮点。也因此,可以使用精度不高的定位方式在视图层级上实现远程选择,一旦focus到数据所在视图,便可以下载到手表中进行细节操作。该系统在设计上环环相扣,写作思路清晰,文章值得一阅。

[1] Horak T, Badam S K, Elmqvist N, et al. When David Meets Goliath: Combining Smartwatches with a Large Vertical Display for Visual Data Exploration[C]// CHI Conference. 2018:1-13.

发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>