Un site adapté aux mobiles d’accord, et pour les com’s ?

Les formulaires HTML sont un véritable défi pour les développeurs Web, qui souhaitent adapter leurs sites, leurs blogs aux téléphones portables. La solution idéale n’existe malheureusement pas, mais les conséquences sont très heureuses lorsqu’on réussit à trouver le bon compromis…

La pression que met aujourd’hui le moteur de recherches le plus visité au monde sur les administrateurs de sites Web et de blogs n’est pas sans une arrière-pensée à peine voilée. Si en effet, le classement des pages Google Search évolue pour prendre en compte la compatibilité mobile à partir du 21 avril, c’est d’abord parce que Big Brother s’est rendu compte que 60% des recherches sur Internet sont effectuées depuis un téléphone mobile ou une tablette. Bingo pour tous ceux qui ont déjà optimisé leur vitrine sur le Web au profit des mobinautes… et tant pis pour les autres ! Comparez les proportions d’utilisateurs par catégorie d’appareil sur le compte Analytics associé à votre blog, et vous constaterez sans doute que les possesseurs de téléphone portable ont beaucoup augmenté :

La part des internautes équipés d’un mobile ou d’une tablette visitant ce blog de divertissement pour adultes dépasse maintenant les 30%

Si vous êtes également inscrit sur les Outils Google pour Webmasters, ne négligez pas de suivre les pistes offertes par Google pour améliorer votre rendu sur téléphone mobile. Dans le cas d’un blog vous pourrez y trouver un grand nombre d’informations qui permettront d’optimiser votre blog et le nombre de conversions obtenues, car il faut bien se rendre compte de la difficulté de faire passer du temps dessus à un mobinaute qui ne va pas du réagir de la même façon qu’un internaute ! 2 aspects notamment semblent bloquer la navigation sur un site Web depuis un téléphone portable :

1. La lisibilité des textes ;
2. Remplir un formulaire.

Préférer une police de caractères plus grande :

Sur un téléphone mobile, le nombre de pixels est considérablement réduit par rapport à un écran d’ordinateur. Une simple multiplication permet de s’en rendre compte : 1024×768 > 640×960 (+/- 80%). Les textes semblent par voie de conséquence tout petits, et d’autant plus par rapport à d’autres éléments qui présentent moins d’intérêt dans le cas du blogging, que pour un autre type de site Web. Une solution consiste évidemment à privilégier le texte en augmentant sa taille, mais contrairement à ce qu’on va faire de façon intuitive et logique, il faut le faire en proportion inverse de celle de l’écran. Le bénéfice en sera d’autant plus important, qu’il va permettre au visiteur de passer plus facilement à la deuxième étape, qui est commenter votre article de blog qu’il vient de lire (mais sans plus s’abîmer les yeux).

La part des internautes visitant ce blog d’information en vidéo avec un mobile ou une tablette atteint presque les 40%

Un formulaire de commentaire facile à remplir ?

Dans la mise en place du responsive design, on prend d’abord en compte l’adaptation des différents éléments HTML aux différentes taille d’écran. Mais s’occupe rarement de l’essentiel, qui est l’ergonomie d’une page et d’un site Web, ce qui a forcément des conséquences négatives, en termes de taux de rebond et d’absence d’interaction avec l’utilisateur (et j’en sais quelque chose). Or, pour avoir des commentaires sur son blog, et indiquer ensuite un tunnel de conversion cela ne coule tellement pas de source que ce n’est généralement pas prévu :

Lors de la conception de votre site, gardez à l’esprit que ce dernier doit permettre au client d’effectuer ses tâches habituelles en toute simplicité. Cela va de la conception de la tâche à la réalisation de cette dernière, en passant par la visite de votre site.

La principale difficulté pour obtenir un commentaire sur son blog, depuis un téléphone mobile, c’est qu’il existe 3 champs de formulaire à remplir, et encore très peu d’écrans tactiles réellement adaptés à la saisie. Pour les appareils les plus récents, des progrès importants ont été réalisés, mais on doit toujours développer son blog en responsive design au niveau le plus bas, pour toucher le plus grand nombre d’utilisateurs. Adieu donc veaux, vaches, cochons, et toutes ces applications attractives qui se terminent en UI !

Des trucs pour augmenter son taux de conversion :

Mais tout n’est pas négatif, même si le défi technique est plus important à relever que par le passé, car il faut sans cesse trouver un bon compromis à toutes les tailles d’écran possible et imaginables. Les effets ont cependant de quoi donner du cœur à l’ouvrage, car muni d’un mobile l’utilisateur est nettement plus captif qu’au moment où on le retrouve sur son ordinateur ! Google propose notamment de privilégier l’interaction directe en utilisant à bon escient le « click to call » :

NIST Telephone Time-of-Day Service <a href="tel:+1-303-499-7111">+1 (303) 499-7111</a>

En utilisant son numéro de téléphone comme lien, un blog de fournisseur de services va trouver avantage à la difficulté d’obtenir des commentaires en proposant directement un service ou un devis à l’utilisateur, et avoir du même coup l’opportunité de nouer une relation plus directe avec lui !