WEB交互界面易用性设计和验收的指导性原则

  随着企业intranet和国际internet的迅速发展,越来越多的工作流程,商务交易,教育、培训、会议和讲座,以及个人消费娱乐都被转移到所谓的万维网(World Wide Web,以下简称WEB)上来了。与此相对应的是交互操作的复杂性越来越高。

  随着Browser/Server模式的日渐流行,很多操作都是在浏览器环境下的网页上完成的,并不是只有失效的链接和意外的出错才会使操作者感到烦恼,即便是一次完整的成功操作过程,也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验。

  本文试图阐述WEB交互页面设计的一些指导性原则,这些原则有利于避免发生不愉快的操作体验。这些原则是用户友好性的,是在完成同一种操作要求下,使用户最感到轻松、简单、舒适的WEB交互界面设计原则。我们假定我们讨论的WEB页面都是功能正常的,符合美学观点的。需要说明我们讨论的原则可能会和设计上的美学观点以及既有的功能设计有所冲突。如果发生这种情况,基于“实用的就是美的”观点,我们会建议您酌情放弃原先的美学观点与功能设计。

  1. 输入控件的自动聚焦和可用键盘切换输入焦点

  使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB键(IE缺省实现)或方向键切换聚焦到下一个输入控件。

  输入控件指WEB页面表单(<form>)中显式的,需要用户进行修改、编辑操作的表单元素。对于这些控件,如果没有自动聚焦操作,不可避免的出现一次用户鼠标定位操作(如果用户此前处于键盘输入操作状态或鼠标定位后需要进行键盘输入操作,实际上是键盘鼠标切换操作)。如果鼠标定位后需要进行键盘输入操作,如果不能键盘切换输入焦点,那么不可避免的在切换输入焦点时需要反复的键盘鼠标切换操作,这是很繁琐的。

  如果实现了页面加载完成即自动聚焦到第一个输入控件,并且可以键盘切换输入焦点标定位操作,那么对于用户来说整个页面的输入操作可能都不需要鼠标操作,或次数较少,这是一种便利。毕竟频繁的键盘鼠标切换操作是比较累人的。

  对于有输入栏的对话框或网页,在不干预的情况下就应将当前控制焦点定位在待输入的输入栏上;如果输入栏在一般情况下不需要更改其中的内容,则应直接将焦点定在“确定”按钮上;在几个输入栏之间应支持tab,shift+tab切换操作,“确定”和“取消”应该是切换操作的终点,与具体所在位置无关。

  2.可用Enter(或Ctrl+Enter)键提交,确保和点击提交按钮的效果是相同的

  不要在提交按钮上加入onClick=”…”这样的JavaScript代码。

  用Enter键提交页面是原则1的自然延伸,而且这也是浏览器所缺省支持的。只所以单独列出来是因为实际上有些设计者设计的页面不能达到这种效果,结果导致使用Enter键提交和点击“确定”按钮提交带来的效果不一样。大部分情况下是设计者在“确定”按钮上加入了onClik=”…”这样的代码,通过点击“确定”按钮后,会执行一段JavaScript代码,比如对某些hidden类型的input元素设值。而使用Enter键提交时就不会执行这段代码。

  正确的做法是把这段代码移到表单标签<form>中,以onSubmit=”…”属性引入。

  对于<textarea>表单元素,它会消耗Enter键,因此会使得Enter键提交失效。可以引入JavaScript代码捕捉Ctrl+Enter复合键,一旦捕捉到即执行表单的submit()方法。对于需要频繁提交的场合,比如BBS上,这种代码是很有必要的。

  3. 鼠标动作提示和回应

  对用户的鼠标定位操作,当移动到可响应的位置上时,应给予视觉或听觉的提示。

  动作回应的最简单形式就是鼠标ICON变成手状。浏览器只对具有href属性的HTML标签会自动进行这种变换ICON的行为。对于没有href属性(或没有设置href属性)的标签,可以通过JavaScript设置style属性的cursor为hand。

  目标区域发生变化是更为主动的响应形式。当鼠标指针移到目标区域,此时指针图形改变或文字颜色发生改变均能较大的减轻用户搜索定位目标区域的注意力负担。在按钮上增添直观的图形,尽可能的增大按钮面积;按钮间保持适当的距离,太近增加了用户区别它们之间界限以防误操作的负担,太远增加了用户搜索定位按钮的负担。

  4.尽可能早的在客户端完成输入数据合法性验证

  输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成,否则验证工作应在最早能完成的情况下进行。

  在客户端完成数据合法性验证,可以避免一次服务器请求和回复通讯,这种通讯是需要用户等待的,如果用户等待很长时间后从服务器返回的结果提示出现的错误是在输入时即可发现的,那么这种设计就是不友好的。诸如密码长度限制,用户名允许字符限制等等,显然应该在客户端提交前就应该进行验证。

时间: 2024-07-29 10:17:31

WEB交互界面易用性设计和验收的指导性原则的相关文章

交互设计用户研究:Web交互设计优化

文章描述:Web交互设计优化的简易check list. "优化已有产品的体验",这是用户体验相关岗位职责中常见的描述.我们的产品常常是在快速的迭代过程中不断完善的,就像孩子生下来需要养育才能长大一样,优化已有功能/产品,和设计新功能/产品同样重要,不可偏废. 但是,相比实现新功能,已有功能的优化总是显得没有那么紧迫而且很零散,导致了迭代优化的计划总是被归入"重要不紧急"甚至是"不重要不紧急"的象限,变成了东一棒子西一榔锤的买卖.我们可以通过可用

web交互设计方法:页面表达常用方式

<页面表达常用方式>是整个"web交互设计方法"中的一部分: 设计师在设计页面时,应该在页面上建立许多视觉层次,引导用户的视觉焦点.把用户的注意力吸引到最重要的元素上,然后才把视线引导到其他重要程度次要的信息上.这样便于用户快捷迅速地找到自己所需,更好的完成阅读.浏览任务.这里介绍几种页面表达的常用方式. 一.页面的浏览顺序 对用户扫描页面的时候进行视线跟踪,这叫做"视觉流".好的设计能够让人们按照顺畅的次序沿着它向前流动.人们一般的习惯是从左到右.从上

交互界面,Web服务定义的核心

web|web服务|交互   架构Web Service: 交互界面,Web服务定义的核心        内容: API概述 Catalog Service Member Service Feedback Service Order Service 描述与注册: 发布Web服务 参考资料 作者简介 相关内容: 实战Web服务 基于Web服务的应用.解决方案和开发平台 什么是Web服务? 为什么需要Web服务? 柴晓路 (fennivel@uddi-china.org)Chief System A

The Story of Mr.Gray — Web 交互设计“灰色”的8类应用

在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分.我们常会发现许多"灰色"的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一.本文将从一些实际案例出发,阐述"灰色"在Web交互设计中的8类应用. 首先让Mr.Gray 来做个简单的自我介绍吧: 狭义的 Mr.Gray 狭义的Mr.Gray, 是指没有色相与纯度,只有明度,将黑色和白色混和而成的一种中间色. 依据不同分类方法可大体分为浅灰与深灰两种,亦可分为暖灰与冷灰. 相对来说,其特征

web设计和设计流程 有趣的web交互设计

文章描述:创意十足的web布局及交互设计. 富有灵感和创意的设计与一般设计的区别在于,它不那么容易被想到和实现,一旦它被实现,一个非常有趣并且迷人的网站就诞生了. 网站几乎每天都能见到,但是不是每一个网站你都会说"真希望我也能想到过!" 设计者们正在做的是一项伟大的工作,那就是提出且合并各种高水平设计的网站,这些网站都是最新颖的原创作品,同时还保持了很高的可用性.不规则的颜色.形状,及其导航就可以生成最有趣.最吸引人的网站.当然,能想到这个点子是很难的,实现起来也有一定的困难. 但是说

WEB交互设计

文章描述:WEB交互设计-源自桌面系统,根源于生活. WEB交互设计-源自桌面系统,根源于生活 从DOC时代发展到现在的桌面时代  我们的web设计其实源自操作系统内的软件设计,这是最好的参考.拿windows 7系统的 media player来说,如图的交互状态: media player非常的容易上手,使用很便捷简单. 主次功能何时显示,会帮助用户做出正确的指引. 而你会发现,这其实就是按照我们生活中的收音机,或音乐播放器来做的.使用其他产品如是.如计算器等等: 按钮有基本三种状态:默认,

web交互设计方法:页面表达原则

<页面表达原则>是整个"web交互设计方法"中的一部分:页面表达原则概述:1.更少的信息量更好.2.不提供多余的功能.3.结构化更易于理解.4.信息的表达应该清楚.明确.直接.5.操作可识别.6.操作前,结果可预知.7.操作时,操作有反馈.8.操作后,操作可撤销.9.让用户知道身处何地.10.避免内容看上去象广告.11.同一功能在不同页面上位置相同.12.措辞统一. 详细描述:1.更少的信息量更好.用户不是在阅读网站,而是在浏览网站.他们浏览与自己目标匹配的文字和图片,冗长

“灰色”在Web交互设计中的8类应用

在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分.我们常会发现许多"灰色"的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一.本文将从一些实际案例出发,阐述"灰色"在Web交互设计中的8类应用. 首先让Mr.Gray 来做个简单的自我介绍吧: 狭义的 Mr.Gray 狭义的Mr.Gray, 是指没有色相与纯度,只有明度,将黑色和白色混和而成的一种中间色. 依据不同分类方法可大体分为浅灰与深灰两种,亦可分为暖灰与冷灰. 相对来说,其特征

Web交互设计中“灰色调”的8类应用

在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分.我们常会发现许多"灰色"的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一.本文将从一些实际案例出发,阐述"灰色"在Web交互设计中的8类应用. 首先让Mr.Gray 来做个简单的自我介绍吧: 狭义的 Mr.Gray 狭义的Mr.Gray, 是指没有色相与纯度,只有明度,将黑色和白色混和而成的一种中间色. 依据不同分类方法可大体分为浅灰与深灰两种,亦可分为暖灰与冷灰. 相对来说,其特征