论文部分内容阅读
摘 要:文章通过分析高校精品课程网建设的现状,指出存在的问题及根本原因,提出“以用户为中心的设计流程与方法”对改进精品课程网用户体验的重要性。对三个典型的精品课程网进行了基于实景观察的可用性测试,发现可用性问题并提出改进建议。以《模型技法》精品课程网改版设计为例,进行了信息架构设计、交互设计、视觉设计及设计实现,从而探讨了“以用户为中心的设计流程与方法”对提升精品课程网用户体验的可行性。
关键词:以用户为中心的设计;可用性测试;精品课程网;改版设计
导言
精品课程建设是教育部“高等学校教学质量与教学改革工程”的重要组成部分,是贯彻落实《教育部关于加强高等学校本科教学工作提高教学质量的若干意见》精神,进一步更新教育观念,提高教学质量和人才培养质量的关键。从2003年起,我国各高校陆续展开了国家、省市、学校三个层次的一系列精品课程建设工作,并形成教学资源上网,国家级精品课程在教育网内免费开放,供全国高校师生学习借鉴。各级精品课程的建设对于促进教育革新、推进教育改革,提升教学质量起到了重要的作用。然而,随着高校教育改革的深入,信息化教学的推进,精品课程“重申报轻建设、重评估轻应用”①的取向严重影响到优质资源的教学效用,离“高质、共享”的建设初衷尚有较大距离,评估导向的建设思路成为发展过程中的重要瓶颈。造成上述问题的根本原因是:在精品课程网建设的过程中,没有“以用户为中心”。本文对精品课程网建设现状以及“以用户为中心的设计” 展开研究,尝试将“以用户为中心的设计流程与方法”用于《模型技法》精品课程网的改版建设中。
一、精品课程网建设现状分析
从设计开发的角度讲,精品课程网主要有平台型和独立建站型。平台型通常由学校教务部门或者科研部门通过外包的方式,建立公共的服务平台,各门课程的建设者在公共平台搭建各自的子网站。独立建站型是针对课程单独地进行开发。平台型网站的特点是一次开发可建立数个子网站、前期投入大、功能强大、风格统一但个性化不强;独立建站型网站的特点是一次开发针对一门课程、个性化强、功能通常仅限于特定需求。对于前者,如何选择一个好的平台并加以改进,是学校需要考虑的重点。对于后者,只要有独立设计开发能力的,可以追求个性化与差异性,突出课程的独特之处。笔者认为,这两种类型的网站都有其存在的价值,如何选择,要根据学校及课程的实际情况,由学校相关部门与课程负责老师协商而定。
众多研究者的分析表明:2003年至今,我国产生了大量的优质精品课程网,创建并丰富了优质课程资源。然而,由于过于重视共享功能和评估导向,精品课程网教学的有效性普遍面临着缺失。究其根本,在建设精品课程网的过程当中,忽略了用户的真实需求,没有以用户为中心。必须转变观念,以用户为中心,才能从根本上解决问题。
二、以用户为中心的设计流程与方法
1、 “以用户为中心的设计”的解读
以用户为中心的设计(User-Centered Design,简称UCD)是将易用设计作为产品和系统的完整用户体验的方法。在进行产品设计时,UCD从用户的需求和感受出发,围绕用户为中心设计产品,而不是让用户去适应产品,无论产品的使用流程、产品的信息架构、人机交互方式等,都要考虑用户的使用习惯、预期的交互方式、视觉感受等。以用户为中心的精品课程网的设计,必须将网站的“用户”放在首位,从他们的角度,来考虑和衡量网站的设计。
精品课程网的用户主要有学习借鉴者、评审专家、网站建设者三类,在设计时,应考虑这三类人群的特点。学习借鉴者主要是学生、还可能是相关课程的教师,他们是精品课程网最主要的使用人群,他们的需求首先应当得到满足。评审专家根据相关指标对申报的精品课程进行评审,他们对精品课程网的使用几率不是很高,但对精品课程网的建设有着至关重要的影响,毕竟精品课程网的建设有很大一部分是为了评审,项目经费又可以对后续的建设起支撑作用。网站建设者主要指网站的设计与开发人员,建设方式有教师设计、教师开发,教师设计、学生开发,教师设计、外包开发,混合模式等。②在网站发布之后,建设者对精品课程网站维护、更新,以及迭代开发。
如何设计与开发一个精品课程网来满足这三类人群的需求,是网站建设者需要花心思考虑的。如果建设者将网站设计得过于庞大,任意地扩展网站的版块与功能,必将增加所有用户的认知负担及导航成本,能够愉悦某些用户的功能可能降低其他用户的满意程度。③
2、 HERO方法的解读
HERO是基于启发式评估(Heuristic Evaluation)与实景观察(Realistic Observation)的用户体验设计方法,它是以用户为中心,以验证为驱动,迭代式、轻量级的用户体验的设计方法。HERO是简化了的UCD流程,包含了一系列可重用的模板、工具与子方法,可以根据客户产品的特殊性进行定制,并且是迭代化的作业。启发式评估从专家评审角度评估产品可用性;实景观察是用户测试的一种方法,从真实用户角度发掘产品中用户领域相关的可用性问题。对于网站的改版设计,HERO的一般流程为:1、对现有网站进行启发式评估或者实景观察,发现其中存在的可用性问题,提出改进建议;2、进行网站的改版设计,包括信息架构设计、交互设计以、视觉设计及设计实现;3、再次进行启发式评估或者实景观察,发现可用性问题,进行迭代开发。通过HERO流程,可以不断地改进用户体验,提高产品可用性。
三、精品课程网的可用性测试
从2008年起,笔者开始参与到东华大学《模型技法》精品课程网的建设, 2012年上海市精品课程申报的工作正在进行当中,笔者应课程负责人的委托,对《模型技法》课程网站进行改版设计。为使新版网站带来更好的用户体验,笔者尝试了HERO的流程与方法。
1、测试目的
对现有的精品课程网进行可用性测试,是为了发现其中的可用性问题,提供修改建议,然后重复此测试、修改的过程,最终完成的网站应该尽可能接近完美方案。由于条件的限制,本次测试仅针对学习借鉴者展开;对于评审专家、网站建设者,本次测试并没有以其为测试对象,但也通过直接或间接的方式去了解他们对精品课程网的看法,比如校学术委员会相关的评审专家、课程负责人等,他们对精品课程网的建设有着独到的看法和深厚的经验。 2、测试准备与设备
在测试之前,我们设计了可用性测试脚本,对三个精品课程网来进行测试,这三门课程分别为东华大学《服装结构设计》(http://jpkc.dhu.edu.cn/fzjgsj/index.htm)、中央广播电视大学《货币银行学》(http://web2.openedu.com.cn/course/view.php?id=3)、东华大学《模型技法》(旧版网站已下线,2012年新版网站地址为http://jpkc.dhu.edu.cn/jpkc-ext/mxjf_2012/index.html)。《服装结构设计》课程网站在信息架构设计、视觉设计上花了较大功夫,属于比较典型的web1.0的网站,设计风格偏向于“韩风”(即大块面使用图片,使用比较鲜艳的色彩,追求视觉美感,并不追求访问速度),是针对这门课程单独设计、开发的网站。《货币银行学》则是典型的web2.0特征的网站,强调交互性,网站的功能强大,在视觉美学上的要求则被降低,并且是于在线教育平台发布的一门课程子网站。《模型技法》课程原版网站在信息架构设计与视觉设计上都是追求简洁的效果。对这三个课程网站进行比较测试研究,有助于发现各自的优缺点,为改版网站的信息架构设计、交互设计、视觉设计提供参考。
对于三门课程,我们设计了三项典型的任务,让被测人员去操作相应的网站,这些任务包括:任务1、在线课程网站上提供了老师上课的视频资料,请打开该课程的第一节课的视频资料并开始播放;任务2、看完视频资料后,需要下载一些帮助学习的资料,例如教学大纲、课件,或者老师推荐的其他相关资料,找到你认为对学习和消化该课程有帮助的资料,并把它们下载到电脑上;任务3、假如在学习的过程中有什么疑惑,需要与老师取得联系的,请在网站上找到与老师联系的各种方式,比如电话、电子邮箱、在线交流平台,并尝试选择你认为最合适的方式与老师联系。
对于每一项任务,被测人员在操作完每一个网站后,都需要做一个评分的问卷来给刚才所做的任务打分,并让他们对刚才的任务提供开放式的回答。这些问题有:1、总的来说,我能够轻松地完成这项任务;2、总的来说,完成这项任务花费的时间是让我满意的。这两个问题的回答选项以用户满意度来表示,从强烈反对到非常赞同分成5个等级,1代表强烈反对,5代表非常赞同。3、在进行该任务的过程中,我需要向主持人寻求帮助。这个问题的回答选项有:a、有;b、没有。4、对于刚才完成的任务,你有什么其他的建议吗?这是一个开放性的问题,以获得更多的信息。在每一项任务的三个网站测试完毕之后,询问以下的对比题:对于刚才所做的任务,你更偏向于《服装结构设计》、《货币银行学》、《模型技法》三种方式中的哪一种方式?通过比较性的问题,来获得被测人员的意向。
在所有任务完成之后,我们有一份问卷让被测人员根据刚才使用时的印象,来获取被测人员的意向性。
本次可用性测试的环境为教学楼、图书馆以及学生宿舍,没有使用专业的设备,提供了几把简单的椅子、一张桌子、一台摄像机以及可以上网的电脑,测试环境要求安静、空旷、不受打扰。
3、开始测试
为了达到测试目的,我们选取了二对一的可用性测试,包括测试人员(主持人1名、助理1名)和一个被测用户。这个被测人员在测试人员的陪同下完成三项任务。为了持续观察、了解用户的操作过程、思维过程以及相关各项指标(包括用户出错次数、完成任务的时间等)、记录用户遇到的可用性问题并分析,我们在征得被测用户的同意后,将整个测试过程拍摄下来。
被测人员从上海市松江大学城七所高校的学生挑选出来,包含了不同年级的本科生及研究生,这些人员的专业背景涵盖了文科、理工科、艺术类,他们的计算机的熟练程度及使用网络的年限也各不相同。
4、测试数据统计与分析
本次测试共测试了56位学生,我们对其中50位同学的测试数据进行了统计与分析。对于封闭式题目,我们使用了Excel进行了统计,并求出了相关的平均值;对于开放式题目,我们也统计了开放式回答及频次;对于操作视频,我们进行了回看,记录用户在操作时的可用性问题及频次。其中,针对三项任务操作的统计结果如表1所示;被测用户对精品课程网的总体看法以及对三个精品课程网的总体意向性统计结果如表2所示;通过开放式回答及视频回看的记录,我们得到了三个精品课程网存在的一些可用性问题及改进建议,表3中仅显示了各个课程网站最为突出的3个问题:
四、精品课程网的改版设计
1、《模型技法》精品课程网的信息架构设计
网站是信息堆砌的建筑,而信息架构就像是建筑的根基。④网站改版,首先要从修改信息架构开始。好的信息架构必须一目了然,才能让用户不产生疑惑。要做好信息架构,需要做好组织系统、标签系统、导航系统和搜索系统。
在进行《模型技法》课程网站改版设计的时候,我们对网站所要提供的信息重新进行了组织。图1和图2为旧版与新版的信息架构图,新版方案多了教学评价、教学成果、在线答疑三个板块:“教学评价”反映了精品课程网的评估导向;“教学成果”可以展示学生优秀作品、参赛获奖作品、教学相关荣誉等内容,一方面符合评估导向,另一方面对学习借鉴者也提供了参考;“在线答疑”可以让新版网站更具互动性,是课程负责教师与访问者互动方式的补充,比起电子邮件、即时通讯工具等方式,“在线答疑”的针对性更强、有效期更长,大家均可就某个问题来进行探讨,讨论过程本身亦可展现出来,也可以算是一种教学资料供大家学习。新版网站有两条通道来进入具体的页面,分别对应“学习借鉴者”和“评审专家”。通过“学习借鉴者”通道进入具体页面与旧版网站的方式无异;通过“评审专家”通道,先进入“申报简况”页面,页面内容为精品课程评审的各项指标、实施现况以及支撑材料的访问入口,通过单击访问入口的超级链接,可进入具体的页面。“学习借鉴者”通道更加突出网络课程的导向,需要更好地起到在线教学的作用;“评审专家”通道非常清晰地代表了评估导向。 从中,我们可以看到,随着教学实践的持续进行,课程建设越来越深入,内容越来越丰富、合理。面对需要展现的内容,我们需要更好地将这些信息来进行组织,以便访问者能方便、快捷地获取所需信息。
好的标签能吸引访客注意力,引导他们准确地找到信息。在考虑网站的标签的时候,我们注重了对标签的考虑,参照了标签设计的原则,突出互斥性、一致性、通俗性、具体性。
新版网站的导航有明显的改进,使用下拉菜单,让用户更加快速地进入到各个子页面;与旧版网站一样,很多版块的左侧放置了二级导航,这样可以增加进入其他页面的入口。
单门课程的精品课程网所需展现的内容较少、组织架构也较为简单,故在新版网站中,仍没有加入搜索系统。
2、《模型技法》精品课程网的交互设计
在确立了精品课程网的信息架构后,就可以着手交互设计。从用户角度来说,交互设计是一种如何让产品易用、有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。
在精品课程网交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰、自然易懂。这样用户才能够有效地获取这些信息,并迅速作出决定。精品课程网并不是一个很复杂的网站,因此,不必刻意追求页面的丰富性,而应该让一切都不言而喻,让普通用户只要看它一眼就能知道是什么内容,知道如何使用它。交互方式应尽可能的简单,不必刻意追求花哨的交互效果。
在设计新版页面时,我们对需要展现的内容进行了再思考,注重了以下两点:1、简洁清晰——使用最少的元素来表达最多的信息,因此,语言要凝练、避免繁复;2、自然易懂——使用用户平时使用和理解的表达方式去传递信息,更可以被用户所接受。
为了防止用户在网站中“迷路”,我们从以下几个方面来解决:1、所有页面加入全局导航;2、设置“逃生舱”模式:在除首页的所有页面左上角放入课程标志,在“迷路”的情况下,可以通过单击标志,返回到课程首页;3、加入“面包屑”工具,该工具显示了用户在网站中所处的位置及层级关系。
在精品课程网两个重要的版块——教学课件和教学录像,我们进行了重新设计。教学课件版块由原先的PPT在线播放改为网页形式的课件,解决了PPT加载速度慢、无法迅速定位的问题。教学录像由原先的流媒体格式改为Flash格式,一方面提高了兼容性,另一方面减少了视频缓冲的时间。
3、《模型技法》精品课程网的视觉设计
视觉设计是在信息架构和交互设计的基础上,参照用户的心理模型和任务达成进行视觉设计。视觉设计定义用户界面的外观和感觉,包括页面风格、色彩、字体、图形元素(按钮、图标)等,在不破坏产品的结构和交互行为的前提下,使得产品更美、更抽象、更艺术化。视觉设计要达到用户愉悦使用的目的,同时传达品牌概念,提供一致、有逻辑性的和引人注意的产品界面。
新版页面保留了原先的主色调,对文字颜色作了统一与修改,不同层级的信息使用不同的颜色,使标题文字更加突出,满足用户“浏览”页面而不是“阅读”网站的使用习惯,用户只有在搜寻到所需要的信息,才会停下来仔细阅读内容。
对网站的图片进行了优化,使其与页面背景或者表格背景更好的融合。对细节进行了优化,使其更有质感。这两方面的修改,可以让网站看起来更精细,细节可以很好的反映设计者的功底。
4、设计实现与迭代开发
设计完毕,我们通过一定的技术手段将改版的页面放置于网站服务器。通过访问服务器的网站,快速地进行测试,发现可用性问题,并作出改进。这些测试主要由两方面的人员来进行,一是课程的任课教师及部分学生,二是网站的开发制作者。测试是一个迭代的过程,通过开发、测试、修改、再度测试,精品课程网存在的可用性问题越来越少。
五、总结与展望
在这次精品课程网站的改版建设过程中,我们再次验证了以用户为中心的思想对于一个网站产品的重要性。最重要的是要树立以用户为中心的设计理念,其次是要找到适合当前项目的设计开发流程与方法,将经典的UCD设计流程与方法与项目结合起来。在本次改版中,我们所进行的基于实景观察的用户测试为我们发现了大量的可用性问题,并为改版提供了依据与方向。在改版设计中,在信息架构设计、交互设计、视觉设计及设计实现各个阶段,随时进行小规模的测试与讨论,及时发现问题,从而确保了新版网站在可用性上有一个大幅度的提升。
诚然,受时间及技能水平所限,新版网站还存在可用性问题和其他值得改进的地方。但我们只要对精品课程网持之以恒地改进下去,相信会带来更好的用户体验,因为UCD流程本身就是一个迭代的过程,是一个循环上升的过程。
[注释]
①冯博琴.高校精品课程建设研究[J],中国大学教学,2008,(10):9-10.
②路秋丽,孙华等.国家精品课程建设现状的调查分析[J],中国远程教育,2010,(4):49-54
③Alan Cooper,Robert Reimann,David Cronin. About Face3交互设计精髓[M] .北京:电子工业出版社,2008:47-56
④罗旭祥.精益求精:卓越的互联网产品设计与管理[M] .机械工业出版社,2011:96
(作者单位:1.复旦大学上海视觉艺术学院 设计学院,上海 201620;2.中国惠普有限公司,上海201203;3.上海工程技术大学 艺术设计学院,上海 201620)
关键词:以用户为中心的设计;可用性测试;精品课程网;改版设计
导言
精品课程建设是教育部“高等学校教学质量与教学改革工程”的重要组成部分,是贯彻落实《教育部关于加强高等学校本科教学工作提高教学质量的若干意见》精神,进一步更新教育观念,提高教学质量和人才培养质量的关键。从2003年起,我国各高校陆续展开了国家、省市、学校三个层次的一系列精品课程建设工作,并形成教学资源上网,国家级精品课程在教育网内免费开放,供全国高校师生学习借鉴。各级精品课程的建设对于促进教育革新、推进教育改革,提升教学质量起到了重要的作用。然而,随着高校教育改革的深入,信息化教学的推进,精品课程“重申报轻建设、重评估轻应用”①的取向严重影响到优质资源的教学效用,离“高质、共享”的建设初衷尚有较大距离,评估导向的建设思路成为发展过程中的重要瓶颈。造成上述问题的根本原因是:在精品课程网建设的过程中,没有“以用户为中心”。本文对精品课程网建设现状以及“以用户为中心的设计” 展开研究,尝试将“以用户为中心的设计流程与方法”用于《模型技法》精品课程网的改版建设中。
一、精品课程网建设现状分析
从设计开发的角度讲,精品课程网主要有平台型和独立建站型。平台型通常由学校教务部门或者科研部门通过外包的方式,建立公共的服务平台,各门课程的建设者在公共平台搭建各自的子网站。独立建站型是针对课程单独地进行开发。平台型网站的特点是一次开发可建立数个子网站、前期投入大、功能强大、风格统一但个性化不强;独立建站型网站的特点是一次开发针对一门课程、个性化强、功能通常仅限于特定需求。对于前者,如何选择一个好的平台并加以改进,是学校需要考虑的重点。对于后者,只要有独立设计开发能力的,可以追求个性化与差异性,突出课程的独特之处。笔者认为,这两种类型的网站都有其存在的价值,如何选择,要根据学校及课程的实际情况,由学校相关部门与课程负责老师协商而定。
众多研究者的分析表明:2003年至今,我国产生了大量的优质精品课程网,创建并丰富了优质课程资源。然而,由于过于重视共享功能和评估导向,精品课程网教学的有效性普遍面临着缺失。究其根本,在建设精品课程网的过程当中,忽略了用户的真实需求,没有以用户为中心。必须转变观念,以用户为中心,才能从根本上解决问题。
二、以用户为中心的设计流程与方法
1、 “以用户为中心的设计”的解读
以用户为中心的设计(User-Centered Design,简称UCD)是将易用设计作为产品和系统的完整用户体验的方法。在进行产品设计时,UCD从用户的需求和感受出发,围绕用户为中心设计产品,而不是让用户去适应产品,无论产品的使用流程、产品的信息架构、人机交互方式等,都要考虑用户的使用习惯、预期的交互方式、视觉感受等。以用户为中心的精品课程网的设计,必须将网站的“用户”放在首位,从他们的角度,来考虑和衡量网站的设计。
精品课程网的用户主要有学习借鉴者、评审专家、网站建设者三类,在设计时,应考虑这三类人群的特点。学习借鉴者主要是学生、还可能是相关课程的教师,他们是精品课程网最主要的使用人群,他们的需求首先应当得到满足。评审专家根据相关指标对申报的精品课程进行评审,他们对精品课程网的使用几率不是很高,但对精品课程网的建设有着至关重要的影响,毕竟精品课程网的建设有很大一部分是为了评审,项目经费又可以对后续的建设起支撑作用。网站建设者主要指网站的设计与开发人员,建设方式有教师设计、教师开发,教师设计、学生开发,教师设计、外包开发,混合模式等。②在网站发布之后,建设者对精品课程网站维护、更新,以及迭代开发。
如何设计与开发一个精品课程网来满足这三类人群的需求,是网站建设者需要花心思考虑的。如果建设者将网站设计得过于庞大,任意地扩展网站的版块与功能,必将增加所有用户的认知负担及导航成本,能够愉悦某些用户的功能可能降低其他用户的满意程度。③
2、 HERO方法的解读
HERO是基于启发式评估(Heuristic Evaluation)与实景观察(Realistic Observation)的用户体验设计方法,它是以用户为中心,以验证为驱动,迭代式、轻量级的用户体验的设计方法。HERO是简化了的UCD流程,包含了一系列可重用的模板、工具与子方法,可以根据客户产品的特殊性进行定制,并且是迭代化的作业。启发式评估从专家评审角度评估产品可用性;实景观察是用户测试的一种方法,从真实用户角度发掘产品中用户领域相关的可用性问题。对于网站的改版设计,HERO的一般流程为:1、对现有网站进行启发式评估或者实景观察,发现其中存在的可用性问题,提出改进建议;2、进行网站的改版设计,包括信息架构设计、交互设计以、视觉设计及设计实现;3、再次进行启发式评估或者实景观察,发现可用性问题,进行迭代开发。通过HERO流程,可以不断地改进用户体验,提高产品可用性。
三、精品课程网的可用性测试
从2008年起,笔者开始参与到东华大学《模型技法》精品课程网的建设, 2012年上海市精品课程申报的工作正在进行当中,笔者应课程负责人的委托,对《模型技法》课程网站进行改版设计。为使新版网站带来更好的用户体验,笔者尝试了HERO的流程与方法。
1、测试目的
对现有的精品课程网进行可用性测试,是为了发现其中的可用性问题,提供修改建议,然后重复此测试、修改的过程,最终完成的网站应该尽可能接近完美方案。由于条件的限制,本次测试仅针对学习借鉴者展开;对于评审专家、网站建设者,本次测试并没有以其为测试对象,但也通过直接或间接的方式去了解他们对精品课程网的看法,比如校学术委员会相关的评审专家、课程负责人等,他们对精品课程网的建设有着独到的看法和深厚的经验。 2、测试准备与设备
在测试之前,我们设计了可用性测试脚本,对三个精品课程网来进行测试,这三门课程分别为东华大学《服装结构设计》(http://jpkc.dhu.edu.cn/fzjgsj/index.htm)、中央广播电视大学《货币银行学》(http://web2.openedu.com.cn/course/view.php?id=3)、东华大学《模型技法》(旧版网站已下线,2012年新版网站地址为http://jpkc.dhu.edu.cn/jpkc-ext/mxjf_2012/index.html)。《服装结构设计》课程网站在信息架构设计、视觉设计上花了较大功夫,属于比较典型的web1.0的网站,设计风格偏向于“韩风”(即大块面使用图片,使用比较鲜艳的色彩,追求视觉美感,并不追求访问速度),是针对这门课程单独设计、开发的网站。《货币银行学》则是典型的web2.0特征的网站,强调交互性,网站的功能强大,在视觉美学上的要求则被降低,并且是于在线教育平台发布的一门课程子网站。《模型技法》课程原版网站在信息架构设计与视觉设计上都是追求简洁的效果。对这三个课程网站进行比较测试研究,有助于发现各自的优缺点,为改版网站的信息架构设计、交互设计、视觉设计提供参考。
对于三门课程,我们设计了三项典型的任务,让被测人员去操作相应的网站,这些任务包括:任务1、在线课程网站上提供了老师上课的视频资料,请打开该课程的第一节课的视频资料并开始播放;任务2、看完视频资料后,需要下载一些帮助学习的资料,例如教学大纲、课件,或者老师推荐的其他相关资料,找到你认为对学习和消化该课程有帮助的资料,并把它们下载到电脑上;任务3、假如在学习的过程中有什么疑惑,需要与老师取得联系的,请在网站上找到与老师联系的各种方式,比如电话、电子邮箱、在线交流平台,并尝试选择你认为最合适的方式与老师联系。
对于每一项任务,被测人员在操作完每一个网站后,都需要做一个评分的问卷来给刚才所做的任务打分,并让他们对刚才的任务提供开放式的回答。这些问题有:1、总的来说,我能够轻松地完成这项任务;2、总的来说,完成这项任务花费的时间是让我满意的。这两个问题的回答选项以用户满意度来表示,从强烈反对到非常赞同分成5个等级,1代表强烈反对,5代表非常赞同。3、在进行该任务的过程中,我需要向主持人寻求帮助。这个问题的回答选项有:a、有;b、没有。4、对于刚才完成的任务,你有什么其他的建议吗?这是一个开放性的问题,以获得更多的信息。在每一项任务的三个网站测试完毕之后,询问以下的对比题:对于刚才所做的任务,你更偏向于《服装结构设计》、《货币银行学》、《模型技法》三种方式中的哪一种方式?通过比较性的问题,来获得被测人员的意向。
在所有任务完成之后,我们有一份问卷让被测人员根据刚才使用时的印象,来获取被测人员的意向性。
本次可用性测试的环境为教学楼、图书馆以及学生宿舍,没有使用专业的设备,提供了几把简单的椅子、一张桌子、一台摄像机以及可以上网的电脑,测试环境要求安静、空旷、不受打扰。
3、开始测试
为了达到测试目的,我们选取了二对一的可用性测试,包括测试人员(主持人1名、助理1名)和一个被测用户。这个被测人员在测试人员的陪同下完成三项任务。为了持续观察、了解用户的操作过程、思维过程以及相关各项指标(包括用户出错次数、完成任务的时间等)、记录用户遇到的可用性问题并分析,我们在征得被测用户的同意后,将整个测试过程拍摄下来。
被测人员从上海市松江大学城七所高校的学生挑选出来,包含了不同年级的本科生及研究生,这些人员的专业背景涵盖了文科、理工科、艺术类,他们的计算机的熟练程度及使用网络的年限也各不相同。
4、测试数据统计与分析
本次测试共测试了56位学生,我们对其中50位同学的测试数据进行了统计与分析。对于封闭式题目,我们使用了Excel进行了统计,并求出了相关的平均值;对于开放式题目,我们也统计了开放式回答及频次;对于操作视频,我们进行了回看,记录用户在操作时的可用性问题及频次。其中,针对三项任务操作的统计结果如表1所示;被测用户对精品课程网的总体看法以及对三个精品课程网的总体意向性统计结果如表2所示;通过开放式回答及视频回看的记录,我们得到了三个精品课程网存在的一些可用性问题及改进建议,表3中仅显示了各个课程网站最为突出的3个问题:
四、精品课程网的改版设计
1、《模型技法》精品课程网的信息架构设计
网站是信息堆砌的建筑,而信息架构就像是建筑的根基。④网站改版,首先要从修改信息架构开始。好的信息架构必须一目了然,才能让用户不产生疑惑。要做好信息架构,需要做好组织系统、标签系统、导航系统和搜索系统。
在进行《模型技法》课程网站改版设计的时候,我们对网站所要提供的信息重新进行了组织。图1和图2为旧版与新版的信息架构图,新版方案多了教学评价、教学成果、在线答疑三个板块:“教学评价”反映了精品课程网的评估导向;“教学成果”可以展示学生优秀作品、参赛获奖作品、教学相关荣誉等内容,一方面符合评估导向,另一方面对学习借鉴者也提供了参考;“在线答疑”可以让新版网站更具互动性,是课程负责教师与访问者互动方式的补充,比起电子邮件、即时通讯工具等方式,“在线答疑”的针对性更强、有效期更长,大家均可就某个问题来进行探讨,讨论过程本身亦可展现出来,也可以算是一种教学资料供大家学习。新版网站有两条通道来进入具体的页面,分别对应“学习借鉴者”和“评审专家”。通过“学习借鉴者”通道进入具体页面与旧版网站的方式无异;通过“评审专家”通道,先进入“申报简况”页面,页面内容为精品课程评审的各项指标、实施现况以及支撑材料的访问入口,通过单击访问入口的超级链接,可进入具体的页面。“学习借鉴者”通道更加突出网络课程的导向,需要更好地起到在线教学的作用;“评审专家”通道非常清晰地代表了评估导向。 从中,我们可以看到,随着教学实践的持续进行,课程建设越来越深入,内容越来越丰富、合理。面对需要展现的内容,我们需要更好地将这些信息来进行组织,以便访问者能方便、快捷地获取所需信息。
好的标签能吸引访客注意力,引导他们准确地找到信息。在考虑网站的标签的时候,我们注重了对标签的考虑,参照了标签设计的原则,突出互斥性、一致性、通俗性、具体性。
新版网站的导航有明显的改进,使用下拉菜单,让用户更加快速地进入到各个子页面;与旧版网站一样,很多版块的左侧放置了二级导航,这样可以增加进入其他页面的入口。
单门课程的精品课程网所需展现的内容较少、组织架构也较为简单,故在新版网站中,仍没有加入搜索系统。
2、《模型技法》精品课程网的交互设计
在确立了精品课程网的信息架构后,就可以着手交互设计。从用户角度来说,交互设计是一种如何让产品易用、有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。
在精品课程网交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰、自然易懂。这样用户才能够有效地获取这些信息,并迅速作出决定。精品课程网并不是一个很复杂的网站,因此,不必刻意追求页面的丰富性,而应该让一切都不言而喻,让普通用户只要看它一眼就能知道是什么内容,知道如何使用它。交互方式应尽可能的简单,不必刻意追求花哨的交互效果。
在设计新版页面时,我们对需要展现的内容进行了再思考,注重了以下两点:1、简洁清晰——使用最少的元素来表达最多的信息,因此,语言要凝练、避免繁复;2、自然易懂——使用用户平时使用和理解的表达方式去传递信息,更可以被用户所接受。
为了防止用户在网站中“迷路”,我们从以下几个方面来解决:1、所有页面加入全局导航;2、设置“逃生舱”模式:在除首页的所有页面左上角放入课程标志,在“迷路”的情况下,可以通过单击标志,返回到课程首页;3、加入“面包屑”工具,该工具显示了用户在网站中所处的位置及层级关系。
在精品课程网两个重要的版块——教学课件和教学录像,我们进行了重新设计。教学课件版块由原先的PPT在线播放改为网页形式的课件,解决了PPT加载速度慢、无法迅速定位的问题。教学录像由原先的流媒体格式改为Flash格式,一方面提高了兼容性,另一方面减少了视频缓冲的时间。
3、《模型技法》精品课程网的视觉设计
视觉设计是在信息架构和交互设计的基础上,参照用户的心理模型和任务达成进行视觉设计。视觉设计定义用户界面的外观和感觉,包括页面风格、色彩、字体、图形元素(按钮、图标)等,在不破坏产品的结构和交互行为的前提下,使得产品更美、更抽象、更艺术化。视觉设计要达到用户愉悦使用的目的,同时传达品牌概念,提供一致、有逻辑性的和引人注意的产品界面。
新版页面保留了原先的主色调,对文字颜色作了统一与修改,不同层级的信息使用不同的颜色,使标题文字更加突出,满足用户“浏览”页面而不是“阅读”网站的使用习惯,用户只有在搜寻到所需要的信息,才会停下来仔细阅读内容。
对网站的图片进行了优化,使其与页面背景或者表格背景更好的融合。对细节进行了优化,使其更有质感。这两方面的修改,可以让网站看起来更精细,细节可以很好的反映设计者的功底。
4、设计实现与迭代开发
设计完毕,我们通过一定的技术手段将改版的页面放置于网站服务器。通过访问服务器的网站,快速地进行测试,发现可用性问题,并作出改进。这些测试主要由两方面的人员来进行,一是课程的任课教师及部分学生,二是网站的开发制作者。测试是一个迭代的过程,通过开发、测试、修改、再度测试,精品课程网存在的可用性问题越来越少。
五、总结与展望
在这次精品课程网站的改版建设过程中,我们再次验证了以用户为中心的思想对于一个网站产品的重要性。最重要的是要树立以用户为中心的设计理念,其次是要找到适合当前项目的设计开发流程与方法,将经典的UCD设计流程与方法与项目结合起来。在本次改版中,我们所进行的基于实景观察的用户测试为我们发现了大量的可用性问题,并为改版提供了依据与方向。在改版设计中,在信息架构设计、交互设计、视觉设计及设计实现各个阶段,随时进行小规模的测试与讨论,及时发现问题,从而确保了新版网站在可用性上有一个大幅度的提升。
诚然,受时间及技能水平所限,新版网站还存在可用性问题和其他值得改进的地方。但我们只要对精品课程网持之以恒地改进下去,相信会带来更好的用户体验,因为UCD流程本身就是一个迭代的过程,是一个循环上升的过程。
[注释]
①冯博琴.高校精品课程建设研究[J],中国大学教学,2008,(10):9-10.
②路秋丽,孙华等.国家精品课程建设现状的调查分析[J],中国远程教育,2010,(4):49-54
③Alan Cooper,Robert Reimann,David Cronin. About Face3交互设计精髓[M] .北京:电子工业出版社,2008:47-56
④罗旭祥.精益求精:卓越的互联网产品设计与管理[M] .机械工业出版社,2011:96
(作者单位:1.复旦大学上海视觉艺术学院 设计学院,上海 201620;2.中国惠普有限公司,上海201203;3.上海工程技术大学 艺术设计学院,上海 201620)