Préparer votre site aux interactions tactiles

À compter de Windows 8, Internet Explorer permet de bénéficier d’expériences tactiles multipoints rapides et fluides sur le Web et gère par défaut les interactions tactiles de base, telles que le balayage pour les régions avec défilement, le zoom par double appui et par pincement, la sélection tactile et les menus contextuels d’appui prolongé. Ce guide fournit des conseils de conception et des suggestions de résolution de problèmes tactiles de manière à ce que les clients dotés d’appareils tactiles puissent utiliser votre site le plus efficacement possible.

Recommandations relatives à la conception de sites tactiles

Ne masquez pas le contenu derrière le pointage

La navigation tactile ne dispose d’aucune fonctionnalité équivalant au pointage du curseur sur un élément de page Web. Par conséquent, les actions ou les contenus activés par le biais du pointage sont potentiellement inaccessibles aux utilisateurs tactiles. Les sous-menus activés par pointage constituent un scénario courant illustrant le problème. Pour éviter ce problème, n’utilisez pas le pointage pour masquer du contenu avec lequel l’utilisateur peut interagir. Envisagez plutôt d’utiliser l’événement onclick pour afficher/masquer ce contenu :


<style type="text/css">
    #subMenu {
        display: none;
    }
    #subMenu.showSubMenu {
        display: block;
    }
</style>
...
<script>
    function toggleMenu() {
        var subMenu = document.getElementById("subMenu");
        subMenu.classList.toggle("showSubMenu");
    }
</script>
...
<div id="menu" onclick="toggleMenu()">
    <a>JavaScript Hover Menu</a>
    <div id="subMenu">
        <div class="subMenuItem"> 
            <a>Sub menu item 1</a>
        </div>
        <div class="subMenuItem">
            <a>Sub menu item 2</a>
        </div>
    </div>
</div>


Internet Explorer 10 ajoute également un nouveau comportement à la propriété aria-haspopup existante pour simuler le pointage sur des éléments de page ayant un contenu interactif masqué :


<style type="text/css">
    #menu .cssSubMenu {
        display: none;
    }
    #menu:hover .cssSubMenu {
        display: block;
    }
</style>
...
<div id="menu">
    <a aria-haspopup="true">CSS Hover Menu</a>
    <div class="cssSubMenu">
        <a>Sub menu item 1</a>
    </div>
    <div class="cssSubMenu">
        <a>Sub menu item 2</a>
    </div>
    <div class="cssSubMenu">
        <a class="cssSubLink">Sub menu item 3</a>
    </div>
</div>


Configurer le navigateur pour les comportements tactiles par défaut qui fonctionnent correctement pour votre site

Les utilisateurs s’attendent à pouvoir effectuer des défilements panoramiques et des zooms sur les sites par le biais d’interactions tactiles. Le navigateur exploite donc par défaut les déplacements tactiles, les pincements et les doubles appuis et ne transmet pas d’événements pour ces interactions. Si votre site doit fournir des fonctionnalités spécifiques pour ces interactions et si vous devez écouter les événements de pointeur qui les constituent, vous pouvez configurer IE de manière à offrir uniquement le comportement que vous voulez, le cas échéant. Vous pouvez aussi désactiver d’autres fonctions par défaut de gestion des interactions tactiles dans IE, comme la sélection de texte et l’invocation des menus contextuels. Pour plus d’informations, voir Au-delà des notions de base.

Utiliser des régions avec défilement pour implémenter des expériences de défilement panoramique

Les développeurs implémentent parfois des expériences panoramiques à l’aide de scripts et d’événements imitant le défilement panoramique. Toutefois, cela peut générer des effets saccadés avec un impact négatif sur les performances. En revanche, si vous utilisez le débordement pour créer des régions avec défilement, Internet Explorer 10 appliquera une accélération matérielle au défilement panoramique et au zoom, créant ainsi une expérience tactile répondant exactement aux glissements de votre doigt sur l’écran. De plus, Internet Explorer 10 vous permet de personnaliser le défilement panoramique et le zoom. Par exemple, vous avez la possibilité de créer du contenu paginé pouvant être feuilleté par les utilisateurs. Vous pouvez ensuite définir des points d’ancrage dans CSS pour identifier les limites des pages auxquelles Internet Explorer 10 va ancrer les mouvements panoramiques des utilisateurs :


    <style>
        #imagePanner {
            -ms-scroll-snap-type: mandatory;
            -ms-scroll-snap-points-x: snapInterval(0%, 100%);
            overflow-x: auto;
            overflow-y: hidden;
            width: 480px;
            height: 270px;
        }
        .imageRow {
            width: 2400px;
            height: 270px;
        }
        img {
            width: 480px;
            height: 270px;
        }
    </style><div id="imagePanner">
        <div class="imageRow">
            <img alt="Cliff" src="images/Cliff.jpg" />
            <img alt="Grapes" src="images/Grapes.jpg" />
            <img alt="Rainier" src="images/Rainier.jpg" />
            <img alt="Sunset" src="images/Sunset.jpg" />
            <img alt="Valley" src="images/Valley.jpg" />
        </div>
    </div>


Pour plus d’informations sur l’utilisation des points d’ancrage, consultez les exemples de défilement, de panoramique et de zoom à l’aide d’une entrée tactile.

Identifier les types d’entrées à l’aide de formulaires HTML5

Internet Explorer 10 introduit la prise en charge des contrôles d’entrée HTML5 qui sont tous optimisés pour les entrées tactiles. Pour la saisie de texte, vous pouvez améliorer encore davantage les expériences tactiles des utilisateurs en identifiant le type d’entrée spécifique, le cas échéant. Internet Explorer présentera une disposition de clavier tactile adaptée à ce type d’entrée dans Windows 8.

Le clavier tactile comporte des boutons @ et .com pour la saisie des adresses de messagerie :


<input type="email">

Clavier visuel de Windows 8 pour la saisie des adresses de messagerie

Le clavier tactile comporte un pavé numérique pour la saisie des numéros de téléphone :


<input type="tel">

Clavier visuel de Windows 8 pour la saisie des numéros de téléphone

Le clavier tactile comporte une barre oblique et un bouton .com pour la saisie des URL :


<input type="url">

Clavier visuel de Windows 8 pour la saisie des URL

Offrir suffisamment d’espace pour les doigts des utilisateurs

La conception de l’expérience tactile de Windows 8 nous a amené à effectuer de nombreuses recherches nous permettant de formuler quelques instructions de conception de l’interaction tactile utiles. La largeur moyenne d’un doigt est de 11 mm. Si les cibles sur lesquels le doigt appuie sont grandes, le pourcentage d’appuis manqués décroît rapidement.

Idéalement, prévoyez des cibles d’au moins 7 mm de diamètre (environ 40 pixels) et une marge d’au moins 2 mm (environ 10 pixels) autour de chaque cible.

Si vous ne souhaitez adapter l’espacement que pour les utilisateurs dotés d’appareils tactiles, utilisez la détection de fonctionnalité. Pour savoir si un utilisateur dispose d’un appareil tactile, utilisez :


if (navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}


Contrôle de l’expérience tactile par défaut

Dans Windows 8 et versions ultérieures, IE gère par défaut les interactions tactiles courantes, notamment celles-ci :

  • Panoramique pour les régions avec défilement
  • Zoom par pincement
  • Menus contextuels d’appui prolongé
  • Sélection de texte
  • Pointage (ajouté dans IE11)
  • Glisser-déplacer (ajouté dans IE11)

Ces fonctionnalités se déclenchent automatiquement pour que les sites et les applications offrent une expérience tactile excellente par défaut. Cependant, il peut être nécessaire de les désactiver selon vos besoins.

Panoramique et zoom

Les événements de pointeur ne se déclencheront pas lors d’un panoramique ou d’un zoom. Vous pouvez utiliser la propriété CSS touch-action pour contrôler ou désactiver le comportement par défaut du navigateur.

Valeur de touch-actionDescription
autoValeur initiale. Le comportement de l’élément est déterminé par le navigateur.
noneL’élément n’autorise aucun comportement tactile par défaut.
pan-xL’élément autorise les défilements panoramiques tactiles sur l’axe horizontal.
pan-yL’élément autorise les défilements panoramiques tactiles sur l’axe vertical.
pinch-zoomL’élément autorise les zooms par pincement.
manipulationL’élément autorise les défilements panoramiques tactiles et les zooms par pincement. (Raccourci équivalent à « pan-x pan-y pinch-zoom ».)
double-tap-zoomL’élément autorise les zooms par double appui.
cross-slide-x L’élément autorise un glissement transversal le long de l’axe horizontal.
cross-slide-yL’élément autorise un glissement transversal le long de l’axe vertical.

 

Par exemple, une application de dessin peut utiliser :


canvas {
    touch-action: double-tap-zoom;
}


Avec cette configuration, l’utilisateur peut appuyer deux fois pour zoomer sur l’élément de zone de dessin, mais s’il fait glisser un doigt sur l’élément, les événements sont envoyés à cet élément sans effectuer de défilement panoramique dans la page.

Sélection d’entrée tactile

Vous pouvez sélectionner un mot avec le doigt dans Internet Explorer 10 en appuyant sur le texte ou juste à côté. Si vous voulez désactiver la sélection de texte, procédez de la même manière que dans Windows Internet Explorer 9.


element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
 // Disables selection


Menus contextuels

Le fait d’appuyer un certain temps sur des éléments dans Windows Internet Explorer affiche un élément visuel qui indique qu’un menu contextuel va apparaître. Si vous levez votre doigt, le menu contextuel s’affiche. Si vous éloignez votre doigt, le visuel ne s’affiche pas et le menu contextuel n’apparaît pas.

Si vous souhaitez utiliser votre propre menu contextuel, vous pouvez le faire avec Internet Explorer 10. Il vous suffit d’appeler event.preventDefault sur l’événement contextmenu et d’exécuter du code pour afficher votre menu contextuel. Internet Explorer affiche automatiquement le menu contextuel par pression du doigt et fournit le même visuel indicatif en maintenant la pression. Cet exemple utilise un événement contextmenu pour déterminer le moment où l’utilisateur a appuyé de manière prolongée sur un élément, puis a cessé de le faire. Quand l’utilisateur lève son doigt, l’événement contextmenu se déclenche et un message s’affiche.


  <div id="touchspot">Press and hold here</div>

  <script>
    var elm = document.getElementById("touchspot");

    elm.addEventListener("contextmenu", function (e) {
      e.target.innerHTML = "Show a custom menu instead of the default context menu";
      e.preventDefault();    // Disables system menu
    }, false);

  </script>

Si vous ne voulez pas afficher du tout un menu contextuel, par exemple pour un jeu qui nécessite que l’utilisateur appuie sur un élément pendant un certain temps, vous devez alors désactiver le menu contextuel et le visuel indicatif par défaut. Pour ce faire, il vous suffit d’annuler deux événements.



 // Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
 

Au-delà des notions de base

Quand vous êtes prêt à optimiser votre site pour les interactions tactiles tout en prenant en charge le clavier et la souris, passez en revue les fonctionnalités IE suivantes pour la gestion adaptative des entrées :

Événements de pointeur

Les événements de pointeur sont fondés sur le même modèle que les événements de souris standard, à la différence qu’ils appliquent abstraitement le concept de pointeur à toutes les modalités d’entrées utilisateur, y compris la souris, l’interaction tactile et le stylet.

Événements de mouvement

Les événements de mouvement, en association avec les événements de pointeur, permettent à votre code de reconnaître des interactions plus complexes (comme le pincement, la rotation, le balayage et le glissement) et d’y répondre.

Événements de manipulation

Si vous souhaitez utiliser un système de navigation plat dans votre site ou votre application du Windows Store en JavaScript, dans lequel l’utilisateur fait un panoramique sur une seule page et/ou navigue entre les pages qui résident au même niveau hiérarchique du site, vous pouvez écouter des événements de manipulation. Cela vous permet d’implémenter le modèle d’interaction utilisateur par glisser transversal pour la sélection, l’activation et le déplacement des éléments de menu.

Propriétés CSS pour le défilement et le zoom par entrée tactile et avec la méthode msZoomTo

Avec les propriétés CSS de contrôle de la gestion des entrées tactiles, vous pouvez définir des points d’ancrage de défilement et de mouvement panoramique, définir des limites de défilement et de zoom, contrôler le chaînage de zoom d’un élément enfant à l’élément ancêtre, et désactiver les rails de défilement pour autoriser le défilement panoramique tactile de structure libre dans n’importe quelle direction. La méthode msZoomTo fait défiler et/ou zoome un élément en fonction de ses coordonnées spécifiées en utilisant une animation.

Résolution des problèmes d’interactions tactiles

Que dois-je faire pour que mes menus activés par pointage fonctionnent pour les entrées tactiles ?

Une souris peut pointer sur du contenu sans l’activer (par le biais d’un clic sur ce contenu). Avec les entrées tactiles, quand vous appuyez sur un élément, cela correspond à pointer sur cet élément et à l’activer en une seule action. Par conséquent, les fonctionnalités qui nécessitent de pointer sur un élément sans l’activer ne seront pas accessibles aux utilisateurs tactiles. Pensez à faire de tous les comportements des comportements de clic (ou d’appui) en utilisant l’événement onclick pour afficher ou masquer le contenu. Pour plus d’informations, consultez les recommandations de conception Ne masquez pas le contenu derrière le pointage.

Comment puis-je offrir des expériences personnalisées pour le double appui ?

IE gère par défaut les interactions tactiles de base, telles que les panoramiques pour les régions avec défilement, ainsi que le zoom par double appui et par pincement. Vous pouvez utiliser la propriété CSS touch-action pour remplacer ces valeurs par défaut et spécifier les comportements d’actions tactiles autorisés pour votre site. Pour appliquer à un événement de double appui sur un élément donné le comportement que vous souhaitez, désactivez le zoom par double appui par défaut en omettant simplement cette valeur dans la règle. Par exemple, la déclaration de style suivante autorise le défilement panoramique et le zoom par pincement, mais désactive le zoom par double appui :


touch-action: manipulation;

Comment puis-je détecter un déplacement avec interaction tactile ?

Internet Explorer 11 introduit la prise en charge native du glisser-déplacer HTML5 tactile. Pour détecter une action de déplacement sur votre site avec Internet Explorer 10, écoutez les événements de mouvement d’appui prolongé (MSGestureHold) et de balayage (MSGestureStart, MSGestureChange, MSGestureEnd).

Pourquoi ne vois-je pas les déplacements du pointeur pour les interactions tactiles ?

Étant donné qu’IE gère par défaut les interactions tactiles de base, il exploite les déplacements tactiles, les pincements et les doubles appuis par défaut et ne transmet pas d’événement pour ces interactions. Si votre site doit fournir des fonctionnalités spécifiques pour ces interactions et/ou écouter les événements de pointeur qui les constituent, vous pouvez désactiver la gestion par défaut de comportements tactiles spécifiques à l’aide de la propriété touch-action. Pour plus d’informations, voir Configurer le navigateur pour les comportements tactiles par défaut qui fonctionnent correctement pour votre site.

Rubriques connexes

Concevoir des sites adaptatifs prenant en charge les différents périphériques Windows 8

 

 

Afficher:
© 2014 Microsoft