3 Maneiras de Mover Negocios no Mobile (E Por que o Design de Gestos Importa)

Moving a deal from one pipeline stage to another is the single most common action in any sales CRM. On desktop, it is usually drag-and-drop across a kanban board. But on mobile, drag-and-drop across horizontal columns is awkward at best and broken at worst. Your thumb covers the content, the target is tiny, and accidental drops are constant.

We spent weeks prototyping different approaches for SalesSheet's mobile pipeline. We ended up shipping three distinct gesture modes, each optimized for a different context. Here is how they work and why we built all three.

Mode 1: Tap-Tap

The simplest interaction. Tap a deal card once and a stage picker appears as a floating overlay on the right side of the screen. The picker lists every pipeline stage vertically with colored dots. The current stage is marked with a bullet. Tap any other stage and the deal moves instantly.

This mode is designed for precision. You can see exactly where the deal is going before you commit. There is no risk of accidental drops because each action is a deliberate tap. The stage picker overlay uses a frosted-glass effect (backdrop-blur combined with 95% white opacity) so you can still see the pipeline behind it.

Under the hood, when you tap a deal card, the component sets isTapPickerOpen to true, which renders the full-screen overlay with the stage list. Each stage item in the picker is a clickable button that calls handleTapStageSelect with the target stage index. If the target differs from the current stage, we dispatch the onStageUpdate callback, which persists the change to the database.

Mode 2: Long-Press Drag

Hold your finger on a deal card for about 300 milliseconds. The card lifts slightly with an enhanced shadow, signaling that it is now draggable. Without lifting your finger, drag vertically - up to move the deal to an earlier stage, down to move it to a later stage. As you drag, a floating label above the card shows the target stage name with an arrow indicator. The stage picker on the right highlights the stage your finger is hovering over.

This mode is designed for muscle memory. Once you internalize the hold-and-drag pattern, it becomes the fastest way to move deals because it combines selection and placement into a single continuous gesture. The haptic-like feedback of the card lifting and the real-time stage preview make it feel physical, like sliding a card across a table.

The implementation uses a custom useVerticalDrag hook that tracks touch events and calculates stage offsets based on a configurable stageSpacing value (50 pixels per stage). The hook exposes isDragging, targetStageOffset, and style properties. When dragging ends, it calls onDragEnd with the final stage offset, which the parent component translates into a stage update. The hook also enforces boundaries using maxUp and maxDown props, preventing the user from dragging beyond the first or last stage.

Mode 3: Tap-Drag

This is the hybrid mode. Tap a deal card to open the stage picker (same as Mode 1), but instead of tapping a stage, drag your finger across the picker list without lifting. As your finger moves, the highlighted stage follows in real-time. Lift your finger to confirm the selection.

This mode is designed for power users who want the visual feedback of the picker but the speed of a drag gesture. It combines the precision of Mode 1 (you can see the full stage list) with the fluidity of Mode 2 (continuous motion without lifting your finger).

Technically, this works through the same overlay component used for both drag and tap modes. The overlayRef tracks touch events when the picker is open, calculating which stage the finger is hovering over using the tapDragOffset state. The activeOffset variable unifies both long-press drag offsets and tap-drag offsets into a single highlight index, so the visual treatment is identical regardless of which gesture initiated the interaction.

Why Three Modes?

The honest answer is that different people have different comfort levels with mobile gestures. Some users are coming from traditional CRMs where everything is a tap and a dropdown. They need Mode 1. Some users are power mobile users who expect drag interactions - they grew up with Tinder swipes and iOS drag-to-reorder. They need Mode 2.

And some users fall in between. They want to see where they are going before they commit, but they also want the speed of a continuous gesture. Mode 3 gives them both.

Rather than force users to learn one paradigm, we let the interface accommodate different interaction styles. All three modes are always available - there is no setting to toggle between them. A tap opens the picker. A long-press initiates drag. A tap followed by a drag-across activates the hybrid mode. The system detects which gesture the user is performing and responds accordingly.

The Stage Picker Overlay

All three modes share the same stage picker component. It renders as a floating panel positioned in the upper-right of the screen, using a design language consistent with the rest of the mobile interface: frosted glass background, rounded corners, compact stage items with colored dots.

Each stage in the picker has three visual states. The highlighted state (the stage the user is currently targeting) gets a gray-100 background and bold text. The current state (where the deal currently lives) gets medium-weight text and a small bullet marker. All other stages appear in gray-400 text. This three-state system makes it immediately clear where you are, where you are going, and what other options exist.

The stage colors in the picker use the same STAGE_ACCENTS map that powers the funnel view. Consistency means the user never has to re-learn color associations when switching between views.

Edge Cases and Guard Rails

Gesture interactions on mobile are fraught with edge cases. What if the user accidentally initiates a drag while scrolling? What if they drag past the last stage? What if they start a long-press and then change their mind?

SalesSheet handles these carefully. The long-press threshold of 300ms distinguishes intentional holds from accidental touches. Drag boundaries are enforced by the maxUp and maxDown parameters. If a user releases the drag without moving to a different stage (offset of zero), no update is triggered. The picker overlay has a click-to-dismiss handler so users can cancel at any time. And the entire drag system uses pointer-events: none on the overlay during long-press mode to prevent it from intercepting the drag gesture itself.

The Broader Lesson

Gestures are to mobile what keyboard shortcuts are to desktop: the difference between an interface that tolerates you and one that accelerates you. Investing in multiple gesture modes is not over-engineering - it is recognizing that the single most important action in your app deserves the most thoughtful interaction design.

If you want to see these gestures in context, check out our post on why your CRM should feel native on your phone. And if you are interested in the visual design system behind the pipeline, read about our Linear and Attio-inspired design approach.