Monthly Archives: août 2014

Les liens de la semaine #8

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

Je suis tom­bé sur de vieilles cap­tures d’écran du blog et c’est assez drôle. Il a en effet connu des évo­lu­tions for­melles assez dras­tiques, ce qui est un euphé­misme pour dire qu’il a été bien moche. J’y vois un par­cours assez typique de beau­coup d’apprentis desi­gners, avec l’échelle de pro­gres­sion sui­vante.

Niveau 1 : pas de desi­gn. Je vou­lais sur­tout ouvrir un blog donc j’ai rapi­de­ment trou­vé un thème tout fait. Bien sûr, choi­sir un thème est déjà une déci­sion esthé­tique, mais je n’ai pas mis les mains dans le cam­bouis ni rien créé à pro­pre­ment par­ler.

Circa 2012
Niveau 1, cir­ca 2012

Niveau 2 : Design déco­ra­tif. Je décou­vrais le poten­tiel du CSS, ne vou­lais pas avoir un blog-de-designer tout blanc et me fichais de sup­por­ter de vieux navi­ga­teurs, donc j’ai eu la main lourde sur les effets. Ombres, gra­dients et tex­tures à tous les étages.

Niveau 2, circa 2013
Niveau 2, cir­ca 2013

Niveau 2.1 :

Circa 2013
Niveau 2.1, cir­ca 2013

Niveau 3 : Design hié­ra­tique. Une approche mini­ma­liste, fon­dée sur le conte­nu, avec du texte fort et sou­vent cen­tré. Le résul­tat est impo­sant, manque de sou­plesse et fina­le­ment n’est guère plus sub­til que le niveau pré­cé­dent. C’est sim­ple­ment une autre esthé­tique et une palette d’effets dif­fé­rents. Sans comp­ter qu’on tombe dans le blog à l’élégance géné­rique que je vou­lais évi­ter.

Niveau 3, printemps 2013
Niveau 3, prin­temps 2014

Pour un arché­type du desi­gn hié­ra­tique, allez voir le blog de Information Architects. Y a pas pho­to, c’est moins tris­toune et beau­coup plus réus­si 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­vi­sée ne s’arrête évi­dem­ment pas là. Le mini­ma­lisme est salu­taire pour faire quelque chose de cor­rect sans trop d’efforts ni de risques d’erreur, mais c’est aus­si un style dif­fi­cile à per­fec­tion­ner, avec une grande marge de pro­gres­sion. Par ailleurs, tout le monde ne se recon­nai­tra pas dans cette échelle. Bravo à ceux qui ont eu un goût sûr plus tôt que moi. Un autre par­cours cou­rant pour­rait être orien­té sur l’architecture de l’information et autour de la mai­trise de la pro­li­fé­ra­tion du conte­nu (chose que je com­mence seule­ment à décou­vrir). Bref, y a encore du bou­lot.

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, sou­vent répé­tée), que la hau­teur de texte d’un livre doit être égale à la lar­geur de la page (selon le canon de Tschichold qui m’a tou­jours sem­blé mys­té­rieux) et que mettre le Nombre d’or par­tout ne fait jamais de mal (à part bien sûr tom­ber dans la numé­ro­lo­gie).

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 à uni­té égale), de l’usage (niveau d’attention, lumi­no­si­té, éloi­gne­ment, etc.), du type de conte­nu (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 sou­vent déses­pé­ré­ment pru­dentes, du genre « toutes choses égales par ailleurs, la taille angu­laire opti­male serait com­prise dans l’intervalle bla bla ». (Je parle de recom­man­da­tions à valeur géné­rale et pas pour un pro­jet 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 dimi­nué si la jus­ti­fi­ca­tion (la lon­gueur de la ligne) est réduite 1. Un choix ne doit jamais être fait iso­lé­ment mais tou­jours de manière sys­té­mique.
  • L’usage. Par exemple, un pan­neau 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 conte­nu. Il per­met de choi­sir entre plu­sieurs conven­tions. Par exemple, on peut arguer que sépa­rer les para­graphes par un simple ali­néa convient mieux à des textes fluides (fic­tion, dia­logue), 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 jus­te­ment pour son carac­tère prag­ma­tique et non dog­ma­tique.


  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 desi­gn en expé­rience uti­li­sa­teur toute approche qui va au-delà des qua­li­tés ins­tru­men­tales et prag­ma­tiques d’un ser­vice pour adop­ter 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 dia­po­si­tives de cette confé­rence. Carine Lallemand pré­sente un modèle en vogue ain­si que plu­sieurs modèles d’évaluation. Voici ce que j’ai reti­ré de cette pré­sen­ta­tion, sous forme un peu brouillonne.

Le modèle de Hassenzahl

Pour modé­li­ser l’expérience uti­li­sa­teur, il faut com­men­cer par faire une typo­lo­gie des qua­li­tés que l’on per­çoit d’un sys­tème et qui expliquent l’attrait que l’on peut y trou­ver. Ces qua­li­té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 dis­jointes, par­tiel­le­ment confon­dues, subor­don­nées l’une à l’autre, etc. Le modèle ne s’engage 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 sti­mu­la­tion (goût pour la nou­veau­té), d’évocation (sym­bo­lisme, jeu de la mémoire) et iden­ti­fi­ca­tion (par­ta­ger son iden­ti­té, s’identifier aux autres).

A noter qu’il existe de nom­breuses listes de ce type. Par exemple, plu­sieurs des sept « besoins psy­cho­lo­giques » cités par Carine Lallemand ne sont pas sans évo­quer les trois cri­tères plus haut. En 2004 déjà, Peter Morville pro­po­sait son dia­gramme en nid d’abeille, selon un angle cette fois assez dif­fé­rent.

De cette sépa­ra­tion en deux dimen­sions découlent des usages dif­fé­rents : En mode hédo­nique, l’utilisation est un plai­sir en soi et les objec­tifs impro­vi­sé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 tem­po­rel­le­ment. Cela peut orien­ter la concep­tion : on n’utilise pas un sys­tème de la même manière selon qu’on soit en situa­tion de loi­sir ou de tra­vail.

Un der­nier aspect inté­res­sant est l’insistance sur la dimen­sion tem­po­relle : une expé­rience n’est pas façon­née seule­ment pen­dant l’interaction avec un sys­tème. D’une part, elle est construite par anti­ci­pa­tion et rétros­pec­tion, d’autre part le résul­tat n’est pas d’un bloc. Différentes méthodes en étu­die­ront dif­fé­rentes tranches, nom­mé­ment l’UX anti­ci­pée, momen­ta­née, épi­so­dique et cumu­la­tive.

Évaluation

Je vous laisse aller voir la par­tie sur l’évaluation, qui rap­pelle des bases (types, appli­ca­bi­li­té, impor­tance des tests nor­ma­li­sés) et pré­sentent l’originalité de ces méthodes par rap­port aux éva­lua­tions clas­siques de l’utilisabilité. Le ques­tion­naire Attratkdiff, tou­jours de Hassenzahl, me parait le plus pro­met­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 ser­vices A et B sur les axes prag­ma­tiques et hédo­niques. La taille des car­rés repré­sente l’intervalle de confiance

Autres ressources

Pour des intro­duc­tions très géné­rales et un brin aca­dé­miques, vous pou­vez allez lire l’article de Scapin et alia, « User Experience : Buzzword or New Paradigm ? » (PDF ici), ain­si que ce bref livre blanc. Le pre­mier donne un recul his­to­rique bien­ve­nu et consti­tue un bon pano­ra­ma de l’état de l’art. Le second dis­tingue notam­ment entre l’UX comme phé­no­mène, champs d’étude et pra­tique.

Si vous vou­lez appro­fon­dir les tra­vaux de Hassenzahl, vous pou­vez com­men­cer par cet article (page 10).

Pour l’évaluation, la page Wikipedia est bien faite. Il y a aus­si cet ouvrage sur les approches quan­ti­ta­tives.

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 omni­pré­sentes : l’auto-correction, le copier-coller, les barres de défi­le­ment, etc.

Une inven­tion qui aurait méri­té de figu­rer dans la liste est celle du caret (un cur­seur pla­cé entre deux carac­tères). Auparavant, le cur­seur était signa­lé en sur­li­gnant ou sou­li­gnant un carac­tère, si bien qu’il n’était pas évident de savoir si le texte insé­ré allait se pla­cer avant ou après le carac­tère sélec­tion­né. Les pos­si­bi­li­tés de mani­pu­la­tion du texte s’étoffant (par exemple avec l’apparition du couper-coller), le besoin d’une amé­lio­ra­tion deve­nait pres­sant. Tout ce qu’il man­quait, c’était des écrans dotés d’une réso­lu­tion suf­fi­sante et quelqu’un de suf­fi­sam­ment malin pour avoir l’idée toute bête de pla­cer le cur­seur après un carac­tère, ce qui après tout reflète mieux l’action d’insérer du texte entre des lettres. Heureusement, la divi­sion R&D de Xerox (le PARC) ne man­quait pas des deux. On trou­ve­ra d’autres détails (par exemple l’invention du double-clic) dans Designing Interactions, page 64 et sui­vantes.

Un exemple
Un exemple

Ces his­toires illus­trent l’importance des détails dans le desi­gn d’interfaces, ain­si que la fré­quence des inven­tions incré­men­tales : les inter­faces gra­phiques ne sont pas sor­ties par­faites et ache­vées de la cuisse de Douglas Engelbart. Par exemple il est connu qu’Apple s’est lar­ge­ment ins­pi­ré du tra­vail effec­tué au PARC. Il est cer­tain qu’un cer­tain nombre d’idées y sont nés, mais il ne faut pas oublier un cer­tain nombre de pré­dé­ces­seurs (Bush, Papert, Licklider, Sutherland, Engelbart, etc.), ni les pro­grès d’Apple. Celui-ci a heu­reu­se­ment sim­pli­fié cer­taines inter­ac­tions (la barre de défi­le­ment) et en a inven­té d’autres (menu dérou­lant, glisser-déposer).

EDIT : Bien que ce soit plus visuel qu’interactif, on peut ajou­ter à la liste l’origine du sym­bole x pour fer­mer et des bulles dans les appli­ca­tions de chat.