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.

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.

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].

• 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 :

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 :