Deux sujets à la mode dans un même titre, si avec ça je ne fais pas péter le compteur de visites, je n’ai plus qu’à me tourner vers le porno !
Alors oui, ce sont deux sujets à la mode mais qui me paraissent mal compris, individuellement d’une part et ensemble d’une autre part.
J’ai déjà évoqué la problématique du Responsive Web Design (RWD en abrégé pour la suite.) dans cet article. Je ne vais donc pas revenir en détail dessus. (Lisez-le pour suivre ce que je vais raconter par la suite.). Ce qu’il faut retenir c’est que cette méthode d’adaptation des sites Web en fonction du support a des limites liées aux usages et aux conditions techniques.
Concernant Mobile First (MF pour la suite), c’est une approche qui a été proposée par Luke Wroblewski en 2011 dans son livre Mobile First aux éditions A Book Apart. Je me permets de citer une partie de sa conclusion :
« Starting with this personal and portable device in mind first allows us to:
– Take advantage of the enormous growth in mobile internet usage and find new ways for people to use our websites and applications.
– Embrace mobile constraints to focus and prioritize the services we’re designing and building.
– Use mobile capabilities to innovate the complete customer experience.
– Take what we know about designing for the Web and start thinking differently about mobile organization, actions, inputs, and layout. »
Je le rejoins bien sur ces points. Ayant fait beaucoup de projet sur téléphone mobile avant l’arrivée de l’iPhone (et depuis), je vais revenir notamment sur le deuxième point qu’il évoque et que je traduirais librement par :
« Prendre en compte les contraintes du mobile pour se concentrer sur l’essentiel du service que nous concevons. »
Il était une fois retour vers le futur
Dans des temps reculés, avant que le prophète Jobs ne vienne éclairer le monde de sa brillante fulgurance, je travaillais pour une entreprise dont le nom évoque sa couleur (Non, ce n’est pas Aubergine) et j’avais pour mission de concevoir des services pour le WAP. À cette époque, nous disposions pour « surfer » de mobiles avec des écrans modestes, 128×128 pixels en niveau de gris étant un luxe, et d’un simple clavier. Le réseau en GPRS permettait généreusement de transmettre au mieux 4 fois 9600bps soit 1000 fois moins que la 3G.
La conception des services répondait à des règles très strictes :
– Le contenu ne doit pas dépasser 500 signes (+ ou – 10 %)
– Les noms donnés aux hyperliens ne doivent pas dépasser 15 caractères
– Le pied de page contient la navigation, toujours dans le même ordre en fonction de la hiérarchie.
– Etc.
Que du bonheur ! Et je voyais les chefs de produits défiler dans mon bureau, ils arrivaient jeunes, innocents, enthousiastes de travailler sur l’avenir du Web, la fleur au fusil et ressortaient dépités une fois que je leur avais expliqué les quelques contraintes. Il fallait donc trancher dans le vif, limiter les images, réduire les textes, penser à une arborescence au cordeau, supprimer tous les gadgets, simplifier, simplifier, et encore épurer.
Quelque temps après, j’ai travaillé à la conception de l’interface de l’OS d’un téléphone mobile bas de gamme donc sur un écran de petite taille sans touchscreen bien sûr. De même il fallait se centrer sur l’essentiel. La règle était alors simple, si quelqu’un dans l’équipe pensait qu’une fonction n’était pas essentielle, on la supprimait.
Mosaïque d’écran pour téléphone mobile
Donc concevoir pour mobile nécessite de répondre à de nombreuses contraintes et donc faire des choix pour se centrer sur l’essentiel. L’essentiel qui doit permettre de rendre le service.
De là une approche mobile first…
MF et RWD dans un bateau.
Là où s’installe la confusion c’est quand, on commence à concevoir une interface Web, par la version mobile, en se disant je fais du « MFRWD ».
Par exemple, ce bloc-notes est basé sur un thème RWD dont la feuille de style (CSS) initiale est prévue pour mobile et si on a élargi la fenêtre, des styles complémentaires viennent modifier l’affiche de certains éléments.
@media screen and (min-width: 768px)
Le RWD consiste souvent à déplacer des contenus, à les redimensionner et les adapter dans une moindre mesure. On peut donc effectivement commencer par le moins large, sans doute plus contraignant et puis décliner les versions plus larges et donc relativement plus faciles à organiser. Mais, je pense que l’on confond méthodologie de conception et résultat technique. Le RWD est essentiellement une solution techno centrée, guère nouvelle sur le fond. Mobile First est une approche en termes de conception d’interfaces.
Les services sont maintenant, pour une grande majorité, disponibles sur plusieurs supports ou du moins veulent l’être. C’est là qu’on va se retrouver avec la pire approche MFRWD, on va commencer par le mobile parce que c’est sans doute pertinent ou dans l’air du temps, puis on va rajouter des choix technico-budgeto-marketo-hiérarchique pour un service unique qui fonctionne sur tous les supports. Et on se retrouve avec un truc comme Météo France. C’est absolument le même contenu sur tous les supports, et c’est parfaitement inutilisable.
Sur un projet, il est souvent nécessaire de faire des choix pour diverses raisons plus ou moins bonnes et rationnelles. En ergonomie, on va s’appuyer sur des méthodologies scientifiques et la connaissance des utilisateurs pour faire les choix. Ces choix sont souvent mal compris et viennent en contradiction avec des études « clients » faites de manière beaucoup plus légère (pour rester poli). On se retrouve dans des réunions, à expliquer nos choix, et leurs fondements, puis à un moment, il y a quelqu’un qui dit « Mais je crois qu’il faut… » et on se retrouve dans ce genre de situation.
L’approche Mobile First a l’avantage d’être relativement compréhensible, comme pouvaient l’être les contraintes du WAP. Il est alors plus facile de faire entendre la nécessité de se centrer sur les fonctions utiles et utilisables. Ça n’empêchera jamais, les demandes sans fin sur l’ajout de fonctionnalités ! Donc même si ce n’est pas compris, comme c’est à la mode, vous pouvez user de votre mauvaise foi, pour dire « Non, ce n’est pas possible dans une approche mobile first » !
MF ≠ RWD & Interface distribuée et adaptative
Utilisés au même niveau de conception, les principes du RWD et MF sont, pour moi, antinomique, car MF se centre sur une situation d’usage en mobilité, là où RWD fait en sorte qu’un contenu unique soit disponible quel que soit le contexte d’usage.
Si on reprend l’exemple du Louvre, que j’avais utilisé pour l’article sur le RWD, et qu’on applique une approche Mobile First. On va donc se poser la question : « Qu’est-ce j’attends d’un musée, sur mon mobile ? » :
- Une app sur mobile devrait rendre le service en fonction du moment où l’utilisateur en a besoin. Loin du musée, il faudra sans doute proposer en priorité des informations de type horaires, itinéraire, réservation de billets. Si la personne est dans le musée, il faudra lui proposer d’accéder aux descriptions des œuvres, ou des services en réalités augmentées lui permettant de voir plus qu’un simple tableau. On parlera d’interface adaptative dans ce cas.
- Ce qui n’empêche pas d’avoir en complément un site Web très complet, qui peut reprendre une partie de ces contenus et en proposer d’autres bien plus riches et adaptés à un grand écran.
On est dans une logique d’interfaces distribuées, sur différents supports avec des contenus communs, mais des fonctionnalités différentes en fonction des usages du support. Cela permet d’avoir un site Web RWD, mais dans ce cas il faut envisager de le concevoir déjà pour PC, voire tablette avant de le décliner pour mobile où l’expérience serait dégradée.
Article très intéressant encore une fois.
La contrainte est encore très présente sur mobile, mais je pense qu’il ne faut pas négliger une arborescence comme on pourrait la retrouver sur un site desktop tout en simplifiant l’expérience utilisateur. Faut-il absolument envoyer bon nombre d’information à l’utilisateur sans lui même s’être justifier sur sa recherche?
Je pense à la fameuse homepage avec 2 grosses thématiques par exemple :
« Je suis dans le musée » > On propose les œuvres, les choses à ne pas louper, le plan du Louvre.
« Je veux me rendre au musée » > On propose la page vianavigo (site des transport parisien), billetterie, ect…
Le tout est de rendre l’utilisation simplifier bien évidemment et de répondre à une certaine exigence tout en ne laçant pas l’utilisateur avec du contenu trop volumineux et sans repère.
Qu’en penses tu?
« Le RWD est essentiellement une solution techno centrée, (…). Mobile First est une approche en termes de conception d’interfaces. » J’aime beaucoup cette phrase qui résume à mon avis assez bien la problématique : d’un côté de la technique, de l’autre un choix ergonomique voir philosophique. (je risque de te la piquer pour expliquer aux étudiants ^^).
L’article est très intéressant et nécessaire, car il pose bien les bases des fameux buzzwords qu’on entend depuis plusieurs mois 🙂
Je me permets de réagir à un point que je trouve un peu trop binaire :
« Une app sur mobile, devrait rendre le service en fonction du moment où à l’utilisateur en a besoin. Loin du musée, il faudra sans doute proposer en priorité des informations de types horaires, itinéraire, réservation de billets. »
Aujourd’hui, de plus en plus de personnes n’utilisent même plus d’ordinateur comme écran principal (je n’ai pas dit que c’était la majorité, mais ça tend à le devenir…), et le mobile n’est plus utilisé QUE dans le cadre de la mobilité. On surfe sur son écran depuis son canapé et l’utilisateur sur mobile a aussi envie d’avoir accès au même contenu que sur son ordinateur, en bref il devient de plus en plus exigeant.
Je suis consciente que tu parles de priorisation, ce qui ne veut pas dire que le contenu sera absent mais je trouvais intéressant d’en remettre une couche, et je serais curieuse d’avoir ton avis sur le sujet 🙂
Concernant l’approche mobile first, si elle me semble très intéressante, j’ai le sentiment que le commanditaire français n’y est pas encore prêt, sauf sur des marchés extrêmement avertis.
Un grand merci pour cet article. Je ne suis pas un spécialiste et cela me permet d’avoir une vision claire de cette problématique.
En fait Luke a parlé de Mobile First dès fin 2009, dans un article du même nom sur son blog :
http://www.lukew.com/ff/entry.asp?933
Je suis à 200% d’accord avec Christelle. Il faut distinguer mobile en tant qu’appareil (disons les smartphones) et mobile en tant que nature de l’utilisateur, la vraie mobilité. De plus en plus d’études montrent que les smartphones sont de plus en plus utilisés en mode sédentaire, avec une connexion WiFi derrière un ADSL voire la fibre. À l’inverse, les usages vraiment mobiles d’ordinateurs portables sont relativement courants, notamment dans le train, grâce aux clefs 3G mais aussi au mode modem présent maintenant sur quasiment tous les smartphones.
@nicolas et Christelle
C’est là où la notion d’interface distribuée peut venir jouer son rôle. Il faut penser le service sur les différents supports, sous différentes formes. Certes le mobile et les tablettes sont très utilisés même à la maison, mais pas pour le même type et la même durée d’interaction que le PC. Sur Mobile tu vas chercher une infos précise, avoir une interaction courte avec le service, ou simplement trouvé un article et le lire, donc un usage plus en consultation. Sur PC, tu vas avoir une interaction plus longue, plus construite, plus complexe. Par exemple, pour écrire et mettre en ligne un article, je me met sur mon Mac, même si j’ai rédigé une partie de l’article sur mon iPad.
Pour en revenir à l’interface distribuée, Il faut penser complémentarité, une app sur mobile pour proposer une expérience adaptative. Un site web RWD pour les « infos courantes » mais qui lui sera « statique » par rapport à l’environnement. Une application sur le PC pour les tâches les plus complexes et la gestions des données en masses par exemples. Et ainsi de suite.
Je crois que derrière ça, il y a surtout le fais que l’utilisateur n’est plus mono-écran. C’est le même que vous avez sur mobile, tablette, PC, Tv, etc. (Y a de quoi faire un article/bouquin sur le sujet)
J’adhère également à ce résumé :).
Je trouve que le refuge procuré par certains termes « tendances » nous éloigne du pragmatisme inhérent à notre métier.
Besoins > Usages > Utilisateurs < Objectifs < Clients
C'est pourquoi il me semble important de demander aux clients de verbaliser leur besoins. Ça évite les erreurs d'interprétation.
> « Sur Mobile tu vas chercher une infos précise, avoir une interaction courte avec le service, ou simplement trouvé un article et le lire, donc un usage plus en consultation. Sur PC, tu vas avoir une interaction plus longue, plus construite, plus complexe. Par exemple, pour écrire et mettre en ligne un article, je me met sur mon Mac, même si j’ai rédigé une partie de l’article sur mon iPad. »
En fait non. 🙂 Et je pense que c’est le point faible de l’article qui ressurgit dans ce commentaire. Tout comme Nicolas et Christelle, j’abonde dans le sens du choix de l’utilisateur peu importe sa plateforme. L’homo sapiens sapiens a bien des tours dans son sac quant à l’utilisation de son mobile. Et certains écriront de très longues notes sur un mobile avec un clavier externe et un écran secondaire par exemple. Les usages sont vraiment diversifiés. Aussi le *je* est révélateur dans le commentaire. Mon usage n’est pas l’usage de mon voisin.
Ce dont tu parles notamment dans le
> »Loin du musée, il faudra sans doute proposer en priorité des informations de types horaires, itinéraire, réservation de billets. Si la personne est dans le musée, il faudra lui proposer d’accéder aux descriptions des œuvres, ou des services en réalités augmentées lui permettant de voir plus qu’un simple tableau. »
tient du geofencing par exemple, c’est à dire du contexte géographique de l’utilisation et non pas de l’appareil.
Et bien sûr la grosse pomme cachée sous le tapis dans l’article pour « l’aspect interface adaptative » ou plus habituellement appelé adaptation du contenu en fonction… de l’appareil (et non pas du choix de l’utilisateur 😉 ) est… le user agent sniffing. Parce que la reconnaissance du matériel et donc de l’association d’un contexte usager en fonction de matériel est réalisée encore très malheureusement de cette façon. 🙂
Alors poussons un peu la réflexion, sur un terrain d’entente.
1. L’usager doit pouvoir avoir le choix de son interaction quelque soit sont matériel (laptop, desktop, mobile, montre, etc.). Exemple une personne lisant le site mobile sur un grand écran parce que l’interaction est plus légère ou le réseau est pourri.
2. Lorsqu’il fait le choix d’une interaction particulière, cette interaction doit pouvoir s’adapter (RWD mais pas seulement) dans la mesure du possible aux conditions matérielles de son appareil (taille de l’écran, type de connexion, touch ou clavier externe, etc.)
Avec ses deux contraintes, on couvre déjà beaucoup de choses.
L’idée derrière l’interface adaptative ne tient pas compte de l’appareil, mais du contexte d’usage. Il y a eu une conférence intéressante sur le sujet l’année dernière à ParisWeb. C’est par là : http://www.paris-web.fr/2013/conferences/designing-with-sensors-creating-adaptive-experiences.php
Et non, je ne suis absolument pas d’accord avec tes deux contraintes (ou je n’ai pas compris ta réflexion), simplement parce qu’un utilisateur n’a pas la compétence pour choisir le type d’interaction qui lui convient et en plus ce n’est pas son rôle. C’est un peu comme si tu montais dans ta voiture et que tu pouvais choisir le mode de conduite : voiture/moto/avion/cheval ? L’interface doit être transparente et donc adapter à l’usage, au contexte, à l’utilisateur et ce qu’il a faire.
Je ne suis justement pas d’accord pour dire que « l’utilisateur n’est plus mono-écran ». Il l’est peut-être de plus en plus justement, délaissant le PC en se rendant compte que le smartphone ou la tablette peut suffire, n’est pas qu’un accessoire du PC.
Et il faut penser au nombreux pays émergents où le smartphone est/sera le premier et seul moyen d’accéder au Web.
Oui, et non, J’ai plus tendance à penser que l’usage du mobile ne remplace pas l’usage du PC, mais vient créer d’autres usages « à coté », comme le téléphone mobile l’a fait avec le téléphone fixe. Ou pour de nouvelles populations (Personnes âgées, sans PC, qui maitrisent rapidement un iPad.) il crée effectivement un usage qui n’existait pas.
Je ne connais pas assez bien la problématique des pays « émergents ». J’avais lu quelques articles sur les usages du téléphone notamment en Afrique pour beaucoup de choses, notamment les paiements. Mais il ne faut pas oublier que les smartphones touchscreen sont le haut de gamme et que même en France 50% des téléphones utilisant de la data sont encore des téléphones sans touchscreen.
Très bon article Raphaël
Concernant le louvre je suis tout à fait d’accord avec toi.
J’ai réalisé une petite « refonte » en choisissant le musée du Louvre-Lens
http://davidl.fr/blog/louvrelens.html
Pour avoir un exemple d’interface adapatative j’ai mis une démo en ligne
http://flexbox.github.io/louvrelens/
J’ajouterai à l’excellent article de Raphaël que, selon moi, le succès des tablettes est lié à une meilleure adaptation à une situation d’usage nouvelle que j’appellerai la semi-mobilité : usage d’une application informatique dans différents endroits (salon, cuisine, salle de réunion) d’un lieu fixe (travail, maison).
J’en veux pour preuve que 80% des utilisateurs de tablettes ont un usage exclusif à la maison via le Wifi. Quoi de mieux qu’une tablette pour surfer sur son canapé ? L’écran du smartphone est trop petit tandis qu’un PC c’est long à démarrer, ça chauffe et ça fait du bruit.
Pour ma part, je ne crois pas à la convergence numérique, qu’on essaie de mettre en place avec des appareils hybrides (phablette ou combiné notebook/tablette). Au final, l’utilisateur choisira toujours l’appareil le mieux adapté à sa situation d’usage.