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

Incredible Demos

  • Redacted&nbsp;Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send...

  • Dijit&#8217;s TabContainer Layout:  Easy Tabbed&nbsp;Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you...

  • Using jQuery and MooTools&nbsp;Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page.

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!

Use Code Editor