Six métaphores plus modestes qu’il n’y parait pour le rôle du designer

Le desi­gner comme hôte – Charles Eames, 1972.

Le desi­gner comme tra­duc­teur, per­for­meur ou réa­li­sa­teur — Mickael Rock, 1996.

Le desi­gner comme dra­ma­turge – Brenda Laurel, 1991.

Le desi­gner comme ven­tri­lo­quiste – Hutchins, 1987 (alerte mau­vais PDF) :

The meta­phor of user and com­pu­ter enga­ged in a conver­sa­tion with each other or car­rying on a dia­logue about the task at hand is the most popu­lar of the mode of inter­ac­tion meta­phors for human com­pu­ter inter­faces.

Voir aus­si :

Vous n’avez pas le mono­pole du desi­gn.

Le Tao du desi­gn web (2000).

Gestion des styles dans Axure

Axure n’est pas un outil de maquet­tage à haute fidé­li­té, pour­tant il est par­fois inté­res­sant de modi­fier les styles par défaut des wid­gets ou de dis­po­ser d’une biblio­thèque de styles. Cela évite par exemple de sélec­tion­ner cin­quante fois un niveau de gris et se retrou­ver avec une palette de gris pas homo­gène. Voici com­ment faire.

Axure - Style par défaut
Axure Créer un style réutilisable

La ges­tion des styles est propre à un fichier Axure. Cela dit, on peut impor­ter les styles depuis un fichier exis­tant, en allant dans Fichier > Importer. Là, avan­cez dans l’assistant jusqu’à la fenêtre d’importation de styles de wid­gets puis sélec­tion­nez ceux qui vous inté­ressent.

Axure - Import styles

Un prototype en plein écran et sur deux moniteurs

Dans les sys­tèmes d’information per­met­tant de suivre une situa­tion com­plexe et chan­geante (sys­tèmes de contrôle, de régu­la­tion, de com­mu­ni­ca­tion, etc.), un opé­ra­teur doit consul­ter beau­coup d’informations à la fois. Pour ça, il a sou­vent plu­sieurs écrans et une même appli­ca­tion peut uti­li­ser deux écrans. Par exemple, j’ai tra­vaillé récem­ment sur un sys­tème où l’écran prin­ci­pal était occu­pé par un tableau de bord et l’écran secon­daire par un outil car­to­gra­phique. Le tableau de bord per­met­tait d’accéder à d’autres vues (popups, onglets, etc.). Il y avait éga­le­ment des influences pos­sibles d’un écran à l’autre, par exemple sélec­tion­ner un élé­ment dans le tableau de bord per­met de le loca­li­ser sur la carte.

Supposons qu’on veuille tes­ter l’utilisabilité du dis­po­si­tif en per­met­tant à l’utilisateur de mani­pu­ler l’IHM et les deux écrans. L’outil de pro­to­ty­page uti­li­sé génère pro­ba­ble­ment des maquettes en HTML et le plein écran des navi­ga­teurs est pré­vu pour un seul moni­teur. Un gros pro­jet indus­triel a les moyens de déve­lop­per un vrai pro­to­type fonc­tion­nel, mais sup­po­sons que soit impos­sible. Voici une alter­na­tive pour Windows 8 et Firefox.

Configuration des fenêtres

Pour avoir un plein écran, il faut mas­quer les barre d’onglets, d’outil, d’adresse… tout ce que Mozilla appelle le « chrome »). Pour ça, l’extension sty­lish per­met de modi­fier le CSS (c’est-à-dire en gros le style) de n’importe quel site, et même de Firefox lui-même.

  • Installez-la et redé­mar­rez Firefox ;
  • Pressez les touches Ctrl+Shift+A ;
  • Allez dans l’onglet de Stylish [1] et cli­quez sur « Créer un nou­veau style » [2].

2015-12-29_15h40_30

  • Dans la nou­velle fenêtre, reco­piez le code sui­vant et enre­gis­trer.
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#navigator-toolbox { 
    display:none !important; 
}

Voici éga­le­ment le code si vous vou­lez cacher les ascen­seurs. :

#content browser {
    margin-right: -14px !important;
    overflow-y: scroll;
    overflow-x: hidden;
}

Le résul­tat res­semble à ça :

2015-12-29_15h42_12

Quand vous vou­drez désac­ti­vez la per­son­na­li­sa­tion, réap­puyez sur Ctrl+Shift+A et cli­quez sur « Désactiver ».

Ensuite, pas­sez Firefox en mode fenê­tré et ajus­tez la taille de la fenêtre aux dimen­sions des deux écrans. Selon la manière dont le sys­tème est cen­sé être uti­li­sé, il faut ou non mas­quer la barre des tâches de Windows.

Configuration des maquettes

Pour Axure, la solu­tion la plus simple (OK tout est rela­tif) est de créer un pan­neau dyna­mique pour chaque écran et de les pla­cer dans la même page. Chaque vue est ain­si un sous-panneau. La maquette sera longue à char­ger, mais ensuite la navi­ga­tion sera fluide. Cela évite de dupli­quer du conte­nu et per­met de gar­der fixe le conte­nu d’un écran pen­dant un chan­ge­ment de vue dans l’autre écran.

Configuration des écrans

Dans Windows, confi­gu­rez la posi­tion des deux écrans (Bureau > Clic droit > Résolution de l’écran) en fonc­tion de la manière dont l’utilisateur sera réel­le­ment ins­tal­lé à son poste. Quelque chose comme ça :

2015-12-29_09h59_17

Les ancêtres d’Excel et de Powerpoint

Excel

Ce pho­to­gramme est tiré du film La Garçonnière de Billy Wilder. On y voit le héros, comp­table par­mi des cen­taines d’autres dans une com­pa­gnie d’assurance. Ben Evans a avan­cé l’idée qu’on peut com­pa­rer ce bureau à un fichier Excel et cha­cun de ces employés à une cel­lule effec­tuant un cal­cul pré­cis. Evans sur­es­time sans doute le degré de tay­lo­ri­sa­tion des employés de bureau, mais il est vrai qu’il est ten­tant de com­pa­rer à un énorme tableau tous les dépar­te­ments d’une orga­ni­sa­tion s’occupant de chiffres et que le déve­lop­pe­ment de l’informatique a lar­ge­ment auto­ma­ti­sé les cal­culs et per­mis d’étendre les méthodes de tra­vail et de rai­son­ne­ment, comme l’a très bien per­çu Steven Levy dès 1984.

Il existe un cas encore plus par­lant : les cal­culs mathé­ma­tiques com­plexes requis par des domaines tels que l’astronomie, la balis­tique ou la cryp­ta­na­lyse. Chaque cal­cul était décom­po­sé en opé­ra­tions simples et suc­ces­sives, effec­tuées par des per­sonnes armées de cal­cu­lettes et autres tables de loga­rithme. En anglais, ces per­sonnes étaient appe­lées des… com­pu­ters, Cf. cet article et ce livre. Bletchley Park était ain­si un centre mili­taire tout entier dédié au but de cas­ser les codes secret uti­li­sé par l’Axe, ce qui se reflé­tait dans son orga­ni­sa­tion.

Powerpoint

Powerpoint est autre exemple d’organisation entière se retrou­vant réduite à un simple logi­ciel. Dans les années 1980, la concep­tion d’une pré­sen­ta­tion se fai­sait par ordi­na­teur, mais il fal­lait tou­jours pro­duire les sup­ports, que ce soit sur dia­po­si­tive argen­tique ou sur trans­pa­rent. Powerpoint 2.0 avait ain­si un bou­ton Envoyer à Genigraphics, qui per­met­tait de trans­mettre un fichier direc­te­ment à une entre­prise spé­cia­li­sée dans l’impression de dia­po­si­tives.

Si on remonte jusqu’au début du 20e siècle, on trouve l’entreprise de chi­mie DuPont, qui pos­sé­dait une salle dédiée. Ses diri­geants pou­vaient assis­ter à des pré­sen­ta­tions étayées par des tableaux et gra­phiques, les­quels étaients affi­chés sur de grands pan­neaux, d’abord mon­tés sur des char­nières puis sur tout un sys­tème de mono­rail. C’est fas­ci­nant, car le dis­po­si­tif a inven­té ou popu­la­ri­sé à la fois :

  • L’usage des gra­phiques, pas très répan­du à l’époque
  • L’idée de la dia­po­si­tive comme docu­ment syn­thé­tique et sup­port d’un dis­cours
  • L’idée d’une pré­sen­ta­tion comme suite de dia­po­si­tives
  • L’idée d’un réper­toire de dia­po­si­tives dans lequel on puisse pio­cher, puisque la salle ser­vait autant de lieu de réunion que d’archive.

Et DuPont a fait ça de la manière la plus lit­té­rale et steam­punk qui soit : avec des rails.

1919 : pre­mière ver­sion
1950 : ver­sion plus évo­luée

Pour aller plus loin

  • Un article très com­plet sur l’histoire du for­mat de la dia­po­si­tive
  • Un livre sur l’histoire du tra­vail intel­lec­tuel au prisme des bureaux et envi­ron­ne­ments de tra­vail.

Un bidule optimisé pour la main mais codé avec les pieds

EDIT : Infos plus récentes ici.

S’il y a bien un moment où je n’ai pas envie d’utiliser mes faibles capa­ci­tés de cal­cul men­tal, mais plu­tôt un arte­fact cog­ni­tif adap­té (en fran­çais : dégai­ner une cal­cu­lette), c’est quand il s’agit de payer en tickets res­tau­rant. Étant tou­jours à la recherche d’occasions concrètes d’apprendre à pro­gram­mer, j’ai donc bri­co­lé un petit outil qui affiche le nombre de tickets à don­ner et le reste en liquide.

Le bidule est pen­sé pour une uti­li­sa­tion sur petit écran et une sai­sie au pouce. J’ai essayé de rendre le for­mu­laire dyna­mique, pour empê­cher la sai­sie de lettres ou des mon­tants mal for­ma­tés. C’est un par­ti pris ergo­no­mique (blo­cage ver­sus mes­sage d’erreur), mais c’est éga­le­ment ins­truc­tif de voir à quel point le déve­lop­pe­ment de web app peut être CHIANT si on tombe sur la mau­vais com­bi­nai­son de cas – en l’occurrence, com­bi­ner un contrôle à la sai­sie et un cla­vier adap­té à la sai­sie numé­rique sur mobile. Par exemple, l’outil bloque la sai­sie d’une seconde vir­gule après « 1,01 », mais après « 1, » ou « 1,00 ».

Avertissement : on parle d’un truc opti­mi­sé pour la main mais codé avec les pieds. Donc pas de sup­port de Safari <9 ni d’Internet Explorer (et tem­po­rai­re­ment de Firefox sur Android, grrr). et un code d’une qua­li­té très rela­tive.

C’est ici.

Screenshot_2016-01-03-00-05-00

Meta Axure : un outil de maquettage créé avec un outil de maquettage

Vous voyez les gens qui recréent un ordi­na­teur dans Minecraft ? Si vous ne voyez pas, voi­ci une intro et un exemple en vidéo ici.

J’ai fait un truc du même genre, en beau­coup plus modeste : un outil de maquet­tage réa­li­sé grâce à un outil de maquet­tage. Pour être hon­nête, il s’agit plu­tôt d’un outil de zoning très pri­mi­tif. Il per­met de pla­cer des rec­tangles, de les redi­men­sion­ner, de les effa­cer, de les renom­mer et de les mettre à l’avant-plan ou à l’arrière-plan.

Il est tes­table en ligne à cette adresse et le fichier source est ici (il n’est pas du tout docu­men­té et néces­site Axure 8).

Meta Axure

Axure : Créer un menu et un fil d’ariane sans dupliquer aucun contenu

Menu

Dans un pro­to­type, on veut sou­vent qu’un menu soit pré­sent dans toutes les vues auquel il per­met d’accéder, et qu’un item du menu soit visuel­le­ment dis­tinct des autres pour mon­trer qu’elle cor­res­pond à la vue en cours. (Par vue j’entends une page ou une sec­tion au sein d’une page.)

Solution bour­rine : dupli­quer le menu autant de fois qu’il y a de vues. oui, mais si on danse si quelque chose change ? Par exemple si je dois inter­ca­ler un nou­vel item ou chan­ger un lien, il fau­dra le répé­ter par­tout. Comme d’habitude, évi­tons de nous répé­ter.

Meilleure solu­tion : uti­li­ser un mas­ter. Comme ça, toute modi­fi­ca­tion ulté­rieure du menu sera réper­cu­tée dans chaque vue. Axure offre même une fonc­tion pour insé­rer à votre place un mas­ter dans les pages et à l’emplacement de votre choix (clic droit sur un mas­ter dans le pan­neau dédié, puis « Add to pages ». Sauf cas par­ti­cu­lier (par exemple si vous vou­lez chan­ger la hau­teur du menu), vous n’avez plus à tou­cher à chaque écran. Oui mais, com­ment signi­fier qu’une vue est sélec­tion­née ?

Solution ultime : un mélange de ce qu’Axure appelle les styles d’interaction et de l’évènement onPa­ge­Load.

Premier ingrédient : les styles d’interaction

Les styles d’interactions sont des varia­tions visuelles qui s’activent lorsqu’un wid­get est dans un état don­né. Il y a le clic, le sur­vol, l’inactivité et la sélec­tion.1 C’est cette der­nière qui nous inté­resse. Il faut spé­ci­fier :

  • Le style lui-même. Ici, ça peut être que le libel­lé passe en gras. Une fois ajou­té, il appa­rait dans le pan­neau « Widget pro­per­ties ».
  • L’action qui le déclenche.

Axure tuto 1
Axure tuto 2

Second ingrédient : onPageLoad

Axure per­met d’exécuter des actions au char­ge­ment d’une page, dans l’onglet « Page inter­ac­tions » du pan­neau « Page pro­per­ties ». Ici, cela per­met d’activer un item du menu dif­fé­rent à chaque page, même s’il est dans un mas­ter.

sans titre 5

Un tuto­riel sur Axure.com avec un fichier source pour essayer.

Et au sein d’une page ?

Notez que le truc marche entre pages, mais aus­si au sein d’une page. Dans ce cas, le menu n’est plus un mas­ter mais une simple suite de wid­gets, et chaque vue est un état d’un pan­neau dyna­mique. Au clic sur l’item 1 du menu, on le passe en « Sélectionné »et on passe le pan­neau à l’état 1.

Un tuto­riel plus com­plet.

Fil d’Ariane

Un fil d’Ariane, c’est encore un objet constant à tra­vers les pages mais dont un aspect change. Pour que la page sélec­tion­née soit en gras, il suf­fit de suivre les expli­ca­tions plus haut. Mais com­ment faire pour le nom de la page qui change à chaque fois. La solu­tion, c’est d’utiliser un mas­ter pour le fil d’ariane et d’ajouter à chaque char­ge­ment de page une action « Set text », avec la valeur [[PageName]]. Cette variable pré­dé­fi­nie par Axure cor­res­pond au titre de la page tel que défi­ni dans votre arbo­res­cence, donc si elle s’appelle « 04-b », le fil d’Ariane com­por­te­ra « 04-b ».

Axure tuto 4


  1. Attention : Axure, aimant la sim­pli­ci­té, dis­tingue ces styles de la liste d’évènements, laquelle com­porte des termes très proches (mou­seO­ver vs onMou­se­Ho­ver vs Selected). Because