Site de refuge sur mobile : faciliter la lecture et les démarches

Sur la photo d’un chien, le bouton « Contacter le refuge » semble facile à trouver depuis un ordinateur. Sur téléphone, s’il est étroit et collé au bouton « Partager », un doigt peut vite toucher le mauvais. Agrandir la zone tactile et séparer les deux actions sera plus utile que de changer la couleur de fond.

Un site de refuge ou un blog animalier se consulte aussi avec une main occupée par une laisse, dans les transports ou sur une connexion irrégulière. Parfois, on veut simplement retrouver une adresse sans chercher longtemps. La version mobile ne peut donc pas être une page d’ordinateur réduite : elle doit garder l’essentiel lisible et facile à trouver, même quand l’attention manque.

Partir des tâches que la personne doit accomplir

Avant de déplacer des blocs, demandez-vous ce que l’on vient faire sur chaque page. Sur un article consacré à l’accueil d’un chien, on veut lire tranquillement et retrouver un passage. Sur une fiche d’adoption, il faut pouvoir vérifier les informations pratiques, comprendre la démarche et joindre le refuge. Sur une page de garde, les horaires, la zone desservie et les coordonnées passent en premier.

Cette différence évite de traiter toutes les pages comme de petites vitrines. Un grand bandeau décoratif peut repousser l’information utile bien après le premier écran. À l’inverse, répéter « Adopter maintenant » avant même d’expliquer les conditions d’accueil met une pression inutile. Mieux vaut une action principale clairement nommée, proposée une fois les renseignements nécessaires à la décision connus.

Établir un ordre de lecture simple

Sur une fiche d’adoption, on peut présenter d’abord le nom et le portrait de l’animal, puis les éléments confirmés par le refuge, ses besoins connus, les conditions de rencontre et enfin le contact. Ce qui reste incertain doit être indiqué sans ambiguïté. Si la cohabitation avec des chats n’a pas été évaluée, un pictogramme rassurant ne doit pas laisser croire le contraire.

Regardez aussi le premier écran, avant tout défilement. Il n’a pas à contenir toute la fiche, mais doit permettre de comprendre où l’on est et de poursuivre la lecture. « Rencontrer Oslo, chien adulte » est plus clair qu’un simple « Découvrez-le ».

Garder un texte confortable à lire

Premier test : peut-on lire un paragraphe sans zoomer ni tourner le téléphone ? Des caractères trop petits ou serrés, comme un gris pâle sur fond blanc, fatiguent vite. Choisissez une police nette, un contraste suffisant et un interligne qui permette de suivre les lignes. Ne fixez pas la hauteur des blocs : si quelqu’un agrandit le texte dans les réglages de son appareil, le contenu doit pouvoir s’étendre sans être coupé.

Des paragraphes assez courts aident à avancer dans la lecture, sans qu’il faille isoler chaque phrase. Gardez les listes pour les étapes, les critères ou les pièces à préparer. Pour parler des premiers contacts avec un animal, quelques paragraphes nuancés seront souvent plus utiles qu’une suite d’ordres brefs. Des sous-titres précis permettent aussi de retrouver les modalités d’une visite sans relire toute la page.

La colonne de texte doit suivre la largeur de l’écran, sans défilement horizontal. Vérifiez notamment les intitulés longs, les adresses et les tableaux. Si l’on doit faire glisser un tableau de tarifs de gauche à droite pour comprendre chaque ligne, des blocs associant un intitulé à sa valeur seront plus faciles à lire. Rétrécir toute la page pour faire tenir le tableau rendrait le reste du texte minuscule.

Rendre les gestes faciles, même d’une seule main

Un lien dans un paragraphe, une case à cocher et un bouton d’envoi ne demandent pas la même précision. Donnez aux actions fréquentes une surface tactile suffisante et de l’espace entre les commandes. Soyez particulièrement attentif aux choix qui n’ont pas les mêmes conséquences, comme « Annuler » et « Envoyer ». Une icône seule peut aussi laisser perplexe : si son rôle n’est pas évident, ajoutez un libellé visible.

Un menu mobile court, avec des mots ordinaires, se parcourt plus facilement. « Adopter », « Conseils » et « Nous contacter » indiquent mieux leur destination que des noms de rubriques inventifs. Sur une longue page, un lien « Revenir au début » peut aider, tant qu’il ne masque pas le texte. Méfiez-vous des barres fixées en bas de l’écran : quand le clavier s’ouvre, elles risquent de recouvrir un champ ou le bouton qui termine le formulaire.

Ne pas réserver l’information au geste parfait

Dans un carrousel automatique, une information peut disparaître avant d’avoir été lue. Et si les conditions d’adoption se cachent derrière une image à faire glisser, certaines personnes ne les verront pas. Laissez les contenus importants accessibles par le défilement habituel et prévoyez des commandes explicites lorsqu’une interaction est nécessaire. Un bouton essentiel ne doit pas apparaître uniquement au survol : sur un écran tactile, ce geste ne fonctionne pas de la même façon.

Soigner les images sans laisser les photos prendre toute la place

Les photos aident à se faire une idée de l’animal, mais charger plusieurs fichiers volumineux en même temps ralentit la page. Préparez des images adaptées aux écrans, assez nettes pour voir l’animal, sans envoyer systématiquement les fichiers originaux de l’appareil photo. Dans une galerie, la première photo peut charger en priorité ; les autres attendront qu’on s’en approche.

Réservez la place des images avant qu’elles s’affichent. Sinon, texte et boutons se déplacent brusquement sous le doigt : un bouton de contact qui saute à l’arrivée d’une photo peut faire ouvrir une autre rubrique. Rédigez aussi un texte alternatif utile, plutôt que de reprendre le nom du fichier. « Chien brun couché sur un tapis » en dit plus que « photo-3 ».

Évitez de mettre les renseignements seulement dans une image. Sur petit écran, le texte imprimé dans une affiche devient difficile à lire et ne suit pas l’agrandissement des caractères. Pour une journée portes ouvertes, écrivez donc aussi la date, l’adresse et les modalités dans la page. L’affiche complète l’information, elle ne la remplace pas.

Simplifier les formulaires sans perdre les informations utiles

Sur téléphone, remplir un formulaire demande davantage d’effort. Ne demandez que les renseignements nécessaires à cette étape. Pour une première demande de rencontre, un refuge peut avoir besoin d’un moyen de répondre et de quelques précisions sur le foyer ; un questionnaire détaillé sur les habitudes de vie peut parfois attendre un échange ultérieur. Quand la raison d’une question n’est pas évidente, expliquez-la.

Les libellés doivent rester visibles pendant la saisie. Si « Votre adresse électronique » apparaît uniquement à l’intérieur du champ, il disparaît dès que la personne commence à écrire. Signalez les champs obligatoires, affichez le clavier adapté à la réponse attendue et placez les messages d’erreur près du champ concerné. « Saisissez une adresse électronique valide » permet de corriger ; « Erreur » ne suffit pas.

Après l’envoi, dites clairement si la demande a été reçue. Si elle a échoué, conservez autant que possible les réponses déjà saisies et indiquez comment réessayer. N’annoncez pas un délai de réponse que l’équipe ne peut pas tenir.

Prévoir l’accessibilité dès les premiers choix

Une interface mobile utilisable ne doit dépendre ni de la couleur seule ni d’un geste très précis. Si une erreur n’est signalée qu’en rouge, certaines personnes peuvent la manquer : ajoutez un message explicite. « Conditions de visite » reste compréhensible même lu hors de son paragraphe, contrairement à plusieurs liens « En savoir plus ». Un ordre logique des titres aide également à parcourir la page avec un lecteur d’écran.

Essayez la page avec le texte agrandi, le téléphone tourné et le clavier ouvert. Rien ne devrait se chevaucher ou disparaître. Vérifiez aussi les sous-titres des vidéos informatives : une consigne ne doit pas être transmise uniquement par le son. C’est utile lorsqu’on consulte son téléphone dans un lieu bruyant ou sans écouteurs.

Tester des parcours complets, pas seulement une belle page

Une capture d’écran réussie ne montre pas si quelqu’un arrive au bout de sa démarche. Sur un vrai téléphone, testez quelques parcours complets :

• retrouver les horaires et l’adresse du refuge depuis la page d’accueil ;
• lire une fiche d’animal, puis accéder aux modalités de rencontre ;
• remplir et envoyer une demande avec les caractères agrandis ;
• corriger une erreur de formulaire sans perdre les autres réponses ;
• ouvrir la page avec une connexion lente et repérer ce qui reste utilisable.

Faites ces essais sur plusieurs largeurs d’écran et, si possible, avec des personnes qui ne connaissent pas le site. Regardez où elles hésitent, sans leur montrer où appuyer. Si plusieurs cherchent le numéro de téléphone dans le pied de page alors qu’il est caché derrière une icône peu claire, c’est probablement le repère qu’il faut revoir.

Pour chaque difficulté, notez la page, l’appareil et l’action tentée. Corrigez d’abord ce qui bloque une démarche ou risque de provoquer une erreur : un bouton inaccessible compte davantage qu’un espacement un peu maladroit. Après la modification, reprenez le parcours sur téléphone : ouvrez une fiche, agrandissez le texte et allez jusqu’au dernier champ. Le bouton d’envoi doit rester accessible, même lorsque le clavier est affiché.