Designing swipe-to-delete and swipe-to-reveal interactions

Swiping left and right are part of the most common interactions, right alongside tapping, long press, and other gestures. The swipe gesture is used in every mobile device:

• Vertical swipe is used for scrolling through content, such as news feeds or web pages, and
• Horizontal swipe for actions like switching between pages or revealing hidden elements (e.g., swipe-to-delete)

There is no smartphone today that doesn’t use the swipe gesture. Given this, it’s essential to design such gestures with accessibility in mind. Ensuring gesture-based interactions are inclusive enables all mobile users, regardless of ability, to navigate and engage with apps effortlessly.

In this article, we will go deep into swipe gestures. We’ll explore what it is, where it’s used, and how to design the perfect swipe gesture experience that is intuitive, functional, and accessible to all users.

Understanding swipe gestures

What exactly is a swipe gesture? A swipe gesture is a finger movement across a screen to perform specific actions, vertically or horizontally. Simple. These gestures make sense because they reduce the need for multiple taps or navigating through menus. The two common implementations of swipe gestures we will focus on in this article are:

1. Swipe-to-delete — This is a horizontal swipe action often used to delete an item. The item can be found in email, chat, or notification. The delete action is most often accompanied by a ‘delete’ text with a red background or trash icon to reinforce the function
2. Swipe-to-reveal — This also has the same swipe gesture as swipe-to-delete, except that instead of a delete, it reveals other hidden options or contextual actions. For example, swiping on a chat might reveal options like “Archive,” “Mark as Unread,” and “Delete” and not just a ‘delete’

More swipe gestures

Of course, those are not the only “swipe-to” actions. I’m sure you’ve encountered others on your mobile app like:

• Swipe-to-navigate — This is a horizontal swipe action, either left to right or right to left, that is used to move between sections or pages within an app. A good example would be swiping left or right to navigate between tabs
• Swipe-to-refresh (pull to refresh) — This is a vertical swipe (from up to down) that triggers the app to reload an app or refresh content
• Swipe-to-select — This is a gesture where users swipe over a list of items to select multiple entries, such as selecting tasks or files in a list. This is commonly seen in task management apps like Todoist
• Swipe-to-expand/collapse — This gesture is used to expand or collapse content, such as opening a detailed view or closing a menu. For example, swiping to expand a list of notifications or a dropdown menu

Where are swipe gestures implemented?

Swipe gestures are most effective when applied to tasks that benefit from speed, efficiency, and reducing cognitive load. They should be used in contexts where quick actions are required or in contexts where simplifying user interaction can improve the overall experience.

Key areas where swipe gestures are particularly necessary include:

• Managing items efficiently — Implement swipe gestures in environments where users need to frequently organize or act on items, such as emails, messages, or to-do lists, the swipe gesture can be used for fast actions like archiving, deleting, or marking items without disrupting the flow
• Performing common, repetitive tasks — Using swipe gestures for tasks that are frequently repeated, such as adjusting settings, switching between options, or moving items in a list, can benefit from swipe gestures

However, while swipe gestures look cool, they come with pitfalls if not implemented thoughtfully. Poorly designed swipe gestures can lead to:

• Accidental actions — If the designs are over-sensitive or ambiguous, it can result in unintended actions, such as deleting an item by mistake
• Hidden functionality — If swipe actions are not visually indicated, users may miss key features altogether, leading to frustration or incomplete tasks
• Overcomplicating interactions — Adding too many swipe options or requiring complex gestures can overwhelm users, leading to confusion and errors

In the following sections, we’ll look into the accessibility challenges associated with swipe gestures and explore best practices to address these issues effectively.

Accessibility and usability challenges with swipe gestures

Swipe gestures, while intuitive for many users, can present significant challenges for others, particularly those with disabilities or when using assistive technologies. Let’s take a look into some major accessibility concerns with swipe gestures

1. Issues faced by users with motor impairments

We can’t deny the fact that there are some users with motor impairments, such as reduced hand dexterity or tremors, who may struggle to perform precise gestures like swiping. This can make it difficult for them to interact with key features of an app, leading to frustration and exclusion.

Small touch targets or requiring long swipes can exacerbate this issue.

What to do:

• Provide large, easily tappable targets (at least 48px by 48px)
• Reduce swipe distances to make interactions more manageable

2. Compatibility concerns with assistive technologies

Swipe gestures (swipe to reveal, swipe to delete) might interfere with assistive techs, like voice control and screen readers. For example, a swipe-to-delete gesture might not be easily understood or executed by users relying on these tools, creating accessibility barriers.

What to do:

• Ensure that swipe gestures do not conflict with assistive technology functionality
• Offer alternative methods, such as visible buttons, for critical actions

3. Discoverability problems for all users

Swipe gestures are not obvious. They are often hidden in design, making them less discoverable for new or inexperienced users. Without clear visual or instructional cues, users may remain unaware of the functionality, leading to frustration.

What to do:

• Use tooltips and visual indicators (e.g., “Swipe left to delete”) to guide users
• Include onboarding tutorials that explain swipe functionality

Best practices for accessible swipe interactions

Below are ways to make the swipe gesture feature accessible to all users:

1. Provide alternative methods for deleting items

Not all users can easily perform swipe gestures, so offering alternative methods ensures inclusivity and accessibility:

• Visible buttons — Include clearly visible icons or buttons next to items for actions like “Delete” or “Archive.” For example, instead of relying solely on swipe gestures, place actionable icons directly beside the item. This provides users with an intuitive, easily accessible option
• Long press options — Allow users to hold down on an item to access additional actions. This method is familiar to many users and can serve as a practical alternative for those who struggle with swipe gestures. For instance, apps like Gmail use long-press functionality to provide options, ensuring that critical actions remain accessible to everyone

2. Ensure adequate touch targets and spacing

Make sure you make the swipe area large enough to accommodate users with varying dexterity. A larger touch target (e.g., 48px by 48px) can improve accessibility, making it easier for users to perform the gesture accurately.

Additionally, ensure sufficient spacing between touch targets (at least 8px) to avoid accidental interactions, particularly in areas with frequent swipe actions.

3. Implement clear visual cues

To help users discover and understand swipe gestures, include clear visual cues:

• On-screen indicators — Use visual cues like “Swipe left to delete.” This helps users quickly grasp the gesture’s function. Tooltips or banners could be displayed when a user first interacts with the swipeable area
• Onboarding tutorial — Provide an onboarding flow that explains swipe gestures and other key interactions. This will make sure that users know how to use the app features from the beginning. For example, new users could be prompted with a short tutorial explaining how swipe-to-delete works in the app

4. Provide feedback after the gesture

Provide feedback after a swipe action to help users understand that their input has been recognized. For example, a subtle animation or haptic feedback can indicate that the swipe action was successful.

Additionally, when deleting an item, show a confirmation message (e.g., “Item deleted”) to reassure the user.

5. Separate swipe actions

Ensure that swipe-to-navigate (e.g., swiping between tabs or pages) is reserved for areas where users expect to move through content, such as galleries, page transitions, or tabbed sections.

6. Test with diverse user groups

Conducting accessibility testing with a wide range of users, including individuals with disabilities, is crucial to verify that swipe interactions are functional and effective for everyone. Consistently apply swipe gestures across the app to avoid confusion. For instance, the swipe-to-delete action should behave similarly in all relevant contexts, and any variations should be clearly communicated.

Evaluating your swipe gesture implementations

But how do you know if your gestures are hitting the mark? By tracking measurable goals, you can identify what’s working and where improvements are needed.

Below are some key metrics to evaluate and refine your swipe gestures to make them more user-friendly and accessible for everyone.

Error rates

Error rates in this scenario can be measured by failed or unintended outcomes:

• Failed gesture attempts — When a user tries to perform a swipe, but it doesn’t register because of unclear UI cues, it’s considered a failed attempt. Another example is when the user doesn’t even try the swipe gesture at all because they are unaware they should. The solution is to create clear gesture hints, allow flexible swipe angles, or provide an alternate button so users can still perform the action
• Accidental gesture activations — These happen when the swipe-to-delete gesture is triggered by mistake, often due to overly sensitive detection or ambiguous designs. To prevent this, use appropriate sensitivity settings, separate gestures like swipe-to-delete from other interactions, such as swiping through tabs horizontally, and provide a snack bar with an undo option. This ensures the user immediately knows what they’ve done and can undo it if it was accidental

Task completion time

This measures the time spent for users to completely perform the swipe gestures without the user being frustrated or confused. Even if you designed a sufficient swipe gesture, users still delay performing the gesture, and that delay may indicate a need for simplification.

To improve this metric, test the fluidity of gestures, ensure swipe distances are intuitive, and avoid overloading gestures with too many options.

User satisfaction

The ultimate goal of designing accessible swipe gestures is to ensure user satisfaction.

During usability tests, interviews, and feedback sessions, listen closely to what users have to say about their experience. Take their feedback into account to refine your design, ensuring it meets their needs and provides the best possible experience.

Case studies: Effective use of swipe gestures

Gmail

Gmail makes excellent use of the swipe-to-archive gesture to streamline email management. With a simple horizontal swipe, users can quickly archive emails, reducing the time spent on inbox cleanup.

Additionally, Gmail provides immediate feedback after a swipe action. When an email is archived, a snackbar message appears at the bottom of the screen, confirming the action and offering an Undo option in case the user changes their mind.

This thoughtful design ensures user confidence and reduces potential frustration from accidental gestures.

Beyond swipe gestures, Gmail also supports long-press actions for bulk management. When I long-pressed on an email, it brought up a menu with options like Archive, Delete, and others. This design ensures users can still access key functions even if they’re unable or unwilling to use swipe gestures, making the feature more inclusive.

WhatsApp

WhatsApp’s swipe-to-reveal feature allows users to quickly archive chats or access additional options. A right-to-left swipe reveals actions like Archive, enabling efficient management of conversations.

However, WhatsApp’s decision to hide the “Delete” action under a secondary menu introduces some usability challenges.

Users accustomed to the swipe-to-delete convention might find this approach less intuitive and require more effort to perform a common action. This could cause friction, especially for users who prioritize quick and direct actions.

YouTube

YouTube’s swipe-to-delete feature in the recent search interface offers a simple and effective way for users to manage their search history. By swiping left on a specific search item, users can quickly delete it, maintaining privacy and keeping the search interface uncluttered.

Conclusion

Swipe gestures are powerful tools for creating efficient and intuitive user experiences. However, designing them with accessibility and usability in mind is essential to ensure inclusivity. Here are the key takeaways:

1. Prioritize accessibility — Always provide alternative methods for performing swipe-based actions to accommodate users with disabilities
2. Enhance discoverability — Use visual cues, onboarding tutorials, and clear feedback to guide users
3. Thorough testing — Perform usability testing with a varied audience, including individuals with diverse needs, to uncover and resolve any accessibility challenges
4. Meet user expectations — Design swipe gestures to be intuitive and uniform throughout the app, minimizing potential confusion

By adhering to these guidelines, designers can craft swipe interactions that are both effective and inclusive, offering a smooth experience for every user.

Whether it’s deleting an email, organizing a playlist, or archiving a chat, well-thought-out design plays a vital role in improving both usability and accessibility.