27 avril 2015

Article

Technologies de l'information

Comprendre les risques et les avantages du design adaptatif pour offrir une bonne expérience client sur mobile

En quelques années, l’accès au Web sur mobile a connu une augmentation massive, au Québec comme ailleurs. D’ailleurs, il n’est plus rare de voir des sites obtenir 25 %, voire 30 % ou 35 % de leur trafic à partir d’appareils autres que des ordinateurs.

Durant ces mêmes années, les appareils se sont diversifiés. Nous sommes passés des téléphones intelligents qui imitent de petits ordinateurs, avec leurs écrans horizontaux et leur clavier physique à un continuum d’appareils tactiles allant du téléphone ultra-compact à la tablette à très haute résolution, en passant par les « phablet » hybrides. Qui plus est, un seul appareil s’oriente maintenant de deux façons, menant à des largeurs d’écrans différentes… De quoi donner des maux de tête aux programmeurs de toute entreprise soucieuse que son site paraisse sous son meilleur jour à un maximum d’usagers.

L’utilisation de plus en plus importante du « responsive design »

Si, pendant des années, la réponse rapide était de construire une version du site spécifique aux appareils mobiles, où certaines pages ont une version « mobile » et leur propre adresse, le consensus actuel pointe dans une autre direction : le « responsive design », appelé « design adaptatif » en français.

Cette approche vise à construire une seule version du site, dont la grille (construite par CSS) se réorganise en fonction de la taille des écrans et de la capacité des connexions et des appareils. Par exemple, on chargera de plus petites images sur les appareils qui ont une connexion plus limitée, on replacera les 3 colonnes de contenu en une seule, ou encore on fera appel au bon clavier d’un écran tactile pour remplir les formulaires. Depuis maintenant 5 ans, cette approche s’est raffinée et occupe une place de choix dans les façons de structurer les pages Web, devenant la recommandation de plusieurs géants derrière de nombreux sites Web, comme Google.

Les avantages « responsive design »

Le succès du « responsive design » repose sur plusieurs de ses avantages indéniables :

  • La compatibilité avec la quasi-totalité des appareils et écrans, passés, présents et futurs;
  • Le fait de n’avoir qu’une seule adresse pour chaque page, ce qui aide au référencement sur les moteurs de recherche, les campagnes publicitaires, etc. (il nous est tous déjà arrivé de tomber sur la version mobile à partir de notre ordinateur de bureau, ou vice-versa);
  • Le développement et l’entretien facilités, puisque le site (et chaque page) n’existe qu’en une seule version, adaptable (on ne développera, par exemple, qu’un seul processus d’achat);
  • L’accès à une version mobile fonctionnelle dès le lancement de chaque page (une faiblesse des versions mobiles a souvent été la gestion de son développement. L’argument « va-t-on vraiment s’en servir sur mobile ? » a trop souvent mené à des versions mobiles incomplètes);
  • La compatibilité avec la plupart des systèmes de gestion de contenu (CMS) et systèmes de e-commerce (alors que certains demandaient des contorsions pour gérer une version mobile de façon viable);
  • Le recours à des éléments adaptables, séparant le contenu de la présentation, ce qui contribue souvent à l’accessibilité et à une expérience client durable (par exemple, on utilisera les dernières balises HTML5 pour bien identifier les menus, le contenu principal, etc.)

…et ses inconvénients

Par contre, tous ces avantages s’accompagnent souvent d’inconvénients, les principaux étant la complexité de l’intégration Web et le temps de chargement des pages.

Si, il y a quelques années, certaines agences Web n’étaient pas encore à l’aise à travailler des sites en design adaptatif, il en est tout autrement aujourd’hui. Certes, il peut être frustrant pour un designer de devoir composer des mises en page qui devront se réorganiser au gré des appareils des utilisateurs, mais c’est là le prix à payer pour satisfaire le plus grand nombre. Au fil du temps, des fournisseurs de plateformes Web, comme Wordpress Magento ou IBM, ont lancé des versions « responsive » de leurs gabarits qui deviennent graduellement leurs gabarits par défaut, ce qui force le marché à s’adapter. Le coût supplémentaire pour développer en design adaptatif diminue aussi à mesure que la plupart des agences, des designers et des firmes de développement s’y mettent.

Quant aux concepteurs, la plupart finissent par voir les avantages de devoir créer pour une vue mobile dès le début. En programmant les composantes de sorte qu’elles se réorganisent sur mobile, on est contraint à mieux les organiser, ce qui contribue à une expérience client plus harmonieuse. Et puis, comme ces contraintes limitent naturellement la quantité de contenu, on évite de surcharger les pages.

Néanmoins, le temps de chargement des pages reste la plus grande lacune du design adaptatif. En ne faisant qu’une version de la page, on oublie trop souvent que les appareils mobiles s’appuient sur des connexions 3G ou LTE, lesquels sont moins rapides (et plus coûteuses) que les lignes fixes ou wifi. Comme les appareils mobiles ont une capacité de traitement plus limitée, les pages peuvent prendre de longues secondes avant de s’afficher, décourageant ainsi les utilisateurs.

Les solutions à mettre en place pour y remédier

Heureusement, il existe des solutions à ce problème. Par exemple, on s’assurera d’indiquer dans le code des pages de charger des images plus compactes en fonction de l’appareil utilisé(plutôt que de laisser l’appareil adapter lui-même leur format). Et surtout, on testera et optimisera le temps de chargement des pages dans toutes sortes de situations (une discipline malheureusement trop souvent ignorée une fois que le site est lancé).

Une nouvelle approche, distincte du « responsive design », devient aussi populaire, car elle améliore les temps de chargement : il s’agit de l’« adaptive design », concept pour lequel aucune traduction française adéquate n’est encore apparue. Cette approche s’appuie largement sur des langages de script comme JavaScript pour charger une version différente des fonctionnalités et de la présentation d’une même URL, en fonction d’intervalles dans les tailles d’écran (plutôt que de charger un ensemble de fonctionnalités qui se réorganisent en fonction de l’espace disponible).

Dans tous les cas, une chose est certaine : le mobile est encore en croissance accélérée et les types d’appareils continuent de se multiplier, de sorte qu’il sera définitivement impossible de concevoir une version d’un site pour chaque type d’appareil. Si le « responsive design » semble proposer la solution la plus viable pour le futur proche, il doit être abordé avec soin pour s’assurer d’en tirer tous les avantages.

Vous souhaitez en savoir plus sur ce sujet ? Retrouvez-moi lors de la formation « Sites Web ergonomiques » chez Technologia.

Simon Éthier est Directeur Stratégie pour la firme de consultation Adviso depuis 7 ans. Il élabore des approches qui maximisent les résultats d’affaires de sites Web commerciaux. Du premier croquis à l’assurance-qualité, son travail l’amène à bâtir des approches conciliant ergonomie, référencement organique, marketing Web, processus de vente et de soutien en ligne. Il a collaboré à des projets d’importance pour des chefs de file québécois tels que Brault & Martineau, Industrielle Alliance, le Groupe Deschênes, Alimentation Couche-Tard, le Groupe Pages Jaunes, Centraide et plusieurs autres entreprises de toutes tailles.