Un service d’actualités en Wap ou sur le Web, est un outils qui contribue grandement à fidéliser ses utilisateurs. Sa convivialité et son ergonomie devront donc faire l’objet d’une conception trés soignée. Et bien qu’un site en XHTML Mobile Profile, – surnommé Wap 2.0 -, paraisse en apparence simpliste et facile à faire, il suffit d’une négligence anodine pour ruiner son utilisabilité.
Pour bien faire, il vous faudra commencer par désapprendre les principes solidement établis pour un portail d’actualités destiné à la consultation sur un PC…
Les recommandations à suivre sont de deux ordres :
- Respecter les contraintes techniques et exploiter les caractéristiques ou astuces des navigateurs mobiles,
- Répondre aux exigences du mobinaute en terme de facilité d’accés, et de confort de lecture.
Un mobile n’est pas une « usine à gaz » aussi tolérante que le navigateur d’un PC
L’écran d’un mobile est au moins 5 fois plus petit que celui d’un ordinateur, et détail non négligeable, il a le plus souvent une orientation comme un « Portrait ».
Visualisez le projet expérimental Y! MobActus sur votre mobile 3G (ou avec votre PC) à l’adresse ymobactus.miaouw.net
Conseil : renoncer à une mise en page en colonnes. Et réduire au maximum la hauteur de l’entête pour proposer un maximum de contenu attractif sans qu’il soit nécessaire de faire défiler la page.
Le poid du code source d’une page est limité entre 15 à 50 ko selon le logiciel ou le prestataire. Et c’est sans compter le coût de téléchargement qui incombe au mobinaute. Le débit oscille entre 6 à 30 ko/s selon le réseau.
Conseils :
- Adopter un affichage « page-par-page » pour la liste des actualités.
- Utiliser des caractères spéciaux pour les puces des listes ou des préfixes des titres d’actualité
- Se limiter à une ou deux images (et photos) par pages.
- Charger des images de 2 ou 3 ko
Un mobile n’a pas de molette, et encore moins de souris. Il est d’autant plus difficile pour le mobinaute de faire défiler une page avec ses touches directionnelles (quand elles existent).
A noter que les navigateurs mobiles font souvent défiler la page en déplaçant le focus sur les liens cliquables suivants.
Conseils :
- Réduire au maximum le nombre des liens cliquables, et bien doser le nombre de lignes entre 2 liens pour en faire un moyen de défilement agréable et continu.
- Si le titre d’une actualité est accompagnée d’un résumé et d’autres mentions, rendre cliquable uniquement la mention « lire la suite » qui sera placée en dernier. Paramétrer vos résumés pour que 2 mentions « lire la suite » soient en même temps sur l’écran (Cf conseil précédent).
- Eviter les accumulations consécutives de liens, voir même déplacer son menu de rubriques (ou de pages principales) en fin de page tout en compensant sa position défavorable par l’emploi judicieux des raccourcis clavier numériques… D’autant que un menu sous l’entête sera devenu invisible, suite au défilement, quand le mobinaute aura fini sa lecture .oO(logique, non ?)
Le choix des couleurs est trés vaste, – des résolutions en 16 bits sont devenues trés répandues pour l’affichage des photos -, par contre la perception des contrastes est trés différente sur un petit écran. C’est certainement une conséquence de notre mécanisme biologique de perception visuelle.
Conseil : employer des couleurs fortement saturées, et renoncer aux teintes pastels.
Généralement, le navigateur bloque la taille des textes selon la préférence du mobinaute.
Conseil : baser la différenciation de vos mentions sur l’emploi de couleurs contrastées, la caste, la mise en gras ou italique des textes. Et paramétrer la largeur des photos associées à une actualité proportionnellement à la largeur de l’écran (43% est un bon compromis).
Le navigateur d’un mobile ne dispose pas de fonction de lissage des polices, ou rarement, et même si c’est le cas, elle sera peu efficace sur une petite taille de texte.
Conseil : éviter l’emploi du style d’écriture en italique pour les titres des actualités, leur texte, ou son résumé.
Les raccourcis clavier numériques (touches de 0 à 9, le dièse #, et l’astérisque *), hérités du Wap 1.0, sont souvent pris en charge par les nouveaux navigateurs, même quand ils affichent un contenu en XHTML.
Conseils :
- Affectez les raccourcis aux pages importantes (comme les différentes rubriques, ou la liste de celles-ci), et prenez soin de définir ces raccourcis sur toutes vos pages.
- Conservez « en réserve » un raccourci (le dièse ou l’astérisque de préférence) pour pouvoir l’affecter à une action importante selon la page, notamment pour la mention « suivant » lors d’un affichage page-par-page… Au cas où le mobinaute fairait défiler la page trop vite.
- Si on ne peut pas voir au moins 3 ou 4 titres d’actualités en même temps sur l’écran, çà présente peu d’intêret de leur attribuer un raccourci numérique .oO(c’est même totalement crétin)
Un navigateur mobile aura déjà réservé une touche pour permettre à l’internaute de revenir à la page précèdente, et souvent en réutilisant sa copie en mémoire cache pour ne pas solliciter la connection ou consommer inutilement le quota de téléchargement.
Conseil : il est inutile de créer un lien « retour » sur vos pages, et encore moins de lui affecter un raccourci numérique.
Les exigences d’un mobinaute sont, par nécessité, dix fois supérieures à celles d’un internaute
Le mobinaute sait rarement avec exactitude combien de temps il va pouvoir surfer… Ne lui faite pas perdre du temps avec des démarches inutiles. Et c’est sans compter qu’une page inutile donnera la sensation d’avoir sacrifié du temps ou un coût d’accés non négligeable pour le mobinaute.
Si vous êtes un adepte de la règle du « 2 clics » pour accéder au contenu d’un site Web, vous allez devoir adopter celle du 1 voir même 0 clic !
Les mobinautes apprécieront d’avoir dés votre page d’accueil des actualités interressantes. Voir même un condensé des principales actualités de vos différentes rubriques.
Suggestion : proposez vos actualités récentes, toutes rubriques confondues, sur votre première page. Et si possible par ordre chronologique… Le mobinaute voudra peut-être obtenir trés vite des infos « fraiches » au cour d’une séance de navigation occasionnelle et trés brêve.
Et pour la plupart de vos actualités, le mobinaute pourrait, et apprécierait, de se contenter du titre ou du résumé d’une actualité si ils sont « assez » longs.
Suggestions :
- Proposez votre liste d’actualités en les accompagnant d’un résumé, d’une date, et du nom de la rubrique (mais non-cliquable*).
(*) si vous avez suivi le conseil du menu des rubriques en fin de page avec des raccourcis numériques. - Si vous préférez indiquer seulement son titre, faites le plus long possible. Mais si vous affectez un raccourci numérique aux titres, dosez les longueurs et le nombre de titres pour pouvoir tous les afficher sur l’écran .oO(on n’a pas tous un don de voyance)
Les circonstances, en France, ne sont pas favorables pour les publicités qu’il faudra insérer avec précautions…
A la différence d’une page Web pour PC, le mobinaute ne peut pas « zapper » une publicité consciemment ou inconsciemment à cause de la taille de l’écran et de la linéarité de la navigation… C’est un avantage marketing qui peut se retourner contre vous si vos publicités représentent un obstacle « agaçant » pour la continuité de la lecture.
Conseil : placez vos publicités au début de la page (dans l’entête), ou à la fin du contenu à lire juste avant la mention « articles suivants » (pour les listes en page-par-page) et la liste des rubriques.
Les coûts de connection et téléchargement sont encore trés élevés en France ; les bannières publicitaires « graphiques » seront mals vues si elles consomment plus de 5 ou 6 ko. D’autant que pour un tel poid, elles auront besoins de 2 à 4 secondes pour s’afficher et que le mobinaute peut commencer à faire défiler la page entre-temps.
Conseil : placez votre bannière graphique (ou une publicité textuelle avec un mini-logo) aprés le contenu pour s’assurer qu’elle sera téléchargée lors de la lecture.
Le mot de la fin :
Proposez un bon service d’actualités, et c’est dans la poche…
Du mobinaute !
Pour approfondir votre démarche, vous pouvez lire les recommandations (en cours de rédaction) du W3C ; Mobile Web Best Practices 1.0
Ainsi que les conseils avisés du « Journal du Net » (Développeurs) des Cinq clés pour réussir son site en Wap
Olivier D. ze kat 