〔关键词〕Web系统;可用性;UI设计
〔中图分类号〕G202 〔文献标识码〕A 〔文章编号〕1008-0821(2009)09-0055-04
Improvement of Web Usability with UI Navigation
Based on an Information Auto-Linking MethodYang Zhaojun
(School of Economic Management,Xidian University,Xi’an 710071,China)
〔Abstract〕Considering hard-coding navigations in user interface design of web systems,this paper presented a design method to support information auto-linking and UI navigation.The UI navigation logic was analyzed first,and then its model and main algorithm were designed.Lastly,the statistics result of user behaviors in a food quality management system showed this method improved the usability in contrast to menu-driven navigation.
〔Key words〕Web system;usability;user interface design
网站的可用性(Web Usability)是指采取何种方式来使网站用户可以迅速和有效地找到他们要找的内容。一个具有良好可用性的网站Web系统可以给网站支持的业务带来巨大效益。所以说,如何提高电子商务、电子政务和服务咨询型等网站系统的可用性,并且改善现有UI设计中硬编码方式的导航设计,已经成为当前Web系统设计中不可缺少的部分。由于信息的搜索已经成为目前互联网的主要行为,所以本文提出一种信息自动关联技术来实现用户在信息访问和业务操作中的快捷导航,从而提高用户信息查询和工作效率。本文实现的这种动态可配置的信息关联和自由导航技术,可以应用“以用户为中心”的网站设计,以及基于 “场景式服务”等人性化设计理念的Web系统中。
1 系统可用性
可用性(Usability)作为人机交互领域中一个关键概念,在当前的业务处理和网站设计中已被广泛接受[1]。Jakob Nielsen从用户感受的质量角度认为,可用性由可学习 性、效率、可记忆性、出错、满意度、功能适用性等方面[2];Helen Sharp从人 ——机界面系统的角度,把可用性定义为“交互系统的易学性,易用性,操作安全性,有效 和高效率及用户满意性的程度”[3];而国际可用性标准ISO/DIS 9241-11中的定 义为:“可用性是产品在特定环境下为特定用户用于特定用途所具有的有效性,效率和用户 主观满意度”[4]。虽然很多网站和基于Web的系统在可用性方面做了很多工作, 然而根据国际可用性诊断咨询公司Nielsen Norman Group所做的调查,目前电子商务网站的 可用性普遍较低。不友好的导航、过期信息、死链接或者链接错误以及孤立的页面等造成了 用户的不愉快的上网体验。
存在上述可用性问题的原因之一就是在界面设计中业务信息缺乏相互关联,并且现有的信息关联也多采用硬编码“超链接”的方式,页面之间的导航逻辑往往在程序开发时就作为需求规格固定下来,业务发生变化时需要修改编码和重新部署,缺乏扩展性,造成了系统升级维护的困难。本文提出一种信息自动关联技术来实现自由导航以改进Web系统的可用性,并且以一个实际的食品质量监管系统为例,通过对用户操作行为的分析来说明在系统可用性方面的改进。
2 信息自动关联系统的设计
2.1 Web系统的界面导航逻辑分析
Web系统可以看做是由多个业务对象按照特定业务逻辑构成的交互系统。例如在类似淘宝网等电子商务的Web系统中,通常由商品、卖家、买家、购物车、暂存架、订单等很多不同对象构成,并通过一系列的业务流程来完成商品的网上交易及配送等过程。
在Web系统中实现某个特定业务功能时,可能需要对一个或多个业务对象进行条件查询、定位、编辑和修改等,例如在当前商品的浏览页面,用户可能需要查询购买过此商品的用户还买过其他什么相近的商品,以便给自己的购买提供决策支持。在此情况下,信息导航的路径可能由一个“商品→买家→商品→买家→…”的有限步骤构成。考虑到信息导航需要的一般需求,其通用的界面表现形式如图1所示。
图1 信息自由导航示意图
2009年9月第29卷第9期现?代?情?报Journal of Modern InformationSep.,2009Vol.29 No.92009年9月第29卷第9期基于信息自动关联技术的界面导航对Web系统可用性的改进Sep.,2009Vol.29 No.9对于任何一个业务类而言,图1中给出了以下几种最基本的界面形式:
2.1.1 业务类的Form界面
这是一个自由格式的单记录的增加、查询或编辑界面,如图1中业务类1、业务类2和业务类n。一个业务类可以有一个或多个表现形式不同的Form界面,但是一个Form界面仅且只包含一个业务类。我们可以通过创建一个在逻辑上由多个业务类组成的新业务类来实现在一个Form界面中包括多个业务类。显然,Form页面仅接收所包含业务类的内部标识(主键)、操作状态(只读、编辑)或权限控制等信息。
2.1.2 业务类的List界面
这是一个支持多记录的列表查询或删除界面,如图1中业务类1的List界面。同样一个业务类可以有一个或多个由不同属性集合构成的List界面。与Form界面类似,一个List界面仅且只有一个业务类。通常List页面接收一个查询的条件,根据这个条件返回对应业务类的业务对象的集合。
2.1.3 业务类的统计定制Stat界面
这是一个定制处理的自由格式的统计界面,如图1中业务类n的Stat界面。一个Stat界面由多个导出属性构成,并且Stat界面需要接收多个统计条件来对相应的导出属性进行统计求值。例如商品月份统计的界面上,需要接收月份集合和商品类别集合的笛卡尔积所形成的统计条件的集合。
当然,在实际Web系统的开发和界面设计中,任何一个复杂的处理页面都由上述这3种基本的界面形式组合而成。例如在一个网上购书的订单提交页面中,至少包括买家信息的Form界面和购买商品明细的List界面。
2.2 信息自动关联的模型及算法
对于任何一个业务类Ci来说,其界面元素由m个属性构成,即UIi
。在系统运行时,界面根据业务类Ci和传入的查询条件,动态加载一个或多个业务对象集合,即Oi={oi1,oi2,…,oin},其中每个对象oij由在当前界面UIi的每个属性上的取值构成,即oij
与Form和List界面不同,Stat界面中的属性可以看做是一种导出属性,即由其他业务类的属性经过运算得来。业务类Ci在Stat界面中动态加载数据时,对于Stat界面中的某个导出属性pij来说,根据对应的统计条件执行相应的运算,得出结果vij。例如在图1中业务类m的Stat界面中“业务类1的数量”属性根据传入的统计条件,计算出结果为2,用户点击2时,自动导航到业务类1的List界面,显示其具体的2条记录。
可以构建一个关联矩阵ROC来描述业务类之间的导航关系,如下所示:
ROC=C1C2Cn
C1r11r12r1n
C2r21
rij
Cnrn1rnn
为了便于讨论,这里仅考虑一个业务类仅有一个List界面和Form界面的情况。通过分析,rij的取值可能有以下几种:
rij=0
LF
FF
FL
SL
FS
LS?意味?Ci和Cj之间不存在任何路径的信息关联
Ci的List界面到Cj的Form界面存在信息关联
Ci的Form界面到Cj的Form界面存在信息关联
Ci的Form界面到Cj的List界面存在信息关联
Ci的Stat界面到Cj的List界面存在信息关联
Ci的Form界面到Cj的Stat界面存在信息关联
Ci的List界面到Cj的Stat界面存在信息关联
当rij<>0时,Ci必须通过其界面中的某个关联属性pis来实现到Cj界面的信息导航。由于界面中某些关联元素的取值可能存在两种情况:(1)显示值和内部码是一个;(2)显示值和内部码不同,例如显示的是某个商品的名称,而用于信息导航中使用的却是对应的商品惟一标识(内部码),例如在图1中,业务类1的List界面中编号为S12345的业务对象先根据关联属性1上的显示值“A11”,取得其对应的内部码(界面中的隐藏属性),然后根据内部码导航到业务类2的Form界面。
基于效率和使用上的方便,系统在设计时,对于所有的业务类来说,都具有若干统一的属性命名,例如标识属性id、对象所有者owner、创建时间created、最后修改时间lastmodified等。当在业务类中存在上述几种关联时,关联属性pi可能在两端业务类Ci、Cj中的命名也可能不同,例如一个业务类C1的id被另外一个业务类C2引用时,多数情况下需要重新命名以避免与C2中的id属性冲突。
通过上述分析,Web系统的框架模块通过预定义的匹配规则在运行时动态生成业务类之间的ROC关联信息,从而实现自动定位页面和动态设置界面中数据元素的关联导航标志。例如对结果集中的某列数据自动设置超链接,当用户单击时,自动导航到相关联的业务界面,并实现业务对象的检索。
为了实现上述功能,其中涉及两个重要的算法:(1)界面关联导航标志的动态生成算法;(2)Web系统框架模块的导航控制算法。限于篇幅,这里仅给出(1)的算法的伪码形式,且以从List界面导航到Form界面为例。
设当前界面为业务类c的List界面,传入的条件为查询w
ResultSet rs=getResultSet(c,w) ∥从数据库或文件中加载结果集
if(!rs.isEmpty())∥如果结果非空
{
∥根据规则库,构建矩阵ROC,获得其关联信息的集合relatedInfos
∥每个关联信息是由关联码属性、显示值属性、关联业务类及对应属性等信息组成
Array relatedInfos[]=getRelatives(c,‘L’)∥L即List界面,见rij中的取值说明
int ncol=rs.getNumColumns(relatedInfos) ∥得到结果集的属性(列)的数目
outputHead(relatedInfos) ?∥输出表头,即属性(列)名信息
}
while(rs.next()) ∥输出所有的结果
{
for(int i=1;i<=ncol;i++)∥输出每个属性的值
{
∥如果是关联属性(列),在输出值的同时设置关联导航标志
∥例如超链接形式value
if isRelatedCol(relatedInfos,i)
{
∥如果有显示值属性,先获取显示值属性对应的索引
∥如果没有则返回i,即显示值和内部码是一个
int k=relatedInfos[i].getIndexDispValue()
OutputWithLabel(rs.getalue(k),new Label(relatedInfos[i]))
}else
{
∥不是关联属性(列),则直接输出属性的字面值
OutputWith(rs.getValue(i))
}
}
}图2 界面关联导航标志的动态生成算法
2.3 实际案例及可用性改进分析
根据上述和其他相关算法,我们实现了一个基于信息自动关联和自由导航的某市食品质量监管的Web系统,该系统基于J2EE平台,前端采用Struts和Ajax,后端采用Hibernate框架,业务类的关联信息采用XML存储,系统支持Jboss和Tomcat等应用服务器。界面信息的自动关联和导航形式采用超链接的方式,如图3所示,当用户点击“磷酸盐”时,自动导航到添加剂的Form窗口,并自动加载磷酸盐的详细信息。
图3 食品Web系统的信息自动关联和导航运行示意图
该食品系统同时为用户提供了传统式的菜单驱动和信息自动关联的自由导航两种方式,与基于菜单和工具条的导航方式相比,无论是在使用的方便性,还是在信息获取的快捷准确性方面都很大的改进。我们以添加剂监管的业务为例,食品监管员根据当前有问题的添加剂“磷酸盐”,查询添加剂的国家标准和本分局管辖下所有使用这类添加剂的企业信息,以及该添加剂的来源信息。通过对8名使用者的操作行为(输入信息量、鼠标移动距离、点击次数、耗费时间等)的分析,统计结果如表1所示。表1 不同驱动方式的系统可用性对比
操作
行为按键次数
(选择、点
击、键盘)鼠标移动
总距离(cm)鼠标点击
总次数业 务耗费
时间(秒)菜单驱动94811107关联导航522743注:“磷酸盐”的拼音助记码为lsy,按键次数为3。从表1中可以看出,与传统菜单驱动的导航方式相比,采用信息自动关联的自由导航不但给用户带来更好的使用体验,而且减少了用户在不同界面之间的频繁切换以及拷贝、粘贴所造成的输入错误,有效提高了业务处理的效率。3 结束语
由于目前大多数流行开发语言和平台都支持诸如“反射”这种动态机制,这就为开发本文提出的这种基于信息自动关联的自由导航的Web系统提供了便利。当然除了把界面逻辑从程序的硬编码中分离出来外,我们还需要对业务类的基本界面形式进行标准化的封装和统一管理。并且本文提出的这种信息自动关联技术可以进行灵活扩展来支持不同的导航方式,例如动态的右键菜单和导航按钮等。下一步信息关联和导航技术的研究将会结合用户的访问历史和偏好等信息来为Web用户提供一个更智能化的场景和推荐服务。
参考文献
[1]陈晶.浅谈Web页面的可用性设计[J].现代图书情报技术,2003,(1).
[2]Jakob Nielsen:Usability Engineering[M].Academic Press,Boston,1993.
[3]Helen Sharp,Yvonne Rogers,Jenny Preece:交互设计——超越人机交互[M].北京:电子工业出版社,2003.6.
[4]ISO DIS 9241-11:Ergonomic requirements for office work with visual display terminals(VDTs):-Part 11:Guidance on Usability[R].
[5]Jakob Nielsen:Designing Web Usability:The Practice of Simplicity[M].北京:人民邮电出版社,2000.11.