- Lorsque l’on étend tel quel au desktop un layout conçu pour le mobile, les images, le texte et les marges deviennent excessivement grands, et l’utilisabilité se dégrade à cause de la dispersion du contenu, où l’information se retrouve éparpillée sur de longues pages
- Alors que plus de 55 % du trafic web mondial provient du mobile, l’approche mobile-first est largement utilisée ; mais lorsqu’elle se combine au minimalisme et à un design centré sur de grandes images, la densité d’information sur desktop baisse fortement
- Une comparaison entre layouts dispersés et compacts dans le cadre de 13 tests d’utilisabilité qualitatifs a montré que les pages dispersées rendaient la recherche et la compréhension de l’information plus difficiles
- Le contenu dispersé augmente le défilement et les clics, donc le coût d’interaction, et oblige à mémoriser des informations liées sur plusieurs écrans, ce qui peut entraîner charge cognitive, frustration et baisse de confiance
- Sur desktop, les informations importantes et liées entre elles doivent être regroupées dans le même viewport, et les patterns propres au mobile, comme les accordéons, doivent être utilisés avec parcimonie
Qu’est-ce que la dispersion du contenu ?
- La dispersion du contenu désigne le phénomène par lequel le contenu d’une page web responsive apparaît excessivement grand et étiré sur un grand écran d’ordinateur portable ou de desktop
- Lorsqu’une page mobile-first est rendue sur desktop, des images couvrant l’écran, des caractères agrandis et un espace négatif excessif créent de longues pages et exigent davantage de défilement
- Si la dispersion n’apparaît que dans certaines sections, elle peut ne pas poser de problème majeur d’utilisabilité, mais lorsqu’elle concerne la majeure partie de la page, son effet cumulé est généralement négatif
- Sur les appareils à grand écran, la dispersion du contenu accroît la charge cognitive, le coût d’interaction, les difficultés de compréhension du contenu et la frustration des utilisateurs
Les tendances de design qui créent la dispersion du contenu
- L’approche mobile-first consiste à concevoir d’abord pour le mobile, puis à adapter pour tablette et desktop
- Comme plus de 55 % du trafic web mondial provient d’appareils mobiles, cette approche est largement utilisée
- Le minimalisme supprime les éléments de design qui ne sont pas nécessaires aux fonctions ou messages essentiels d’un site web
- Il utilise beaucoup d’espace négatif pour éviter une impression de complexité
- La quantité de contenu affichée dans un viewport peut diminuer, ce qui peut produire une longue page à faible densité d’information
- Le design centré sur les grandes images est lié à la tendance du web moderne à utiliser de grandes images haute résolution
- Les grandes images peuvent attirer l’attention, mais elles peuvent aussi éparpiller excessivement le contenu textuel
- Quelques grandes images sur une page desktop peuvent bien fonctionner
- S’il y en a trop, le contenu textuel entre les images se fragmente sur l’ensemble de la page
Méthode des 13 tests d’utilisabilité
- Le test a combiné 13 tests d’utilisabilité qualitatifs et des entretiens semi-structurés
- La comparaison portait sur la combinaison de deux layouts et de deux types de pages
- Layouts : compact, dispersé
- Types de pages : page d’accueil, page produit
- Au total, 4 prototypes ont été utilisés
- Le prototype dispersé a été reconstruit à partir de véritables pages web desktop présentant une faible densité de contenu, un large espace négatif et de grands caractères
- La version compacte a été créée séparément en utilisant le même contenu que la page d’origine
- Les utilisateurs ont réalisé des activités ouvertes sur les 4 prototypes, puis ont participé à une discussion de suivi comparant les deux versions de chaque type de page
- La méthodologie complète de l’étude se trouve sur une page méthodologique séparée
Les problèmes d’utilisabilité créés par le contenu dispersé
- Lorsque la dispersion s’étend sur une grande partie de la page, elle peut avoir un impact important sur l’expérience utilisateur globale
- Les principaux problèmes sont les suivants
- Augmentation de la longueur de la page et du coût d’interaction
- Augmentation de la charge cognitive
- Difficulté à former un modèle conceptuel de la page
- Frustration accrue
- Baisse de la confiance
-
Plus de défilement et de clics
- La dispersion du contenu crée de longues pages qui nécessitent davantage de défilement, et les éléments de design propres au mobile, comme les accordéons, exigent davantage de clics pour accéder au contenu
- Lorsqu’un site mobile-first est rendu sur grand écran, le contenu se disperse et produit une longue page ; cet effet s’amplifie lorsqu’il se combine au minimalisme et au design centré sur les images
- Quand le contenu est éparpillé sur plusieurs viewports, il devient plus difficile de trouver une information précise dans la page
- Lors des tests, les participants ont eu plus de difficultés à trouver des informations sur la page produit dispersée que dans sa version compacte
-
Les problèmes des patterns mobiles sur desktop
- Sur mobile, les accordéons permettent de replier beaucoup d’informations dans un espace restreint, de raccourcir la page et d’aider l’utilisateur à accéder directement à la zone qui l’intéresse
- Sur grand écran, le problème des longues pages étant relativement moins important, les accordéons peuvent fragmenter le contenu et augmenter fortement le coût d’interaction pour trouver les informations importantes
- Un participant a réagi en expliquant qu’il devait ouvrir et fermer chaque élément de l’accordéon d’informations produit dans le prototype dispersé pour lire les informations
- Un autre participant a estimé que la page compacte était meilleure, car elle nécessitait moins de clics et l’information était directement devant lui
-
Augmentation de la charge cognitive
- Plus les images grandissent et plus l’espace négatif s’élargit, plus le contenu textuel se fragmente sur plusieurs viewports
- Lorsque des contenus liés sont coupés écran par écran, les utilisateurs ont du mal à les percevoir comme une seule unité
- Pour porter un jugement ou prendre une décision, ils doivent mémoriser des informations provenant de différents viewports ou faire défiler la page dans les deux sens, ce qui peut facilement dépasser la capacité de la mémoire à court terme
- Le layout compact affiche davantage d’informations dans le même viewport, ce qui réduit la charge cognitive et offre une expérience d’exploration plus fluide
- La nature des images influence aussi la perception de la fragmentation
- Les images informationnelles peuvent occasionner peu de charge supplémentaire même lorsqu’elles sont affichées en grand sur grand écran, car les utilisateurs prennent le temps de les examiner pour en tirer des informations utiles
- Les images décoratives n’ont pas de valeur informative : les utilisateurs les ignorent, et le fait de devoir faire défiler de grandes illustrations pour atteindre du contenu utile aggrave la perception de fragmentation
Effets sur le modèle conceptuel et la confiance
- Les pages dispersées, du fait de leur longueur accrue et de la charge imposée à la mémoire de travail, rendent plus difficile l’évaluation des concepts transmis par le site web et la formation d’un modèle conceptuel
- Dans le prototype de page d’accueil, les participants ont indiqué qu’il était plus difficile de comprendre l’étendue de l’offre, car ils devaient mémoriser et comprendre 4 à 5 propositions au lieu de les voir simultanément
- Sur la page produit, lorsque les éléments de décision d’achat comme le prix, les détails du produit et les avis étaient dispersés sur plusieurs viewports, les utilisateurs devaient consommer et mémoriser les informations séparément
- Lorsque les informations importantes sont regroupées ou placées dans un nombre réduit de viewports, il est plus facile de construire une compréhension conceptuelle du produit ou de la valeur proposée
- L’illusion d’exhaustivité peut être plus marquée sur les sites web dispersés
- Des blocs de couleur peuvent créer de fortes lignes horizontales dans le viewport, ou un vaste espace négatif peut donner l’impression que la page est terminée
- En l’absence d’indices de défilement indiquant qu’il y a davantage de contenu, les utilisateurs risquent d’en manquer une partie
- Lorsque les problèmes d’utilisabilité s’accumulent, un site web dispersé peut sembler pauvre en contenu et difficile d’accès
- Certains utilisateurs peuvent avoir le sentiment que l’entreprise cache des informations, auquel cas la confiance peut diminuer
- Les utilisateurs ont particulièrement préféré le layout compact lorsqu’ils avaient pour objectif d’explorer le site web et de comprendre globalement ce qu’il proposait
Quand la dispersion du contenu peut être utile
- Lorsque toute la page est dispersée, l’effet cumulé sur l’utilisabilité est généralement négatif, mais dans certains contextes, cela peut contribuer positivement à l’expérience
- Réduire la quantité de contenu affichée dans un viewport peut aider l’utilisateur à se concentrer sur un élément mis en avant à la fois, et peut aussi réduire la perception de surcharge informationnelle
- Réduire la densité de contenu dans le viewport pour mettre l’information en valeur peut être utile dans les cas suivants
- Lorsqu’un contenu complexe doit être compris morceau par morceau
- Lorsque l’utilisateur doit se familiariser avec le contenu affiché et qu’un excès d’informations peut le submerger
- Lorsqu’on présente des images à forte valeur
- De grandes photos de produit peuvent apporter de la valeur en permettant aux utilisateurs d’examiner facilement les détails du produit
- Les images à forte valeur informationnelle peuvent justifier la dispersion, mais les images de remplissage ou destinées uniquement à créer un intérêt visuel provoquent de la dispersion sans bénéfice supplémentaire
- Dans le prototype de page d’accueil, la valeur des images était plus faible, si bien que les effets positifs de la dispersion du contenu ont été moins observés
Recommandations de conception pour desktop
- Il faut évaluer séparément le rendu desktop
- Si une grande partie de la page est excessivement étirée sur desktop, il faut envisager de la reconcevoir afin de faciliter le balayage visuel des contenus importants
- Il faut évaluer la valeur apportée par les images
- Les grandes images qui aident à comprendre le contexte du produit ou du service doivent être privilégiées
- Il faut déterminer si leur valeur justifie la dispersion qu’elles créent sur desktop
- Les contenus importants et liés entre eux doivent être regroupés dans le même viewport
- Il faut tenir compte des informations les plus pertinentes pour comprendre l’offre, et choisir un design qui réduit les allers-retours de défilement
- Les interactions et éléments de design propres au mobile doivent être limités
- Il faut réduire l’usage des accordéons sur desktop
- Il faut envisager un design adaptatif qui affiche le même contenu d’une manière adaptée au desktop
- Il est préférable de n’utiliser la dispersion que de façon limitée, comme stratégie pour concentrer l’attention sur des points clés ou du contenu complexe
Conclusion
- Le contenu dispersé sur une page desktop minimaliste peut réduire les distractions et concentrer l’attention sur des points clés ou des informations complexes
- Mais lorsque toute la page est construite selon une logique mobile-first, minimaliste et centrée sur les images, les problèmes d’utilisabilité s’aggravent sur desktop
- Lorsque le contenu s’étire et se fragmente sur plusieurs viewports, il devient plus difficile pour les utilisateurs de consommer et de comprendre l’information
1 commentaires
Réactions sur Hacker News
Danny O'Brien tenait l'ancien blog Oblomovka et a inventé vers 2007 le terme hinternet
À l'époque, Internet commençait à s'ouvrir au grand public alors qu'il était jusque-là surtout exploité par une élite technique pour elle-même, et hinternet désignait l'idée qu'il existait d'un côté un Internet raffiné, techniquement solide et utile, et de l'autre un Internet de spam Viagra et de bannières pop-up
Autrefois, l'élite technique pouvait largement éviter le hinternet, un peu comme on évite un quartier dangereux, alors que le grand public n'avait pas ces repères et subissait une expérience bien plus dégradée
Aujourd'hui, l'essentiel d'Internet est devenu du hinternet, et même les systèmes indispensables comme la banque, les prêts hypothécaires, les paiements automobiles ou les services publics sont conçus en mobile first et recourent, au nom de la « vraie vérification des utilisateurs », à des pratiques opaques qui cassent sur les plateformes ouvertes
Si l'ancien hinternet ressemblait à une ruelle louche vendant des montres contrefaites, celui d'aujourd'hui se rapproche davantage d'une dystopie d'intégration verticale de l'information opérée en coulisses par des organismes quasi gouvernementaux, au point qu'il faut passer par la plateforme de gestion d'identité id.me, qui vend aussi des produits, pour se connecter à l'IRS
Il existe bien des tentatives pour cultiver de petits jardins élégants, mais leur succès reste irrégulier et, du point de vue individuel, il y a peu d'incitation à participer au hinternet en dehors de ce qui est strictement nécessaire
Vu sous cet angle, le « mobile first web design » n'est qu'un symptôme isolé d'un problème beaucoup plus vaste
D'un côté, on a les élites cultivées du monde universitaire, militaire et gouvernemental présentées comme les fondateurs légitimes, et de l'autre les masses arrivées après l'Eternal September
Au final, cela revient à dire que des marchands, spéculateurs et escrocs se sont naturalisés en entreprises et banques du nouveau monde ; si l'on lit l'époque dot-com comme une histoire de colonisation, les élites deviennent des autochtones chassés de leur propre territoire, ce qui colle aussi très bien aux récits contemporains
Mais ce conte laisse de côté les gens ordinaires, les vrais
De 1997 jusqu'aux environs de 2010, la période dot-com, le Web 2.0 et la construction d'empires restaient surtout un déplacement de l'argent et du pouvoir existants vers Internet, avec en périphérie quelques « entrepreneurs » plus brutaux ; 99 % des gens restaient spectateurs, avant d'être finalement poussés dans l'enclos
La possibilité d'un Internet des gens existe toujours, mais les problèmes classiques comme le passager clandestin ou la tragédie des communs n'ont presque pas été résolus, et à ce stade le « Web 3.0 et le web blockchain » semblent morts
Pour revenir à un Internet public, de grande qualité et de grande ampleur, il faut regarder de plus près l'histoire d'Internet, les récits qu'on en fait et qui sont les véritables parties prenantes
On ne sait pas s'il s'agit de l'Internet des années 90 centré sur IRC et Usenet, difficile à utiliser, ou de l'Internet underground des années 90 avec ses hébergements gratuits et ses contenus illégaux
Il est difficile de voir en quoi l'Internet des années 90, avec ses forums, IRC, spams Viagra et goatse, ressemble à l'Internet d'aujourd'hui, aseptisé, saturé de dark patterns et dominé par une poignée de méga-entreprises
À cause de l'usage du mobile, l'illettrisme informatique ne diminue pas, il augmente même, et cela se traduit par des gens qui cliquent sur de mauvais liens, installent des barres d'outils dans leur navigateur, puis se retrouvent progressivement piégés par des dark patterns
Je vois cet état de choses assez souvent quand des proches me contactent pour des problèmes informatiques
À chaque fois que j'emploie des termes comme « phonish » ou « phonishness », je me fais downvoter, mais j'ai le sentiment que les smartphones ont rendu la vie pire plutôt que meilleure, et qu'ils ont amené les gens à se mettre au service de l'ordinateur
J'attends la prochaine plateforme
En dehors du dossier de courrier indésirable, je n'y suis presque jamais exposé, et tout le reste est filtré dans des espaces « corrects » ou adaptés à une sorte de résidence Internet privilégiée
Je n'ai pas d'argent, mais du point de vue du savoir je suis riche, et cela ressemble à une tragédie des communs où les personnes peu à l'aise avec la technologie servent de chair à canon pour la publicité et les services payants comme YouTube
Avec le temps, il devient de plus en plus évident que le front-end est probablement la partie la plus difficile de la stack
Les gens pensent qu’il suffit de bricoler une app Bootstrap React pour que ce soit parfait, mais écrire une UI complexe qui fonctionne sur tous les navigateurs, appareils, technologies d’assistance et dans toutes les langues est extrêmement difficile
Cela demande une connaissance approfondie de HTML, CSS et des API web associées, et les bons ingénieurs front-end sont très rares, même dans les big tech
Les designers UX qui pensent aussi à tout cela sont encore plus rares, et ce genre de personne vaut de l’or
J’ai fini par me reconvertir dans le design, en me disant que si je n’allais pas être respecté, autant au moins ne pas devoir continuer à courir sur le tapis roulant des nouvelles technos
J’ai aussi fait du back-end, et c’est difficile à sa manière, mais s’il s’agit d’argent, je choisirais le back-end plutôt que le front-end
Après avoir fait du design, du back-end et du front-end, j’en suis venu à voir deux axes dans ma tête : la reconnaissance et l’ingérence
Le design reçoit beaucoup de reconnaissance parce que le résultat est visuel, mais tout le monde a un avis sur la “bonne manière” de faire et s’en mêle facilement
Le back-end, à part les autres ingénieurs, ne subit pas vraiment d’ingérence, mais même quand c’est bien fait, ça fonctionne simplement comme c’est censé le faire, donc il est difficile d’en obtenir du crédit
Le front-end est entre les deux : quand c’est visible et que ça marche bien, il y a une certaine reconnaissance, mais même si l’app est rapide et réactive, la moitié du mérite revient parfois au designer
En même temps, les gens disent “ça devrait marcher comme ça” en se basant sur d’autres apps, et le développeur front-end doit faire en sorte que tout fonctionne tant bien que mal entre ce que le designer a validé et ce que le back-end prend en charge
Ils se fatiguent de devoir se battre toute la journée avec des collègues qui savent coder mais n’ont aucun sens du design, et les qualités qui font un bon ingénieur front-end facilitent aussi le passage vers des rôles au coût psychologique plus faible
Les développeurs front-end ne traitent pas avec des machines objectives, mais avec des humains subjectifs ; ils doivent aussi composer avec les designers et les product managers, tout en subissant les contraintes des ingénieurs back-end et de l’infrastructure
Il faut faire fonctionner tout ça sur plusieurs appareils et navigateurs, utiliser le framework choisi par quelqu’un d’autre, et ne rien casser au passage
Respect à tous les développeurs front-end
Il y avait du padding partout : du padding sur tout, du padding sur le texte, du padding sur les boîtes entourant le texte, et encore plus de padding sur les lignes de tableau contenant ces boîtes
Résultat : sur un écran 1080p standard, on ne voyait qu’environ quatre lignes du tableau, alors qu’il y avait à peine de vraies informations dans chaque ligne
En plus, pour une raison obscure, la taille de police était définie en largeur de viewport, ce qui rendait le tout presque inutilisable sur les anciens écrans 4:3
Il suffit de penser à des systèmes qui doivent traiter des milliards d’événements par jour, semaine ou mois, gérer le cache de données et le data warehouse, les notifications en temps réel, le volume des files de tâches, différents types de requêtes API, la synchronisation entre systèmes back-end, plusieurs magasins de données, l’extension multi-région, la redondance et la gestion des pannes back-end
Dans les logiciels web complexes, ce genre de problèmes back-end est courant
Le front-end qui se branche sur ce back-end a en général moins à craindre qu’un problème éclate au milieu de la nuit à cause de processus automatiques, et moins à se soucier du nombre d’utilisateurs ou du volume de données
Aussi difficile que puisse être le développement initial du front-end ou sa maintenance face aux changements de navigateurs, une fois le développement terminé, il s’agit d’un code statique qui s’interface avec des systèmes sous-jacents bien plus complexes, et ces systèmes continuent d’exiger de l’attention chaque fois que les données et les exigences métier évoluent
Le problème, ce n’est pas mobile-first contre desktop, mais les designers qui n’ont toujours pas compris que le web est un contenu dynamique qui doit s’adapter fluidement à la taille et à la forme de l’écran de l’utilisateur
Le web n’est pas un support statique comme le papier, et il n’est pas lié à une taille ou une forme précise ; il ne faut donc pas le traiter comme tel
Un “designer” web ne devrait pas chercher à forcer le contenu dans une taille ou une résolution en pixels donnée, et comme les résolutions d’écran et les ratios largeur/hauteur sont beaucoup trop variés, le contenu doit pouvoir s’y adapter
Même pour les utilisateurs malvoyants qui ont besoin d’agrandir la police, l’accessibilité se dégrade fortement si le contenu se casse quand la taille du texte augmente
Ces pages doivent quand même fonctionner aussi bien sur mobile que sur navigateur desktop et rester jolies partout, et ce n’est pas si difficile
Cela prend simplement un peu plus de temps, et les media queries avec un peu de JavaScript le rendent possible
En même temps, c’est un domaine chaotique même pour quelqu’un qui fait ce métier depuis longtemps
Aujourd’hui, je m’implique autant que possible dans la phase de conception grâce à mon bagage design, puis après implémentation et déploiement, on me remonte des demandes du genre “signalez-moi tout ce qui casse sur des viewports obscurs utilisés par 1 % des utilisateurs”, et je corrige ensuite en phase de review ou en production avec des patchs CSS et des media queries spécifiques au viewport
Si la longueur des lignes de texte est à peu près similaire dans tous les livres imprimés, ce n’est pas pour rien, et la largeur de lecture doit toujours être limitée
La largeur peut être de 300px comme de 1920px, on peut avoir une souris, n’utiliser que le tactile, avoir les deux, ou n’avoir ni l’un ni l’autre
Menu hamburger et icônes pictographiques
Je comprends pourquoi on les utilise sur mobile.
Quand on n’a de place que pour le contenu, il est logique de ne garder qu’un petit nombre de fonctions sous forme de petites icônes et de cacher le reste dans un menu hamburger.
Mais quand on a de l’espace, c’est affreux de faire ça.
Au mieux, ça ajoute des étapes ; au pire, on finit par expérimenter pour deviner à quoi sert une icône et on déclenche des erreurs.
Si l’annulation fonctionnait correctement, ce serait déjà ça, mais on dirait qu’ils ont décidé que même ça pouvait être cassé.
Comme dans l’ancien Apple HIG, sur desktop il faut sortir les actions fréquentes des menus et les mettre sur des boutons avec libellé pour que l’utilisateur puisse répondre à « Que puis-je faire ? » sans jouer à cache-cache.
Comme il est difficile d’ajouter l’annulation plus tard, il faut la prévoir dès le départ pour réduire le coût de l’expérimentation.
Malheureusement, le design mobile a pris une telle emprise que, même pour des applications presque exclusivement utilisées sur desktop et même quand quelqu’un en interne défend le design desktop, les UI designers choisissent quand même les hamburgers, les pictogrammes et une annulation défaillante.
En plus, les modales sont revenues en force, mais je vais m’arrêter là pour ménager ma tension.
Même un téléphone d’entrée de gamme vieux de 5 ans comme le moto e4 a un écran 1280x720, donc il y a largement assez de pixels pour ajouter des libellés aux icônes.
Les icônes pictographiques relèvent presque d’une conception qui dit : « nous détestons les utilisateurs et nous voulons qu’ils le sachent ».
Le menu hamburger aussi pourrait souvent être supprimé si on regardait le nombre d’options.
Même l’app Gmail pourrait mettre les icônes dans une barre horizontale, mais elle utilise un hamburger, alors qu’elle ajoute quand même une barre inférieure pour le chat, la vidéo et Spaces, donc difficile de prétendre que l’espace est si critique.
Je crains un peu que les utilisateurs ne remarquent pas qu’il y a d’autres options à faire défiler, mais je préfère ça à un menu hamburger qui s’ouvre en recouvrant le contenu.
Au moins, on peut voir toutes les options et les mots correspondants.
Sur desktop, il n’y a pas besoin de ce traitement.
Cela dit, je pense que les designers les aiment parce qu’il est plus facile de conserver un design cohérent dans plusieurs langues.
Par exemple, une localisation en allemand peut être difficile à faire tenir.
J’aimerais y ajouter les options contextuelles cachées.
Les options désactivées quand elles ne sont pas disponibles, donc grisées, ont au moins le mérite de montrer qu’il existe une possibilité d’action quand les conditions sont remplies.
Mais le design moderne cache ces options, et si on ne connaît pas la condition magique qui les fait apparaître, on risque de ne jamais les voir.
Un exemple est Ubiquiti Unifi.
Sur la page de gestion des ports de switch, il n’y a pas d’option « Select All » ; il faut d’abord sélectionner un ou plusieurs ports pour qu’elle apparaisse comme par magie.
Non seulement c’est caché, mais en plus le contexte est mauvais.
Si cela existait sous forme de case à cocher désactivée, tout le monde verrait immédiatement à quel point il serait évidemment absurde qu’une case « Select All » soit désactivée quand aucun port n’est sélectionné.
Quand il y a trop de choses à l’écran, ils sont facilement intimidés, et ce sont précisément eux qui dominent les focus groups.
C’est sans doute pour ça que les designers se sont retrouvés prisonniers de cette unique règle désastreuse.
Cette étude n’a aucun sens d’un point de vue pratique.
Les pages en question ne sont pas conçues pour transmettre un maximum d’informations dans un minimum d’espace, mais pour vendre un produit.
Pour prétendre qu’il y a un effet négatif à cause de la dispersion du contenu, il faudrait mesurer les résultats selon l’objectif pour lequel ces pages ont été conçues.
Ici, l’étude portait explicitement sur des pages e-commerce et des pages produit, donc les indicateurs pertinents seraient : quelle page donne une plus forte perception de la valeur du produit, laquelle convertit le mieux, laquelle obtient un NPS plus élevé ou améliore davantage l’image de marque.
Une enceinte portable ne se vend pas sur sa fiche technique, mais sur une image désirable d’utilisation à la plage.
Si on déplie l’accordéon des détails produit puis qu’on demande « à quel point avez-vous l’impression d’avoir bien compris la proposition transmise par cette page ? », on obtiendra évidemment de meilleurs scores d’enquête.
Ce serait même surprenant qu’une page plus dense convertisse mieux.
C’est comme concevoir une étude pour montrer que le siège rigide d’une F1 est mauvais, le recouvrir de mousse, tester lequel est le plus confortable, puis déclarer que c’est meilleur alors que la métrique d’origine, ce sont les temps au tour.
Les choix de design critiqués par l’article ne sont pas le résultat d’un design mobile-first.
En réalité, les sites web de la fin des années 2000 ressemblaient déjà à ça, bien avant la généralisation du responsive design.
Exemple avec Apple : https://www.versionmuseum.com/history-of/apple-website
En gros, il compare la densité d’information de prospectus marketing ou de panneaux publicitaires, puis leur reproche de ne pas tout transmettre, alors que c’est précisément leur but.
Une publicité n’est pas une fiche technique ; elle sert à susciter chez celui qui la regarde l’envie d’acheter le produit.
Mais pour moi, c’est plutôt un fort signal de baratin bas de gamme.
Beaucoup de sites web changent complètement leur UI quand on redimensionne la fenêtre.
J’aime parfois laisser le navigateur n’occuper que la moitié de l’écran pour mettre autre chose à côté, mais avec les sites modernes ça échoue souvent, car dès qu’on réduit la taille de la fenêtre, l’UI devient inutilisable.
Quand c’est bien fait, c’est excellent, mais il est vrai que beaucoup de sites semblent agir beaucoup trop agressivement, comme s’ils n’avaient réellement testé que deux catégories de taille.
Je me demande si tu veux dire qu’en réduisant la vue, on ne peut plus accéder aux fonctions ni au contenu.
Je déteste les sites web qui mettent le contenu utile dans une mince colonne au centre.
Et le pire, c’est que même des sites autrefois normaux se dégradent peu à peu.
En général, ça arrive quand un nouveau responsable débarque et veut « réimaginer » le produit avec une vision « mobile-first ».
Patreon en est un bon exemple récemment.
Et dans certains cas, un site web normal disparaît complètement et se fait remplacer par des crapps comme Venmo, Amazon Alexa ou Chamberlain.
Ce qui est vraiment gênant, c’est qu’il n’existe pas de bon équivalent tactile à hover
C’est un élément d’UX trop utile pour être abandonné au nom du mobile-first
À part ça, je penche plutôt du côté du « ce n’est pas si difficile »
Parmi les problèmes à résoudre, faire en sorte que ça ait l’air correct sur plusieurs tailles d’écran est assez bas dans la liste en termes de temps et de complexité
Au moins sur Firefox mobile, c’est comme ça que je l’utilise pour voir le texte alternatif des images
Détecter un vrai hover serait peut-être possible, mais à moins d’utiliser un stylet, l’UX ne me semble pas terrible
En tant que webdesigner, je ne suis pas tout à fait d’accord
Les exemples donnés dans l’article fonctionnent mieux avec un contenu simple par écran
C’est plus facile à appréhender visuellement, et la version condensée comporte beaucoup de mises en page en plusieurs colonnes que je n’aime pas personnellement
Une forte densité de contenu convient aux applications desktop, mais pas à ce qui est fondamentalement un site vitrine
C’est appréciable que ce ne soit pas juste l’impression de quelqu’un
J’ai du mal à croire que les pages marketing, après des décennies d’évolution et de tests, ne soient pas arrivées à ce que les utilisateurs veulent vraiment, plutôt qu’à ce qu’ils disent vouloir
Pour les natifs d’Internet, faire défiler est un geste très naturel
Exploiter un grand écran pour comparer visuellement a aussi son utilité, mais les exemples de l’article sont mauvais
On nous dit qu’ils ont « disposé les mêmes informations dans une grille 2x2 pour permettre de comparer plusieurs services en même temps », mais je ne vois pas ce qu’il y aurait à comparer
Ce sont des services différents
J’aime bien l’exemple des spécifications produit, mais cela relève davantage d’un problème objectif d’utilisabilité qui oblige à cliquer davantage pour voir plus d’informations
Il faut voir que les captures d’écran sont « réduites », ce qui fait paraître la disposition multi-colonnes plus riche et visuellement plus attrayante
Je suis entièrement pour mieux utiliser l’espace horizontal, mais tout ce que nous avons appris sur les boutons d’appel à l’action nous amène à des designs à élément unique
Plus que les sites vitrines ou les sites e-commerce, ce sont les designs mobile-first des sites de productivité et des interfaces d’outils qui m’énervent
Qui accède habituellement à ce genre d’outils depuis son téléphone ?
Saisir au clavier mobile les noms et adresses d’anciens employeurs et de précédents lieux de résidence était déjà pénible, mais la saisie de la date était pire encore
Le sélecteur de date commençait au mois et à l’année en cours et ne défilait que mois par mois, donc entrer ma date de naissance m’a demandé environ 550 tapotements
Comme cela affecte de manière disproportionnée une catégorie protégée, les travailleurs âgés, j’ai presque eu envie de le signaler à l’EEOC, mais ce n’était pas la meilleure façon de me présenter au service RH de mon nouvel employeur
En pratique, cela revient à un affichage de petit écran, et c’est une exigence des WCAG