Rétrospectivement, les questions que nous nous posions il y a 5 ans quand il était question de concevoir une interface étaient plutôt triviales : “Quelle largeur d’écran ?“, “Faut-il souligner les liens ou non ?“… Il faut dire qu’à l’époque, le web se consommait quasiment exclusivement au travers d’un ordinateur. Nous sommes maintenant en 2011 et la situation s’est nettement complexifiée avec la montée en puissance des smartphones et des touchbooks. Et comme si ça n’était pas assez, certains commencent déjà à anticiper l’arrivée des TV connectées.
La conception multi-écran est donc de nouveau sur le devant de la scène avec la dernière Alertbox : Transmedia Design for the 3 Screens. Le Dr Nielsen nous y explique que si les smartphones sont en train de dominer les usages, les tâches à valeur ajoutée seront toujours réalisées sur un ordinateur (achat en ligne, déclaration d’impôts, choix d’une voiture…). Il convient donc de ne négliger aucun de ces deux formats (ordinateur et smartphone), voir de commencer à réfléchir aux prochains formats (touchbooks, TV connectées…). La recommandation du Dr est comme toujours très consensuelle : Développer des interfaces distinctes, mais conserver la même expérience utilisateur (mêmes codes visuels, fonctionnalités et contenus similaires…). Précisions que cette Alertbox fait écho à un précédent article publié dans UX Magazine : UX Concerns Across Mobile Platforms.
Dans la pratique, vous vous doutez bien que la mise en oeuvre est plus complexe. Je vous propose pour celà d’étudier deux approches. Il y a tout d’abord celle d’Amazon qui fait le pari d’une nouvelle version de son site web qui soit adaptée au format touchbooks : Amazon is testing a slick new site design, built with tablets in mind.
Un choix de conception plutôt audacieux, même si le risque est minimisé par l’ancienneté des clients qui de toute façon retrouveront leurs marques. Il n’empêche que c’est à ma connaissance la première initiative de ce genre pour un site à très large audience. Précisons qu’Amazon édite également d’autres interfaces comme Windowshop, une version mobile ainsi que des applications mobiles.
Deuxième exemple avec Google qui propose des versions mobiles “universelles” de ses sites, mais également une toute nouvelle application iPad marchande : Google Catalogs.
De même, ils avaient lancé l’année dernière une version minimaliste de YouTube (Leanback) pour rendre la consultation plus agréable sur touchbook (ou sur TV) : YouTube Leanback offers effortless viewing.
En étudiant ces différents exemples, il apparait donc comme évident que l’interface universelle est une arlésienne, surtout avec la multiplication des formats (cf. Panorama des terminaux alternatifs). Ceci étant dit, il faut tout de même trouver une solution. Je préconise donc un compromis avec une interface web adaptable (cf. 4 feuilles de styles pour 4 expériences de lecture) et des interfaces spécifiques à chaque format / terminal pour une meilleure expérience (des applications payantes ou avec un accès par abonnement).
Dans tous les cas de figure, le plus important n’est pas de se focaliser sur les interfaces (car les formats vont se multiplier et évoluer), mais sur ce qu’il y a derrière : Le middle-office permettant de délivrer le contenu et les fonctionnalités. À partir du moment où vous avez une architecture “propre” qui dissocie le fond de la forme, vous pouvez petit à petit déployer des interfaces en fonction de l’évolution du marché.
Petite remarque lexicale : le Web ne se “consomme” pas, tout comme un contenu ne se “consomme” pas. Le Web se “consulte”, tout comme un contenu se “consulte”. Attention à ne pas céder trop souvent à ce tic de langage de marketer, qui revient un peu trop souvent, je trouve, et qui me semble grandement réducteur pour qualifier l’expérience qu’un usager peut faire du Web ou d’un contenu. Exemple facile : quand je navigue sur Wikipedia ou sur ce blog, je ne consomme rien, mais je consulte beaucoup.
Amitiés,
Actuellement on parle beaucoup du Responsive Web Design, notamment au travers des possibilités offertes par HTML5 CSS3 Media Queries. Comme évoqué dans l’article, il s’agit de rendre adaptable l’affichage à divers terminaux.
Voici deux articles intéressants sur ce sujet :
http://www.emmanuelgeorjon.com/responsive-design-quest-que-cest-3875/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
La mise en oeuvre technique est relativement simple à partir du moment où l’ergonomie et la création graphique ont été pensées pour.
Dans cet autre article, http://www.poska.fr/experimentation-css3-media-queries, ils proposent une approche de ciblage des types de support et de catégorisation de résolutions.
@ Stéphane V. > Oui tout à fait, par contre je pense que l’on “consomme” du contenu payant.
@ JCNoirot > Oui je suis fan du responsive design, d’ailleurs ce site est en cours de refonte à la sauce responsive design. Cependant cette technique à des limites, elle fonction bien pour web + smartphone + touchbook, mais quid des mobiles et TV ?
Je trouve que Google a particulièrement réussi à faire converger interface Web et interface tactile avec la refonte de Google Calendar, et l’interface de Google plus. Sur ce dernier, les expériences de navigation sont très proches (même boutons plus gros, plus lisibles, actions secondaires masquées, …) tout en étant adaptés à la taille de l’écran (l’interface iPhone notamment). Votre avis ?