正在连接可用性组 错误_5种常见的可用性错误以及避免这些错误的解决方案

正在连接可用性组 错误

I'm sort of a grumpy web user, but I think that's part of what drives me to be a good Web Developer.  I get so annoyed at things that make using a website difficult, things that should be basic.  Here's a list of five common usability mistakes and solutions for avoiding them.  Do yourself and your users a favor and make sure you aren't breaking any of these rules.

我有点脾气暴躁，但我认为这是促使我成为一名优秀的Web开发人员的部分原因。 我对那些使网站使用困难的事情感到恼火，这些事情应该是基本的。 以下列出了五个常见的可用性错误以及避免这些错误的解决方案。 请您和您的用户帮个忙，并确保您没有违反任何这些规则。

使用submit而不是click事件； 使用<Form>标签！ (Use submit Instead of click Events; Use <Form> Tags!)

I can't tell you the number of times I've tried to submit a (perceived) form with the ENTER key (or mobile arrow/enter key) and watched absolutely nothing happen.  I then click or tap the submit button and the form finally does something.  This is my single biggest usability peeve and a sure sign of amateur hour.  Tabbing to the submit button and closing the mobile keyboard and scrolling to the submit button are incredibly annoying extra steps that don't need to exist.  Simply use submit like you should and we'll be friends again:

我无法告诉您我尝试使用ENTER键(或移动箭头/输入键)提交(感知)表单的次数，但看着没有任何React。 然后，我单击或点击“提交”按钮，表单最终完成了一些操作。 这是我最大的可用性烦恼，也是业余时间的肯定信号。 切换到“提交”按钮，关闭移动键盘并滚动到“提交”按钮是令人讨厌的不必要的多余步骤。 只需像您应该使用的那样使用submit ，我们将再次成为朋友：

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

	return false;
});

If you're committing this atrocity anywhere, please fix it immediately.  Sincerely, every kitten that's died due to your sins.

如果您在任何地方犯下这种暴行，请立即解决。 真诚地，每只因您的罪过而死的小猫。

单击事件：不要同时按下[CONTROL]或[META] (Click Events:  Don't Prevent When [CONTROL] or [META] is also pressed)

I'm a serial new-tab-opener and while I've been recently looking for a new house, I've been looking at listing websites.  I'll get to a list page and command-click a few houses I'd like to view photos of, only to get redirected to a page in the same tab;  victim of a click listener and a window.location change.  Horrible.  Before you preventDefault on any link, be sure to check for meta and control properties:

我是一个连续的新标签发布者，虽然我最近一直在寻找新房子，但我一直在寻找上市网站。 我将进入列表页面，然后用命令单击一些要查看其照片的房屋，然后将其重定向到同一标签中的页面； 单击侦听器和window.location更改的受害者。 可怕。 在任何链接上阻止default之前，请确保检查meta和控件属性：

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();
});

I currently make this check on this blog so that users can open new tabs without issue.  Don't make your users play the click-back-click-back game on your site!

我目前在此Blog上进行了检查，以便用户可以打开新选项卡而不会出现问题。 不要让您的用户在您的网站上玩点击-点击-点击-返回游戏！

将标题属性添加到具有文本溢出的元素：省略号 (Add Title Attributes To Elements with text-overflow: ellipsis)

The (somewhat) new CSS text-overflow: ellipsis property and value are awesome.  Developers used to go through hell trying to duplicate this effect.  I'm all for using text-overflow: ellipsis, but if I hover over an element that utilizes this, you better throw a title attribute on it so I can quickly see the entire text:

(有点)新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>

If you don't want to output the content twice, you can use JS to set the title dynamically.  Whatever you do...please hook your users up.

如果您不想两次输出内容，则可以使用JS动态设置标题。 无论您做什么...都请吸引您的用户。

不要忘记:focus和:active ！ (Don't forget :focus and :active!)

Too many people forget these states when styling elements, assuming the user has a mouse -- bad form.  Use the :focus and :active states too:

假设用户的鼠标形状不好，太多的人会在设置元素样式时忘记这些状态。 也使用:focus和:active状态：

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

Do yourself a favor:  next time you create a site, tab all the way through the page;  if you hit tab and have no idea what got focus, check out your stylesheet and see if you forgot to add one of these states!

帮自己一个忙：下次创建网站时，请在整个页面中逐个标签； 如果您按了Tab键，却不知道焦点是什么，请查看样式表，看看是否忘记添加以下状态之一！

使用输入类型搜索/电子邮件 (Use Input type search / email)

When I'm trying to complete the hell that is a form on a mobile device, I get incredibly frustrated when I have to swap between keyboard screens to get to a "@".  Be a grownup and use the correct input type:

当我试图完成移动设备上的表单这一幕时，当我不得不在键盘屏幕之间切换以获取“ @”时，我感到非常沮丧。 长大成人并使用正确的输入类型：

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

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

One quick update, huge usability boost for your mobile users.

快速更新，为您的移动用户带来巨大的可用性。

There are hundreds of common usability mistakes a developer can make, so expect more of these posts in the future.  The promising thing is that most usability issues are very simple to correct, as you probably noticed above.  Let me know if you have usability faux pas and solutions you'd like to make people aware of, and I'll compile another post sharing them!

开发人员可能会犯数百种常见的可用性错误，因此将来会期望更多此类错误。 很有希望的是，正如您在上面可能注意到的那样，大多数可用性问题都非常容易纠正。 让我知道您是否希望使人们知道可用性的实用性和解决方案，我将在另一篇文章中与他人分享！

翻译自: https://davidwalsh.name/common-usability-mistakes

正在连接可用性组 错误