可用性设计-样例(16页).doc

-可用性设计-样例-第 14 页摘 要随着时代的发展，网站的建设越来越接近于一门艺术而不仅仅是一项技术，而网站的界面设计又是网站建设中的重要问题。网站的界面设计应该是美感与技术的高度统一，不应单单局限于一方。同时，界面的设计需强调交互过程，即一方面是网站的信息传达，另一方面是用户（人）的接受与反馈，对网站的信息都能动地认识与把握。这就牵扯到了网站的可用性界面设计这一问题。一个好的网站应该有：非常好看的设计、友好的界面、毫无缺点的结构、智能化的后台处理、非常优秀的内容以及优良快捷的交互性。即网站的建设应具有交互性与持续性、艺术与技术相结合等特点。网站的可用性界面设计在e时代十分重要，本文详尽介绍了网站可用性设计的内涵及网站界面设计的相关元素，并以现今在高等院校流行的在线课程注册管理系统为例对可用性的设计流程进行了详细解说。关键词：可用性设计，网站建设，界面设计，在线课程注册管理系统1 绪 论二十世纪八十年代中期，在计算机界面设计领域出现了“对用户友好”的口号。随着研究的深入又有了计算机人交互(computer-human interface)，倾向于“把人放在首位”、象征以用户为中心的设计(user-center design UCD)、人机界面(human-machine interface)、用户界面设计(user interface design)、人类因素学 (human factor) 等等。美国可用性工程专家尼尔森(jakob Nielsen)博士采用了“可用性”一词，来阐述相关问题。可用性工程(Usability Engineering)是交互式IT产品/系统的一种先进开发方法，包括一整套工程过程、方法、工具和国际标准，它应用于产品生命周期的各个阶段，核心是以用户为中心的设计方法论(user-centered design-UCD)，强调以用户为中心来进行开发，能有效评估和提高产品可用性质量，弥补了常规开发方法无法保证可用性质量的不足，九十年代以来开始在美、欧、日、印等国IT工业界普遍应用。可用性工程在计算机的各种软件系统设计开发中广泛应用和研究的。其在产品设计领域的应用非常广泛。因为诸多产品都设计人机交互问题，尤其是信息终端产品，操作界面是设计过程中的重点。近年来，Web逐渐成为人们获取信息以及进行交易和交流的主要渠道。但是，我们却感到在网上查找信息或完成某项任务经常会遇到这样那样的困难。根据调查显示，目前90%左右的网站存在可用性问题，用户在网上找不到所需信息的几率约有60%。对于网站来说，可用性是指用户能否有效地找到所需的信息或完成他的任务？效率如何？以及是否让人有愉快满意的感受。如果网站可用性较差，会浪费用户的时间，大大降低网站的回头访问率，还会引起不必要的网络阻塞。这对网站的生存是一个至关重要的问题。因此，为网站开发人员提供可用性设计指导是十分必要的。可用性（Usability）是交互式IT产品/系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品竞争力的核心。在实际的网站开发中，网站可用性设计指南起到了很好的作用。有人曾做过这样的实验，从网上随机地选择几个网站，按照网站可用性设计指南对它们进行重新设计，然后对新旧两个版本的网站进行比较性可用性测试，结果发现，新版本网站的可用性明显地提高了。然而，网站可用性设计指南也存在其局限性，主要是许多指南过于原则性，缺乏实际的可操作性。近几年，中国的网络行业飞速发展，但是不可否认，国内网络的开发技术和世界前沿技术相比还有一定的差距。国内的网页设计还是和国外的成熟设计有一定差距，差距的主要点之一就牵扯到可用性设计，国外在前几年就已经对可用性工程产生了足够重视，研究交互方法，创造规则，让网站变得更人性化，而国内大部分网站还停留在海量信息的阶段，高风险的资讯超载笔笔皆是。国内急需加强对可用性的重视，很多业界人士还分不清美工和可用性设计师(即UI设计师)的区别，可见问题的严峻性。2 需求分析随着网络的发展壮大，许多工作都通过网络来完成，学生选课问题现在当然也不需要线下的纸笔来解决了，在线网络选课已经成为了一种趋势，理论上非常可行，并且很多院校通过网络完成选课工作的时间已经不短了。Java是一种简单的，面向对象的，分布式的，解释型的，健壮安全的，结构中立的，可移植的，性能优异、多线程的动态语言。该选课系统选用Java语言来编写。Java语言是现在的主流语言之一，它拥有强大的功能，可以实现其它同类语言的所有功能。具体的程序实现采用JSP+SERVLET+JAVABEAN的MVC结构来实现，数据库应用小巧的MYSQL。在线课程注册管理虽然只是个小型工程，不需要太久的开发时间，但其投资价值却并不低，它的出现能有效的解决人力选课的数据记录错误，并且大大减少相关操作人员的数量，使选课变得不必兴师动众，简单的点击就能解决一切。2.4模块分析后台管理部分包括公告管理模块、团队管理模块、其它管理模块、课程管理模块、个人信息模块和选课管理模块；前台显示部分包括公告浏览模块和用户登录模块。l 公告管理模块的主要功能包括：公告添加、公告修改和公告删除。l 团队管理模块的主要功能包括：学生信息添加、学生信息修改、学生信息删除、教师信息添加、教师信息修改、教师信息删除。l 其它管理模块的主要功能包括：院系添加、院系删除、专业添加、专业删除。l 课程管理模块的主要功能包括：课程添加、课程修改、课程删除。l 选课管理模块的主要功能包括：选课添加、选课删除、支付选课、发放材料、通过选课。l 个人信息模块的主要功能包括：查看个人信息。显示模块的主要功能包括：公告浏览、课程信息浏览、选课信息浏览、用户登录。还有更改用户密码功能。2.5相关技术2.6开发环境软、硬件环境:（2）MyEclipse7.0 程序开发环境（3）MySQL （4）PC 主频>1.7GHZ 内存>512MB （5）Tomcat服务器（6）Windows XP（运行环境）（7）Java(语言)3 可用性界面设计3.1可用性设计原则交互设计，和所有设计学科一样，遵循既定的原则。设计原则不规定具体的成果，在它们的功能范围内对特定的项目进行设计。他们指导交互设计师，并帮助他或她做出决定，根据既定的标准。这些原则如下：(1)可理解性：一个界面的设计，应该很容易让人理解。(2)学习：一个界面应使用户更轻松地学习。(3)效益性：设计必须满足用户的需要，提供所需的功能。l 安全性：设计若具有高度的安全性它将是一个更实用的设计。l 灵活性：它应该是灵活的可以用在多种环境能解决不同的需要。l 稳定性：系统应不断更新增加有用的功能，避免频繁崩溃。(4)效率性：设计应当使用户能够以最简单和最快捷的方式完成任务，而不必做过于复杂或不相干的操作。l 易懂性一切都应该尽可能简洁，但并不简单。(1)80/20规则：根据80/20原则，设计资源应分配给20 在有意义的界面，因为其他的80 效益很低。(2)逐步披露：任何时候仅显示必要内容，根据需要再添加。(3)限制：限制用户的行动范围，使程序更具简便性。(4)物理因素：注意物理因素的影响，例如分辨率。l 难忘性(1)位置：如果我们把某个特定对象总放在一个统一的位置，这会使人更容易记住。(2)逻辑分组：如果我们把事情整理的符合逻辑，他们便更容易记住。(3)公约：如果我们应用常规的物体和符号，它们将容易被记住。l 可预见性(1)一致性：一致性原则可以适用于一个界面中的各个方面，包括颜色编码，图标样式，按钮的位置等。一致性原则的巩固，增加了我们记忆和预测结果及过程的能力。(2)公约：规定某些属性。它使我们能够使用我们的直觉，根据以往的经验和逻辑判断一些东西。(3)熟悉性：如果我们用熟悉的形象和隐喻，熟悉的背景和布局，用熟悉的做事方法，就可以增加可预测性，提高效率，使我们的界面设计更易被理解。(4)位置：了解屏幕空间的常规使用方法，可以优化你的设计。l 可见性如果面面俱到，其结果往往是混乱的。不要显示一切，这样重要的东西会被忽视.(1)超载：信息量的给予要适度。(2)反馈：对用户的操作应给予回应。(3)取向：让用户知道自己的位置，不要让他有迷失感。(5)分组：使用视觉线索，使界面更具逻辑性。(6)刺激强度：用不同的颜色标注不同的内容。(7)比例：比例可以用来代表逻辑层次。以视觉结构来表达网页上的信息。 (8)屏幕上的复杂性：让屏幕简洁但不简单，内容丰富但不紊乱。3.2可用性界面设计3.2.1用户特征描述系统用户：学校学生、教师，及管理员该系统主要应用于高等院校，教职工及学生的受教育程度比较高，均对电脑具有一定操作能力。学生及教师均有老用户新用户之分，对于新用户提供一些简单帮助，使其能更快的熟练操作。3.2.2任务分析(1)、学生的行为包括：l 查看公告l 查看已选课程l 选课l 为课程付费l 查看个人信息l 更改密码(2)、教师的行为包括：l 查看公告l 查看已发布课程l 修改删除已发布课程l 发布课程l 对通过课程给予学分l 更改密码(3)、管理员的行为包括：l 查看公告l 添加修改删除公告l 添加修改删除教师信息l 添加修改删除学生信息l 添加修改删除院系信息l 添加修改删除专业信息l 查看注册状况l 为课程发放教材只有学生支付了课程费用之后，管理员才能为该课程发放材料，发放了材料教师才能在最后该课程节课后给予学生学分。3.2.3系统功能及参数要访问该系统，需能连接互联网或者校内局域网的计算机。支持与Internet Explorer内核类似的浏览器。学生与教师间的联系通过电子邮件来完成。系统的变动通过管理员发布公告在主页公示。3.2.4可用性要求和标准页面的显示速度在2秒之内，操作的反应速度在10秒之内，界面简洁，重点突出。3.2.5对象模型化和分析图3.1 对象模型化3.2.6视图的抽象设计课程视图图3.2 课程视图课程列表视图3.3 课程列表视图3.2.7视图的粗略设计学生选课界面见图3.4：图3.4 选课界面相关状态转换图见图3.5：图3.5 选课状态转换图教师公布课程界面见图3.6：图3.6 添加课程相关状态转换图见图3.7：图3.7 添加课程状态转换图添加学生界面见图3.8：图3.8 添加学生界面相关状态转换图见图3.9：图3.9 添加学生状态转换图添加教师界面见图3.10：图3.10 添加教师相关状态转换图见图3.11：3.2.8视图的关联性设计学生选课状态转换图2：4 可用性设计实现4.4系统工作流程在首页可以浏览最新公告。其它功能需要用户输入用户名和密码进行登录。拥有管理员权限的用户，可以对公告、教师、学生、院系、专业进行管理。包括发布公告，编辑和删除已有公告；创建新教师信息，编辑和删除已有教师信息；添加新学生信息，编辑和删除已有学生信息；添加新院系信息，删除已有院系信息；添加新专业信息，删除已有专业信息；为付费课程发放材料；为学生充值等。拥有教师权限的用户，可以对课程进行管理。包括查看公告；创建新课程信息，编辑和删除已有课程信息；为已修完课程学生发放学分；修改密码等。拥有学生权限的用户，可以对已选课程进行管理。包括查看公告；选课，删除已选课程；为已选课程付费；修改密码等。4.5登录登录功能是很多系统中最基本的功能。用户打开浏览器到本系统首页，然后选择权限并输入用户名和密码，点击登录，通过系统验证后，即可成功登入到主页面。如图5.1所示。图5.1 登录用javascript进行了输入内容判断，减少无意义的数据库检索。具体功能实现代码如下： function CheckForm() if(document.loginFboboxthree.value="never") alert("请选择类别");.focus(); return false; if(document.loginForm.loginName.value="") alert("请输入用户名"); document.loginForm.loginName.focus(); return false; if(document.loginForm.loginPassword.value="") alert("请输入密码"); document.loginForm.loginPassword.focus(); return false; document.loginForm.submit();4.6管理员页面以管理员身份成功登录后，系统进入管理员主页面。如图5.3所示。图5.3 管理员主页面管理员主页面左边为各种可用功能，右边为显示部分，应用了框架进行页面划分，通过非法操作不能进入页面，会自动返回首页。代码如下：<html><head><title>管理员面板</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><%String loginName = (String) session.getAttribute("loginName");if (loginName = null | loginName.equals("") response.sendRedirect("./index.jsp");<frameset rows="33,*,20" border=0 frameborder="YES" name="top_frame"><frame src="TopFrame.jsp" noresize frameborder="NO" name="ads" scrolling="NO" marginwidth="0" marginheight="0"><frameset rows="675" cols="175,*" border=0 name="down_frame"><frame src="LeftFrame.jsp" noresize name="list" marginwidth="0" marginheight="0" scrolling="Yes"><frame src="RightFrame.jsp" name="main" marginwidth="0" marginheight="0"></frameset><frame src="FootFrame.jsp" noresize frameborder="NO" name="adf" scrolling="NO" marginwidth="0" marginheight="0"></frameset><noframes></noframes><body><br></body></html>4.6.1公告管理下图为点击查看公告后效果，见图：图 查看公告通过点击编辑按钮可以对已有公告进行编辑；通过点击删除按钮可以把该公告删除。下图为点击添加公告后效果，见图：图 添加公告编辑公告画面和添加画面类似，不过在文本框内读出原来的数据。程序同样应用脚本语言对输入内容进行了限制：function CheckForm()if(document.add_news_Form.title.value="")alert("请输入标题！");return false;if(document.add_news_Form.content.value = "")alert("请输入内容！");return false;var a = document.add_news_Form.content;if(a.value.length > 200)alert("输入的内容不能超过200个字符!"); return false;document.add_news_Form.submit();4.6.2材料管理下图为点击查看注册情况后效果，见图5.3.3：图 查看注册情况该页面可以查看所有选课信息，并由管理员对以支付费用的学生发放课程材料。4.6.3团队管理当教师被创建时，默认密码为123456；当学生被创建时，默认密码为999999，学生院系通过所填专业自动划分。下图为点击查看老师后效果，见图5.3.4：图5.3.4 查看教师信息显示教师的具体信息，包括姓名，性别，图片，职称，附属院系，及电子邮件等。能进行编辑教师信息和删除教师信息操作。在页面上半部分还有搜索模块，通过选择条件来进行信息筛选和排序。下图为点击编辑链接后效果，见图5.3.5：图5.3.5 修改老师信息添加教师页面和修改教师页面类似，只不过不读取信息，这两个页面都进行了输入内容限制。并对电子邮件的格式进行了判断。具体代码如下：function CheckForm()var pattern = /(u4E00-u9FA5|uFE30-uFFA0)*$/gi;if(document.add_teacher_Form.tenum.value="")alert("请输入编号！");document.add_teacher_Form.tenum.focus();return false;for (nIndex=0; nIndex<document.add_teacher_Form.tenum.value.length; nIndex+) cCheck = document.add_teacher_Form.tenum.value.charAt(nIndex); if (!(IsDigit(cCheck) alert("编号只能使用数字!"); document.add_teacher_Form.tenum.focus(); return false; if(document.add_teacher_Form.tename.value="")alert("请输入姓名！");document.add_teacher_Form.tename.focus();return false;if(document.add_teacher_Form.job.value="never")alert("请选择职称！");document.add_teacher_Form.job.focus();return false;if(document.add_teacher_Fboboxte.value="never")alert("请选择院系！");document.add_teacher_Fboboxte.focus();return false;if(document.add_teacher_Form.email.value="")alert("请输入EMAIL！");document.add_teacher_Form.email.focus();return false;var myReg = /a-zA-Z0-9_-+(a-zA-Z0-9+.)+(com|cn)$/; if(!myReg.test(document.add_teacher_Form.email.value) alert("输入的EMAIL不合法！"); document.add_teacher_Form.email.focus(); return false;document.add_teacher_Form.submit();下图为点击查看学生后效果，见图5.3.6：图5.3.6 查看学生信息该页面显示了学生的具体信息，包括姓名，入选年限，所学专业，所属院系，总学分和余额。能进行编辑学生信息、删除学生信息操作还有充值操作。在页面上半部分还有搜索模块，通过选择条件来进行信息筛选和排序。下图为点击充值链接后效果，见图5.3.7：图5.3.7 学生充值页面点击按钮后 就会为该学生余额增加100元。4.6.4其它管理下图为点击院系管理后效果，见图：图 院系管理页面查看院系信息，能进行删除选定院系操作。下图为点击专业管理后效果，见图：图 专业管理页面查看专业信息，及该专业所属院系，并能进行删除选定专业操作。4.7教师页面通过教师身份登录成功后，系统进入教师管理主页面。如图5.4所示。图5.4 教师管理主页面教师具有如下功能：更改个人密码，查看公告，查看注册情况，给予学分，管理课程信息等操作。4.7.1注册管理下图为点击查看注册情况后效果，见图：图 查询注册情况该页面可以查询本教师已发课程的状况，并决定在期末考核后是否给予该学生学分。4.7.2课程管理下图为点击查看课程后效果，见图：图.2 查看课程该页面显示了课程的具体信息，包括:课程编号，课程名称，课程要求最低年级，课程要求院系，课程类别，授课时间，学分，课程介绍，负责院系，注册情况(可选、不可选)，费用，人数信息等。下图为点击编辑课程后效果，见图：图5.4.3 编辑课程下图为点击更改密码后效果，见图：图 更改密码页面输入原密码，并输入两次新密码，两次输入新密码必须一致，否则弹出错误。4.8学生页面通过学生身份登录成功后，系统进入学生管理主页面。如图5.5所示。图5.5 学生主页面4.8.1选课管理下图为点击选课后效果，见图：图5. 选课该页面显示出这次选课活动的所有课程，点击查看详情链接查看具体课程信息。下图为点击查看详情链接后效果，见图：图 课程详细信息该页面显示课程详细信息，可以通过点击选定按钮来选课。不过选课时，受到最低年级，要求院系，课程状态或已选过该课程等因素影响，可能导致无法选择该课程，当无法选择时，会弹出提示信息。下图为点击查看教师详情链接后效果，见图5.5.3：图 教师详细信息学生可以参看该门课程教师信息，通过电子邮件联系教师。下图为点击已选课程后效果，见图：图 已选课程信息在该页面可以参看自己已选课程的相关信息，查看详情链接可以查看该课程具体信息，付费链接则用来为该课程支付费用，取消选课链接可以取消该课程。5 程序测试现在我们来模仿学生选课的全步骤，看看改程序是否符合可用性设计的原则。首先我们输入网址，进入首页。选择学生类别，输入帐号及密码。见图6.1：点击进入首页，然后我们点击选课。出现了三门课程。见图6.2：假设课程很多，所以我用一些条件来筛选结果。见图6.3：点击查找。见图6.4：查看该课程的详细信息。见图6.5：查看该教师详情。弹出了一个新窗口。见图6.6：决定了就选这门课，点击选课按钮。弹出错误窗口。见图6.7：我们感到很意外，发现院系要求建筑系。我们点击右侧管理面板的查看个人信息。见图6.8：发现小皮是属于电信的，确实选不了这个课程。关于选课的判断包括：入学年份、院系、上课时间和课程状态。我们把测试做完，点击右侧管理面板的已选课程。见图6.9：发现之前有一个已选课程，课程需要付费才能收到材料，所以我们点选付费。查看详情就是看该课程详情。见图6.10： 点击确定。见图6.11：这里请注意，因为小皮同学的余额足以支付该课程费用，所以成功，如果不够，会弹出费用不够提示。这时该课程支付状态会改变。这样一次选课过程就完成了。下面从可用性设计方面来谈一谈该程序的问题(按照文章前半部分的原则要求来分析本程序)：(1)设计界面简单，不复杂，功能一目了然。(2)因为界面简单，所以程序方便学习，同时为了新用户，在页面的上方提供了帮助链接，点击后会有一个操作详解。(3)本程序按要求完成了全部功能。能阻止用户的非法登录，主登陆页面以post方式传值，并且在各管理首页对是否有传值进行判断。不过程序缺乏测试，可能存在未知bug。程序只完成了既定内容，没有作太多额外扩充，所以对运行环境有要求。(4)在各个输入部分进行了内容限定，减少用户的错误操作。程序按800*600的分辨率制作。采用框架划分各区域，使个区域内容一致。界面色彩统一，色彩种类适中，页面内容的摆放类似于其它相同网站。不过页面还是美化不够。参考文献1董建明等，人机交互:以用户为中心的设计和评估(第2版)，清华大学出版社，2007年5月，面向使用的软件设计，机械工业出版社，2004年5月3刘晓华等，JSP（第三版）应用开发详解，电子工业出版社，2007年1月4向怡宁等，就这么简单-Web开发中的可用性和用户体验，清华大学出版社，2008年6月5计磊等，J2EE-Eclipse Struts Hibernate Spring整合应用案例，人民邮电出版社，2006年8月6张桂元等，Struts开发入门与项目实践，人民邮电出版社，2005年8月7刘斌等，精通Java Web 整合开发，电子工业出版社，2007年11月