Monthly Archives: février 2016

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.