文档章节

5个常见可用性错误和解决方案

notAcoder
 notAcoder
发布于 2014/04/21 17:00
字数 1055
阅读 644
收藏 0

5个常见可用性错误和解决方案

我是一个性情乖戾的WEB用户, 但是我认为这是促使我成为一个优秀的WEB开发人员的原因的一部分。网站使用的困难让我非常恼怒,我想这些应该是最基本的东西。下面列出了五个常见的可用性错误和解决方案来避免它们。帮助你自己和你的用户,确保你没有打破这些规则。

使用submit代替click事件;使用<Form>标签!

我曾经多次尝试使用enter(或移动箭头/回车键)提交一个表单,但是并没有任何事情发生。然后我单击或点击提交按钮,表单终于做一些事情,这是我最讨厌的事了。Tab键切换到提交按钮,关闭手机键盘,滚动到提交按钮的位置,这些都是不必要存在的额外步骤。只需要使用submit,我们将再次成为朋友:

document.getElementById("myForm").addEventListener("submit", function(e) {
	e.preventDefault();
	
	// ... Do processing here.  Yay for "enter" key submission!

	return false;
});

如果你在任何地方犯下这种错误,请立即修复。

点击事件:当[CONTROL] 或者 [META] 也被按下的时候不要阻止。

我喜欢在新标签页浏览网页。正好最近在找房子,所以浏览了一些网站。进入网站的列表页,准备通过Command+click打开我想浏览的房子照片时,本想在新标签页浏览该页,结果重定向在同一标签页中打开了这个页,成为了click事件监听和window.location改变的受害者。在你使用preventDefault阻止任何链接之前,一定要检查是否有metacontrol 属性:

document.getElementById("myLink").addEventListener("click", function(e) {
	// e.preventDefault();  (bad)

	if(e.meta || e.ctrlKey) return; // Don't block user if they want to open a new tab
	e.preventDefault();
});

我目前在做博客检查,以便用户可以打开新的标签没有问题。不要让你的用户在你的网站上玩"click-back-click-back"游戏!

在使用text-overflow: ellipsis的时候为元素添加title属性

(有点)新的css text-overflow: ellipsis属性值是很有用的。开发者们经常使用这个效果。我很赞同使用text-overflow: ellipsis,当我把鼠标悬停在这个元素上的时候,你最好添加一个title属性。这样我就可以很快的看到整个文本了。

<div class="ellipsizeMe" title="I am some really, really long text that's going to be ellipsized">
I am some really, really long text that's going to be ellipsized
</div>

如果你不想写两次这样的内容,你可以通过js动态地设置title属性。无论你做什么,请留住你的用户。

不要忘记:focus:active

在给一个元素设置样式时,很多人忘记了这些状态(假如用户使用鼠标)。也设置:focus:active状态:

a:hover, a:active, a:focus { /* change _all_ the pseudos! */
	color: #900;
}

帮自己一个忙:下次创建一个站点,tab切换你的页面。如果你点击了tab键,但是不知道哪个元素获得了焦点。检查你的样式表,检查是否忘记添加这些状态中的一个。

使用输入类型search / email

当我尝试填写一个讨厌的移动设备上的表单的时候,我不得不需要切换屏幕键盘来得到一个@符号,这令我非常的沮丧。使用正确的输入类型:

<input type="search" value="" />
<input type="email" value="" />

一个快速更新,为你的移动端用户提高可用性。

这里有数以百计的常见实用性错误可供开发人员使用,所以期望在未来有更多的这样的职位。有前途的是这些可用性问题可以很简单的得到更正。正如你看到的上面的问题一样。如果你也有这样的问题和解决方案并且你也想让别人了解到这个问题,请让我知道。我会编辑另外一篇文章分享它。

原文链接http://davidwalsh.name/common-usability-mistakes

© 著作权归作者所有

下一篇: 智慧
notAcoder
粉丝 5
博文 30
码字总数 12671
作品 0
巴南
架构师
私信 提问
加载中

评论(1)

z
zhishaofei3
后几条不知所云
MySQL -- 主从复制的可靠性与可用性

主库A执行完成一个事务, 写入binlog ,记为 T1 然后传给从库B,从库B 接收该binlog ,记为 T2 从库B执行完成这个事务,记为 T3 同步延时: T3-T1 同一个事务,在 从库执行完成的时间 和 主库...

Java干货分享
02/25
39
0
Veeam在广州为表现卓越的合作伙伴颁奖

Availability for the Always-On Enterprise(企业级业务永续的可用性)解决方案的创新公司Veeam Software(卫盟软件),在今天举办的VeeamON Tour广州活动上公布了Veeam ProPartner合作伙伴...

玄学酱
2018/05/17
0
0
VeeamON Tour活动在广州落幕,为表现卓越的合作伙伴颁奖

表现突出、致力于为Veeam可用性解决方案提供最高水平支持的广州合作伙伴受到了Veeam的认可。 中国北京,2016 年9月12 日 — 提供 Availability for the Always-On Enterprise™(企业级业务永...

玄学酱
2018/05/15
0
0
分布式ID生成方法

一、需求缘起 几乎所有的业务系统,都有生成一个记录标识的需求,例如: (1)消息标识:message-id (2)订单标识:order-id (3)帖子标识:tiezi-id 这个记录标识往往就是数据库中的唯一主...

snowing1990
2016/03/03
105
0
分布式ID生成方法

一、需求缘起 几乎所有的业务系统,都有生成一个记录标识的需求,例如: (1)消息标识:message-id (2)订单标识:order-id (3)帖子标识:tiezi-id 这个记录标识往往就是数据库中的唯一主...

Candy_Desire
2016/02/23
2.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部