Monthly Archives: février 2016

Gestion des styles dans Axure

Axure n’est pas un outil de maquet­tage à haute fidé­lité, pour­tant il est parfois inté­res­sant de modi­fier les styles par défaut des widgets ou de disposer d’une biblio­thèque de styles. Cela évite par exemple de sélec­tionner cinquante fois un niveau de gris et se retrouver avec une palette de gris pas homo­gène. Voici comment faire.

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

La gestion des styles est propre à un fichier Axure. Cela dit, on peut importer les styles depuis un fichier exis­tant, en allant dans Fichier > Importer. Là, avancez dans l’as­sis­tant jusqu’à la fenêtre d’im­por­ta­tion de styles de widgets puis sélec­tionnez ceux qui vous inté­ressent.

Axure - Import styles

Un prototype en plein écran et sur deux moniteurs

Dans les systèmes d’in­for­ma­tion permet­tant de suivre une situa­tion complexe et chan­geante (systèmes de contrôle, de régu­la­tion, de commu­ni­ca­tion, etc.), un opéra­teur doit consulter beau­coup d’in­for­ma­tions à la fois. Pour ça, il a souvent plusieurs écrans et une même appli­ca­tion peut utiliser deux écrans. Par exemple, j’ai travaillé récem­ment sur un système où l’écran prin­cipal était occupé par un tableau de bord et l’écran secon­daire par un outil carto­gra­phique. Le tableau de bord permet­tait d’ac­céder à d’autres vues (popups, onglets, etc.). Il y avait égale­ment des influences possibles d’un écran à l’autre, par exemple sélec­tionner un élément dans le tableau de bord permet de le loca­liser sur la carte.

Supposons qu’on veuille tester l’uti­li­sa­bi­lité du dispo­sitif en permet­tant à l’uti­li­sa­teur de mani­puler l’IHM et les deux écrans. L’outil de proto­ty­page utilisé génère proba­ble­ment des maquettes en HTML et le plein écran des navi­ga­teurs est prévu pour un seul moni­teur. Un gros projet indus­triel a les moyens de déve­lopper un vrai proto­type fonc­tionnel, mais suppo­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 masquer les barre d’on­glets, d’outil, d’adresse… tout ce que Mozilla appelle le « chrome »). Pour ça, l’ex­ten­sion stylish permet de modi­fier le CSS (c’est-à-dire en gros le style) de n’im­porte quel site, et même de Firefox lui-même.

  • Installez-la et redé­marrez Firefox ;
  • Pressez les touches Ctrl+Shift+A ;
  • Allez dans l’on­glet de Stylish [1] et cliquez sur « Créer un nouveau style » [2].

2015-12-29_15h40_30

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

Voici égale­ment le code si vous voulez cacher les ascen­seurs. :

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

Le résultat ressemble à ça :

2015-12-29_15h42_12

Quand vous voudrez désac­tivez la person­na­li­sa­tion, réap­puyez sur Ctrl+Shift+A et cliquez sur « Désactiver ».

Ensuite, passez Firefox en mode fenêtré et ajustez la taille de la fenêtre aux dimen­sions des deux écrans. Selon la manière dont le système est censé être utilisé, il faut ou non masquer la barre des tâches de Windows.

Configuration des maquettes

Pour Axure, la solu­tion la plus simple (OK tout est relatif) est de créer un panneau dyna­mique pour chaque écran et de les placer dans la même page. Chaque vue est ainsi un sous-panneau. La maquette sera longue à charger, mais ensuite la navi­ga­tion sera fluide. Cela évite de dupli­quer du contenu et permet de garder fixe le contenu d’un écran pendant un chan­ge­ment de vue dans l’autre écran.

Configuration des écrans

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

2015-12-29_09h59_17

Les ancêtres d’Excel et de Powerpoint

Excel

Ce photo­gramme est tiré du film La Garçonnière de Billy Wilder. On y voit le héros, comp­table parmi des centaines d’autres dans une compa­gnie d’as­su­rance. Ben Evans a avancé l’idée qu’on peut comparer ce bureau à un fichier Excel et chacun de ces employés à une cellule effec­tuant un calcul précis. Evans sures­time sans doute le degré de taylo­ri­sa­tion des employés de bureau, mais il est vrai qu’il est tentant de comparer à un énorme tableau tous les dépar­te­ments d’une orga­ni­sa­tion s’oc­cu­pant de chiffres et que le déve­lop­pe­ment de l’in­for­ma­tique a large­ment auto­ma­tisé les calculs et permis d’étendre les méthodes de travail et de raison­ne­ment, comme l’a très bien perçu Steven Levy dès 1984.

Il existe un cas encore plus parlant : les calculs mathé­ma­tiques complexes requis par des domaines tels que l’as­tro­nomie, la balis­tique ou la cryp­ta­na­lyse. Chaque calcul était décom­posé en opéra­tions simples et succes­sives, effec­tuées par des personnes armées de calcu­lettes et autres tables de loga­rithme. En anglais, ces personnes étaient appe­lées des… compu­ters, Cf. cet article et ce livre. Bletchley Park était ainsi un centre mili­taire tout entier dédié au but de casser les codes secret utilisé par l’Axe, ce qui se reflé­tait dans son orga­ni­sa­tion.

Powerpoint

Powerpoint est autre exemple d’or­ga­ni­sa­tion 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 faisait par ordi­na­teur, mais il fallait toujours produire les supports, que ce soit sur diapo­si­tive argen­tique ou sur trans­pa­rent. Powerpoint 2.0 avait ainsi un bouton Envoyer à Genigraphics, qui permet­tait de trans­mettre un fichier direc­te­ment à une entre­prise spécia­lisée dans l’im­pres­sion de diapo­si­tives.

Si on remonte jusqu’au début du 20e siècle, on trouve l’en­tre­prise de chimie DuPont, qui possé­dait une salle dédiée. Ses diri­geants pouvaient assister à des présen­ta­tions étayées par des tableaux et graphiques, lesquels étaients affi­chés sur de grands panneaux, d’abord montés sur des char­nières puis sur tout un système de mono­rail. C’est fasci­nant, car le dispo­sitif a inventé ou popu­la­risé à la fois :

  • L’usage des graphiques, pas très répandu à l’époque
  • L’idée de la diapo­si­tive comme docu­ment synthé­tique et support d’un discours
  • L’idée d’une présen­ta­tion comme suite de diapo­si­tives
  • L’idée d’un réper­toire de diapo­si­tives dans lequel on puisse piocher, puisque la salle servait autant de lieu de réunion que d’ar­chive.

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

1919 : première version
1950 : ver­sion plus évo­luée

Pour aller plus loin

  • Un article très complet sur l’his­toire du format de la diapo­si­tive
  • Un livre sur l’his­toire du travail intel­lec­tuel au prisme des bureaux et envi­ron­ne­ments de travail.