Textes, boutons, menu : un site qu'on utilise d'une seule main

Sur un téléphone, on lit vite, souvent d'une main, parfois en plein soleil. Un site agréable sur ordinateur peut devenir pénible sur un petit écran : texte minuscule, boutons trop proches, menu introuvable. Voici les règles simples qui font la différence.

Un texte qu'on lit sans zoomer

• Une taille confortable. Le texte principal doit se lire à bout de bras, sans pincer l'écran. Si vous devez zoomer, c'est trop petit.
• Un bon contraste. Texte foncé sur fond clair, ou clair sur fond foncé. Le gris pâle sur blanc, élégant sur un grand écran, devient illisible dehors. Pensez à vos clients qui consultent votre site sur un parking, en plein midi.
• Pas de texte sur une photo chargée. Un titre posé sur une photo de plage ou de plat coloré se lit mal. Si c'est nécessaire, il faut un fond qui assure le contraste.
• Des phrases et des paragraphes courts. Sur un petit écran, un bloc de dix lignes ressemble à un mur. Coupez, aérez, utilisez des listes.
• Une police simple. Les écritures manuscrites ou très fantaisie sont jolies pour un logo, pas pour lire des horaires.

Des boutons faits pour le pouce

Le doigt est bien moins précis qu'une souris. Pour éviter les erreurs :

• des boutons assez grands pour être touchés sans viser ;
• de l'espace entre deux liens pour ne pas toucher le voisin ;
• un texte clair sur le bouton : « Appeler », « Itinéraire », « Réserver une table », plutôt que « Cliquez ici » ou « En savoir plus » ;
• les actions importantes en évidence, avec une couleur qui ressort, et toujours la même pour la même action.

Pensez à la zone que le pouce atteint naturellement : le bas et le milieu de l'écran sont plus faciles d'accès que les coins du haut. C'est pourquoi beaucoup de sites placent un bouton d'appel fixe en bas de l'écran (voir le bouton Appeler).

Un menu simple

• Peu d'entrées : cinq ou six au maximum. Au-delà, regroupez.
• Des mots du quotidien : « La carte », « Nos soins », « Contact », plutôt qu'un jargon maison.
• Un menu facile à ouvrir et à refermer. L'icône à trois traits est connue de la plupart des gens, mais ajouter le mot « Menu » à côté aide ceux qui ne la reconnaissent pas.
• L'essentiel hors du menu : le téléphone et l'adresse ne doivent pas être cachés dans un sous-menu.

Les formulaires

Un formulaire sur téléphone se remplit au clavier tactile, ce qui est fastidieux. Alors :

• demandez le strict minimum : nom, téléphone, message ;
• utilisez le bon type de clavier : le clavier numérique s'affiche pour le téléphone, le clavier avec « @ » pour l'e-mail (votre prestataire sait le régler) ;
• affichez les erreurs clairement, à côté du champ concerné ;
• confirmez l'envoi par un message visible : « Merci, nous vous rappelons rapidement ».

Penser à tout le monde

Une partie de vos clients voit moins bien, a des gestes moins précis, ou grossit le texte de son téléphone dans les réglages. Un site bien construit supporte ces réglages sans que tout se superpose. Cela aide aussi les personnes âgées, nombreuses à utiliser un téléphone pour trouver un commerce ou un artisan. Pour un premier contrôle, testez votre site avec le texte agrandi dans les réglages de votre téléphone.

La vérification rapide

1. Lisez votre page d'accueil dehors, à la lumière du jour.
2. Utilisez le site d'une seule main pendant deux minutes.
3. Ouvrez et fermez le menu sans erreur.
4. Remplissez le formulaire de contact jusqu'au bout.

La méthode complète est détaillée dans tester son site sur téléphone en 10 minutes.

En résumé

• Un texte assez grand, bien contrasté, en paragraphes courts.
• Des boutons larges, espacés, avec des mots clairs.
• Un menu court, et le téléphone et l'adresse jamais cachés.
• Des formulaires réduits au minimum et testés au pouce.

Besoin d'un coup de main pour rendre votre site plus confortable sur téléphone ? Esteban DC accompagne les commerces de La Réunion : demandez à être rappelé.