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.
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).
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
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
Le tableau ci-dessous décrit les cinq valeurs possibles.
auto
none
manipulation
double-tap-zoom
inherit
Par exemple, une application de dessin peut utiliser le code suivant :
canvas { -ms-touch-action: double-tap-zoom; }
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.
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.
<input type="tel">
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.
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).
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 }
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
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