Treehouse

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!

ydkjs-6.png

Recent Features

  • Responsive Images: The Ultimate&nbsp;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...

  • Convert XML to JSON with&nbsp;JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • Create a Context Menu with Dojo and&nbsp;Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

  • Animated Progress Bars Using MooTools:&nbsp;dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage. The Moo-Generated XHTML This DIV structure is extremely simple and can be controlled...

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!