Navigate Space

User list not rendered as you do not have the privilege to view user profiles.
Child pages
  • Bonnes pratiques "mobiles"

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Le développement d'applications pour mobile doit prendre en compte les spécificités

  • des terminaux : écrans plus petits, débit plus faible ;
  • des usages qui en découlent.

Le W3C a déjà déterminé un certain nombre de bonnes pratiques spécifiques.

Par ailleurs, restent valables des règles d'ergonomie ou de qulaité plus générales comme celles d'OpQuast : http://www.opquast.org/

...

1°) Adapter les services :

  • tous les services et toutes les fonctionnalités ne sont pas utiles sur une version mobile : il faut définir quelles parties de l'application existante doivent être portées en version mobile et lesquelles sont superflues.
  • la mobilité est une contrainte pour ce qui est de l'ergonomie pure de l'application mais offre certaines opportunités. C'est pourquoi, au-delà de faire un « simple portage » des services existants en version mobile, il serait intéressant d'ajouter des services (ou de modifier ceux existants) en y intégrant des infos liées à la géolocalisation par exemple.

2°) Cibler le(s) public(s) souhaité(s)

Après avoir choisi les services à adapter/créer, il faut alors se poser la question : application « native » ou application Web ?

  • S'il s'agit d'une application native, sur quels terminaux nous concentrons-nous : IPhone et/ou Android et/ou ... ? Si l'application native permet une meilleure intégration à l'environnement matériel, l'application Web -elle- permet de toucher TOUS les utilisateurs peu importe les terminaux mobiles utilisés
  • S'il s'agit d'une application Web, doit-on créer une application spécifique « mobile » ou bien modifier l'application existante de façon à ce qu'elle s'adapte aux terminaux mobiles ?

3°) Faire « simple » : penser à une ergonomie adaptée

  • malgré les progrès faits à ce sujet, les claviers sur mobile s'avèrent généralement peu pratiques... il est donc important de minimiser la saisie.
  • faciliter/limiter la navigation : l'utilisateur ne doit pas avoir à passer 10 écrans pour arriver à l'information qu'il souhaite et les contrôles doivent être rapidement repérables sur l'interface.
  • pour ne pas trop dépayser l'utilisateur, il serait préférable de customiser au maximum l'interface mobile de façon à ce que certains éléments graphiques caractéristiques (couleurs, images, polices, etc.) soient proches entre la version « générique » et la version mobile d'un même service. 
  • utiliser des polices (styles et taille) et couleurs adaptées. Les environnements et situations dans lesquelles les utilisateurs utilisent les services mobiles sont plus « extrêmes » que derrière un PC de bureau : luminosité (contre-jour, soleil plongeant sur l'écran, etc.), monde « en mouvement » (métro, voiture, marche, etc.). 
  • Wiki Markup
    optimiser l'espace 		visible sur un écran mobile : éviter à l'utilisateur d'avoir un 		ascenseur horizontal et/ou vertical. Etant donné le nombre de 		terminaux mobiles sur le marché, les tailles et résolutions 		d'écran diffèrent beaucoup : il faudrait donc adapter l'interface 		graphique en fonction des spécificités des terminaux (exemple : 		tailles des bannières pour UnivMobile en fonction de la 		« famille » du matériel). _\[_{_}Note: de plus en plus de 		téléphones proposent des modes « paysage » et 		« portrait » : penser à tester les 2 variantes{_}_\]_

 4°) Tenir compte des contraintes Réseau (débit) et Technologique

Afin de minimiser le temps de chargement d'une page et donc permettre la meilleure expérience utilisateur qu'il soit, il est primordial d'alléger au maximum les pages :

  • en redimensionnant les images (dimensions, compression, etc.). 
  • en réduisant les scripts chargés dans une page : il est inutile de garder des centaines de lignes de Javascript si seulement 5 méthodes nous intéressent. 
  • si l'application affiche des pages « lourdes » (page d'actualités par exemple : images, vidéos, etc.), il serait préférable de charger au fur et à mesure la page (1 actualité chargée à la fois par Ajax) et non tout d'un coup, au chargement initiale de la page.

De plus, tous les terminaux mobiles n'embarquent pas le même navigateur : il faut donc veiller à utiliser des technologies (librairies JSF, etc.) compatibles avec un maximum de navigateurs mobiles. Par exemple, avec la librairie Trinidad est fournie une liste détaillée des navigateurs mobiles compatibles : http://myfaces.apache.org/trinidad/browsers.html

Liens pratiques :

  •  Bonne pratiques du « Web mobile » (Mobile Web Best Practices aka MWBP) définies par le W3C :

...

...

...

  • « Web mobile »
    • Pourquoi est-il intéressant de traiter les 2 en

...

...

    • Quelles contraintes ajouter à une

...

    • application conforme WCAG (Web Content Accessibility Guidelines) pour être conforme MWBP

...