25 bonnes pratiques de conception d’un site mobile par Google

Si vous lisez régulièrement ce blog, alors vous savez que j’ai toujours été un grand défenseur des sites web mobiles vis-à-vis des applications mobiles. Pourtant j’ai parfois l’impression d’être à contre-courant face à une profession qui ne jure que par les applications mobiles, iOS de surcroit ! Bref, tout ça pour dire que si vous cherchez des conseils pour concevoir des interfaces mobiles, tout ce que vous risquez de trouver ne concerne que les applications et pas les sites web mobiles (Pour bien démarrer dans la conception d’interfaces mobiles).

Certes, vous pourriez me dire que les grands principes de conception sont les mêmes quelque soit la technologie employée, mais ça reste des grands principes. Entendons-nous bien : je ne suis pas en train de critiquer, simplement de constater que ces principes de conception s’appliquent plus facilement à des applications qu’à des sites web mobiles (cf. les Android Design Principles). Mais cela n’enlève rien à la valeur des conseils prodigués. Je vous recommande d’ailleurs la très bonne conférence de la Android Design Team donnée l’année dernière lors de Google I/O :

Dernièrement la situation a changé, car le marché commence à mieux appréhender l’importance d’un site mobile. Du coup, il est possible de trouver de plus en plus de ressources sur ce sujet : Meilleures pratiques de conception pour vos sites web mobiles.

Le mois denier Google a publié pour notre plus grand bonheur les résultats d’une vaste analyse sur l’utilisabilité des sites web mobiles réalisée avec le cabinet AnswerLab. Pas moins de 129 H d’observations ont été nécessaires pour identifier les bonnes pratiques qui sont résumées dans ce document : Principles of Mobile Site Design: Delight Users and Drive Conversions.

Ce document, téléchargeable gratuitement, nous livre une série de 25 bonnes pratiques réparties en 5 catégories (Navigation, Recherche, Transformation, Formulaires et Mise en page) :

• Placez des boutons d’action en haut et au centre de l’écran ;
• Réduisez la taille des menus ;
• Facilitez le retour à la page d’accueil ;
• Ne laissez pas les publicités perturber l’expérience ;
• Mettez en évidence le moteur de recherche ;
• Assurez-vous de la pertinence des résultats de recherche ;
• Fournissez des options de filtre et de tri ;
• Guidez les utilisateurs vers des résultats simplifiés ;
• Laissez la possibilité aux utilisateurs de naviguer librement ;
• Donnez la possibilité de faire des achats en mode invité ;
• Utilisez les informations dont vous disposez déjà (notamment pour les formulaires) ;
• Prévoyez une fonction click-to-call pour les tâches complexes (comme solution de repli) ;
• Facilitez la poursuite d’une tâche sur un autre terminal (ordinateur ou autre) ;
• Simplifier la saisie en utilisant les bons claviers virtuels (ex : pavé numérique pour la saisie d’un code postal) ;
• Choisissez le type de champ le mieux adapté (pour cela, il faut tester) ;
• Privilégiez un calendrier visuel (plutôt que trois menus déroulants) ;
• Réduisez les risques d’erreur avec de la validation à la volée ;
• Optimisez la mise en forme de vos formulaires ;
• Optimisez l’intégralité de votre site pour les smarpthones (pas simplement le coeur de page) ;
• Ne forcez pas les utilisateurs à zoomer ;
• Fournissez des images qui peuvent s’agrandir ;
• Indiquez aux utilisateurs quelle est la meilleure orientation (horizontale ou verticale) ;
• Assurez-vous que tous les éléments essentiels de votre page s’affichent dans le premier écran ;
• Évitez les liens du type “Accéder au site complet” (plutôt “Accéder à la version PC“) ;
• Expliquer pourquoi vous souhaitez utiliser la fonction de géolocalisation.

Comme vous pouvez le constater, tous ces conseils relèvent avant tout du bon sens, mais ça fait toujours plaisir d’avoir une liste pour bien les garder en tête et surtout d’avoir des exemples concrets pour convaincre le reste de l’équipe.

En complément de ce document, je vous recommande également un autre livret blanc de Google publié l’année dernière (Building Websites for the Multi-Screen Consumer), un article équivalent sur les erreurs à éviter (The top 10 mobile design mistakes, and how to avoid them) et cette très bonne liste fournie par Moz : Mobile Site Audit Checklist.