Et on reparle de la conception multi-écran

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.

La nouvelle interface (probable) d'Amazon

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é.

8 commentaires pour “Et on reparle de la conception multi-écran”

  1. Posté par Stéphane V. a dit : le

    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,

  2. Posté par JCNoirot a dit : le

    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.

  3. Posté par Frédéric CAVAZZA a dit : le

    @ 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 ?

  4. Posté par Bel exemple de boutique en ligne mobile chez Headict | TerminauxAlternatifs.fr a dit : le

    […] smartphones ?, HTML5 s’impose petit à petit comme LA référence pour les applications mobiles, Et on reparle de la conception multi-écran). Le résultat est tout à fiat convaincant et renforce en moi l’idée que les applications […]

  5. Posté par JeffV a dit : le

    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 ?

  6. Posté par FredCavazza.net > L’avenir de l’internet est aux contenus, pas au SoLoMo a dit : le

    […] connectées vont également monter en puissance et vous forcer à revoir entièrement votre copie (Et on reparle de la conception multi-écran). Faut-il dès maintenant bazarder votre site web et lancer un grand chantier de refonte […]

  7. Posté par Bel exemple de boutique en ligne mobile chez Headict | Terminaux Alternatifs | digital•Reports a dit : le

    […] petit à petit comme LA référence pour les applications mobiles, Et on reparle de la conception multi-écran). Le résultat est tout à fiat convaincant et renforce en moi l’idée que […]

  8. Posté par InterfacesRiches.fr > Nouvelle version pour Aviary, les applications seront multi-interfaces ou ne seront pas a dit : le

    […] En poussant le raisonnement plus loin, la distribution multiple va même au-delà du web et des terminaux mobiles. Des éditeurs provenant du monde mobile commencent ainsi à commercialiser leur application sur le Mac App Store, à l’image de SnapSeed (un très beau cas d’étude). Nous nous dirigeons donc vers une configuration de marché où des éditeurs indépendants peuvent lancer une application en toute modestie et petit à petit élargir leur clientèle cible en la déclinant sur différents supports (smartphones, tablettes, desktop, tv connectées, voitures…). Selon cette optique, la technologie utilisée pour créer les interfaces est accessoire, l’important est de proposer une offre cohérente (répondu à un besoin réel) et une expérience enrichissante (à la fois ludique et permettant de résoudre un problème identifié). Vous noterez que j’avais déjà abordé ce sujet de la conception multi-écran. […]