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

Meta Axure : un outil de maquettage créé avec un outil de maquettage

Vous voyez les gens qui recréent un ordi­na­teur dans Minecraft ? Si vous ne voyez pas, voici une intro et un exemple en vidéo ici.

J’ai fait un truc du même genre, en beau­coup plus modeste : un outil de maquet­tage réalisé grâce à un outil de maquet­tage. Pour être honnête, il s’agit plutôt d’un outil de zoning très primitif. Il permet de placer des rectangles, de les redi­men­sionner, de les effacer, de les renommer et de les mettre à l’avant-plan ou à l’arrière-plan.

Il est testable en ligne à cette adresse et le fichier source est ici (il n’est pas du tout docu­menté et néces­site Axure 8).

Meta Axure

Axure : Créer un menu et un fil d’ariane sans dupliquer aucun contenu

Menu

Dans un proto­type, on veut souvent qu’un menu soit présent dans toutes les vues auquel il permet d’ac­céder, et qu’un item du menu soit visuel­le­ment distinct des autres pour montrer qu’elle corres­pond à la vue en cours. (Par vue j’en­tends une page ou une section au sein d’une page.)

Solution bour­rine : dupli­quer le menu autant de fois qu’il y a de vues. oui, mais si on danse si quelque chose change ? Par exemple si je dois inter­caler un nouvel item ou changer un lien, il faudra le répéter partout. Comme d’ha­bi­tude, évitons de nous répéter.

Meilleure solu­tion : utiliser un master. Comme ça, toute modi­fi­ca­tion ulté­rieure du menu sera réper­cutée dans chaque vue. Axure offre même une fonc­tion pour insérer à votre place un master dans les pages et à l’emplacement de votre choix (clic droit sur un master dans le panneau dédié, puis « Add to pages ». Sauf cas parti­cu­lier (par exemple si vous voulez changer la hauteur du menu), vous n’avez plus à toucher à chaque écran. Oui mais, comment signi­fier qu’une vue est sélec­tionnée ?

Solution ultime : un mélange de ce qu’Axure appelle les styles d’in­te­rac­tion et de l’évè­ne­ment onPageLoad.

Premier ingrédient : les styles d’interaction

Les styles d’in­te­rac­tions sont des varia­tions visuelles qui s’ac­tivent lors­qu’un widget est dans un état donné. Il y a le clic, le survol, l’inac­ti­vité et la sélec­tion.1 C’est cette dernière qui nous inté­resse. Il faut spéci­fier :

  • Le style lui-même. Ici, ça peut être que le libellé passe en gras. Une fois ajouté, il appa­rait dans le panneau « Widget proper­ties ».
  • L’action qui le déclenche.

Axure tuto 1
Axure tuto 2

Second ingrédient : onPageLoad

Axure permet d’exé­cuter des actions au char­ge­ment d’une page, dans l’on­glet « Page inter­ac­tions » du panneau « Page proper­ties ». Ici, cela permet d’ac­tiver un item du menu diffé­rent à chaque page, même s’il est dans un master.

sans titre 5

Un tuto­riel sur Axure.com avec un fichier source pour essayer.

Et au sein d’une page ?

Notez que le truc marche entre pages, mais aussi au sein d’une page. Dans ce cas, le menu n’est plus un master mais une simple suite de widgets, et chaque vue est un état d’un panneau dyna­mique. Au clic sur l’item 1 du menu, on le passe en « Sélectionné »et on passe le panneau à l’état 1.

Un tuto­riel plus complet.

Fil d’Ariane

Un fil d’Ariane, c’est encore un objet constant à travers les pages mais dont un aspect change. Pour que la page sélec­tionnée soit en gras, il suffit de suivre les expli­ca­tions plus haut. Mais comment faire pour le nom de la page qui change à chaque fois. La solu­tion, c’est d’uti­liser un master pour le fil d’ariane et d’ajouter à chaque char­ge­ment de page une action « Set text », avec la valeur [[PageName]]. Cette variable prédé­finie par Axure corres­pond au titre de la page tel que défini dans votre arbo­res­cence, donc si elle s’ap­pelle « 04‑b », le fil d’Ariane compor­tera « 04‑b ».

Axure tuto 4


  1. Attention : Axure, aimant la simpli­cité, distingue ces styles de la liste d’évè­ne­ments, laquelle comporte des termes très proches (mouseOver vs onMouseHover vs Selected). Because 

Une alternative au Lorem ipsum pour Axure

Dans une maquette, le texte peut servir à plein de choses :

  • Tester des tour­nures et des déno­mi­na­tions
  • Apprécier le style d’une police
  • Vérifier des contraintes de forma­tage ou de longueur

Mais en premier lieu ça sert à dire « là il y a aura du texte ». Une manière stylisée et mini­male de signaler cette présence sans induire de conno­ta­tion indé­si­rable est d’uti­liser un effet de « grif­fon­nage » avec une police spéciale.

screenshot
Cliquer pour voir une démo

La procé­dure à suivre pour inté­grer une web font en local avec Axure est un peu tordue. La voici (version 7 requise) :

1/ Générer une première fois votre maquette.

2/ Ajouter le fichier de police (lien direct ici) à la racine du dossier créé.

3/ Dans les para­mètres de géné­ra­tion, aller dans l’on­glet « web fonts », cocher « include webfonts », ajouter un item, nommer la police « Redacted » (par exemple), puis ajouter ceci dans la zone de texte :

font-family: "Redacted";
src: url('redacted-script.woff') format('woff');
font-weight: normal;
font-style: normal;

4/ Dans « font mappings », ajouter un item, sélec­tionner une police rare­ment utilisée (exemple : Comic Sans MS), laquelle sera remplacée par la police souhaitée à la géné­ra­tion de la maquette. Pour font-family saisir « Redacted » (ou le nom de la police saisi dans l’on­glet « web fonts »).

5/ Dans votre maquette, les textes spéci­fiés en Comic Sans MS seront désor­mais générés en Redacted.

Petits défauts :

  • A taille égale, la police appa­rait plus petite, il faut donc anti­ciper en choi­sis­sant une taille un peu plus trande.
  • Pas de support des accents, donc atten­tion en conver­tis­sant du vrai texte déjà saisi.

Le guide relativement exhaustif et raisonnablement ultime des outils de prototypage

J’ai commencé un guide des diffé­rents logi­ciels de proto­ty­page, sous forme de matrice de fonc­tion­na­lités. Elle est sur Wikipedia et toutes sugges­tions et contri­bu­tions sont les bien­ve­nues.

Pour y voir plus clair, il y a trois sections : géné­ra­liste, wire­fra­ming (zoning) et anima­tion (souvent des outils dédiés au mobile). Je pensais au départ faire un guide plus large, afin d’in­clure des outils pouvant être pratiques pour du proto­ty­page mais dont ce n’est pas le but premier : frame­works CSS, logi­ciels de design UI (Fireworks, Sketch), IDE web avec des fonc­tions de templa­ting et de prépro­ces­seur, aides au proto­ty­page papier, etc. Finalement l’ar­ticle est limité aux logi­ciels dédiés, ce qui fait tout de même quarante-six items. Cela permet d’éviter le coté fourre-tout et de permettre la compa­raison de fonc­tion­na­lités à terme à terme. Une liste brute des outils exclus se trouve dans la page de discus­sion.

Évidemment, ce choix et les caté­go­ries rete­nues sont discu­tables, tout comme la manière dont j’ai tenté de norma­liser les atouts de chaque logi­ciel en les faisant rentrer dans des cases. Certains services ont certes des concepts propres et sont remplis de petites astuces qui peuvent les démar­quer, mais ils sont pour­tant globa­le­ment assez homo­gènes. Si vous avez des idées de meilleur décou­page ou s’il y a des points obscurs, n’hé­sitez pas.

Nota bene : les tableaux sont scrol­lables hori­zon­ta­le­ment. Ce n’est pas idéal mais c’est la présen­ta­tion que j’ai trouvé la plus opti­male.

À faire :

  • Remplir la section Wireframing.
  • Trouver un décou­page pour la section Animations.
  • Je compte faire quelques posts pour mettre en valeur des logi­ciels méconnus ou des fonc­tion­na­lités que j’ai trouvé cool.
  • J’envisage de faire un flow­chart qui servi­rait de vrai guide pour choisir le logi­ciel le plus adapté à ses besoins. Un arbre de déci­sion moins rude que les tableaux actuels. À voir.