图 1 协作式界面设计范型Fig. 1 Design paradigm for collaborative interface |
图选项 |
模型(model):该部分代表了协作式界面的业务数据与业务逻辑,包括协作规则控制、情境属性获知与管理、优先级与冲突管理、协作类型控制4部分.当业务数据发生改变时,它能够通知视图做相应改变.视图(view):是协作式界面的显示与交互部分,本身并不进行任何实际的业务处理.在交互桌面操作环境下,它向用户提供个人视图(包括个人工作区、独占式界面元素等)、协作式视图(包括共享工作区、存储工作区等公共资源以及协作状态的可视化视图等).上述各类视图能够接收触控、手势、笔式等自然交互信息,还可以向模型查询业务状态并接收模型发出的数据更新事件.控制器(controller):该部分担当协调(collaborator)和同步(synchronizer)的角色.一是通过与多用户、视图、模型的协调,判断用户所处的协作类型,并对用户的视图选择进行控制;二是通过对用户状态、操作等数据的同步,将模型与视图匹配在一起,共同完成用户请求.协作式界面的MVC设计范型为交互桌面上的界面设计提供了一种通用的设计模式,既可以对该类界面的设计进行规范,也可以对相关控件的设计提供支持.将界面显示与协作控制逻辑进行分离的方式,还有利于协作方式的扩展,便于进行协作可视化的实现.下面在遵循协作式界面MVC设计模式的前提下对典型的协作方式进行设计.每一种协作方式可能会包含不同的个例,本文仅举例介绍.本文采用UML的层次状态机(HSM,Hierarchical State Machine)并借鉴文献[17]中的方法对典型协作方式进行设计.层次状态机的转移条件遵循“事件[监护条件]/动作”的格式.2.2 累加式协作设计图 2是MuCheckbox(Multi-user Checkbox)控件的累加式协作设计,设计中不对用户进行区分,只要满足一定的控制规则,就会触发响应.Unchecked和Checked是控件的2种操作状态,Press和Release代表着按压、释放2种事件,P代表用户集合.在Checked状态上存在自循环,代表多人对同一控件的原始界面或复制界面进行了多次Press和Release操作.主要的操作流程解释如下.
图 2 累加式协作设计Fig. 2 Design for accumulative collaboration |
图选项 |
1) 若执行Press事件的user不在集合P中,则将其添加到P,即P:={user}操作,同时设置控件为Checked状态.2) 若当前执行Press的用户数量满足一定条件,图 2中为|P|>m,则根据控制规则执行do_checked(user)操作;若不满足条件,则将当前用户添加到P中,即P:=P∪{user}操作.3) 若执行Release事件的用户在P中,且当前用户数量|P|>1,则将当前用户从P中移除,即P:=P\{user}.4) 若执行Release事件的用户在P中,且当前用户数量|P|=1,则执行最终的do_unchecked(user)操作.图 3是MuCheckbox控件的实现.图中列表部分代表2个不同的用户,只有2个用户都执行Check操作后才触发最终的执行状态.图中的下半部分是控件的增强列表视图,用于显示多用户的协作状态,属于协作可视化的设计.
图 3 典型累加式协作界面-MuCheckboxFig. 3 Typical accumulative collaborative interface-MuCheckbox |
图选项 |
MuCheckbox控件的设计可以扩展到具有明确状态转换的控件,包括MuButton,MuCombox,MuListbox等控件.2.3 队列式协作设计以用户权限大小造成的操作优先级队列为例,介绍MuButton控件的状态机,如图 4所示,图中P为用户集合,R为不同用户权限的量化集合,其中:
图 4 队列式协作设计Fig. 4 Design for queuing collaboration |
图选项 |
1) 若执行Click的user没有最大权限,即r(user)≠max{R},则阻止其操作,并进行视觉反馈;2) 若执行Click的user是最大权限,即r(user)=max{R},则将用户从P中清除,并进行视觉反馈;3) 若已经操作的用户数量|P|>1,则继续等待后续的操作,并进行视觉反馈;4) 若已经操作的用户数量|P|=1,则执行最终操作,即do_FinalOperation.图 5(a)是MuButton控件的设计.使用用户的个性特征(例如颜色)与文本描述来表示当前控件的操作状态,4个条块表示围绕交互桌面的4位用户,完整长度的条块代表2位用户已经操作,数字3表示至少需要3位用户的操作才能触发业务逻辑.图 5(b)是控件实现,下半部分是环境中参与协作的用户列表.MuButton控件的设计可以扩展到MuPieMenu和MuToolbar等的设计中.
图 5 典型队列式协作界面-MuButtonFig. 5 Typical queuing collaborative interface-MuButton |
图选项 |
2.4 逻辑与协作设计以拼图中2名用户的Combine组合手势为例,介绍逻辑与协作设计,如图 6所示.其中将用户的操作过程分为选中(Press)、平移(Translate)、旋转(Rotate)3部分.若操作的2个对象接近到一定程度且角度吻合,则执行组合(Combine)操作.图 7是组合手势的实现.
图 6 逻辑与协作设计Fig. 6 Design for logical conjunction collaboration |
图选项 |
图 7 拼图应用中Combine组合手势Fig. 7 Combine compound gesture in jigsaw application |
图选项 |
该协作类型可以扩展到交互桌面上众多合作式手势[12]以及多人配合的操作,在此不再赘述.2.5 内容协作设计由于多用户在进行内容协作时,例如编辑文本,在同一界面上操作非常不便,因此存在界面复制需求.以MuCanvas画布控件为例,在界面复制之后,原始界面与复制界面之间能够建立“即时”的协作关系,从而构成一种轻量的标绘内容协作机制.这种协作机制是通过分析用户的操作行为建立的,是一种智能的具有自适应能力的界面.图 8是MuCanvas画布控件的状态机,图 9是对应的设计示意图.
图 8 内容协作设计Fig. 8 Design for contents collaboration |
图选项 |
图 9 典型内容协作设计-MuCanvas控件Fig. 9 Typical design for contents collaboration-MuCanvas component |
图选项 |
3 系统实现3.1 协作式界面控件库的实现依据上述设计,本文基于微软Microsoft PixelSense SDK实现了一套适合交互桌面的轻量的内嵌有协作特征的控件库.这些协作特征体现为控件的5种情境属性,包括:①ManipulatedUser:当前操纵用户;②UserCollection:远程与同地用户集合,包括用户权限等属性;③MissionContext:任务环境;④ConstraintCollection:操作约束集合,如半数约束、或约束等;⑤VisibilityStyle:协作过程的可视样式,如操作状态统计是用颜色表达还是数字表达.上述属性还是许多子属性的聚集.在增加上述属性后,使用这些控件构建的界面就不再是一个黑盒(black-boxes)[18],而是可以感知当前情境具有部分“智能”的界面.除了图 3、图 5、图 7、图 9列出的典型控件以外,本文还实现了MuEditBox,MuInkCanvas,MuPieMenu,MuToolbar,MuListBox,MuComboBox等常见控件.它们基本可以满足在交互桌面上进行协作式界面开发的目的.3.2 典型协作式界面实现本文基于上述控件库实现了2个协作式应用,分别是即时决策应用InstantVoting(图 10)和即时态势标绘应用MixedSensemaking(图 11).
图 10 即时决策应用Fig. 10 Implementation for instant decision-making |
图选项 |
图 11 即时态势标绘应用Fig. 11 Implementation for instant sensemaking |
图选项 |
InstantVoting将原先由单个用户提交方案的固定模式,转化为多个用户的决策并动态显示所有用户的操作状态,如图 10(a)所示.设计这个应用的目的是将决策过程适当延长,让每个成员都参与决策,真正做到群组决策,而且它还可以让群组的决策留下操作痕迹.在所有3个用户都进行操作后,再执行提交方案的动作,如图 10(b)所示.InstantVoting中主要用到了累加式协作、队列式协作的方式.协作是通过主席用户的分发复制动作产生界面副本,从而在1个主界面和2个副本界面之间产生新的协作.图 11是MixedSensemaking的设计,主要用到了内容式协作方式,在界面复制操作后,主界面与副本界面之间建立“即时”的协同标绘关系,从而将一名用户的态势标绘工作转化为群组的协同标绘.这种协作机制还可以用在应急管理系统中的“即时”态势标注、即时头脑风暴等场景.4 用户实验4.1 实验设计与实施实验中,对InstantVoting应用设置了5种需要决策的内容,让用户分别根据决策的内容进行操作,独立决定是否提交当前方案.界面复制共享的发起人在共享前设置每个方案的操作约束模式,如设置操作模式为超过半数用户同意就可以提交方案等.对MixedSensemaking应用,本文先将需要标绘的内容(包括标绘的位置以及形状)打印出来,让用户对照纸质的标绘内容进行单人标绘和共享后的多人协同标绘.实验中的硬件设备有1台Samsung SUR40 with Microsoft PixelSense,1台HP Pavilion dv6笔记本以及1台Surface Pro 2平板计算机,实验邀请了12名具有应急事件处置背景的人员(8男4女,分为4组),使用上述2个应用进行实验,图 12为实验场景之一.对2种应用都分别进行共享前的单用户操作以及共享之后的多用户协作2部分实验,其中多用户的协作分为2类:一是完全在交互桌面上进行面对面的共享与协作;二是在交互桌面与平板计算机之间进行共享与协作,由于Surface Pro 2具有的移动特征,因此既可以作为共处同一物理空间的设备也可以作为远程的设备.在上述实验结束后,接着进行了用户讨论和问卷调查.
图 12 实验场景Fig. 12 Experimental environment |
图选项 |
4.2 实验结论在实验后的用户讨论中,用户提出当用户数量较多时MuButton按钮控件的显示空间会明显不够,对于该问题本文认为可以采用图 5(a)中的MuButton的文本注记样式或者采用扩展视图的方式灵活解决该问题.有用户提出将单用户的决策问题转化为多用户的决策会延长决策的时间,对于该问题本文认为大部分决策并不是简单的“yes or no”问题,多个用户的决策结果能够对最终的决策起到借鉴作用,从而提高决策质量.还有用户提出在Surface Pro 2上运行的远程界面对操作内容的提示不足,本文认为这主要是应用的设置问题,在后续工作中进行完善.在用户讨论中,大部分用户赞同本文对新型协作方式及特征的设计,认为可以利用这些特征保留用户操作痕迹,记录任务环境;对协作过程的可视化能力印象深刻,认为可以及时地了解其他用户的操作状态与操作行为,从而增强整个团队的感知能力.实验后的问卷调查统计结果如表 1所示,能够看出采用协作式界面之后:1) InstantVoting的决策质量、MixedSense-making的协同标绘效率以及2个应用所体现出的协作可视化能力,这三者变化显著(p<0.05),且都是正面的变化,按照上述得分统计的提高幅度分别为67.18%,103.37%,69.70%;表 1 采用5点李克特量表对协作式界面的统计Table 1 The analysis of collaborative interface by 5-point Likert Scale
问卷内容 | 采用前 | 采用后 | t | p | ||
M | SD | M | SD | |||
InstantVoting 操作效率 | 4.23 | 0.60 | 2 | 0.82 | 7.942 | <0.001 |
InstantVoting 决策质量 | 2.62 | 0.87 | 4.38 | 0.51 | 8.799 | <0.001 |
MixedSensemaking 标绘效率 | 2.08 | 0.86 | 4.23 | 0.93 | 14.000 | <0.001 |
协作可视化能力 | 2.31 | 0.85 | 3.92 | 0.86 | 8.954 | <0.001 |
注:M—分数平均值;SD—标准方差;t—t检验数值;p—显著性水平. |
表选项
2) InstantVoting的操作效率有显著的降低,减低幅度为52.72%,这与该应用通过延长决策时间而提高决策质量的设计初衷也是一致的.总之,实验表明,基于交互桌面的协作式界面显著提高了多用户之间的操作共享能力与协作能力.5 结 束 语本文针对交互桌面出现的新型协作行为开展了多用户协作界面的研究,研究成果可用于各种应急指挥场景,如军事指挥、地震救援、火灾防护等多人面对面决策、会商的场景.后续研究方向包括多用户协作界面的自适应研究、协作过程可视化研究等.
参考文献
[1] | Morris M R, Ryal K,Shen C,et al.Beyond social protocols:multi-user coordination polices for co-located groupware[C]//Proceedings of ACM CSCW'04 Conference on Computer-Supported Cooperative Work.New York:ACM Press,2004:262-265. |
Click to display the text | |
[2] | Klinkhammer D, Nitsche M,Specht M,et al.Adaptive personal territories for co-located tabletop interaction in a museum setting[C]//Proceedings of the 2011 ACM International Conference on Interactive Tabletops and Surfaces.New York:ACM,2011:107-110. |
Click to display the text | |
[3] | Morris M R, Lombardo J,Wigdor D.WeSearch:supporting collaborative search and sensemaking on a tabletop display[C]//Proceedings of ACM CSCW'10 Conference on Computer-Supported Cooperative Work.New York:ACM,2010:401-410. |
Click to display the text | |
[4] | PixelSense[EB/OL]. http://www.microsoft.com/en-us/pixelsense |
Click to display the text | |
[5] | Dietz P, Leigh D.DiamondTouch:a multi-user touch technology[C]//Proceedings of the 2001 ACM Symposium on User Interface Software and Technology.New York:ACM,2001,219-226. |
Click to display the text | |
[6] | Qin Y, Yu C,Liu J.uTable:a seamlessly tiled,very large interactive tabletop system[C]//Proceedings of the 2011 ACM International Conference on Interactive Tabletops and Surfaces.New York:ACM,2011:244-245. |
Click to display the text | |
[7] | Biehl J T, Baker W T,Bailey B P,et al.Impromptu:a new interaction framework for supporting collaboration in multiple display environments and its field evaluation for co-located software development[C]//Proceedings of ACM CHI 2008 Conference on Human Factors in Computing Systems.New York:ACM,2008:939-948. |
Click to display the text | |
[8] | Scott S D, Allavena A,Cerar K,et al.Investigating tabletop interfaces to support collaborative decision-making in maritime operations[C]//15th International Command and Control Research and Technology Symposium.Washington:CCRP,2010:22-24. |
Click to display the text | |
[9] | Jiang H, Wigdor D,Forlines C,et al.LivOlay:interactive ad-hoc registration and overlapping of applications for collaborative visual exploration[C]//Proceedings of ACM CHI 2008 Conference on Human Factors in Computing Systems.New York:ACM,2008:1357-1360. |
Click to display the text | |
[10] | Morris M R, Huang A Q,Peepcke A,et al.Cooperative gestures:multi-user gestural interactions for co-located groupware[C]//Proceedings of ACM CHI 2006 Conference on Human Factors in Computing Systems.New York:ACM Press,2006:1201-1210. |
Click to display the text | |
[11] | Hinckley K,Yatani K,Pahud M, et al.Pen+touch=new tools[C]//Proceedings of the 23nd ACM Symposium on User Interface Software and Technology.New York:ACM,2010:27-36. |
Click to display the text | |
[12] | Buchanan S, Floyd B,Holderness W,et al.Towards user-defined multi-touch gestures for 3D objects[C]//Proceedings of the 2013 ACM International Conference on Interactive Tabletops and Surfaces.New York:ACM,2013:231-240. |
Click to display the text | |
[13] | Apted T,Kay J, Quigley A.Tabletop sharing of digital photographs for the elderly[C]// Proceedings of the SIGCHI Conference on Human Factors in Computing Systems.New York:ACM,2006:781-790. |
Click to display the text | |
[14] | 吴晨俊,史元春, 索岳.面向多用户交互桌面的界面管理系统[J].软件学报,2010,21(增刊):33-38. Wu C J,Shi Y C,Suo Y.UI management system on multi-user interactive tabletop[J].Journal of Software,2010,21(Supplement):33-38(in Chinese). |
Cited By in Cnki | |
[15] | Scott S D, Grant K D,Mandryk R L.System guidelines for co-located collaborative work on a tabletop display[C]//Proceedings of the Eighth European Conference on Computer-Supported Cooperative Work.New York:ACM,2003:159-178. |
Click to display the text | |
[16] | Morris M J. Supporting effective interaction with tabletop groupware[D].Stanford:Stanford University,2006. |
Click to display the text | |
[17] | Yann L. IOWAState:implementation models and design patterns for identity ware user interfaces based on state machines[C]//ACM SIGCHI 2013 Symposium on Engineering Interactive Computing Systems.New York:ACM,2013:59-68. |
Click to display the text | |
[18] | Waldner M, Steinberger M,Grasset R.Importance-driven compositing window management[C]//Proceedings of the SIGCHI Conference on Human Factors in Computing Systems.New York:ACM,2011:959-968. |
Click to display the text |