Design web: il n'y a pas que les ordinateurs dans la vie
Les concepteurs de sites web devraient d’abord penser aux téléphones et aux tablettes, et faire des sites simples, rapides à charger, et faciles d’utilisation sur tous les gadgets.
- Devant un magasin Apple de Hambourg le 28 mai 2010, REUTERS/Christian Charisius -
Tous les matins, j’ouvre les yeux avant que mon réveil sonne, j’attrape mon iPad, et je passe en revue les dernières infos technologiques du web. C’est déjà assez pathétique comme tableau, mais il faut aussi voir les sites web que je fréquente. Prenez par exemple le monstre des news hi-tech, TechCrunch, un site qui fait détraquer ma tablette presque à chaque fois que je le visite.
Pour commencer, les différents éléments sont chargés très lentement, un à un, dans un ordre qui n’a aucun sens: d’abord le texte, puis la bannière du site, puis la barre de navigation sur le côté, et enfin, après une attente insoutenable de quelques très longues secondes, le titre. Arrivé là, j’en ai un petit peu marre, mais bon, au moins, j’ai accès à l’article. Du coup, j’essaie de me calmer, et je commence à lire. Mais voilà, environ une demie seconde après que la page a chargé, le texte et le titre de l’article disparaissent soudainement. Hein?! Mais pourquoi l’article a disparu?
Si vous avez de la chance, ça ne dure qu’une seconde. L’article revient, vous vous dites qu’il y a eu un bug, et vous pardonnez aux designers de TechCrunch, parce qu’au fond, quand ils ont créé leur site, c’était pour des PCs traditionnels, et là vous surfez sur une tablette bizarroïde.
Mais parfois vous n’avez pas autant de chance, le texte clignote, disparaît, réapparaît, et puis le site entier disparaît à son tour et vous recevez une pub pour l’application iPad de TechCrunch. Pour lire l’article, il vous faudra cliquer sur un lien minuscule pour fermer la pub. A ce stade, ça fait presque 10 secondes que vous attendez pour lire votre article, vous êtes en train de bouillir de frustration, et prêts à blacklister TechCrunch à tout jamais.
Du New York Times à Google News
Mais vous ne pouvez pas. Parce que si on commençait à blacklister tous les sites qui ne tournent pas très bien sur iPad, on n’aurait plus accès à une bonne moitié du web.
L’expérience mobile de TechCrunch n’est pas géniale, mais c’est loin d’être un cas isolé. Du New York Times au New Yorker en passant par Google News et Salon, et oui, aussi chez Slate.com, de nombreux sites d’information ne ressemblent pas à grand chose et n’ont aucune ergonomie quand vous y accédez à partir d’une tablette numérique. Et ça ne s’arrête pas aux sites d’information: même les grands noms du web comme Amazon ne tournent pas très bien sur l’iPad.
Le problème, c’est que la plupart du web est juste trop dense pour l’affichage sur tablette. Quand on charge un site sur son iPad, on se retrouve souvent avec une purée de texte, images, et vidéos qui sont empilés les uns sur les autres.
Les sites sont lancés sur des codes qui sont trop lents et pleins de bugs pour un petit appareil; ils sont bourrés de boutons et de liens trop petits pour qu’on les atteigne avec notre doigt, et les images ont un rendu plus que moyen sur les écrans à très haute définition des tablettes. Le cœur du problème tient au fait que les concepteurs n’ont pas fait grand chose pour s’adapter à la tablette: ils ont sûrement un peu bidouillé les pages pour qu’elles passent sur l’iPad, mais bien souvent ça a été fait après la conception du site, pour ordinateurs portables ou de bureau.
Un design pour tablettes qui améliore les sites
Il est temps que ça change. L’iPad a trois ans, et une croissance phénoménale. Et il n’est pas tout seul: entre le Nexus 7 de Google, le Kindle Fire d’Amazon, et bientôt le nouveau venu de Microsoft, le Surface, les tablettes sont les nouvelles grandes sources de trafic sur le web. Il faut que le web se modernise pour convenir à ces nouveaux appareils.
Les concepteurs devraient créer des sites qui ne sont pas juste adaptés aux tablettes, mais conçus pour elles en priorité. Ce n’est qu’après avoir construit les pages pour qu’elles tournent sur des écrans tactiles de 7 et 9 pouces qu’ils devraient bidouiller leurs sites pour les ordinateurs.
Pourquoi faudrait-il donner la priorité aux tablettes? Ce n’est pas juste parce que l’iPad et les autres du genre sont en train de devenir le moyen principal d’accès au web - selon plusieurs études, les appareils mobiles représentent plus de 10% du trafic web, et ce chiffre ne fait que croître.
C’est aussi parce que les contraintes imposées par les tablettes (petits écrans, bande passante assez basse et temps de chargement élevé) ne peuvent qu’améliorer les sites, même pour les appareils de bureau. Les sites mobiles bien conçus sont souvent plus rapides, plus jolis, et plus agréables pour la navigation que leur version de bureau. Si les designers créaient pour les tablettes en priorité, le web tout entier s’en porterait mieux.
Le problème des versions optimisées pour tablettes ou smart-phone
Mais attention, je ne demande pas qu’on lance des versions optimisées pour tablettes ou smart-phones des sites en question. Beaucoup de sites le font déjà, mais leurs versions mobiles ressemblent souvent à la belle-sœur moche du site d’origine, sans doute parce que la plupart des entreprises n’ont pas les ressources nécessaires pour entretenir deux ou trois designs complètement différents.
Ils n’offrent pas autant de fonctionnalités que le site d’origine: par exemple, la version smart-phone de Slate.com ne charge pas les commentaires des lecteurs. De même, quand les designers améliorent leur site, ils s’occupent en priorité de la version ordinateur de celui-ci.
C’est compréhensible: pour la plupart des sites, la version ordinateur représente le plus gros du trafic et des revenus publicitaires. En plus, le web mobile est encore jeune et toujours en mouvement: il existe de nombreux téléphones et tablettes aux capacités technologiques variables, et les designers n’ont pas l’habitude de créer des sites satisfaisants sur cette plate-forme.
Et puis il y a le problème de l’argent. Toute l’industrie de la publicité sur Internet est construite autour des navigateurs de bureau, et le web adapté aux tablettes ne convient pas vraiment aux pubs interactives et distrayantes qui alimentent la toile de nos jours.
Pour toutes ces raisons, les entreprises du web devraient se concentrer sur la conception de sites qui fonctionnent sur tous les gadgets. Dans un monde idéal, le site mobile serait plus qu’un dérivé de la version ordinateur. La version ordinateur serait identique à la version mobile: simple, rapide à charger, et facile d’utilisation sur tous les gadgets.
Les sites minimalistes existent déjà
Ça n’a rien d’une proposition radicale. Beaucoup de designers conçoivent leur site selon ce principe. Les blogs de Jason Kottke et John Gruber ont été conçus pour des ordinateurs classiques, mais parce qu’ils chargent rapidement et ne sont pas bourrés d’éléments polluants, on dirait qu’ils ont été construits pour les appareils mobiles.
Comme l’a fait remarquer John Herman, de BuzzFeed, plusieurs nouvelles startups du web ont adopté ces designs minimalistes, y compris les plateformes de blog Svbtle et Medium, mais aussi Branch, un site de discussion, et l’alternative avec abonnement de Twitter, App.net. Tous ces sites ont l’air d’avoir été créés pour l’iPad, avant d’être adaptés à l’ordinateur. Ce n’est pas une coïncidence s’ils sont également beaux et très intuitifs.
Bien sûr, c’est toujours plus simple pour une start-up avec des moyens de faire du web mobile une priorité. Les sites déjà établis qui survivent grâce à la publicité ne peuvent pas tout lâcher pour le mobile aussi facilement. Mais ils devraient essayer.
Dans les prochains mois, et surtout si Apple sort un nouvel iPad moins cher et qu’Amazon s’attelle à concevoir une nouvelle version du Kindle Fire, le trafic mobile va exploser. Bientôt, les lecteurs ne toléreront plus la navigation lente et pleine de bugs qui est celle des tablettes aujourd’hui. Si la page met trop de temps à charger, si les images sont floues, si les liens ne sont pas faciles à atteindre, et si on continue à nous bombarder de pubs pour les applications iPad, je prendrai ma tablette et j’irai voir ailleurs. Là où on saura l’apprécier.
Farhad Manjoo
Traduit par Hélène Oscar Kempeneers
, suivez-nous sur 
Mis à jour le 23/11/2012 à 7h05
L'auteur n'a sans doute pas tort dans le fond mais il est très énervant à parler de son Ipad au lieu des tablettes en général et à truffer son article de "yaka" et "fautqu'on"...
L'Ipad représente 60 à 80 % du marché des tablettes (selon que l'on intègre les usages pro ou pas), et c'est le rôle du journaliste de dire ce qu'il faut faire (enfin c'est pour ça que je viens le lire...)
Ce qui vous énerve me semble tout à fait normal.
Qui a tort, qui a raison...
D'après les derniers chiffres les tablettes Apple c'est 57% du marché. 41% pour les tablettes sous Android (le reste sous Windows ou autres..).
@julien_g
je ne sais pas d'où vous sortez vos chiffres mais je vous renvois vers ce lien (http://gs.statcounter.com/#mobile_browser-ww-monthly-201110-201210) qui montre que seulement 26% des requêtes sont effectués via un iBidule (iphone, ipad, ...) contre 24% avec android et 19% avec opéra.
Au final, c'est bien ce chiffre qui compte plutôt que les parts de marché d'un appareil spécifique.
Sinon pour revenir sur l'article, il est vrai que quelque soit la tablette, certains sites posent problème que ce soit des problèmes technique (version de flash, chargement, ...) ou plus simple des problèmes de design (bouton trop petit, mal agencés, menu étriqués et j'en passe).
pour les soucis technique sur Android, Chrome & Firefox commencent à être performant et les soucis se font plus rare.
pour le design par contre peu, de webmaster prennent en compte ces plateformes et ca reste un soucis mais le temps avançant, ils sont tout de même de plus en plus à intégrer la navigation avec les doigts et ses problématique dans la construction de leur site.
Simplement, refaire entièrement un site web ne ce fait pas dans la nuit, ca prend du temps et coûte souvent pas mal d'argent. il faut donc bien évaluer la proportion de surfeurs mobile avant de faire cet investissement car si c'est pour faire plaisir à 5 ou 10% de ses visiteurs cela n'en vaut probablement pas la peine.
Les ibidules incluent les smartphones, qui ne sont que peu traités dans l'article ; les tablettes sont au centre de cet article, car l'auteur y insinue qu'elles sont le futur de la navigation de tous les jours, plus que le smartphone.
Or pour les tablettes, Apple a (c'est un fait) 60% du marché, et si l'on enlève les tablettes pro (représentant de commerces, commerciaux, salons et démonstration), le chiffre tourne autour des 80% de PDM pour Apple (or c'est ici le grand public qui est visé).
Donc non, dans un article sur les sites web adaptés aux tablettes, ça me semble très pertinent.
Sinon, le reste de votre commentaire n'est en fait qu'une paraphrase de l'article de Farhad, la prochaine fois, écrivez "sinon, pour revenir sur l'article, il est très bien", on gagnera tous du temps ! :)
Bon article, je suis tout à fait d'accord avec les propositions énoncées :)
Je sais bien que c'est la mode et que l'industrie du web-design essaie de relancer les ventes, mais avant de penser à une frange minimale de la population, il faudrait penser à la frange maximale de la population : des utilisateurs peu aguerris qui doivent retrouver facilement et rapidement l'information. Sans parler des vitesses de connexion pour lesquelles l'ensemble des français ne bénéficie pas des fibres optiques des centre-villes où vivent les geeks et autres développeurs :)
Non sérieusement, si la mobilité et le besoin de surfer sur le téléphone permettent aux concepteurs de sites internet de se souvenir que le flash, les animations grotesques et les mises en page merdiques ne sont pas nécessaires au bon fonctionnement d'un site internet, on aura fait un grand pas en avant. En attendant, la mobilité des sites internet ne concerne qu'un petit nombre de personnes (je parle de la vraie mobilité sur téléphone) et qu'un petit nombre de sites ("sites consultables d'urgence")
Tablette ou pas, je suis effaré par l'inutile complexité de nombreux sites. Trois exemples récents. 1) Le site de la FNAC est encombré d'un bandeau avec 15 onglets, correspondant aux différentes boutiques, et dès que le curseur passe sur un de ces onglets, il déclenche l'affichage d'un menu si grand qu'il couvre toute la page. Résultat, impossible de lire les caractéristiques d'un produit, ou les résultats d'une recherche, sans que l'écran soit régulièrement obscurci par un menu intempestif. 2) L'ONDRP (Observatoire National de la Délinquance, etc) a publié mardi un rapport annuel, qui se trouve sur la page d'accueil du site www.inhesj.fr, tout irait bien s'il n'était pas caché dans une animation Flash qui fait défiler lentement divers documents, si bien que le rapport n'apparaît que pour un utilisateur chanceux, ou étrangement patient, pour ne pas dire amorphe. Sans compter que du coup le fameux rapport est mal indexé par les moteurs de recherche. 3) Aucun opérateur téléphonique ne propose, à ma connaissance, une page de suivi de la consommation qui donne simplement ce que le client vient chercher sur un tel site; d'incroyables animations parasitent ces pages, si bien que leur chargement est incroyablement lent, alors que l'information utile pèse une centaine d'octets. Ils poussent le vice jusqu'à parasiter de la même façon les versions pour mobiles !
Article très juste. Le jour où les concepteurs de site auront compris que faire un bon site, ça ne consiste pas à mettre des petits mickeys qui bougent partout, on aura franchi un grand pas. Pourtant, Google, avec ses mises en page épurées, nous montre la voie. La complication excessive de la plupart des sites, à mon avis trouve sa cause dans la recherche du tape-à l'œil de la part de certaines sociétés (un état d'esprit archaïque encore bien ancré), et aussi, je le subodore, par la nécessité de la part des entreprises conceptrices en sous-œuvre, de faire valoir un travail important de programmation... et surtout de la faire payer à leur commanditaire.
Claude fernandez
http://www.claude-fernandez.com
Évidemment que ces nouvelles mises en pages sont importantes pour tous les sites, mais le problème principal est que les pubs ne sont pas adaptées aux tablettes et smartphones. Allez-vous rendre votre site accessible aux mobiles, mais ne plus avoir de revenus publicitaires pour tous les heureux détenteurs de tablettes ? C'est totalement aberrant.
Quand on se met sur le point de vue des sites et de la rentabilité, la mobilité, c'est pas encore au point. Les régies publicitaires spécialisées dans le mobile sont encore très minoritaires.
Les sites pour mobiles et tablettes sont presque tous sans pub, d'où perte de revenus, d'où les sites qui trainent les pieds.
Ca je suis tout a fait d'accord !
Le problème majeur pour les créateurs de sites web est déjà de trouver des standards pour la majorité des clients (comprendre personne qui consulte depuis son propre ordinateur).
Ce qui implique des gens qui sont sur IE6, des Mozillas pas mis à jour depuis 2008, des problèmes de Chromes incompatibles avec la résolution des mêmes problèmes sur Safari (qui se contrefout des standards établis au passage)...
En résulte généralement une maquette très riche et prometteuse créée par un graphiste qui bosse sur Mac, et un résultat revu très à la baisse parce que dans les faits, il faut être compatible avec le maximum de clients.
Les journalistes aiment beaucoup parler de HTML5, de CSS3, de Web 2.0, de tous ces concepts que personne n'arrive à définir... et de leur tablette qui ne supporte aucun de ces formats !
Au passage, qui dit que c'est pas le signal Wifi de l'auteur qui est à mettre en cause en premier lieu quand il s'agit de la vitesse d'affichage d'éléments webs basiques ? Sa propre tablette non mise à jour ? Une vague synchronisation icloud ou autre qui prend le dessus ?
Les problèmes signalés dans l'article se posent également aux utilisateurs de micros. A partir du moment où votre bande passante est limitée (la mienne est à 2mega quand tout marche bien), les sauts de ligne inattendus, et les apparitions d'images intempestives qui vous font perdre le fil de votre lecture sont monnaie courante.
C'est dû en grande partie au manque de professionnalisme des éditeurs de sites WEB qui testent leurs pages sur des liaisons haute vitesse mais également au volume inutile d'informations inutiles qu'on vous adresse.
Et avec le cloud computing, cela ne va pas s'arranger, on va vers l'engorgement des réseaux.
Si vous y ajoutez les éditeurs des systèmes d'exploitation qui cherchent la pierre philosophale du système universel vous arrivez vite à l'insupportable.
Il est de bon ton maintenant d'offrir un bureau unique "et tactile" de préférence, ce qui est absurde pour l'utilisateur de micro ne passe pas sa vie à butiner sur la toile et qui cherche à conserver un écran propre, en conséquence on rend un service en nette régression.
Jusqu'aux fournisseurs d'accès qui nous menacent de nous taxer à la bande passante consommée alors qu'on n'est pour rien dans le flux de données inutiles qu'on nous impose (surtout avec les vidéos). C'est comme si on nous demandait de payer les timbres pour la publicité que nous récupérons à notre corps défendant dans notre boîte aux lettres.
Tout cela est la conséquence d'un système dicté par le marketing inversé qui cherche à convaincre l'utilisateur que ce qu'on lui offre au moindre coût c'est ce qu'il demande, ce qui frise l'escroquerie.
L'auteur de l'article est arrivé à une conclusion pertinente puisque la pratique consistant à faire des sites qui s'adaptent à tous les écrans ,et dans un premier lieu aux appareils mobiles, fait partie des nouvelles règles de l'art des web-designer.
Le "responsive web design" et le "mobile-first design" existent depuis des années déjà mais commencent à peine à être des pratiques courantes lors des développement de nouveaux sites web.
Le site ne doit pas se contenter d'être minimaliste, il doit aussi s'adapter aux téléphones, aux tablettes ou aux TV ! Un exemple avec le site smashingmagazine.com
L'auteur a raison, et en tant que developpeur d'applications/ sites mobiles, je suis tout autant énervé que lui lorsque je surfe depuis ma tablette ( galaxy tab 10.1) et ce , depuis bientôt deux ans.
Oui mais. réfléchissons : combien de temps a-t-il fallu pour que toutes ou presque les sociétés, groupes, associations aient un "site internet" ? 10 ans, environ. Et maintenant qu'ils ont un site, il faut TOUT refaire ?
He bien oui mon p'tit monsieur, il faut tout refaire, tout repenser , tout re-écrire les contenus et l'ergonomie .
Donc, patience.. le surf sur la tablette est "jeune" et il faudra encore quelques mois ( pour la fnac) a quelques années ( pour l'urssaf :) avant de refaire les sites.
Moi en attendant, je suis content, quelques années de boulot garanti :)
C'est vraiment ce que vous souhaitez ? Un web fait pour les tablettes ? Sans aucune personnalité. Responsive, c'est très bien mais on est obligé dans ce cas de faire quelques sacrifices sur le travail de graphiste qui fait tout le charme de certains sites web comme TheVerge, par exemple. Je ne lis plus Endgadget depuis quelques jours du fait de leur nouvelles mise en page. Elle est adapté à tous les supports mais a perdu de son charme. Dommage.
Maintenant, prenons les deux magnifiques exemple prônés par l'auteur: Les blogs de Jason Kottke et John Gruber. C'est tellement beau. C'est ça qu'on veut ? Certes, les articles sont intéressants même s'il sont très orientés mais c'est telllllllement beau.
Si c'est juste pour avoir du texte, utilisez les outils que l'on vous offre pour le faire. Prenez votre lecteur RSS et récupérez les.
Et comme Apple le dit si bien...il y'a des appli pour ça, mes amis, adaptés à nos belles tablettes et chers smartphones.
Il est exact que certains sites web ne sont pas optimisés pour les tablettes (présentation, taille, etc.).
En revanche, l'iPad est un mauvais exemple ici: son navigateur web est connu pour être mauvais si pas exécrable. Sur un Samsung Galaxy Tab 2 10.1, le site mentionné (techcrunch) se charge entièrement en 2 secondes et la navigation sur le site marche comme un charme.
Du coup, l'article perd de son crédit et c'est dommage car sur l'ensemble, c'est assez juste.