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 évolu­tions formelles assez dras­tiques, ce qui est un euphé­misme pour dire qu’il a été bien moche. J’y vois un parcours assez typique de beau­coup d’ap­prentis desi­gners, avec l’échelle de progres­sion suivante.

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

Circa 2012
Niveau 1, circa 2012

Niveau 2 : Design déco­ratif. Je décou­vrais le poten­tiel du CSS, ne voulais pas avoir un blog-de-designer tout blanc et me fichais de supporter de vieux navi­ga­teurs, 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éra­tique. Une approche mini­ma­liste, fondée sur le contenu, avec du texte fort et souvent centré. Le résultat est impo­sant, manque de souplesse et fina­le­ment n’est guère plus subtil que le niveau précé­dent. C’est simple­ment une autre esthé­tique et une palette d’ef­fets 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, prin­temps 2014

Pour un arché­type du design hiéra­tique, allez voir le blog de Information Architects. Y a pas photo, c’est moins tris­toune et beau­coup plus réussi que le mien, mais il y a un coté « Déclaration des droits de l’homme dans ta face » un peu étouf­fant.

Niveau 3.1 :

Aout 2014
Niveau 3.1, aout 2014

Deux réflexions en guise de conclu­sion : cette échelle impro­visée ne s’arrête évidem­ment pas là. Le mini­ma­lisme est salu­taire pour faire quelque chose de correct sans trop d’efforts ni de risques d’erreur, mais c’est aussi un style diffi­cile à perfec­tionner, avec une grande marge de progres­sion. Par ailleurs, tout le monde ne se recon­naitra pas dans cette échelle. Bravo à ceux qui ont eu un goût sûr plus tôt que moi. Un autre parcours courant pour­rait être orienté sur l’ar­chi­tec­ture de l’in­for­ma­tion et autour de la maitrise de la proli­fé­ra­tion du contenu (chose que je commence seule­ment à décou­vrir). Bref, y a encore du boulot.

Pour une typographie pragmatique

En typo­gra­phie, on aime bien les nombres magiques. Par exemple, il parait qu’il faut 66 carac­tères par ligne (recom­man­da­tion 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é­ro­logie).

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 manus­crit médiéval (recons­truit) 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, lumi­no­sité, éloi­gne­ment, 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 recom­man­da­tions ergo­no­miques sérieuses sont souvent déses­pé­ré­ment prudentes, du genre « toutes choses égales par ailleurs, la taille angu­laire opti­male serait comprise dans l’intervalle bla bla ». (Je parle de recom­man­da­tions à valeur géné­rale et pas pour un projet spéci­fique.)

Plus géné­ra­le­ment, je dirais que la typo­gra­phie est contex­tuelle à trois niveaux :

  • les inter­ac­tions entre éléments. C’est ce qui fait, par exemple, que l’interlignage peut être diminué si la justi­fi­ca­tion (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 signa­li­sa­tion 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 conven­tions. Par exemple, on peut arguer que séparer les para­graphes 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 argu­men­ta­tion. 2

Deux de ces exemples viennent d’un ouvrage récent, On Web Typography, que je recom­mande juste­ment pour son carac­tère prag­ma­tique et non dogma­tique.


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

Les liens de la semaine #7

  • Strabic fait la chro­nique du livre Max Bill / Jan Tschichold : La querelle typo­gra­phique des modernes, à propos du débat entre ces deux théo­ri­ciens de la typo­gra­phie et des revi­re­ments de Tschichold, passé du moder­nisme au clas­si­cisme. J’ai déjà parlé de lui dans mon article sur L’éternelle querelle du mini­ma­lisme.
  • Comment les sites de commerce en ligne aident les inter­nautes à choisir la bonne taille. Voir aussi le projet de cette startup fran­çaise.

  • Une énième anec­dote sur Steve Jobs, mais qui illustre très bien l’im­por­tance de la diver­gence et du hasard dans le proto­ty­page. En gros, il a adoré un proto­type de souris sans bouton, alors que pour les desi­gners qui la lui ont présenté c’était un bug, pas une feature.

  • Un rede­sign sauvage des panneaux expli­quant les horaires de parking. Un bel exemple de design de l’in­for­ma­tion dans le quoti­dien.

  • Archipel, un essai feuille­ton­nesque de Martin, avec comme fil rouge l’écri­vain Edogawa Rampo, les repré­sen­ta­tions du Japon et le motif de l’île à travers les cultures. Hautement recom­mandé. Je cite :

    …nous vogue­rons d’île en île pour décou­vrir l’art subtil et délicat de la mélec­ture, 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 utili­sa­teur toute approche qui va au-delà des qualités instru­men­tales et prag­ma­tiques d’un service pour adopter un point de vue plus holis­tique. Mais « holis­tique », c’est poten­tiel­le­ment très fourre-tout. Pour y voir un peu plus clair, je conseille les diapo­si­tives de cette confé­rence. Carine Lallemand présente un modèle en vogue ainsi que plusieurs modèles d’éva­lua­tion. Voici ce que j’ai retiré de cette présen­ta­tion, sous forme un peu brouillonne.

Le modèle de Hassenzahl

Pour modé­liser l’ex­pé­rience utili­sa­teur, il faut commencer par faire une typo­logie des qualités que l’on perçoit d’un système et qui expliquent l’at­trait que l’on peut y trouver. Ces qualités sont divi­sées en une dimen­sion prag­ma­tique et une dimen­sion hédo­nique. Selon les situa­tions, les deux dimen­sions peuvent être disjointes, partiel­le­ment confon­dues, subor­don­nées l’une à l’autre, etc. Le modèle ne s’en­gage pas sur cet aspect. La dimen­sion hédo­nique peut paraitre vague, mais Hassenzahl précise qu’elle se décom­pose en besoin de stimu­la­tion (goût pour la nouveauté), d’évo­ca­tion (symbo­lisme, jeu de la mémoire) et iden­ti­fi­ca­tion (partager son iden­tité, s’iden­ti­fier aux autres).

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

De cette sépa­ra­tion en deux dimen­sions découlent des usages diffé­rents : En mode hédo­nique, l’uti­li­sa­tion est un plaisir en soi et les objec­tifs impro­visés, contrai­re­ment au mode prag­ma­tique, moins ouvert, où les tâches sont plus déli­bé­rées et déli­mi­tées tempo­rel­le­ment. Cela peut orienter la concep­tion : on n’utilise pas un système de la même manière selon qu’on soit en situa­tion de loisir ou de travail.

Un dernier aspect inté­res­sant est l’insistance sur la dimen­sion tempo­relle : une expé­rience n’est pas façonnée seule­ment pendant l’in­te­rac­tion avec un système. D’une part, elle est construite par anti­ci­pa­tion et rétros­pec­tion, d’autre part le résultat n’est pas d’un bloc. Différentes méthodes en étudie­ront diffé­rentes tranches, nommé­ment l’UX anti­cipée, momen­tanée, épiso­dique et cumu­la­tive.

Évaluation

Je vous laisse aller voir la partie sur l’évaluation, qui rappelle des bases (types, appli­ca­bi­lité, impor­tance des tests norma­lisés) et présentent l’originalité de ces méthodes par rapport aux évalua­tions clas­siques de l’utilisabilité. Le ques­tion­naire Attratkdiff, toujours de Hassenzahl, me parait le plus promet­teur et donne des résul­tats 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 prag­ma­tiques et hédo­niques. La taille des carrés repré­sente l’intervalle de confiance

Autres ressources

Pour des intro­duc­tions très géné­rales et un brin acadé­miques, vous pouvez allez lire l’ar­ticle de Scapin et alia, « User Experience : Buzzword or New Paradigm ? » (PDF ici), ainsi que ce bref livre blanc. Le premier donne un recul histo­rique bien­venu et constitue un bon pano­rama de l’état de l’art. Le second distingue notam­ment entre l’UX comme phéno­mène, champs d’étude et pratique.

Si vous voulez appro­fondir 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 quan­ti­ta­tives.