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

Articles liés

Attention, commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.