Web site usability is finally a shared goal among designers, developers, project managers and clients, and not just niche industry of HCI specialists or human factors engineers.
However, some designers and developers are creating new usability issues as they strive to make their sites as usable as possible. In other words, while trying to make their site user-friendly, designers have ultimately undermined the usefulness of their web site or application.
These 5 mistakes all have the best of intentions, though when experienced first-hand they can be maddening.
1. gratuitous keyboard shortcuts
Smashing Magazine is correct when the blog includes keyboard shortcuts and hotkeys as one of 12 Useful Techniques for Good User Interface Design. It doesn’t take a human factors expert to understand any time a user removes her hand from the keyboard to reach for the mouse and point to a target that she loses time and efficiency.
But keyboard shortcuts, while efficient, should only be considered for repeated actions by expert users, and not as a novel way to click a link to read a blog post or to add a product to a shopping cart.
While some uses are generally well received, particularly on Boston.com to move sequentially from one photo to another, gratuitious keyboard shortcuts can be confusing at best, and destructive at worst.
In addition, implementing haphazard shortcuts may also override system-based keyboard shortcuts that users with unique needs rely on to browse accessible web sites.
In most cases, consider using keyboard shortcuts only when developing an application for a specific audience or task, rather than a site designed for the general public. It’s critical to weigh the value of offering a complex interaction that may appeal to only a few if it risks confusing many.
2. aggravating displays of ancillary information
Supplemental information can provide a web user with integral knowledge he needs to act.
It’s good practice to provide a definition of a term that may not be clear to everyone, or to offer supporting product information such clothing size and fitting guides. But providing such information on its own page, or worse, on a glossary-like page using anchor links, creates a back and forth pogo stick-like behavior that can disorient, disrupt or simply frustrate users.
Instead, consider implementing a pop-up box or overlay. When using small pop-up boxes, it’s important to also build a one to two second delay from the time a user mouses over a link to the time the pop-up box appears, otherwise you risk an even more egregious error by littering the user’s screen with appearing and disappearing pop-ups windows. Overlays should be easy to close.
3. drag and drop without clear targets
While drag and drop interactions can be engaging and in some cases more efficient than clicking a link (though this remains to be proven), drag and drop is rife with possible gaffes that undermine the usefulness of the interaction.
For instance, when a user clicks on a target to be dragged, not only should there be visual feedback that the item is to be dragged (don’t rely on color alone–consider enlarging the dragged item and changing the cursor), but the drop area should also be highlighted to remind the user where to drop the dragged item.
In the example above, from Blockbuster.com’s queue management screen, we see only a thin black line indicating where the dropped movie (“Raising Arizona”) will go, and the cursor remains a pointer, rather than a closed-hand cursor. Furthermore, each non-dragged movie also shows the standard roll-over state (in this case “Searching for the Wrong-Eyed Jesus”), also potentially confusing the user by sending mixed signals of use.
So yes, the drag and drop is a bit easier to order a queue, but usability concerns arise when addressing how to prioritize the movies you want to watch.
4. only using either Tab or Enter in Auto-complete
Auto-complete is an effective, easy to understand convention that provides users an efficient method of selecting an option in a drop-down list. However, some developers are only programming one method of selecting an item in the list, while other sites provide two ways of committing to a selection.
For instance, Kayak.com allows its users to select an airport from it’s drop-down list using either the Tab key or Enter key. If only one method of selecting an auto-complete option is programmed, a user may inadvertently use the one not accounted for and suffer the consequences.
If a user were to use Enter, for example, and the Enter key does not trigger the selection, the user may submit the form and likely generate an error.
5. failing to create useful filters
As AJAX has become more commonplace among web sites targeted to less-technical audiences, the ability to effortlessly filter information has greatly proliferated throughout shopping web sites, be it for clothing, flights, or hotels. Unfortunately, not every filter is particularly valuable in separating noise from useful information.
The Gap’s family of web sites, including Banana Republic, provide a means to show only the clothing sizes you elect to complete–you’re not forced to only view jeans or shirts if you’re just browsing to see what’s available.
Nike, however, takes the opposite approach and only allows users to specifically identify one and only one category of clothing. Users cannot choose to see shorts and t-shirts in the category running; they must choose between one or the other.
When considering implementing filters, make sure to evaluate as many use cases as possible–though one group of people may want to go shopping for t-shirts, there could be a larger, more willing group of people who are looking to update their running wardrobe for spring.
