HoverIntent in WordPress

Whenever you’re working on a new WordPress theme that includes hover (mouseover) effects, especially dropdown or flyout menus, you might want to include hoverIntent. HoverIntent is a term that describes a concept through which you delay a hover action until a certain amount of time has passed, in order to make sure that the user really intended to trigger that action.

We’ve all been on websites with dropdown menus that tend to get in the way of the content, and pop open as soon as your mouse touches even a small portion of them, and we’ve most likely all been annoyed by it. The idea behind hoverIntent is to measure the speed of the mouse movement, attempting to determine whether the user actually intended to stop on the item or not. If the mouse just moves over an item with a hover effect, but doesn’t stop on it, the hover effect should not be triggered; if, however, the user’s mouse does slow down enough or stop on the item, the hover effect should be triggered.

Guidelines for Accessible Forms

In an age where user feedback and interaction has become so popular, accessible forms have become that much more important. Many sites have already embraced making their forms accessible, and done a pretty good job of it, but inevitably some will still lack that little extra something – as small as an inappropriately named label through to no accessible features at all.

1. Using label tags

Labels should always be used and include the for attribute (e.g. <label for="name">). The value used should match the id of the input field that the label is being used for:

<label for="name">Name</label> <input type="text" id="name">

Labels for inputs, select dropdowns and textareas should precede the input, though labels for radio buttons and checkboxes should follow the input, as follows:

<input type="checkbox" id="terms"> <label for="terms">Accept our terms & conditions</label>

Are Your Websites Color-Accessible?

Contrast-A Screen ShotAs many of you already know, the Web Content Accessibility Guidelines (WCAG) recommend a specific amount of contrast between backgrounds and text on your websites. Unfortunately, very few people probably actually test their websites to ensure that they meet those guidelines. As a color-blind person, I find a lot of websites that are extremely difficult to read because of poor contrast between backgrounds and text.

I’m honestly not sure why many of us (including myself, on many occasions) don’t check the color contrast on our websites. While it’s difficult to measure and quantify the contrast through conventional means, there are quite a few really nice tools that make it a snap.

Form Input Placeholder Text

One of the new features coming in HTML5 is placeholder text for form inputs. The concept of placeholder text has been around for quite a while, and is fantastic for usability. Basically, placeholder text is text that appears inside of a form input when the page loads, but disappears when the user places the cursor in that form input.

Because HTML5 is still only partially supported, it’s still necessary to use javascript (you could conceivably use CSS to achieve most of the functions of placeholder, but most of the browsers that don’t support the HTML5 placeholder attribute also don’t support the necessary CSS to achieve this anyway). Within this article, I’m going to show you a few different options to add support for placeholder in all browsers.

10 Unexpected Online User Behaviors to Look Out For

When designing a website, there are key user behaviours that should be taken into account. But in order to take them into account, it helps to know them. Below are 10 of the more interesting and less well-known user behaviours that regularly occur in user testing:

People have banner blindness

People don’t notice banners. It’s been found in eye tracking studies their gaze literally avoids settling on any area that looks like an advert instead it seems people actively try to avoid looking at them. This effect is called banner blindness.

Banner blindness affects most people, and has a startling side effect. Useful areas of the site that are overly graphically designed (and end up looking like an advert) are ignored by users as though they were adverts.

edUi 2009 – My Recap and Reactions

On Monday and Tuesday of this week, I attended a great new conference known as edUi (a combination of edu – referring to college and university Web sites – and UI – the acronym for “user interface”). The conference featured sessions about HTML5 and CSS3, usability testing, writing Web content, design, social networking, mobile Web development and much more.

Schedule

The layout of the conference was unlike anything I’ve attended in the past. The first day, we were all assigned (based on first and second choices we indicated upon registration) an all-day session. We checked into the conference in whatever session we were scheduled to attend, and then settled in for a long day in one room. The second day, we all attended a morning keynote together, then got to choose one of the sessions we’d missed the day before. The “reprise” as the organizers called it, was a 75-minute summary of the six-hour session that the presenters had made the day before. We then got to choose a 45-minute session, lunch, an hour long keynote (once again, all together) and one more 45-minute session.

Pages: