Blog Metlivi

Comment associer une action de toucher à un retour visuel ou haptique clair

Pour un bouton d'application mobile, offrez au toucher une réponse visible immédiate, puis affichez le résultat une fois l'action terminée. N'ajoutez un bref retour haptique que lorsqu'il renforce ce même événement et correspond à l'importance de l'action. Cette séquence aide les utilisateurs à distinguer « l'application a pris en compte mon toucher » de « la tâche a réussi », en particulier lorsqu'une réponse prend du temps. Les étapes ci-dessous s'appliquent à un bouton ou à une commande unique ; les spécificités des plateformes variant, utilisez les modèles d'interaction standard du système d'exploitation lorsqu'ils sont disponibles.

15 octobre 20266 min de lecturePar Metlivi Editorial Team
Section 1

Commencez par déterminer ce que le retour doit transmettre

Un toucher peut entraîner plusieurs événements différents : l'activation d'une commande, la modification d'un paramètre, le lancement d'une requête ou la réussite/l'échec d'une requête. Déterminez quel événement chaque signal représente avant de choisir une animation ou une vibration. Un signal d'appui confirme la saisie ; une modification du libellé ou de l'état sélectionné confirme un changement d'état local ; un indicateur de progression signale qu'une opération est en cours ; un message de réussite confirme la finalisation.

Distinguez bien ces significations. Si un bouton s'assombrit brièvement au toucher, cela ne prouve en aucun cas qu'une requête réseau est terminée. Si l'envoi peut prendre du temps, conservez un état de progression clair jusqu'à ce que l'application connaisse le résultat. Apple recommande d'afficher un indicateur d'activité dans un bouton lorsqu'une action ne s'exécute pas instantanément, et suggère de modifier le libellé pour clarifier ce qui se passe. Directives d'Apple sur les boutons

Section 2

Construisez une séquence d'états simple

Considérez le retour comme une séquence liée à l'état réel de la commande, plutôt que comme un effet unique déclenché à chaque fois que l'on touche le bouton. Une base de référence utile est la suivante :

  1. Prêt : Affichez l'action avec un libellé ou un symbole familier qui en explicite clairement le but.
  2. Enfoncé : Fournissez un état d'appui visuel immédiat, comme un léger changement de remplissage, d'échelle ou de surbrillance.
  3. En cours : Si la finalisation est différée, affichez la progression et empêchez les envois accidentels en double lorsque cela est approprié pour l'action.
  4. Terminé ou échoué : Mettez à jour l'interface avec le résultat réel. Pour un interrupteur, affichez son nouvel état sélectionné ; pour un envoi, fournissez un statut de réussite ou d'erreur concis.

Apple indique que les boutons personnalisés doivent toujours comporter un état d'appui, car sans cela, ils peuvent sembler manquer de réactivité. Ses directives plus générales sur les retours recommandent d'adapter la transmission à l'importance de l'information et de rendre le statut accessible à proximité de l'élément qu'il décrit. Directives d'Apple sur les boutons et directives sur les retours

Section 3

Choisissez un signal visuel qui reste compréhensible

Rendez l'état enfoncé visible tant que le doigt est sur la commande. Une légère modification de couleur ou d'opacité, un bref changement d'échelle ou une surbrillance peuvent convenir, à condition que la commande demeure reconnaissable et que son libellé reste lisible. N'utilisez pas la couleur comme seul moyen de communiquer le résultat : associez-la à un changement d'état, à du texte, à une icône ou à une autre distinction visible qui explique ce qui s'est passé.

Pour un interrupteur, l'état sélectionné doit persister après le toucher ; un simple effet d'ondulation temporaire ne permet pas de savoir si le paramètre est activé. Pour une action ponctuelle telle que « Enregistrer », le bouton peut d'abord afficher son état d'appui, puis l'application peut afficher un état ou un statut enregistré. Si une tâche échoue, expliquez l'échec à proximité de la commande concernée et indiquez clairement l'action suivante disponible. La présentation exacte dépend de l'application et de la plateforme, mais le signal doit refléter l'état que l'application peut vérifier.

Section 4

Déterminez si un retour haptique apporte une information utile

Les retours haptiques peuvent renforcer un événement distinct, tel que l'appui sur un bouton ou un changement d'état confirmé. Ils sont facultatifs : la réponse visuelle doit toujours rester compréhensible si l'appareil est en mode silencieux, si les retours haptiques sont désactivés ou si l'utilisateur ne ressent pas l'effet. Les recommandations d'Android préconisent d'utiliser les retours haptiques avec parcimonie, de veiller à leur cohérence pour des interactions similaires et de les faire correspondre à l'expérience visuelle ou audio. Elles conseillent également de préférer l'absence de retour haptique à un effet tactile qui vibre excessivement. Principes de conception haptique d'Android

Un choix pragmatique consiste à utiliser un signal léger et bref pour une confirmation significative lorsque la plateforme propose un effet standard approprié. Évitez de faire vibrer l'appareil pour chaque toucher de faible importance, lors d'un défilement répété ou pour un événement sans modification visuelle correspondante. Si l'événement est important, veillez à ce que le statut visuel porte le sens ; ne comptez pas sur une vibration pour distinguer le succès d'un échec.

Section 5

Faites correspondre le signal au moment qu'il représente

Une réponse d'appui intervient au moment du toucher ; une réponse de réussite intervient une fois la réussite avérée. Pour une action qui s'exécute immédiatement, ces moments peuvent être très rapprochés. Pour un enregistrement ou un envoi à distance, ils peuvent être séparés par une attente perceptible. Déclencher un retour haptique de réussite dès le contact du doigt reviendrait à annoncer la finalisation avant même que l'application ne l'ait confirmée.

Sur Android, l'approche recommandée View.performHapticFeedback utilise des constantes orientées action, respecte les paramètres système de retour tactile et ne nécessite pas l'autorisation VIBRATE. La plateforme fournit un comportement de repli pour ces constantes si nécessaire. Les effets de vibration plus personnalisés impliquent des considérations de prise en charge et de configuration différentes ; privilégiez donc l'approche standard orientée action pour les commandes ordinaires. Guide d'implémentation du retour haptique sur Android

Section 6

Gardez à l'esprit le comportement de la plateforme et la fréquence

Utilisez les commandes intégrées dès lors qu'elles fournissent déjà le retour attendu. Apple souligne que les commandes standard telles que les commutateurs, les curseurs et les sélecteurs peuvent émettre des retours haptiques système sur les modèles d'iPhone compatibles. Ajouter un second effet personnalisé par-dessus risque de doubler le signal ; vérifiez donc le comportement natif de la commande avant de superposer un autre signal. Directives d'Apple sur l'haptique

La fréquence a également son importance. Un modèle de retour qui semble clair pour l'envoi occasionnel d'un formulaire peut devenir distrayant s'il est associé à un bouton fréquemment utilisé. Conservez la même signification pour des actions équivalentes et réservez les signaux plus marqués ou plus perceptibles aux événements qui exigent une plus grande attention. Android recommande spécifiquement d'adapter l'intensité haptique à la fois à l'importance d'un événement et à sa fréquence d'apparition. Principes de conception haptique d'Android

Section 7

Vérifiez l'interaction avant la mise en production

Testez la séquence complète sur les appareils et systèmes d'exploitation pris en charge par l'application. Touchez une fois et confirmez que l'état enfoncé apparaît rapidement ; vérifiez ensuite que la progression reste visible pendant un délai éventuel et que la réussite ou l'échec ne s'affiche qu'une fois le résultat connu. Essayez un second toucher rapide et confirmez que l'interface ne génère pas de retour en double déroutant ni d'actions répétées involontaires.

Répétez la vérification avec le retour tactile du système désactivé, ainsi qu'avec la fonctionnalité haptique de l'appareil indisponible ou non prise en charge. Les états visuels doivent toujours communiquer l'action et son résultat. Comparez les actions fréquentes aux actions occasionnelles, et supprimez les effets qui semblent parasites, désynchronisés ou déconnectés d'un changement visible. Pour le retour de vue standard d'Android, le paramètre système est respecté par défaut ; les approches personnalisées peuvent nécessiter des vérifications supplémentaires de compatibilité et de repli. Guide du retour haptique sur Android

Une association claire repose sur une logique simple : montrer que le toucher a été pris en compte, communiquer toute attente et confirmer le résultat lorsqu'il est effectif. Laissez un retour haptique renforcer ce même signal lorsque cela est approprié, tout en veillant à ce que l'interface visuelle se suffise à elle-même.

Section 8

Sources

À lire aussi

Continuer sur ce thème