Créez une expérience utilisateur unique

Élaboration de la mise en page

• Pensez aux appareils tactiles : Pour le doigt humain, nous recommandons de choisir une zone d'interaction de 48 dp (pixels à densité indépendante) au minimum, avec au moins 8 dp entre chaque zone. Des zones trop petites, et les erreurs de clic qui en résultent, incitent généralement le mobinaute à aller voir ailleurs.
• Choisissez une police adaptée : la taille minimale de la police doit être de 12 pixels (toute police plus petite obligera l'utilisateur à plisser les yeux). Assurez-vous de choisir une police de caractères simple et facile à lire. Si possible, évitez d'utiliser du texte basé sur des images.
• Définissez une largeur appropriée : la plupart des utilisateurs sont habitués à faire défiler les pages de haut en bas, mais s'ils sont obligés de faire défiler la page latéralement, ils considéreront qu'il s'agit d'une mauvaise expérience utilisateur. Ces visiteurs penseront que votre site n'a pas été conçu pour être consulté sur un écran de petite taille.
• Évitez les survols avec la souris : sur un écran d'ordinateur, vous pouvez proposer aux visiteurs de consulter des contenus masqués en les survolant avec leur souris.  Cependant pour cela, il faut être muni d'une souris ! Sur les écrans tactiles des tablettes ou des smartphones, les utilisateurs ne peuvent pas effectuer un survol avec leur doigt comme ils le feraient avec une souris. Vous devez donc éviter cette option. Utilisez plutôt des boutons sur lesquels les utilisateurs peuvent appuyer pour afficher des menus plus détaillés.
• N'utilisez pas de fenêtres pop-up : elles sont tout aussi agaçantes sur les sites pour ordinateur que sur les sites mobiles. En outre, au lieu d'utiliser des annonces interstitielles pour inciter les mobinautes à télécharger votre application, intégrez l'invite dans votre site.
• Utilisez des boutons descriptifs : faites en sorte que les utilisateurs sachent clairement où ils seront redirigés s'ils cliquent sur un élément. Intitulez clairement vos boutons, puis utilisez des fils d'Ariane et des noms de catégorie précis (par exemple, "Étape 2 : Paiement") afin de faciliter la navigation.

Contenu :

• Ne submergez pas les utilisateurs : sur les mobiles, il vaut mieux privilégier la qualité que la quantité. Résistez à l'envie d'insérer chaque élément de votre page pour ordinateur dans une page pour mobile, en plus petit, mais tenez compte des points suivants.
• Personnalisez, sans tronquer : les utilisateurs de mobiles et de tablettes souhaitent bénéficier des mêmes fonctionnalités de base que celles que vous proposez aux utilisateurs d'ordinateurs, qu'il s'agisse de visionner des vidéos ou d'acheter des fournitures de bureau. Au lieu de réduire le contenu important, restructurez-le pour l'adapter aux écrans des mobiles.
• Ne masquez pas les actions clés : assurez-vous d'offrir aux utilisateurs un accès rapide à toutes les fonctions clés qu'ils s'attendent à trouver sur votre site. Si vous êtes un détaillant, cela signifie que vous devez mettre au premier plan la fonctionnalité de recherche de produits et le panier, ainsi que d'autres outils adaptés aux mobiles, tels qu'un outil de localisation de magasins. Incluez un lien vers votre site complet, pour les mobinautes qui préfèrent utiliser cette version.
• Vérifiez les fichiers multimédias : de nombreux appareils mobiles ne peuvent pas lire les vidéos au format Flash, par exemple. Assurez-vous que les fichiers multimédias inclus dans vos sites multi-écrans fonctionnent réellement sur les appareils auxquels ils sont destinés.
• Simplifiez le processus de paiement : il n'est pas facile de remplir de longs formulaires sur un mobile, ni de saisir une adresse complète ou d'autres données en plusieurs étapes via un clavier tactile. Afin d'augmenter vos taux de conversion, vous devez simplifier le processus de paiement, si cela est possible.

Rapidité :

Le mot d'ordre est simple : accélérez. Une vitesse de navigation accrue sur votre site permet d'améliorer l'expérience ressentie par les utilisateurs, en particulier lorsqu'ils sont en déplacements et lorsque les réseaux de données peuvent être lents.  En général, la rapidité fait augmenter le nombre d'interactions effectuées par les visiteurs, ainsi que le temps passé sur le site et le nombre de conversions. Non seulement, elle constitue un critère de classement pour la recherche Google, mais nous avons également noté que de nombreuses entreprises qui ont investi dans l'amélioration de la vitesse de chargement des pages ont bénéficié d'un effet positif direct sur leurs résultats financiers.

Voici trois erreurs courantes à éviter :

• Trop de demandes HTTP : les mobinautes peuvent être tentés d'effectuer les mêmes actions que les internautes, mais la puissance de traitement des mobiles est limitée. En outre, leur bande passante peut ne pas être fiable. Pour les aider à naviguer plus rapidement, diminuez le nombre d'éléments qui génèrent des demandes HTTP supplémentaires sur la page.
• Surcharge d'images : compte tenu de l'amélioration de la qualité de l'affichage sur les smartphones, vous pourriez être tenté de diffuser la plus grande image possible et de laisser l'appareil la réduire pour l'adapter à la taille de l'écran. C'est une erreur, car cela fait perdre du temps et diminue la puissance de traitement. Définissez des tailles d'image adaptées à chaque écran.
• Surcharge de fichiers : déterminez si les extraits de code JavaScript et les styles CSS sont utiles pour les mobinautes. Une quantité trop importante de code JavaScript ou CSS peut entraîner le ralentissement du chargement de la page. Lorsque cela est possible, réduisez et/ou compressez votre code, et envisagez de réorganiser l'intégralité de votre code CSS. Assurez-vous que les éléments sont mis en cache par le navigateur, pour que les visiteurs n'aient pas à les récupérer lors de chaque chargement de la page.

Pour plus d'informations et pour obtenir des outils vous permettant d'optimiser les performances de votre site, consultez la page Google intitulée "Make the Web Faster" : https://developers.google.com/speed/