Three User Interface Anti-Patterns Web Designers Should Avoid

Anti-PatternsA user interface pattern can be thought of as a good solution to a common problem that designers face. A good designer will have a toolbox of patterns they can deploy when the need arises. An obvious example of a UI pattern is the linking of a web page’s logo to the home page. This is a standard pattern, has been in use for many years, and users have come to expect it.

The opposite of a pattern is an anti-pattern. Anti-patterns are common solutions to problems but unlike patterns, they are bad solutions. They are considered bad because they solve the problem, but undermine the greater goals of UI design.

I’d like to take a look at three anti-patterns that you are almost certain to have come across, and that solve a genuine problem — the need to focus user attention and engagement on specific parts of a page — but do so in a way that undermines the experience of users.

Obscuring Content

Obscuring Content

The Problem: To increase conversions, it’s necessary to focus user attention on a call-to-action.

The Antipattern: Put calls-to-action in interface elements that block the content the user wants to look at or interact with. This ensures that the call-to-action gets attention.

Obscuring content with modal popups has become increasingly popular over the last couple of years. In essence, they aren’t much different to traditional popups, except that modals boxes are not handled by popup blockers. Obscuring content works. It has been shown to increase conversions. But it is also inconsiderate and harmful to user experience.

It is possible to use modals and other attention-grabbing strategies without putting a barrier between the user and the content. If you’re a WordPress user, the Scroll-Triggered Boxes plugin will allow you to trigger a modal box after the user has scrolled through the content.

Low Contrast Text

Low Contrast Text

The Problem: Designers want to make some elements more prominent on the page.

The Antipattern: Reduce the contrast of a page’s body text compared to the contrast of the text that should be most prominent.

The issue here is obvious. Low-contrast text is harder to read, harder to find, and it’s terrible for people with vision problems. There are many ways to improve the prominence of specific elements without harming user experience. In a recent article on this subject, the Nielsen Norman Group suggests reducing information density, adjusting font sizes, and repositioning elements.

Disguised Links

The Problem: The designer wants a user to see and click on an element that they are unlikely to click on of their own volition.

The Anti-pattern: Make the element look like something the user is likely to want to click on.

This is an anti-pattern that crosses the line from being a user experience issue to being downright dishonest. It’s a dark pattern that is often found on download sites. Unfortunately, it works, and it needn’t be quite as blatant as presenting a fake download button that links to an advert. Including a compelling but misleading call-to-action can accomplish the same thing.

I don’t think I need to detail why this is a bad idea. Misrepresenting site navigation and other links is an excellent way to lose valuable users.

Sites have to monetize, but there is a fine line between strategies that maximize conversions and those that damage usability and reputation. Employing anti-patterns may work in the short-term, but the sites that thrive over the longterm respect the experience of their users.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED