O'Reilly

5 Common Usability Mistakes and Solutions For Avoiding Them

By on  

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.

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:

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.

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:

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!

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:

<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.

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:

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!

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!

Track.js Error Reporting

Recent Features

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

  • Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

Discussion

  1. There are a bunch of other input types that are especially valuable for mobile. “url”, “number” and “tel” all change the mobile keyboard (on iOS you also need a pattern to go with the “number” type).

  2. Adrian

    regarding the new HTML5-flavoured input types, what will happen when an “old browser” stumbles upon such a field? will it fall back to some kind of sane default, like assuming “text”? That would be great because this is even what we most wanted…

    • You are correct; the browser will fall back to a type of “text”.

  3. Tisza Gergő

    Click event handlers fire when you press enter in a form.

  4. Aicke Schulz

    Never thought of control” & “meta” keys, because I always use middle mouse button to open in a new tab.

    In addition to “search” input I suggest to use the following, otherwise it may look pretty ugly:

    input[type="search"] { -webkit-appearance: textfield; }
    
  5. I already saw some pages using inline onclick events in a button element to check and submit a form.

    If there is no input-type-submit element, Enter won’t work in a form (from my tests).

    But thanks for the ellipsis, never saw text-overflow before. gonna try it now. :D

  6. Junior

    Shouldn’t the example be e.metaKey and e.ctrlKey? Or do I need to learn something new (not unusual on this blog!).

  7. Middle-click to open in a new window can be overridden in some browsers, including Chrome/Chromium.

    if(e.button || e.metaKey || e.ctrlKey) return;
  8. Great list! I realized that i have never used :focus before. The “onClick submit” is really a nightmare when using mostly keyboard in the browser (with Vimium xor Pentadactyl).

  9. Simon

    I basically agree on all cases except first one. There are times when ‘submit’ is not always the best option. For example dynamically creating forms in iframes (for sending files for example) might fail in certain cases when hooked to submit event on IE. Don’t ask my why though.

  10. Hey David in your second example you are using “click” instead of “submit”, just saying. :-)

    • The first and second items aren’t related.

  11. Checking e.shiftKey is also nice.

  12. Kudos for the CTRL + Click … This gets on my nerves every time!
    Sometimes it’s used to change the APP/Page stats … The developer doesn’t treat it as an actual page. Consider Facebook Albums for example, if you click on an image you get the next one … Facebook treat it the way you say because it updates the URL as well (ie. it could be a new request) … some developers don’t think alike or they are too lazy to pushState, etc
    Thanks for the *very* informative post. Definitely going to my bookmark for future usage. <3 you David!

  13. Couldn’t agree more with your click events comment!

    We do run into a site once in awhile that still has right-click disabled…I think that would still make make list for the top, because it doesn’t really block anything. Just makes things annoying.

  14. JAP

    I’m guilty! I’ll fix my bad/non-existent habits with more posts like this. Thanks for the instructive info.
    FWIW, the type on these comments is all jacked up in my combination of Chrome (25.0.1364.172 m) and Windows 7(SP1).
    JAP

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...