830 likes | 1.14k Views
第六章 人机交互界面 的表示模型与实现. 山东大学计算机学院. 目的. 在界面设计的早期阶段,研究建立一种用户界面表示模型 利用形式化的设计语言来分析和表达用户任务以及用户和系统之间的交互情况; 使界面表示模型能方便地映射到实际的设计实现。. 界面模型分类. 任务分解和分析 能力模型( competence model ) 描述用户的目的 行为模型( performance model ) 预测和描述用户合法的交互行为序列 结构模型 constructional model 系统组成模型. 本章主要内容. 掌握三种模型: 行为模型
E N D
第六章 人机交互界面的表示模型与实现 山东大学计算机学院
目的 • 在界面设计的早期阶段,研究建立一种用户界面表示模型 • 利用形式化的设计语言来分析和表达用户任务以及用户和系统之间的交互情况; • 使界面表示模型能方便地映射到实际的设计实现。 山东大学计算机学院
界面模型分类 • 任务分解和分析 • 能力模型(competence model) • 描述用户的目的 • 行为模型(performance model) • 预测和描述用户合法的交互行为序列 • 结构模型 constructional model • 系统组成模型 山东大学计算机学院
本章主要内容 • 掌握三种模型: • 行为模型 • 主要从用户和任务的角度考虑如何来描述人机交互界面,将详细介绍GOMS,UAN及LOTOS模型。 • 结构模型 • 主要从系统的角度来表示人机交互界面。重点介绍状态转换网络(STN-State Transition Network)和产生式规则 ( Production Rule )。 • 事件-对象模型 • 是一种面向对象的表示模型,它将人机交互活动归结为事件与对象的相互作用。 • 掌握如何由界面的行为表示模型转换到系统的结构模型。 山东大学计算机学院
GOMS简介 • 1983年由Card, Morgan和Newell 提出的。 • 通过目标(Goal)、操作(Operator)、方法(Method) 以及选择规则(Selection) 四个元素来描述用户的行为。 • GOMS是在交互系统中用来分析建立用户行为的模型。它采用“分而治之”的思想,将一个任务进行多层次的细化。 山东大学计算机学院
GOMS 1.目标 Goals 目标就是用户执行任务最终想要得到的结果,它可以在不同的层次中进行定义。 eg:“编辑一篇文章”-“编辑文章”(高层); “删除字符”(低层) 2.操作 Operators 操作是任务分析到最低层时的行为,是用户为了完成任务所必须执行的基本动作。 操作不能被分解,在GOMS模型中是原子动作。 山东大学计算机学院
GOMS 3. 方法 Methods 方法是描述如何完成目标的过程。一个方法本质上来说是内部的算法,用来确定子目标序列及完成目标所需要的操作。 关闭(最小化)窗口 GOAL: ICONSIZE-WINDOW [select GOAL: USE-CLOSE-METHOD MOVE-MOUSE-TO-WINDOW-HEADER POP-UP-MENU CLICK-OVER-CLOSE-OPTION GOAL: USE-L7-METHOD PRESS-L7-KEY] 山东大学计算机学院
GOMS 4.选择 Selection • 选择是用户要遵守的判定规则,以确定在特定环境下所要使用的方法。 • 当有多个方法可供选择时,GOMS中并不认为这是一个随机的选择,而是尽量来预测会使用哪个方法,这需要根据特定用户、系统的状态、目标的细节来预测要选择哪种方法。 • 用户Sam: Rule 1: Use the CLOSE-METHOD unless another rule applies Rule 2: If the application is GAME, use L7-METHOD 山东大学计算机学院
任务Editing的GOMS描述实例 Task:Editing GOAL:EDIT-MANUSCRIPT GOAL:EDIT-UNIT-Task repeat until no more unit tasks GOAL:ACQUIRE-UNIT-TASK GET-NEXT-PAGE if at end of manuscript GET-NEXT-TASK GOAL:EXECUTE-UNIT-TASK GOAL:LOCATE-LINE [select:USE-QS-METHED USE-LF-METHOD] GOAL:MODIFY-TEXT [select:USE-S-METHOD USE-M-METHOD] VERIFY-EDIT 子目标间关系: 顺序关系,选择关系 山东大学计算机学院
GOMS应用 • GOMS是一种人机交互界面表示的理论模型,被称为最成熟的工程典范,该模型在计算机系统的评估方面也有广泛的应用。 • GOMS can save money! • 美国电话公司NYNEX利用GOMS分析一套即将被采用的新的计算机系统的应用效果,结果发现效果不理想,放弃了使用新系统,为公司节约了数百万的资金。 山东大学计算机学院
GOMS的局限性 • GOMS没有清楚的描述错误处理的过程,假设用户完全按一种正确的方式进行人机交互,因此只针对那些不犯任何错误的专家用户。 • GOMS对于任务之间的关系描述过于简单,只有顺序和选择.事实上任务之间的关系还有很多种(具体参见6.1.2节中LOTOS的介绍),另外选择关系通过非形式化的附加规则描述,实现起来也比较困难。 • GOMS把所有的任务都看作是面向操作目标的,而忽略了一些任务所要解决的问题本质以及用户间的个体差异,它的建立不是基于现有的认知心理学,无法代表真正的认知过程。 山东大学计算机学院
LOTOS简介 • LOTOS -Language Of Temporal Ordering Specification, T.Bolognesi, H.Brinskma, "Introduction to the ISO Specification Language LOTOS”, 1987. • 国际标准形式描述语言,无二义性,适于描述具有并发、交互、反馈和不确定性等特点的并发(concurrent)系统中的行为。 • 开始作为一种描述网络协议的语言,由于交互系统、特别是多通道交互系统有并发系统的特点,因此成为用来描述交互系统的行为模型。 山东大学计算机学院
LOTOS基本思想 • 系统的外部可见行为可以看作是由一个有时序关系的交互序列组成。 • 系统由一系列进程组成,进程同环境之间通过称为“关口”(gates)的交互点进行交互。 • 两个以上的进程在执行同一个外部可见的行为时会发生交互操作,进行数据交换、信息传递、协调同步等操作。 • 进程行为用“行为表达式”来描述,复杂的行为由简单的行为表达式通过表示时序关系的LOTOS算符组合而成。 • 在将LOTOS思想用于人机交互的行为模型时,用进程之间的约束关系来描述交互子任务之间的关系。 山东大学计算机学院
LOTOS算符 LOTOS算符主要有以下几种: T1 ||| T2(交替Interleaving) T1 [] T2(选择Choice) T1 | [a1,...,an] | T2(同步Synchronization) T1 [> T2 (禁止Deactivation) T1 >> T2(允许Enabling) 山东大学计算机学院
LOTOS实例 山东大学计算机学院
中国象棋的LOTOS任务分解实例 山东大学计算机学院
LOTOS与GOMS的结合 • LOTOS模型很好的描述了任务之间的时序约束关系,这些时序约束关系能更好的描述GOMS中子目标之间的关系。 • 用GOMS模型描述任务的分解过程,而用LOTOS给出子任务之间的约束关系,这样就可以增加两种表示模型的表示能力。 山东大学计算机学院
结合GOMS和LOTOS的中国象棋程序的行为描述 GOAL:中国象棋 [>: GOAL:运行 |||: *GOAL:走棋 ACTION:自动记录棋谱 >>: GOAL:当前方走 >>: OPRATOR:拾取棋子 OPRATOR:放置棋子 GOAL:对弈方走 >> OPRATOR:拾取棋子 OPRATOR:放置棋子 *GOAL:打谱 []: OPRATOR:加速 OPRATOR:减速 OPRATOR:暂停 OPRATOR:恢复 GOAL:退出 山东大学计算机学院
总结 • LOTOS与GOMS结合,可以清楚地了解整个目标层次及各目标之间的约束关系。但与GOMS同样存在无法描述目标异常结束的缺陷,同时当任务进行选择时用什么规则进行选择并未涉及。 • LOTOS最大的优越性在于可以构造一套现成的自动化工具,利用这些工具,可自动进行错误检测,但它过于形式化的记法比较晦涩难懂。 • GOMS和LOTOS的结合可以很好地描述人机交互的较高级的任务,对于原子任务的形式化描述,上述模型并没有给出一个比较清晰的描述,下面讨论的UAN模型主要用于原子目标的描述。 山东大学计算机学院
UAN模型 • UAN---User Action Notation, Hartson et al 1990. • UAN是一种简单的符号语言,主要描述用户的行为序列以及在执行任务时所用的界面物理对象。 • 尽管UAN属于一种行为模型,但作为一种任务描述语言,它又涉及一定程度的系统行为的描述,因而它兼有行为模型和结构模型的一些特点。 山东大学计算机学院
任务(task):任务名称(the name of task) 用户行为 界面反馈 界面状态 UAN模型的基本思想 • 预定义一些标志符: • 用户动作标志符 • 条件标志符 • 采用一种表格结构来表示任务 • 界面被分解成一些类似层次结构的异步任务,每个任务的实现都用表格来描述,用户动作的关联性和时序关系由表格的行列对齐关系和从上到下、从左到右的阅读顺序来确定。 山东大学计算机学院
UAN预定义的动作标志符(部分) • 用户动作标志符: • move_mouse(x,y) 移动鼠标至(x,y) • release_button(x,y)在(x,y)位置释放鼠标按钮; • highlight(icon) 使icon高亮显示; • de_highlight(icon) 取消icon的高亮显示。 • 用户动作标志符: • ~[X],在某个图形对象上移动鼠标; • £, 按下鼠标; • ¢,释放鼠标; • !, 使对象高亮显示; • -!, 取消对象的高亮显示 • Display,显示图形对象; • Erase, 取消显示对象。 山东大学计算机学院
UAN预定义的条件标志符(部分) • while(condition) TASK • 当条件condition为真时,循环执行任务TASK; • if(condition) then TASK • 如果条件condition满足,则执行任务TASK; • iteration A* or A+ • 表示迭代操作; • waiting • 表示等待,可以等待一个条件满足,也可以等待任务中的一个操作执行。 山东大学计算机学院
任务:把文件拖入垃圾箱 用户行为 界面反馈 界面状态 mouse_down(x,y) drag_icon(x,y) mouse_up(x,y) then highlight(icon) show_outline(icon) then highlight(bin) then hide(icon) show_bin_full() if intersect(icon,x,y) icon=selected if intersect(bin,x,y) if intersect(bin,x,y) UAN实例-单通道交互 山东大学计算机学院
UAN实例-多通道 山东大学计算机学院
UAN实例-多通道 山东大学计算机学院
UAN总结 • UAN模型更接近于实现,界面状态和界面反馈用一般的程序语言描述,实现起来比较方便,当然这种描述由于接近于程序语言,因此设计时需要一定的编程基础 • UAN模型在精确刻画各成分之间的各种平行和串行的时序关系方面尚显不足,任务之间的时序关系没有明确表示出来,当所描述的界面使用多种输入设备和有若干可选交互路径时,比较繁琐。 山东大学计算机学院
层次化的界面描述方法 山东大学计算机学院
界面表示的行为模型和结构模型 • 行为模型 • 行为模型是从用户任务和完成目标角度描述界面模型 • 描述任务或目标 • 为了完成任务或达到目标所进行的行为序列 • 结构模型 • 结构模型从系统组成角度,描述如何通过交互序列完成交互任务。着重描述系统的反应和行为。 • 从用户角度看,行为模型强调做什么,结构模型强调怎么做
结构模型 • 产生式规则-Production Rule • 状态转换网络-State Transition Network
产生式规则 • 又称为上下文无关文法,将人机交互对话看作是一种语言,运用基于语法的方法来描述交互对话。 • 产生式集合定义了用户与计算机交互所运用的语言。 • 产生式规则的一般形式是: • if condition then action • 这些规则可以表示为不同的形式,如 • condition →action • condition:action
产生式规则 • 系统不断用产生式规则来检测用户的输入是否与这些条件相匹配。若匹配则激活相应的动作,这些动作可以是执行应用程序的一个过程,也可以是直接改变某些系统状态的值。 • 一般来说,组成界面描述的产生式规则很多,所有的规则都是有效的,规则定义的顺序并不重要,只要与规则中的条件相匹配,就可以激活相应的动作。 • 产生式规则系统可以是 • 事件引导; • 状态引导; • 混合引导
事件引导的系统 • 用户在屏幕上绘制直线 • Sel-line → start-line <highlight 'line'> • C-point start-line→ rest-line <rubber band on> • C-point rest- line→ rest-line <draw line> • D-point rest- line→ <draw line> <rubber band off>
事件引导的系统 • 产生式规则的条件和动作部分都以事件的方式进行表示。事件主要有三种类型: • 用户事件(user event),Sel-line表示从菜单中选择line命令,C-point 和D-point表示用户在绘图平面上单击和双击鼠标。 • 内部事件,用于保持对话状态,如start-line 表示开始画线后的状态,rest- line表示选择了第一个点之后的状态。 • 系统响应事件,以尖括号表示可见或可听的系统响应,如<highlight 'line'>,把菜单项'line'高亮度显示,<draw line>表示在屏幕上显示直线,<rubber band on> 表示橡皮筋绘制方式打开,<rubber band off>表示橡皮筋绘制方式关闭。
事件引导实现方法 • 保存内部事件序列 • 构造一个对话控制器,主要负责事件的产生和规则的匹配 • 规则的匹配算法影响系统的性能
状态引导的系统 • 事件引导的系统中的内部事件,是事件还是状态? • 在系统内存保存的不再是动态的随时进出的事件,而是一些表示系统的当前状态的属性,这些属性在不同的时刻有不同的值。
状态定义 • Mouse:﹛mouse-null, select-line, click-point, double-click﹜ • Line-state:﹛menu, start-line, rest-line﹜ • Rubber-band:﹛rubber-band-on, rubber-band-off﹜ • Menu:﹛highlight-null, highlight-line, highlight-circle﹜ • Draw:﹛draw-nothing, draw-line﹜
产生式规则 • Select-line→mouse-null start-line highlight-line • Click-point start-line→mouse-null rest-line rubber-band-on • Click-point rest- line→mouse-null draw-line • Double-click rest-line→mouse-null menu draw-line rubber-band-off
混合引导的系统 • 可以将两者结合起来,采用下面的形式: event: condition → action 来描述一个产生式规则。 • 事件用来激活产生式规则,如果条件不满足,即当前系统内存中的状态和产生式的规则不匹配,则无法激活规则。 • 当状态改变时,产生式规则中的action本身也可以产生新的事件,从而可以激活另一条规则。
混合引导的系统 • 系统有三个属性: • Bold: ﹛off, on﹜ • Italic: ﹛off, on﹜ • Underline: ﹛off, on﹜
混合引导系统的产生式 • select- bold:Bold = off → Bold = on • select- bold:Bold = on → Bold = off • select-italic: Italic = off → Italic = on • select-italic: Italic = on → Italic = off • select-under:Underline = off → Underline = on • select-under:Underline = on → Underline = off
产生式规则总结 • 描述操作时序能力强,并发顺序均可 • 无法描述误操作 • 界面复杂时,状态、事件复杂,产生式过多,要求产生式匹配算法性能高
状态转换网络 • 状态转换网络(STN)的基本思想是定义一个具有一定数量状态的转换机,称之为有限状态机-Finite State Machine(FSM)。 • FSM从外部世界中接收到事件,并能使FSM从一个状态转换到另一个状态。 • 这里介绍两种最基本的状态转换网络,状态转换网络(State Diagrams)和扩展状态转换网络(State Charts),后者是前者的一个扩展。
传统的状态转换网络 • 当发生一个外部或内部事件时,系统就会从一个状态转换到另外一个状态,这称为状态转换。 • 外部事件主要由用户操作外部输入设备来产生。 • 内部事件可以是系统产生的事件,如时钟事件,也可以是为了改变系统的状态和行为而产生的事件,如当一个任务完成后可以激活另一个任务等。 • 一个状态转换与一对状态相关联。 • 一般的系统具有很多个状态,假设系统由n个状态组成,状态之间的转换最多可能有n*(n-1)个。
简单的三状态FSM • 最多可能有6个状态转换
带条件和动作的状态转换 • 选项条件(conditions),表示导致状态的改变的条件; • 选项动作(actions),表示系统在改变状态时将执行什么动作。
带条件的状态转换实例 • 基于鼠标的画图工具 单击在圆周上 选择 ‘circle’ 单击在中心点 Circle1 Circle2 Finish highlight ‘circle’ rubber band draw circle Menu 选择 ‘line’ 单击在第一点 双击 Line1 Line2 Finish highlight ‘line’ rubber band draw line