La signification de la densité UI et comment la concevoir

Les interfaces deviennent moins denses

• En comparant les sites web et applications actuels à ceux des années 2000, il est difficile d’ignorer la tendance à l’étalement des logiciels.
• Qu’est-ce que la densité UI ?
  • La densité UI n’est pas l’apparence d’une interface à un instant donné
  • Elle concerne la quantité d’information qu’une interface fournit sur plusieurs instants
  • Elle porte sur la manière dont les décisions de design relient ces instants entre eux, et sur la manière dont elles se relient à la valeur fournie par le logiciel

Densité visuelle (Visual density)

• La densité est d’abord pensée avec les yeux
• La densité visuelle désigne la quantité de choses que l’on peut voir dans un espace donné
• Une interface logicielle visuellement dense affiche beaucoup d’éléments à l’écran
• Une interface visuellement peu dense affiche peu d’éléments à l’écran
• Exemple : Bloomberg Terminal
  • Bloomberg Terminal est un exemple représentatif de densité visuelle
  • Un seul écran affiche des sparklines des principaux indices de marché, des répartitions détaillées des volumes d’échange, des tableaux avec des dizaines de lignes et de colonnes, les derniers titres d’actualité, ainsi que des repères UI pour les raccourcis clavier et les actions rapides
• Exemple : Craigslist et McMaster-Carr
  • Craigslist est visuellement dense avec ses centaines de liens simples et son interface de recherche et de filtrage
  • Le site de McMaster-Carr partage des éléments de design similaires et liste, dans un espace réduit, les détails de nombreuses variantes de produits
• Jugement intuitif de la perception de densité
  • Les opinions sur la densité de ces sites web se forment en quelques secondes à peine
  • Ces jugements se font rapidement et intuitivement, au niveau subconscient
  • Mais ces jugements rapides peuvent être biaisés et peu fiables
• Exemples d’images de densité visuelle
  • Deux rectangles d’exemple :
    • À gauche : de nombreux points disposés aléatoirement
    • À droite : le même nombre de points, rangés proprement en lignes et colonnes
    • La plupart des gens ont l’impression que l’image de droite est plus dense
  • Un autre exemple d’image :
    • À gauche : de nombreux points rangés proprement en lignes et colonnes
    • À droite : le même nombre de points rangés proprement mais séparés en deux groupes
    • Même avec le même nombre de points, le fait de les diviser en groupes modifie notre perception de la densité
• L’incertitude de la densité visuelle
  • En design, on ne peut pas être totalement objectif
  • Mais pour parler de densité, il faut viser une définition cohérente, signifiante et utile

Densité informationnelle (Information density)

• Edward Tufte, dans The Visual Display of Quantitative Information, traite du design des graphiques et des diagrammes

  Toute l’encre d’un graphique doit avoir une raison d’être, et cette raison doit être d’apporter une nouvelle information.

• Data-ink
  • Le data-ink désigne la partie utile d’une visualisation donnée.
  • Les éléments visuels qui ne relèvent pas des données doivent être supprimés.
  • Le data-ink n’est pas la même chose que l’espace occupé par un graphique. Il s’agit de densité informationnelle.
• Calcul de la densité informationnelle
  • La densité informationnelle peut être calculée en divisant la quantité de data-ink dans un graphique par la quantité totale d’encre nécessaire pour l’imprimer.
  • La définition du data-ink peut être subjective, mais l’important est de rapprocher autant que possible ce ratio de 1.
  • Manières d’augmenter le ratio :
    • Ajouter du data-ink : fournir des données utiles supplémentaires.
    • Supprimer l’encre non liée aux données : retirer les parties graphiques qui ne transmettent pas d’information.
• Exemples
  • Exemples de graphiques avec beaucoup d’encre superflue et versions améliorées qui transmettent beaucoup d’informations avec peu d’encre.
  • La densité informationnelle a une limite supérieure : on peut retirer trop d’encre ou ajouter trop d’informations.
  • Le public compte aussi : des utilisateurs avancés peuvent préférer une forte densité, tandis que des élèves de primaire peuvent préférer une faible densité.
• Relation entre densité informationnelle et densité visuelle
  • Plus la densité informationnelle est élevée, plus l’interface tend à paraître visuellement dense.
  • Exemple : la visualisation des horaires de train de E.J. Marey en 1885. Les heures d’arrivée et de départ sont affichées dans un espace petit et dense.
  • Tufte défend la densité de données et une maximisation raisonnable des données.
• Shrink Principle
  • Un graphique peut être fortement réduit.
  • La densité informationnelle est utile pour les charts et les graphs.
  • Peut-elle aussi s’appliquer aux interfaces ?
• Application de la densité informationnelle aux interfaces
  • L’information peut s’appliquer à l’écran.
  • Chaque partie de l’interface devrait montrer autant d’informations que possible.
  • Il est tentant de considérer l’encre comme des pixels, mais les interfaces ont besoin de séparateurs, d’éléments structurels et de repères qui aident à comprendre les relations entre les éléments.
  • Il y a une tentation, en suivant le Shrink Principle, de supprimer tout espace vide.
  • Pourtant, certains espaces vides ont un sens aussi important que les éléments visuels. Il faut aussi tenir compte du rôle des ombres, des dégradés et des accents de couleur.
• La densité informationnelle est un concept utile, mais elle ne représente qu’une partie du tableau d’ensemble.
  • Il faut chercher un moyen de comprendre toutes les décisions de design d’une interface de manière plus objective et quantitative.

Densité de design (Design Density)

• Le premier défi pour définir la densité du point de vue des décisions de design consiste à déterminer ce qui constitue une décision.
• Comprendre les décisions de design
  • En UI, UX et product design, nous prenons consciemment ou inconsciemment de nombreuses décisions pour transmettre de l’information.
  • Il faut se demander pourquoi certains choix transmettent du sens, lesquels sont simplement esthétiques, et lesquels comptent réellement.
• Principes de Gestalt
  • Étude menée par des psychologues allemands du XXe siècle sur la manière dont les humains comprennent les formes et les motifs.
  • Le terme Gestalt signifie « forme ».
  • Cette recherche a mis en évidence quelques lois fondamentales du design :
    • Proximité (Proximity) : on perçoit comme un groupe les éléments proches les uns des autres.
    • Similarité (Similarity) : des objets similaires par leur forme, leur taille ou leur couleur paraissent liés entre eux.
    • Clôture (Closure) : on comble les vides d’un design pour percevoir une forme complète.
    • Symétrie (Symmetry) : on regroupe les formes symétriques autour d’un point central.
    • Destin commun (Common Fate) : on regroupe les objets qui se déplacent de la même manière.
    • Continuité (Continuity) : on perçoit les objets qui se chevauchent comme distincts.
    • Expérience passée (Past Experience) : on reconnaît des formes et motifs familiers même dans des situations inconnues.
    • Relation figure-fond (Figure-Ground Relationship) : on distingue les éléments de premier plan et d’arrière-plan dans une image 2D.
• Influence des principes de Gestalt sur le design UI
  • Grâce au principe de similarité, un texte de même taille, police et couleur indique le même usage.
  • Le principe de proximité indique qu’un graphique proche d’un titre signifie que ce titre explique le graphique.
  • Grâce à l’expérience passée et au principe figure-fond, on peut savoir immédiatement comment fonctionne un interrupteur à bascule.
• Le concept de densité de design
  • Au lieu de se concentrer sur les pixels, on pense aux décisions de design qui transmettent intentionnellement du sens en s’appuyant sur les principes de Gestalt.
  • De même que le ratio data-ink de Tufte compare l’encre nécessaire à un graphique à l’encre totale, la densité de design compare le ratio entre les décisions de design nécessaires et l’ensemble des décisions.
  • C’est subjectif, mais dans une interface utilisateur, compter les décisions de design est plus utile que compter la quantité de données ou d’encre.
• Limites de la densité de design
  • Les interfaces utilisateur existent pour accomplir des tâches, procurer du plaisir, faire perdre du temps, générer de la compréhension ou favoriser une connexion personnelle.
  • Il faut inclure toutes les actions que l’utilisateur entreprend au cours de son parcours.
  • La densité doit aller au-delà des composants, des layouts et des écrans pour prendre en compte toutes les actions de l’utilisateur dans l’espace et dans le temps.

Densité temporelle

• La quantité de travail qu’un utilisateur peut accomplir dans un temps donné détermine la densité temporelle.
• Le temps de chargement est le principal facteur de densité temporelle. Plus une interface réagit vite et charge rapidement de nouvelles pages ou de nouveaux écrans, plus l’UI est dense.
• Bloomberg Terminal charge les données presque instantanément, ce qui lui confère une très forte densité temporelle.
• Comment augmenter la densité temporelle
  • On peut augmenter la densité temporelle en réduisant au maximum les temps de chargement.
  • Mais on ne peut pas réduire tous les temps de chargement. Par exemple, on ne peut pas modifier la vitesse de connexion Internet de l’utilisateur ni celle de son CPU.
  • Certaines tâches (upload de fichiers, attente d’une réponse du support client, traitement d’un paiement, etc.) impliquent des systèmes complexes et des variables imprévisibles.
• Comment modifier la perception du temps
  • Moins de 100 millisecondes : si le temps entre deux actions est inférieur à 100 millisecondes, elles semblent se produire simultanément. Dans ce cas, les animations peuvent au contraire donner l’impression que l’application est plus lente.
  • Entre 100 millisecondes et 1 seconde : le lien entre deux actions commence à se rompre. Les animations et transitions peuvent combler cet écart perceptif.
  • Entre 1 seconde et 10 secondes : l’animation seule ne suffit plus. Avant 10 secondes, la probabilité que l’utilisateur quitte la page augmente fortement. Dans ce cas, il faut utiliser un indicateur de chargement indéterminé pour signaler que le système fonctionne normalement.
  • Entre 10 secondes et 1 minute : un indicateur de chargement indéterminé commence à paraître statique au-delà de 10 secondes. Dans ce cas, il faut utiliser un indicateur de chargement explicite (par exemple une barre de progression) pour afficher clairement le temps restant.
  • Plus d’1 minute : il faut permettre à l’utilisateur de quitter la page ou de faire autre chose. Ne rien pouvoir faire pendant plus d’une minute peut être frustrant. Les processus longs présentent aussi un risque plus élevé d’erreur.
• Densité du temps et de l’espace
  • La densité d’une UI n’est qu’un moyen. La valeur d’une UI ne réside pas dans son apparence, mais dans les résultats qu’elle permet d’obtenir.
  • La densité consiste à fournir un maximum de valeur avec un minimum de temps, d’espace, de pixels et d’encre.

Densité de valeur (Density in Value)

• La densité de valeur concerne la valeur des résultats obtenus par l’utilisateur.
• Exemple : il est préférable de découper un long formulaire en petits morceaux et de l’organiser sous forme d’assistant, car un formulaire partiellement rempli n’a aucune valeur.
• Mettre toutes les questions sur une seule page peut sembler visuellement dense, mais si le remplissage prend trop de temps, beaucoup d’utilisateurs ne le soumettront pas.
• Exemple de formulaire
  • Un formulaire divisé en plusieurs parties, avec des erreurs et des moyens de les corriger clairement indiqués.
  • Réduire les erreurs et amener l’utilisateur à terminer le formulaire peut nécessiter plus d’espace et de temps dans le design.
  • Mais si le sacrifice de densité visuelle et temporelle rend le résultat plus précieux, alors la densité globale de valeur augmente.
• Augmenter la densité de valeur
  • On peut augmenter la densité visuelle et temporelle en rendant le formulaire plus petit, plus rapide à charger et moins sujet aux erreurs.
  • Si cela ne diminue ni la valeur pour l’utilisateur ni la valeur pour l’entreprise, alors la densité globale augmente.
  • En suivant l’approche de Tufte, il faut chercher à maximiser autant que possible la densité de valeur.
• Problème d’optimisation
  • Résoudre un problème d’optimisation peut produire des résultats paradoxaux.
  • Aux débuts d’Internet, des entreprises comme Craigslist augmentaient la densité de valeur en agrégeant l’information et en l’affichant sous forme de liens de page.
  • Yahoo et Altavista rendaient l’information consultable par recherche, tout en restant centrés sur l’agrégation.
  • Google a adopté une autre approche en exploitant, dans une barre de recherche, les informations tirées de la chaîne de liens du web.
  • L’information s’agrégeait d’elle-même, et tout ce dont l’utilisateur avait besoin était un seul champ de texte pour accéder à l’ensemble du web.
• L’approche de Google et Yahoo
  • Si l’on compare l’écran initial de Google en 2001 à celui de 2024, sa densité visuelle est faible, mais sa densité de valeur est très élevée.
  • Résultat : la valeur de Google est passée de 23 B$ en 2004 à plus de 2 T$ aujourd’hui. Celle de Yahoo est tombée de 125 B$ en 2000 à 4,8 B$ aujourd’hui.
• La densité de valeur est souvent plus importante que la densité visuelle.
• Il est important d’optimiser le design et les fonctionnalités pour maximiser la valeur obtenue par l’utilisateur.

Conclusion

• Concevoir en tenant compte de la densité UI doit aller au-delà de l’aspect visuel de l’interface.
• Cela inclut toutes les décisions de design explicites et implicites que nous prenons, ainsi que toutes les informations affichées à l’écran.
• Cela doit inclure toutes les actions et tout le temps nécessaires pour que l’utilisateur tire de la valeur du logiciel.
• Définition concrète de la densité UI
  • Densité UI = valeur obtenue par l’utilisateur dans l’interface / temps et espace occupés par l’interface
• Éléments importants
  • vitesse
  • utilisabilité
  • cohérence
  • prévisibilité
  • richesse de l’information
  • fonctionnalité
• Pourquoi certaines interfaces réussissent : en prenant en compte tous ces éléments, on peut comprendre pourquoi certaines interfaces réussissent et d’autres échouent.
• Objectif du design
  • En concevant avec la densité à l’esprit, nous devons permettre aux gens de tirer davantage de valeur des logiciels que nous créons.

[GN⁺]

Avis sur Hacker News

Résumé des commentaires de Hacker News

• Pourquoi la forme physique d’un menu de restaurant est meilleure que celle d’un menu sur site mobile

  • Les menus de sites mobiles ont souvent une UI trop complexe, au point qu’on finit souvent par chercher une photo du menu sur Google Maps.
  • Plutôt que d’essayer de redéfinir la « densité », l’important est de fournir un maximum d’informations sans perdre la hiérarchie visuelle.

• L’importance des données fonctionnelles plutôt que de la forme

  • Dans l’affaire du SS El Faro, le capitaine a utilisé des données météo commerciales avec de jolis graphiques et s’est retrouvé pris dans un ouragan.
  • L’exactitude et l’actualité des données comptent plus que leur beauté visuelle.

• Le concept de densité temporelle

  • JIRA est visuellement dense, mais à cause de sa lenteur et des nombreux changements d’écran, il donne en réalité une impression de dispersion.

• Pourquoi les interfaces mobiles sont plus clairsemées

  • Les doigts des gens sont relativement gros et imprécis.
  • Elles sont plus lentes que sur desktop, donc on répartit le chargement en plusieurs étapes.
  • Le défilement vertical et la taille limitée de l’écran imposent des contraintes.
  • Des fonctions utiles sur desktop sont difficiles à reproduire sur mobile.

• Critique de l’augmentation de la rareté dans les UI

  • Le monde du web design évolue vers un usage toujours plus important des espaces vides.
  • Des applications comme Hulu utilisent beaucoup d’espace vide, ce qui rend l’accès à l’information plus difficile.
  • Les designers devraient réfléchir à ce qui est réellement bon, au lieu de simplement suivre les tendances.

• Le problème des UI complexes et des tendances

  • Les designers pensent que suivre les tendances aide à mieux vendre le produit.
  • Il existe une tendance à imiter des personnes ou des marques connues.
  • Les designers UI peuvent croire à tort que les clients accordent de l’importance aux tendances et aux modes.

• Les avantages des UI traditionnelles

  • Les anciennes applications Windows B2B permettent de voir beaucoup d’informations d’un seul coup d’œil.
  • Là où les systèmes web nécessitent plusieurs pages, les systèmes traditionnels permettent de voir toutes les données dans une ou deux fenêtres.

• Le déséquilibre de la densité d’information

  • Il arrive souvent que le contenu simple de diapositives de présentation soit photographié sous forme d’images haute résolution.
  • Un article rédigé en LaTeX produit un PDF léger, tandis qu’un article rédigé sous MS Word occupe un volume bien plus important.

• Les problèmes des UI mobiles

  • Refaire une ordonnance sur un petit écran devient impossible.
  • Une UI optimisée avec React ne fonctionne pas correctement sur un petit écran.
  • Les avancées technologiques nuisent à l’expérience utilisateur.

• Exemple d’une UI manquant de densité

  • La page produit d’investissement Vanguard est un exemple d’UI manquant de densité.