设计理论入门:Web交互易用性指导原则

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

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

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

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

3.鼠标动作提示和回应

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

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

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

5.根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面

根据应用场景,决定是否显示接收表单页面(表单页面和提交后返回页面间的中间过渡页面),以及使用何种方式显示接收表单页面。

6.防止表单重复提交处理

对提交按钮点击后做变灰处理避免在网络响应较慢情况下用户重复提交同一个表单。使用页面过期失效避免用户后退浏览重复提交表单。

7.页面链接是打开新窗口、使用原窗口还是弹出窗口的原则

一般而言,首页上链接可以使用target=”_blank”属性打开新窗口,而其他页面上的链接都应使用原窗口或弹出窗口。如果链接页面内容相对原页面来说不重要,是附属性质的,可以使用弹出窗口方式。

8.尽可能少的排列可选项,尽可能少的安排操作步骤

根据用户操作习惯安排尽可能少的操作菜单选项,同时要保证尽可能少的操作步骤。

9.操作逻辑无漏洞,保证数据是操作安全的

多个页面间的操作和同个页面上的多个操作间的逻辑关系在设计上是安全和严谨的。保证不会出现不被允许的用户操作组合,至少不会因为用户的不适当的操作导致出错。

时间: 2024-10-26 14:55:38

设计理论入门:Web交互易用性指导原则的相关文章

Web交互易用性指导原则

1. 输入控件的自动聚焦和可用键盘切换输入焦点 使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件.可用TAB键(IE缺省实现)或方向键切换聚焦到下一个输入控件. 2. 可用Enter(或Ctrl+Enter)键提交,确保和点击提交按钮的效果是相同的 不要在提交按钮上加入onClick="-"这样的JavaScript代码. 3.鼠标动作提示和回应 对用户的鼠标定位操作,当移动到可响应的位置上时,应给予视觉或听觉的提示. 4.尽可能早的在客户端完成输入

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

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

交互设计中的5项视觉指导原则

  视觉是人的第一感观,它在影响用户行为方面起着决定性作用,视觉信息对产品的交互产生了深远影响. 来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单.图像等)才是用户实际上操作的东西.虽然有些可用性专家会提及Craigslist甚至Amazon,作为丑陋但可用(而且受欢迎)的网站案例.但毫无疑问,美感总会有所帮助. 情感是用户体验的关键:视觉设计优

交互设计理论:良好的交互设计的三要素

交互设计,表现出来的呈现方式可谓是多种多样,不过你只要掌握好了以下三点的使用技巧,同样可能轻松打造出良好的交互设计效果. 1.响应 对即将产生交互内容的区域提供给操作者一种响应机制.参考实例:http://glyde.com 不同的内容有很多响应的处理方法,比如:链接加个下划线,图片链接变换下外边框颜色,鼠标划过某区域,变化下背景色,同时出现一些隐性的操作按钮,如删除操作等.注意:忌讳因为某区块产生响应,而让其它区块边界产生生硬的错位. 2.过渡过程或转场效果 对即将产生的交互变化,提供一个过渡

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

随着企业intranet和国际internet的迅速发展,越来越多的工作流程,商务交易,教育.培训.会议和讲座,以及个人消费娱乐都被转移到所谓的万维网(World Wide Web,以下简称WEB)上来了.与此相对应的是交互操作的复杂性越来越高. 随着Browser/Server模式的日渐流行,很多操作都是在浏览器环境下的网页上完成的,并不是只有失效的链接和意外的出错才会使操作者感到烦恼,即便是一次完整的成功操作过程,也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验. 本文

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

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

访客至上的Web、移动可用性设计--指导原则

关于可用性设计,之前写过一个"纸上谈兵"版本的,那篇帖子主要是根据A/B test的方式来进行的.   但是最近找了本Steve krug写的Don't make me think,我觉得更系统的讲解了什么是可用性设计. 实际上开始可用性设计之前,我们要搞清楚什么是可用性设计.对于可用性设计我们可以找到很多的定义,经常可以分为下面几个方面: 有用:产品能够帮助用户去完成一些必须的工作 可学习:人们能够明白如何使用它 可记忆:再次使用的时候,不需要重新学习. 有效:真的帮助完成了任务 高

评论页面设计的一些指导原则

我们经常需要叫非职业设计师来评判界面设计的好坏.也许你是老板,要评估自己的新网站设计情况,或者你是项目经理,要查看你的设计师制作的网站模型.你该在网站界面设计中发现什么呢?谁都会无关痛痒地说"这个看起来不错"或者"这个好像不怎么好用",但是怎么才能给出有意义的反馈呢? 对设计的全面深入理解并非一篇文章所能概括.本文提供一些对你有所帮助的指导原则. 开始之前,为你提供一个范例.这是我最近做的一个界面评论文章,针对的是尚未发布的Firefox Add-On Builde

交互设计经验谈:移动应用交互设计原则

文章描述:设计在很多时候都是靠灵感的闪现,移动应用的设计则更加的灵活多变,如何能更好地设计出一个应用,没有具体的方法和成规.但是,为了能更好地避免设计师们走弯路,设计原则的学习是有必要的,它给了设计师们一定的参考和指导. 摘要:交互设计专业也有了蓬勃发展,Ben Shneiderman 提出的交互设计"黄金八法"和Nielsen 的"启发式评估10条原则"为交互设计的评估提供了标准.我们在考虑其他原则的基础上,整理了八条移动应用设计的针对性原则. 本文节选自<