Conseils pour la conception de sites adaptés aux interfaces tactiles

IEBlog Français

Blog de l'équipe de développement de Windows Internet Explorer

Conseils pour la conception de sites adaptés aux interfaces tactiles

  • Comments 0

Dans Windows 8 Consumer Preview, IE10 offre des expériences tactiles multipoints rapides et fluides pour la navigation sur le Web. La plupart des sites fonctionnent correctement avec les interfaces tactiles dans IE10, sans qu'il soit nécessaire d'y apporter des modifications. Dans ce billet, nous proposons quatre conseils simples qui vous permettent de proposer à vos clients une expérience tactile plus efficace sur votre site.

Nous avons déjà expliqué à quel point les nouveaux dispositifs de saisie et les écrans tactiles rendent le Web encore plus amusant, interactif et immersif. Nous avons également évoqué l'importance d'une expérience de navigation sans compromis dans IE10, qui permet aux sites Web de fonctionner parfaitement avec les interfaces tactiles.

Parmi les quatre conseils ci-dessous, les deux premiers visent à faire en sorte que les utilisateurs d'interfaces tactiles puissent accéder à l'intégralité des fonctionnalités de votre site. Les deux derniers sont plutôt destinés à faciliter la navigation sur votre site avec une interface tactile.

Ne masquez pas du contenu derrière un élément de survol

Une souris peut survoler du contenu (en passant le pointeur au-dessus) sans l'activer (c'est-à-dire sans cliquer dessus). En revanche, avec une interface tactile, un appui regroupe dans une seule et même action un survol et une activation. Par conséquent, les fonctionnalités qui nécessitent un survol sans activation ne fonctionnent pas pour les utilisateurs d'interfaces tactiles. Envisagez donc de configurer tous les comportements de sorte qu'ils répondent au clic (ou aux appuis).

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

    Les utilisateurs souhaitent pouvoir effectuer des mouvements de panoramique et de zoom sur les sites à l'aide de leurs interfaces tactiles. Par conséquent, le navigateur exploite par défaut les gestes tactiles, les pincements et les doubles appuis, et n'envoie pas d'événement pour ces interactions. En revanche, si votre site doit fournir des fonctionnalités spécifiques pour ces interactions, vous devez configurer IE10 de sorte qu'il fournisse uniquement le comportement par défaut souhaité.

    Lorsqu'un utilisateur touche un élément, la propriété CSS -ms-touch-action détermine le comportement par défaut fourni par IE10.

    -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;

    Le tableau ci-dessous décrit les cinq valeurs possibles.

    ValeurDescription
    autoLe navigateur détermine le comportement de l'élément. Il s'agit de la valeur par défaut de la propriété -ms-touch-action.
    noneAucun comportement par défaut n'est autorisé.
    manipulationSeuls les mouvements panoramiques, ainsi que les opérations de zoom par pincement et de navigation par balayage (Retour/Suivant) sont autorisés.
    double-tap-zoomSeul le zoom par double appui est autorisé.
    inheritL'élément hérite de la valeur -ms-touch-action de l'élément parent.

    Par exemple, une application de dessin peut utiliser le code suivant :

    canvas {

    -ms-touch-action: double-tap-zoom;

    }

    Dans cette configuration, l'utilisateur peut effectuer un double appui pour zoomer sur l'élément de dessin, alors qu'en faisant glisser un doigt sur l'élément de dessin, les événements seront directement envoyés à l'élément au lieu de faire défiler la page.

    Identifiez les types d'entrée à l'aide de formulaires HTML5

    IE10 prend désormais en charge les contrôles d'entrée HTML5, qui sont tous optimisés pour le tactile. Pour la saisie de texte, vous pouvez améliorer les expériences tactiles de vos utilisateurs en identifiant le type d'entrée précis, le cas échéant. Internet Explorer affiche un clavier tactile sur mesure pour ce type de saisie dans Windows 8 :

    <input type="email">

    Le clavier tactile contient des boutons @ et « .com » qui facilitent la saisie des adresses de messagerie.
    Le clavier tactile contient des boutons @ et « .com » qui facilitent la saisie des adresses de messagerie.

    <input type="tel">

    Le clavier tactile contient un pavé numérique qui facilite la saisie des numéros de téléphone.
    Le clavier tactile contient un pavé numérique qui facilite la saisie des numéros de téléphone.

    <input type="url">

    Le clavier tactile contient des boutons Barre oblique et « .com », qui facilitent la saisie des URL.
    Le clavier tactile contient des boutons Barre oblique et « .com », qui facilitent la saisie des URL.

    Schéma indiquant les largeurs relatives des doigts et la largeur moyenne, de 11 mmLaissez suffisamment de place pour les doigts des utilisateurs

    Pour mettre au point l'expérience tactile de Windows 8, nous avons réalisé des recherches extrêmement approfondies qui nous ont permis de dresser une liste de conseils utiles destinés aux développeurs. La largeur moyenne d'un doigt est de 11 mm. Plus les cibles tactiles sont grandes, plus le risque d'appui accidentel diminue.

    Dans l'idéal, une cible doit correspondre au moins à un carré de 11 mm (environ 40 pixels) entouré d'une bordure d'au moins 2 mm (environ 10 pixels).

    Taille de cible d'au moins 40 pixels
    Au moins 10 pixels entre les cibles

    Si vous souhaitez ajuster l'espacement uniquement pour les utilisateurs d'interfaces tactiles, utilisez la détection de fonctionnalité.

    Pour détecter l'utilisation d'une interface tactile, utilisez le code suivant :

    if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {

    // Supports multi-touch

    }

    Pour aller plus loin...

    Pour créer une expérience tactile exceptionnelle, bien d'autres possibilités s'offrent à vous. Vous pouvez par exemple choisir d'optimiser votre site pour le tactile en prenant en charge des interactions ou des mouvements multipoints personnalisés. Pour en savoir plus, consultez les liens suivants :

    Nous aborderons plus en détail ces méthodes sur ce blog dans de prochains billets. En respectant dès à présent ces conseils, vous êtes certain que vos sites fonctionneront parfaitement avec les interfaces tactiles dans IE10.

    — Jacob Rossi, chef de projet, Internet Explorer

    • Loading...