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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

  • 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

  • Preventing Side Effects in JavaScript

    JavaScript is very dynamic these days but I still see a lot of legacy code, whether it be for optimal backward compatibility or simply that the code hasn't been maintained.  One of the practices that makes me cringe is coding that creates unwanted side effects.  What's a side...

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...