基于原型设计的人机交互课程实验方案

ＣＮ　４３—１２５８／ＴＰ　ＩＳＳＮ　１００７—１３ＯＸ　计算机工程与科学　Ｃｏｍｐｕｔｅｒ　Ｅｎｇｉｎｅｅｒｉｎｇ　８Ｌ　Ｓｃｉｅｎｃｅ　第３８卷第Ｓｕｐｐｌ（１）期２０１６年１１月　Ｖｏ１．３８，Ｎｏ．Ｓｕｐｐｌ（１），Ｎｏｖ．２０１６　文章编号：１００７—１３０Ｘ（２０１６）Ｓｕｐｐｌ（１）一０１８２—０４　基于原型设计的人机交互课程实验方案　叶常春，陈立前　（国防科学技术大学计算机学院，湖南长沙４１００７３）　摘　要：人机交互课程是实践性很强的一门课。实验是人机交互课程的重要组成部分。现阶段，国内　高校的人机交互课程的学时数普遍不多。没有足够的学时造成无法通过软件开发项目实战来开展人机交　互设计实践。一种对策是开展软件界面原型设计实验。描述基于原型设计的人机交互课程实验方案。首　先描述了实验目的，接着描述实验任务和目标，再接着重点描述了实验流程，然后描述实验成果验收的办　法。最后总结了该实验方案的优势和面临的问题。　关键词：人机交互；实验方案；原型设计　中图分类号：Ｇ６４２　文献标志码：Ａ　ｄｏｉ：１０．３９６９／ｊ．ｉｓｓｎ．１００７—１３０Ｘ．２０１６．Ｓｕｐｐｌ（１）．０４６　Ａ　ｐｒｏｔｏｔｙｐｉｎｇ・—ｂａｓｅｄ　ｅｘｐｅｒｉｍｅｎｔａｌ　ｓｃｈｅｍｅ　ｏｆ　ｈｕｍａｎ　。ｃｏｍｐｕｔｅｒ　ｉｎｔｅｒａｃｔｉｏｎ　ｃｏｕｒｓｅ　ＹＥ　Ｃｈａｎｇ—ｃｈｕｎ，ＣＨＥＮ　Ｌｉ—ｑｉａｎ　（Ｃｏｌｌｅｇｅ　ｏｆ　Ｃｏｍｐｕｔｅｒ，Ｎａｔｉｏｎａｌ　Ｕｎｉｖｅｒｓｉｔｙ　ｏｆ　Ｄｅ｛ｅｎｓｅ　Ｔｅｃｈｎｏｌｏｇｙ，Ｃｈａｎｇｓｈａ　４１００７３，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ：Ｈｕｍａｎ—ｃｏｍｐｕｔｅｒ　ｉｎｔｅｒａｃｔｉｏｎ　ｉｓ　ｏｎｅ　ｏｆ　ｔｈｅ　ｃｏｕｒｓｅｓ　ｗｈｉｃｈ　ｎｅｅｄ　ｌｏｔｓ　ｏｆ　ｐｒａｃｔｉｃｅ．Ｅｘｐｅｒｉ—　ｍｅｎｔｓ　ａｒｅ　ｏｎｅ　ｏｆ　ｔｈｅ　ｉｍｐｏｒｔａｎｔ　ｐａｒｔｓ　ｏｆ　Ｈｕｍａｎ—ｃｏｍｐｕｔｅｒ　ｉｎｔｅｒａｃｔｉｏｎ．Ｔｏｄａｙ，ｔｈｅ　ｃｌａｓｓ　ｈｏｕｒｓ　ｏｆ　Ｈｕｍａｎ—　ｃｏｍｐｕｔｅｒ　ｉｎｔｅｒａｃｔｉｏｎ　ａｒｅ　ｃｏｍｍｏｎｌｙ　ｉｎａｄｅｑｕａｔｅ，ＳＯ　ｔｈａｔ　ｔｈｅｒｅ　ｉｓ　ｎｏｔ　ｅｎｏｕｇｈ　ｔｉｍｅ　ｔｏ　ｓｔａｒｔ　ａｎ　ａｃｔｕａｌ　ｓｏｆｔ—　ｗａｒｅ　ｄｅｖｅｌｏｐｍｅｎｔ　ｐｒｏｊ　ｅｃｔ　ｉｎ　ｏｒｄｅｒ　ｔｏ　ｐｒａｃｔｉｃｅ　ｉｎｔｅｒｆａｃｅ　ｄｅｓｉｇｎｉｎｇ．Ｓｏｆｔｗａｒｅ　ｐｒｏｔｏｔｙｐｉｎｇ　ｉｓ　ｏｎｅ　ｏｆ　ｔｈｅ　ＳＯ—　ｌｕｔｉｏｎｓ．Ｔｈｉｓ　ｐａｐｅｒ　ｄｅｓｃｒｉｂｅｓ　ｔｈｅ　ｅｘｐｅｒｉｍｅｎｔａｌ　ｓｃｈｅｍｅ　ｏｆ　Ｈｕｍａｎ－Ｃｏｍｐｕｔｅｒ　Ｉｎｔｅｒａｃｔｉｏｎ，ｗｈｉｃｈ　ｆｏｃｕｓｅｓ　ｏｎ　ｐｒｏｔｏｔｙｐｉｎｇ．Ｗｅ　ｄｅｓｃｒｉｂｅ　ｔｈｅ　ｏｂｊ　ｅｃｔｉｖｅｓ，ｔａｓｋｓ　ａｎｄ　ｇｏａｌｓ　ｏｆ　ｔｈｅ　ｅｘｐｅｒｉｍｅｎｔａｌ　ｓｃｈｅｍｅ，ａｎｄ　ｄｅｐｉｃｔ　ｔｈｅ　ｐｒｏｃｅｄｕｒｅ　ａｎｄ　ｈｏｗ　ｔｏ　ｃｈｅｃｋ　ｓｔｕｄｅｎｔｓ’ｗｏｒｋ　ｉｎ　ｄｅｔａｉｌ．Ｗｅ　ａｌｓｏ　ｓｕｍｍａｒｉｚｅ　ｔｈｅ　ａｄｖａｎｔａｇｅｓ　ａｎｄ　ｄｉｓａｄｖａｎｔａ—　ｇｅｓ　ｏｆ　ｔｈｅ　ｐｒｏｐｏｓａ１．　Ｋｅｙ　ｗｏｒｄｓ：Ｈｕｍａｎ—ｃｏｍｐｕｔｅｒ　ｉｎｔｅｒａｃｔｉｏｎ；ｅｘｐｅｒｉｍｅｎｔａｌ　ｓｃｈｅｍｅ；ｐｒｏｔｏｔｙｐｉｎｇ　现阶段，国内高校的人机交互课程的学时数普　１　引言　近年来，软件或者网站越来越重视用户体验设　计口　］。在计算机课程中，与用户体验设计最密切　的是人机交互课程。人机交互课程是一门实践性　遍不多。没有足够的学时造成无法通过软件开发　项目实战来开展人机交互设计实践。一种解决办　法是与其他课程，比如软件工程课程，联合以开展　软件项目开发实战　］。另一种解决办法是开展　软件界面原型设计。原型设计是人机交互设计的　流行方法。借助原型设计工具，例如ＧＵＩ　Ｄｅｓｉｇｎ　Ｓｔｕｄｉｏ或Ａｘｕｒｅ，能够开发设计出可动态演示的界　面原型。　很强的课程｜３　］。要使学生认识和体会到何为好　的用户体验设计，辨别出好在哪里并初步掌握人机　交互设计的原则、过程和方法，靠课堂讲课是远远　不够的，必须抓好人机交互课程实验这一环节。　本文描述基于原型设计的人机交互课程实验　＊　收稿日期：２０１５—０８—０３；修回日期：２０１５－１０—１１　通信地址：４１００７３湖南沙市国防科学技术大学计算机学院计算机系　Ａｄｄｒｅｓｓ：Ｃｏｌｌｅｇｅ　ｏｆ　Ｃｏｍｐｕｔｅｒ，Ｎａｔｉｏｎａｌ　Ｕｎｉｖｅｒｓｉｔｙ　ｏｆ　Ｄｅｆｅｎｓｅ　Ｔｅｃｈｎｏｌｏｇｙ，Ｃｈａｎｇｓｈａ　４１００７３，Ｈｕｎａｎ，Ｐ．Ｒ．Ｃｈｉｎａ　叶常春等：基于原型设计的人机交互课程实验方案　１８３　方案，是我们向学生发布的实验方案的浓缩。下文　首先描述了实验目的，接着描述实验任务和目标，　统开发项目。对于自主选题，小组以书面形式对选　题作出简介，老师将判断选题合理与否，不合理的　选题将被否决。　（２）联系三个实际用户，进行访谈或观察实际　工作流程。对每一类用户，至少选取一个样本。以　教室预约系统为例，需要一个教务人员样本、一个　物业管理员样本和一个预约人样本。　再接着用主要篇幅描述了实验流程，然后描述实验　成果验收的办法。最后总结了该实验方案的优势　和问题。　２　实验目的　（１）学生能清晰描述人机交互设计的核心任　事先做好充分准备。比如有目的地选择将要　向用户提出的问题或要用户展示的流程环节。对　务、核心过程和典型方法。　（２）学生学会运用一种原型设计工具开展软件　或网站交互界面的原型设计。　（３）学生学会运用启发式评估方法对自己或他　人的设计（含原型设计）进行评估分析。　（４）学生学会对软件的用户界面或界面原型开　发用户测试计划，实施用户测试活动并撰写用户测　试报告。　３　实验任务和目标　目标是开发设计一款网站界面原型。任务包　括：（１）识别和描述用例，撰写该网站的用户需求规　格说明书。（２）利用原型工具设计网站线框图和可　演示的界面原型。（３）对界面原型进行启发式评　估，撰写评估结论。根据评估结论进行再设计。　（４）制订用户测试计划，对网站界面原型开展用户　测试，撰写用户测试报告。　４　实验流程　（１）成立小组、选择项目。小组一般３到４人，　尽可能男女搭配。每一个组员采用纵向分工——　即完成项目的不同功能模块的界面原型设计。建　议根据用户角色来分工。以教室预约系统为例，用　户主要有教务、物业管理员和预约人（教学班或课　外小组等），相应地可由三个组员来分别承担这三　个角色所对应的功能模块的界面原型设计，一人对　应教务的部分，一人对应物业管理员的部分，一人　对应预约人的部分。如果某一用户所涉及的任务　偏多，则可以进一步分成两部分，由两人来承担。　建议选题包括教室预约系统、请假管理系统、　机房预约系统、选课系统、文献资料共享系统、调查　问卷系统等等。小组也可以自主选题，而且选题范　围可拓展至手机应用程序。我们建议小组尽量选　择难度和工作量适当，而且便于找到真实用户的系　每一个用户样本，用相机拍下一幅与访谈或流程观　察相关的照片。为照片添加标题。特别关注现在　的做法存在的问题，比如效率不高的地方、不方便　的地方或者需要但没能做到的事情等。撰写一份　访谈记录或观察日志，归纳出三条以上最值得改进　的问题，并附照片（含照片的说明）。　（３）识别用户需求，撰写需求规格说明书。小　组内部（建议邀请其他组的同学）一起开展头脑风　暴，整理出用户要完成的任务。头脑风暴重在追求　量而不是质。　对每一类用户，至少列出五项由该类用户执行　的任务。这里，任务是指用户完成的一件事情。如　果你了解用例，这里的任务就是一个用例。大致地　讲，用例对应用户要完成的一件事。这件事会单独　实施，用户会带着明确的目的来做这件事。用例的　描述涉及的是用户和软件系统之间的交互过程。　阅读资料进一步了解关于用例的更多内容。　为以上列出的每类用户的五项任务设定重要　程度等级。基础性的或与系统核心功能相关的任　务一般更重要。建议多与同学进行交流，看有没有　遗漏重要的任务。后续阶段优先设计与重要的任　务相关的界面。　撰写需求规格说明书。需求规格说明书至少　包含以下内容：项目的背景和意义、用户特征、项目　目标、项目任务和项目分工。项目分工是指出每一　个组员分别承担哪几项任务，每项任务是什么（用　一两句话说清楚）。每一个组员至少要完成三项任　务相关的界面设计。　（４）制作故事板。故事板ｌ＿６　有点像漫画，由　多幅胶片组成，每幅胶片都包含一幅插图和说明文　字。制作故事板的目的是让你去感受和理解用户　怎么使用你开发的系统执行任务，理解用户（们）是　怎么利用你开发的系统实现核心需求。　一个好的故事板应当清晰地交代用户是谁，使　用场景和用户使用将要设计的界面的动机。应当　说明使用你设计的界面，用户能够做到什么，通常　１８４　Ｃｏｍｐｕｔｅｒ　Ｅｎｇｉｎｅｅｒｉｎｇ＆Ｓｃｉｅｎｃｅ计算机工程与科学２０１６，３８（Ｓｕｐｐｌ（１））　不需要展示具体的用户界面设计。　每个故事板应当包含５～８个幅胶片，绘制在　两张纸上。然后拍照或扫描，整理成电子文档。递　交的是电子文档。　集测试反馈？测试计划的内容包括测试的目标、测　试人员、测试任务、测试方法、测试流程、度量标准、　测试数据收集方法等。测试要用的素材包括调查　问卷和采访提纲等。　以教室预约系统为例，测试任务“预约一个时　段”的测试流程是：　①以用户”ｕｓｒ”，密码“１２３４５６”登录教室预约　系统；　（５）绘制网站线框图。使用Ａｘｕｒｅ工具为所　开发的网站绘制线框图。线框图要具有交互性，也　就是网页之间是可以跳转的且与完成用户的任务　是相配的。　线框图是低保真设计图。网站的线框图传达　②预约１０月１６日下午５／６节，要求：６５人，　了以下信息：①有哪些网页，每个网页的标题是什　么（由网页的职责决定的）？②网页的主要成分是　什么（不强调外观，突出的是该成分的作用，比如呈　现什么信息，或者发起什么操作），布局是什么样　的？③网页之间是如何链接的？　线框图可以帮你平衡保真度与速度。绘图时　不用在意细枝末节，但必须表达出设计思想，不能　漏掉任何重要的部分。绘制线框图，重点是“快”。　审美上的视觉效果则应当尽可能简化。黑白灰是　经典用色，你也可以用蓝色代表超链接。如果你在　准备线框图时花了大把时间（比如，选择图标、上传　图片），请换个简单的方式（比如，使用占位符、一个　画×的图片，再加上合适的描述文字）。我们习惯　把线框图称为低保真设计图。　（６）对线框图进行启发式评估。对于每一条计　划落实到网站界面上的任务，结合线框图为该任务　生成界面流图，也就是以图片和文字结合的方式描　述任务将是如何完成的。界面流图既帮助你理解　线框图，也用于开展启发式评估（组内自评或组间　互评）。　每组列出五条以上适用于本组开发的系统的　评估准则，并开展组内自评。下一步，将由另外一　个组对该组的线框图和界面流图进行启发式评估。　请阅读资料了解掌握启发式评估及其做法。　有意识地发出以下提问或其他问题，意味着进入启　发式评估状态。　①界面结构好吗？突出重点了吗？　②容易出错吗？错了能改吗？出错原因清楚　吗？　③链接断了吗？　④反馈及时、清晰吗？　⑤用词好懂吗？　⑥用户可以改变主意吗（如取消、上一步）？　（７）制定用户测试计划，准备测试要用的素材。　测试计划要明确的是：①为什么要测试？②测试什　么？③由谁、何时、何地、如何开展测试？④如何收　自习用。　③查看预约状态为“待审批”（若需要管理方审　批）或“预约成功”（若系统自动批复）。　（８）开展模拟用户测试。在找真实用户测试之　前，请组外的２～３位同学进行模拟用户测试。测　试过程见前文描述。这么做的目的是使后续的真　实用户测试能够顺利进行。如果开发的系统界面　存在诸多漏洞和问题或者的用户测试流程说明没　写好，那么真实用户测试的效果将不会令人满意。　（９）开展三组真实用户测试。找至少三个真实　用户执行测试计划确定的测试任务。测试过程中　记录界面上引发误解或疑惑的地方、卡壳的环节和　错误。除非万不得已，不要干预用户测试。在测试　末期，一边询问用户的感受和想法，一边用笔记录　下来。　每一个组需要提交与用户测试相关的三张照　片（或更多），每一个测试人至少一张。为照片附上　标题和必要的说明。　（１０）撰写测试分析报告。整理用户测试阶段　生成的记录或材料，汇总原型设计的得失。写下两　条以上关于原型的成功之处。　用表格列出原型存在的问题。对于重大问题，　组内开展讨论，看看问题出在哪里，如何改进，用户　是怎么想和做决定的。　５实验成果验收办法　（１）学生互评。　这些年来，学生互评作业的做法日益受到重　视。实施学生互评的前提是制订明确的、可操作评　分细则。下面是摘录的两条评分细则。　①评分点１：项目的价值大吗？真实用户找对　了吗，有遗漏吗？　评分标准：　没有描述项目价值，也没有交代真实用户（０分）。　项目价值描述不清，真实用户不全或不对（１分）。