Tap : qu'est-ce que c'est, gestion des touches dans iOS et Android

Qu'est-ce que Tap ?

Tap (toucher, pression) est le geste consistant à toucher rapidement l'écran tactile avec un doigt ou un stylet. Le geste comprend deux phases : le toucher vers le bas et le relâchement, se produisant au même endroit sans mouvement. Le système reconnaît un Tap lorsque l'intervalle de temps entre le contact et le relâchement ne dépasse pas une valeur seuil (généralement 300–500 ms). Si l'utilisateur maintient le doigt plus longtemps — le geste devient un appui long.

Tap est le fondement de l'UX mobile. Sur toutes les plateformes mobiles, Tap remplace le clic gauche de la souris utilisé dans les interfaces de bureau. Contrairement au clic de souris, Tap n'a pas de modificateurs (Maj+clic, Ctrl+clic) ni de survol — cette limitation façonne la conception des interfaces mobiles. Pour compenser l'absence d'aperçu, les plateformes mobiles utilisent un retour visuel : surbrillance au toucher, effet ripple dans Android, changement d'opacité dans iOS.

Anatomie de Tap comprend cinq étapes au niveau système : réveil du capteur (toucher), détermination des coordonnées, filtrage du bruit (le doigt ne doit pas se déplacer plus qu'une distance seuil), attente d'achèvement (relâchement ou maintien), classification (Tap, appui long, glissement). Les contrôleurs tactiles modernes traitent ce cycle en 8–16 ms à une fréquence d'échantillonnage de 60–120 Hz.

Tap et Clic : quelle différence ?

Tap et Clic sont des événements différents avec une physique différente. Clic est un événement de souris qui se produit lorsque le bouton de la souris est enfoncé et relâché à la même position. Tap est un événement d'écran tactile qui se produit lorsqu'un doigt touche. Sur les appareils mobiles, le navigateur convertit Tap en un événement clic avec un délai de 300–350 ms (pour émuler le zoom à double tap). Ce délai a historiquement été un problème pour le web mobile jusqu'à ce qu'Apple et Google introduisent meta viewport avec user-scalable=no.

Touch Events est une API distincte de Mouse Events. Les événements tactiles (touchstart, touchmove, touchend) transmettent un tableau de points de contact (TouchList), des coordonnées, la pression et la taille de la zone de contact (radiusX, radiusY). Mouse Events transmet uniquement les coordonnées du curseur. Les navigateurs modernes synthétisent un clic à partir de touchend s'il n'y a pas eu de mouvement du doigt et aucun événement touchcancel. Pointer Events API combine les deux approches, offrant une gestion unifiée pour tous les périphériques d'entrée.

Tap dans iOS : UITapGestureRecognizer

UITapGestureRecognizer est le reconnaisseur standard de Tap simple et multiple dans le SDK iOS. Prend en charge la configuration de numberOfTapsRequired (nombre de tapements séquentiels) et numberOfTouchesRequired (nombre de doigts touchant simultanément). Le reconnaisseur passe à l'état UIGestureRecognizerStateRecognized lorsque l'utilisateur relâche le doigt et que le toucher ne dépasse pas le seuil de mouvement.

// UITapGestureRecognizer avec prise en charge du Double Tap
class InteractiveImageViewController: UIViewController {

    private var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Simple Tap — afficher/masquer les contrôles
        let singleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleSingleTap)
        )
        imageView.addGestureRecognizer(singleTap)

        // Double Tap — zoom sur l'image
        let doubleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2

        // Simple Tap se déclenche uniquement si Double Tap n'est pas reconnu
        singleTap.require(doubleTap.toFail())
        imageView.addGestureRecognizer(doubleTap)
    }

    @objc private func handleSingleTap() { /* afficher les contrôles */ }
    @objc private func handleDoubleTap() { /* effectuer un zoom */ }
}

Modèle important : lors de la prise en charge simultanée de Tap simple et double, vous devez appeler require(_:toFail:). Sans cela, le tap simple se déclenchera immédiatement, ne permettant pas au système d'attendre une deuxième pression. iOS prend également en charge la reconnaissance de Tap via UIControl.addTarget — pour UIButton, UISwitch et d'autres contrôles. Les contrôles intégrés d'UIKit ont déjà une gestion standard de Tap, et l'ajout d'UITapGestureRecognizer par-dessus peut entraîner des conflits.

Tap dans Android : setOnClickListener

View.setOnClickListener est la méthode standard du SDK Android pour gérer les clics sur View. Lorsqu'un utilisateur touche une View et relâche le doigt sur le même élément (touch down → touch up dans la View), la méthode onClick() est appelée. Android ajoute automatiquement un effet ripple (sur API 21+) avec animation tactile. Un bouton est considéré comme enfoncé dans l'état PRESSED, qui est affiché visuellement via un sélecteur ou RippleDrawable.

// setOnClickListener dans Fragment avec Data Binding
class ItemListFragment : Fragment() {

    private var binding: FragmentItemListBinding? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding = FragmentItemListBinding.bind(view)
        binding.submitButton.setOnClickListener {
            submitForm()
        }

        // Écouteur avec debounce pour éviter le double clic
        binding.submitButton.setOnClickListener(
            DebouncingClickListener {
                submitForm()
            }
        )
    }

    private fun submitForm() {
        // Envoi des données du formulaire
    }
}

Debounce est un modèle important dans le développement Android. Un utilisateur peut accidentellement appuyer deux fois sur un bouton en peu de temps, entraînant une double soumission de formulaire ou une double exécution d'action. Solution : un wrapper DebouncingClickListener qui bloque les clics répétés pendant 500–1000 ms. Google recommande cette approche dans les exemples officiels d'Android Architecture Components. Pour RecyclerView, setOnItemClickListener est fourni via ListAdapter avec une interface de rappel.

Touches multiples : Double Tap et Triple Tap

Double Tap (double toucher) — deux tapements consécutifs avec un intervalle ne dépassant pas 300–400 ms. Utilisé pour zoomer sur des images (cartes, photos), les likes dans les réseaux sociaux (Instagram, Twitter), revenir au début d'une liste (Téléphone, Messages). Triple Tap (triple toucher) est moins courant — principalement utilisé pour les fonctions d'accessibilité (mode plein écran, VoiceOver) et dans les jeux.

Implémentation du Double Tap nécessite une synchronisation avec le Tap simple : si vous ajoutez les deux gestes à un même élément, le Tap simple se déclenchera avec un délai (le système attend une deuxième pression). Dans iOS, ce délai est géré via require(toFail:) — le Tap simple est reporté jusqu'à ce qu'il soit certain que le Double Tap n'aura pas lieu. Dans Android, GestureDetector.OnDoubleTapListener est utilisé avec les callbacks onSingleTapConfirmed et onDoubleTap. onSingleTapConfirmed n'est appelé qu'après un délai d'attente lorsque le système est sûr qu'il s'agit d'un tap unique.

// Double Tap dans Android via GestureDetector
class PhotoViewerActivity : AppCompatActivity() {

    private var gestureDetector: GestureDetector? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {

            override fun onSingleTapConfirmed(e: MotionEvent): Boolean {
                toggleControls() // afficher/masquer les contrôles
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                zoomToPoint(e.x, e.y) // zoom au point de contact
                return true
            }
        })
    }
}

Double tap à l'Instagram est un modèle UX populaire pour les applications sociales. Le double tap sur une photo déclenche une animation de like (icône de cœur). Il est implémenté via GestureDetector dans Android ou UITapGestureRecognizer avec numberOfTapsRequired=2 dans iOS. Pour l'animation, Core Animation est utilisé sur iOS et ObjectAnimator/AnimatorSet sur Android. Le temps de réponse du double tap doit être minimal — l'utilisateur s'attend à une animation instantanée après le deuxième tap.

Règles d'utilisation de Tap dans les interfaces

Human Interface Guidelines d'Apple et Material Design de Google ont des exigences spécifiques pour Tap. Taille minimale de la cible tactile : 44×44 pt pour iOS et 48×48 dp pour Android. Cela correspond à ~9 mm à l'écran — la taille du bout du doigt d'un adulte moyen. La distance entre les cibles tactiles doit être d'au moins 8 pt/dp pour éviter les faux taps.

Le retour visuel est obligatoire pour Tap. L'utilisateur doit voir que le toucher a été enregistré : changement de couleur, opacité, animation ripple ou surbrillance. Sans retour, l'utilisateur pourrait taper à nouveau, provoquant des actions indésirables. Dans iOS, l'animation standard de surbrillance tactile est un changement d'opacité à 0.3 avec une durée de 0.15 s. Dans Android — effet ripple Material se propageant depuis le point de contact. Ne retardez pas le retour visuel — l'utilisateur doit voir la réaction simultanément au toucher.