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