Skip to main content

Anti-patterns

Last updated:
12/7/2023

Anti-patterns are common design practices that employ bad habits, negatively impact the user, and should be avoided.

Introduction

An anti-pattern is an attempted solution that, at best, doesn’t work and, at worst, introduces new problems. The following details common anti-patterns to avoid and why.

Anti-patterns vs. deceptive patterns

Deceptive patterns are more problematic than anti-patterns because they utilize unethical practices to coerce the user into performing an action or opting into a setting. They’re deceitful and break the user’s trust, even prompting the state of California to outlaw them due to their predatory nature.

Common examples of deceptive patterns:

  • Hiding the “Unsubscribe” action in email messages
  • Asking for more personal information than necessary
  • Disguising ads as useful content
  • Confirmshaming — using derogatory action text to shame the user into performing an action, such as wording a decline option with “No thanks, I hate saving money”

Carousels

Carousels are common anti-patterns that fit a lot of content into a small space. But, often, the user doesn’t interact with the carousel or even see it. Auto-forwarding carousels also present accessibility issues.

Accessibility

Content should never be auto-forwarding (automatically progressing to the next slide). Auto-forwarding carousels can be difficult for a user with motor skill issues and often allow too little time to read and understand content. And because some people associate automatic motion with unwanted advertisements, auto-forwarding can be distracting and contributes to banner blindness.

Usability

Research shows that users rarely click past the first slide or interact with any call-to-action from carousels. A Notre Dame study found that only one to nine percent of users clicked on a carousel slide. Of that range, a great majority clicked only on the first slide, followed by a steep decline in interaction. Carousels assure marketers that their content lives on the home page, but that content is not likely to be read.

Performance and SEO

Carousels slow down the page load because the browsers must download hidden images. The hidden content also impacts search engines' ability to effectively crawl the site. Additionally, carousels produce multiple h1s which contradicts best practices for accessibility and SEO.

Avoid carousels whenever possible.

Research

Disrespecting focus

In a world of constant updates, a person’s focus is easily broken.

One study found that it takes an average of “23 minutes and 15 seconds to get back to task.” That same study also found that though interrupted work may be completed faster, that speed comes at a cost — “people in the interrupted conditions experienced a higher workload, more stress, higher frustration, more time pressure, and effort.”

Interruptions can be welcome when they contain useful information, are time-sensitive, or urgent. Interruptions that don’t fulfill those requirements can disrupt the user from their chosen task, resulting in broken focus.

Keep in mind that people work in different ways and those ways can be determined by shifting factors, such as type of work, mood, context, and environment. It is difficult to decide what is important enough to interrupt a person from their chosen task, since each situation and person is different. The key to creating useful interruptions and protecting focus is flexibility.

Context and environment

Consider your workflow from all possible angles. Now think about all possible interruptions that may occur during that workflow. Now consider the contexts and environments a user might be in while completing the workflow. Some of these may include:

  • In a quiet place or in a crowd
  • With or without headphones
  • At the office or in a conference room or at home
  • With fast internet or slow internet
  • On a laptop or mobile device
  • In a hurry or relaxed
  • Under pressure or calm

The importance of this exercise is to begin to build systems of allowing the user and the system to adapt.

Levels of importance

Consider the levels of importance or urgency in notifications or interruptions. An urgent interruption may be helpful, but an informational alert may be frustrating or downright annoying. Notifications should have a range of importance. The user would then be able to focus on what’s important and screen out what isn’t.

Methods of delivery

After assigning levels of importance, consider how to deliver these interruptions. Are there different ways of delivering these messages? For example, if the only way a user is alerted is through sound, what if the user doesn't have headphones or has a hearing impairment?

Varying the levels of delivery can also help denote the interruption’s importance. For example, a time-sensitive alert may present itself both visually and aurally, taking up the user’s full attention. A new email, setting update, or other non-urgent message can be indicated more subtly on the user's periphery.

Let the user choose

The most important thing is allowing each person to choose their own preferences. It’s impossible to foresee all circumstances a person might find themselves in while using our experiences. Giving control to the user will allow them to better personalize their experience.

Resources

Duplicative content

Duplicative content may seem like a good way to underscore an important message or action, but it often waters down and obscures content.

Avoid redundant content

Redundant items clutter the page and ultimately limit the impact of all other content, set in competition with too many elements. To feature content prominently, feature it clearly in one place.

Keep links specific and brief. Don’t include obvious or redundant information in links — adding words that don’t differentiate complicates scanning for and seeing important words.

For example, if you list press releases and each begins with the company name, it becomes difficult to differentiate the press releases when scanning. Furthermore, subsidiary names often include a common word, such as “FedEx Express,” “FedEx Ground,” “FedEx Home Delivery". Lists that use subsidiary names result in columns of identical words, also complicating the user’s efforts at differentiation.

Research

Hover-only

Hover-only content is meant to be a lightweight way to deliver contextual information to users without disrupting their flow. Tooltips are a common example of this. However, information that appears only when hovered on is inaccessible for people who navigate without the use of mouse. To avoid inaccessible experiences, make sure that all interactive content is focusable and accessible via a keyboard.

Modals

Modals are popups that disable the rest of the page, limiting the user’s interaction to only the modal. Our modals are lightboxes, meaning that the page background is dimmed to communicate the page’s inaccessibility. Modals are occasionally useful, but they also present complications:

  • Modals take the user out of their flow and require immediate attention
  • Modals can cause the user to forget their original goal
  • Modals, by definition, block the page’s content

Modals should be used appropriately in light of these usability issues. Below are some scenarios where modals could be necessary.

Important warnings

Use a modal if there is an important warning that the user must acknowledge before moving on with their experience. An example of an important warning would be if the user’s work might be lost or if the user is about to perform a destructive or irreversible action.

Enter important information

Use a modal if there may be missing information that is necessary for the user to continue their experience, but you don’t want to take the user out of the page. A common example is a login modal during a checkout flow. The modal allows the user to sign up or log into an existing account before completing the checkout flow.

Simplify or streamline workflows

Use a modal to break down complicated processes into digestible steps. For example, if the user must complete sub-tasks with a task, a modal could allow the user to focus on completing the sub-task information. Wizards in modals is one example. If you find yourself designing a multi-step modal, consider if the modal should be a page instead.

When to avoid modals

  • If you’re asking users to enter non-essential or unrelated information to their current experience
    • A common example is mailing list subscription modals
  • If the modal would interrupt a workflow for unnecessary information or at the wrong time
  • If you’re asking the user to make a decision for which they would need additional information or research

Research

Opening a link in a new tab or window

Opening a link in a new tab or window is generally a poor experience.

Disadvantages of opening in new tabs or windows

New tabs or windows can:

  • Clutter the user’s browser
  • Disorient the user, especially on mobile devices
  • Frustrate less technical users by presenting them with multiple windows or tabs they now have to manage
  • Break the back button flow
  • Force users with low vision to re-magnify content on the new window or tab
  • Force keyboard users to re-tab to the content

When to open in a new tab or window

There are some situations where opening a new window or tab helps the user, such as:

  • When the user needs to refer to information on one page, while performing a task on another page
  • When the content types are different. Such as opening a PDF in separate tab in the same browser.
  • When the user needs to keep track of the items. Commonly, online shopping experiences will open product pages in new tabs.
  • When the original page is considered as a launch point. One example is online folders of documents, such as Google Drive. Documents will open in a separate tab from the original folder page to allow the user to focus on editing that document.

Research

Parallax

The parallax animation effect occurs when two or more layers of the interface move at differing speeds or directions to create the illusion of depth. Parallax is an easy way for designers to introduce motion that highlights the main focus of the page, but also allows users to notice background motion without focusing on the background. Though parallax seems like slick design, it has serious drawbacks.

Accessibility

As many as 35% of users over the age of 40 are likely to be nauseated or dizzied by parallax animation. One recent example is Apple’s iOS 7 update, which included the "Reduce Motion" setting because the parallax animations were giving users dizziness, nausea, and vertigo.

Because Boston Scientific audiences are generally older than 40, parallax animation should be absolutely avoided whenever possible.

Performance

Parallax is slow to load and, depending on internet speeds, could leave the user with a blank screen while waiting for an upload. Designers and developers should account for gaps in internet access when considering parallax.

SEO

Parallax is bad for SEO. The design usually combines separate pages into one longer page, which can produce the following scenario: four separate pages combined into one, creating four page sections which would then be navigated to by scrolling or jump links.

The drawback is that search engines only index pages, not sections of pages. Because the four pages are now one page with four sections, the search engine has lost visibility into three pages. Dedicated separate pages would improve indexing and allow important keywords to be repeated in the page’s title, h1 tag, content, and metadata.

Usability

Parallax content is difficult to control. Because users are content-oriented, they may scroll too fast in search of information and overlook relevant content.

In general, parallax also works better on larger screens. This is because the images used on larger screens are too outsized for mobile devices. Typically, parallax scrolling is replaced by static images as a work-around. Parallax animations also vary from browser to browser, which changes the experience from device to device.

Parallax is not a flexible solution and it is difficult to make it truly responsive. We should avoid parallax effects because the majority of users are coming to Boston Scientific sites through mobile devices.

If nothing else...

Parallax animation can be easily overlooked. People generally associate movement with unwanted advertisements, so subtle animations can produce an effect that’s equivalent to ad blindness. To avoid this complication, it’s best to assure that your content is clear and easily readable.

If the user notices the parallax effect, it’s likely they won’t be impressed. The majority of users are focused on content. If the user notices the effects at all, it’s as an afterthought.

Designers and developers should take these points into account when deciding to risk the above drawbacks for parallax scrolling.

Research

Reordering content

A solution for reordering content across breakpoints while maintaining a logical tab order does not exist. We should avoid reordering content across breakpoints because it negatively impacts accessibility.

Maintaining Accessibility in a Responsive World by Filament Group does a great job at explaining the problem (Disconnected Interfaces, Identifying the Particulars, and Focus are the most relevant sections). Content Reordering by Rachel Andrew also has some great visuals and interactive demos.

We recommend matching the DOM order to the visual order to be compliant with WCAG SC 2.4.3 Focus Order and align with general best practices.

Sticky or fixed elements

Sticky or fixed elements can solve one problem for some users: they ensure that the element’s content is always front and center. But this only works for some users and produces issues for others.

If you are considering implementing a sticky element, ask yourself the following questions and understand the accessibility issues:

  • Why does the element need to be sticky?
  • What is this functionality solving? Is it useful for all users?
  • How can this functionality be made accessible?

Accessibility issues

Sticky elements are often designed for the ideal situation. There are three big issues that can arise when designing with sticky elements.

Zooming

In order to meet WCAG 2.1 AA criteria, users must be able to zoom content up to 200%. Sticky content quickly becomes too large and covers too much of the screen, especially if the user needs to zoom closer to 200% and is on a smaller screen.

Device orientation

Sticky elements are usually designed for only one orientation, portrait or landscape. If the user changes that orientation, the element performs poorly or covers too much of the screen.

Keyboard users

Sticky elements present issues for people who rely on keyboards to interact with web content. If the sticky element has interactive content, it is often difficult, if not impossible, for keyboard users to access that functionality. If the sticky element lives at the bottom of a page with infinite scroll, it is impossible for keyboard users to interact with that element.

Sticky content can also hide interactive elements. Keyboard users can tab to those elements, but the focus is hidden behind the sticky element.

Research