Monthly Archives: août 2014

Les liens de la semaine #8

Mon blog : rétrospective critique d’un parcours banal

Je suis tombé sur de vieilles captures d’écran du blog et c’est assez drôle. Il a en effet connu des évolutions formelles assez drastiques, ce qui est un euphémisme pour dire qu’il a été bien moche. J’y vois un parcours assez typique de beaucoup d’apprentis designers, avec l’échelle de progression suivante.

Niveau 1 : pas de design. Je voulais surtout ouvrir un blog donc j’ai rapidement trouvé un thème tout fait. Bien sûr, choisir un thème est déjà une décision esthétique, mais je n’ai pas mis les mains dans le cambouis ni rien créé à proprement parler.

Circa 2012
Niveau 1, circa 2012

Niveau 2 : Design décoratif. Je découvrais le potentiel du CSS, ne voulais pas avoir un blog-de-designer tout blanc et me fichais de supporter de vieux navigateurs, donc j’ai eu la main lourde sur les effets. Ombres, gradients et textures à tous les étages.

Niveau 2, circa 2013
Niveau 2, circa 2013

Niveau 2.1 :

Circa 2013
Niveau 2.1, circa 2013

Niveau 3 : Design hiératique. Une approche minimaliste, fondée sur le contenu, avec du texte fort et souvent centré. Le résultat est imposant, manque de souplesse et finalement n’est guère plus subtil que le niveau précédent. C’est simplement une autre esthétique et une palette d’effets différents. Sans compter qu’on tombe dans le blog à l’élégance générique que je voulais éviter.

Niveau 3, printemps 2013
Niveau 3, printemps 2014

Pour un archétype du design hiératique, allez voir le blog de Information Architects. Y a pas photo, c’est moins tristoune et beaucoup plus réussi que le mien, mais il y a un coté « Déclaration des droits de l’homme dans ta face » un peu étouffant.

Niveau 3.1 :

Aout 2014
Niveau 3.1, aout 2014

Deux réflexions en guise de conclusion : cette échelle improvisée ne s’arrête évidemment pas là. Le minimalisme est salutaire pour faire quelque chose de correct sans trop d’efforts ni de risques d’erreur, mais c’est aussi un style difficile à perfectionner, avec une grande marge de progression. Par ailleurs, tout le monde ne se reconnaitra pas dans cette échelle. Bravo à ceux qui ont eu un goût sûr plus tôt que moi. Un autre parcours courant pourrait être orienté sur l’architecture de l’information et autour de la maitrise de la prolifération du contenu (chose que je commence seulement à découvrir). Bref, y a encore du boulot.

Pour une typographie pragmatique

En typographie, on aime bien les nombres magiques. Par exemple, il parait qu’il faut 66 caractères par ligne (recommandation de Bringhust, souvent répétée), que la hauteur de texte d’un livre doit être égale à la largeur de la page (selon le canon de Tschichold qui m’a toujours semblé mystérieux) et que mettre le Nombre d’or partout ne fait jamais de mal (à part bien sûr tomber dans la numérologie).

Différents canons de mise en page : ceux de Tschichold, d'un manuscrit médiéval (reconstruit) et de Van de Graaf. Source : Wikipedia
Différents canons de mise en page : ceux de Tschichold, d’un manuscrit médiéval (reconstruit) et de Van de Graaf. Source : Wikipedia

Pourtant, si on vous demande quelle est la taille idéale pour lire du texte, la réponse est « ça dépend ». De quoi ? Du choix de la police (plus ou moins lisible et plus ou moins grande à unité égale), de l’usage (niveau d’attention, luminosité, éloignement, etc.), du type de contenu (corps de texte ou élément d’interface ?)… bref de plein de choses. C’est d’ailleurs pour ça que les recommandations ergonomiques sérieuses sont souvent désespérément prudentes, du genre « toutes choses égales par ailleurs, la taille angulaire optimale serait comprise dans l’intervalle bla bla ». (Je parle de recommandations à valeur générale et pas pour un projet spécifique.)

Plus généralement, je dirais que la typographie est contextuelle à trois niveaux :

  • les interactions entre éléments. C’est ce qui fait, par exemple, que l’interlignage peut être diminué si la justification (la longueur de la ligne) est réduite 1. Un choix ne doit jamais être fait isolément mais toujours de manière systémique.
  • L’usage. Par exemple, un panneau de signalisation dans le métro risque d’être lu de loin, de biais et dans une faible lumière.
  • Enfin, le type de contenu. Il permet de choisir entre plusieurs conventions. Par exemple, on peut arguer que séparer les paragraphes par un simple alinéa convient mieux à des textes fluides (fiction, dialogue), alors qu’une ligne vierge mettre mieux en valeur les étapes d’une argumentation. 2

Deux de ces exemples viennent d’un ouvrage récent, On Web Typography, que je recommande justement pour son caractère pragmatique et non dogmatique.


  1. Jason Santa-Maria, On Web Typography, p. 131. 
  2. Idem, p. 134. 

Les liens de la semaine #7

  • Strabic fait la chronique du livre Max Bill / Jan Tschichold : La querelle typographique des modernes, à propos du débat entre ces deux théoriciens de la typographie et des revirements de Tschichold, passé du modernisme au classicisme. J’ai déjà parlé de lui dans mon article sur L’éternelle querelle du minimalisme.
  • Comment les sites de commerce en ligne aident les internautes à choisir la bonne taille. Voir aussi le projet de cette startup française.

  • Une énième anecdote sur Steve Jobs, mais qui illustre très bien l’importance de la divergence et du hasard dans le prototypage. En gros, il a adoré un prototype de souris sans bouton, alors que pour les designers qui la lui ont présenté c’était un bug, pas une feature.

  • Un redesign sauvage des panneaux expliquant les horaires de parking. Un bel exemple de design de l’information dans le quotidien.

  • Archipel, un essai feuilletonnesque de Martin, avec comme fil rouge l’écrivain Edogawa Rampo, les représentations du Japon et le motif de l’île à travers les cultures. Hautement recommandé. Je cite :

    …nous voguerons d’île en île pour découvrir l’art subtil et délicat de la mélecture, en suivant les chemins qui vont de Sherlock Holmes à Death Note, de Monte Cristo à Gankutsuou et de Fantomas à Ken le Survivant.

La recherche en UX : modèles et méthodes d’évaluation

On entend par design en expérience utilisateur toute approche qui va au-delà des qualités instrumentales et pragmatiques d’un service pour adopter un point de vue plus holistique. Mais « holistique », c’est potentiellement très fourre-tout. Pour y voir un peu plus clair, je conseille les diapositives de cette conférence. Carine Lallemand présente un modèle en vogue ainsi que plusieurs modèles d’évaluation. Voici ce que j’ai retiré de cette présentation, sous forme un peu brouillonne.

Le modèle de Hassenzahl

Pour modéliser l’expérience utilisateur, il faut commencer par faire une typologie des qualités que l’on perçoit d’un système et qui expliquent l’attrait que l’on peut y trouver. Ces qualités sont divisées en une dimension pragmatique et une dimension hédonique. Selon les situations, les deux dimensions peuvent être disjointes, partiellement confondues, subordonnées l’une à l’autre, etc. Le modèle ne s’engage pas sur cet aspect. La dimension hédonique peut paraitre vague, mais Hassenzahl précise qu’elle se décompose en besoin de stimulation (goût pour la nouveauté), d’évocation (symbolisme, jeu de la mémoire) et identification (partager son identité, s’identifier aux autres).

A noter qu’il existe de nombreuses listes de ce type. Par exemple, plusieurs des sept « besoins psychologiques » cités par Carine Lallemand ne sont pas sans évoquer les trois critères plus haut. En 2004 déjà, Peter Morville proposait son diagramme en nid d’abeille, selon un angle cette fois assez différent.

De cette séparation en deux dimensions découlent des usages différents : En mode hédonique, l’utilisation est un plaisir en soi et les objectifs improvisés, contrairement au mode pragmatique, moins ouvert, où les tâches sont plus délibérées et délimitées temporellement. Cela peut orienter la conception : on n’utilise pas un système de la même manière selon qu’on soit en situation de loisir ou de travail.

Un dernier aspect intéressant est l’insistance sur la dimension temporelle : une expérience n’est pas façonnée seulement pendant l’interaction avec un système. D’une part, elle est construite par anticipation et rétrospection, d’autre part le résultat n’est pas d’un bloc. Différentes méthodes en étudieront différentes tranches, nommément l’UX anticipée, momentanée, épisodique et cumulative.

Évaluation

Je vous laisse aller voir la partie sur l’évaluation, qui rappelle des bases (types, applicabilité, importance des tests normalisés) et présentent l’originalité de ces méthodes par rapport aux évaluations classiques de l’utilisabilité. Le questionnaire Attratkdiff, toujours de Hassenzahl, me parait le plus prometteur et donne des résultats de ce genre :

Résultats de deux services A et B sur les axes pragmatiques et hédoniques. La taille des carrés représente l’intervalle de confiance
Résultats de deux services A et B sur les axes pragmatiques et hédoniques. La taille des carrés représente l’intervalle de confiance

Autres ressources

Pour des introductions très générales et un brin académiques, vous pouvez allez lire l’article de Scapin et alia, « User Experience : Buzzword or New Paradigm ? » (PDF ici), ainsi que ce bref livre blanc. Le premier donne un recul historique bienvenu et constitue un bon panorama de l’état de l’art. Le second distingue notamment entre l’UX comme phénomène, champs d’étude et pratique.

Si vous voulez approfondir les travaux de Hassenzahl, vous pouvez commencer par cet article (page 10).

Pour l’évaluation, la page Wikipedia est bien faite. Il y a aussi cet ouvrage sur les approches quantitatives.

Aux origines des interactions

Dan Saffer, auteur d’un livre sur la notion de « micro-interaction », tient une liste sur l’origine d’interactions aujourd’hui omniprésentes : l’auto-correction, le copier-coller, les barres de défilement, etc.

Une invention qui aurait mérité de figurer dans la liste est celle du caret (un curseur placé entre deux caractères). Auparavant, le curseur était signalé en surlignant ou soulignant un caractère, si bien qu’il n’était pas évident de savoir si le texte inséré allait se placer avant ou après le caractère sélectionné. Les possibilités de manipulation du texte s’étoffant (par exemple avec l’apparition du couper-coller), le besoin d’une amélioration devenait pressant. Tout ce qu’il manquait, c’était des écrans dotés d’une résolution suffisante et quelqu’un de suffisamment malin pour avoir l’idée toute bête de placer le curseur après un caractère, ce qui après tout reflète mieux l’action d’insérer du texte entre des lettres. Heureusement, la division R&D de Xerox (le PARC) ne manquait pas des deux. On trouvera d’autres détails (par exemple l’invention du double-clic) dans Designing Interactions, page 64 et suivantes.

Un exemple
Un exemple

Ces histoires illustrent l’importance des détails dans le design d’interfaces, ainsi que la fréquence des inventions incrémentales : les interfaces graphiques ne sont pas sorties parfaites et achevées de la cuisse de Douglas Engelbart. Par exemple il est connu qu’Apple s’est largement inspiré du travail effectué au PARC. Il est certain qu’un certain nombre d’idées y sont nés, mais il ne faut pas oublier un certain nombre de prédécesseurs (Bush, Papert, Licklider, Sutherland, Engelbart, etc.), ni les progrès d’Apple. Celui-ci a heureusement simplifié certaines interactions (la barre de défilement) et en a inventé d’autres (menu déroulant, glisser-déposer).

EDIT : Bien que ce soit plus visuel qu’interactif, on peut ajouter à la liste l’origine du symbole x pour fermer et des bulles dans les applications de chat.