Navigate Space

User list not rendered as you do not have the privilege to view user profiles.
Skip to end of metadata
Go to start of metadata

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.). 
  • 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 :

Labels
  • None