Gestion des styles dans Axure

Axure n’est pas un outil de maquettage à haute fidélité, pourtant il est parfois intéressant de modifier les styles par défaut des widgets ou de disposer d’une bibliothèque de styles. Cela évite par exemple de sélectionner cinquante fois un niveau de gris et se retrouver avec une palette de gris pas homogè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 existant, en allant dans Fichier > Importer. Là, avancez dans l’assistant jusqu’à la fenêtre d’importation de styles de widgets puis sélectionnez ceux qui vous intéressent.

Axure - Import styles

Un prototype en plein écran et sur deux moniteurs

Dans les systèmes d’information permettant de suivre une situation complexe et changeante (systèmes de contrôle, de régulation, de communication, etc.), un opérateur doit consulter beaucoup d’informations à la fois. Pour ça, il a souvent plusieurs écrans et une même application peut utiliser deux écrans. Par exemple, j’ai travaillé récemment sur un système où l’écran principal était occupé par un tableau de bord et l’écran secondaire par un outil cartographique. Le tableau de bord permettait d’accéder à d’autres vues (popups, onglets, etc.). Il y avait également des influences possibles d’un écran à l’autre, par exemple sélectionner un élément dans le tableau de bord permet de le localiser sur la carte.

Supposons qu’on veuille tester l’utilisabilité du dispositif en permettant à l’utilisateur de manipuler l’IHM et les deux écrans. L’outil de prototypage utilisé génère probablement des maquettes en HTML et le plein écran des navigateurs est prévu pour un seul moniteur. Un gros projet industriel a les moyens de développer un vrai prototype fonctionnel, mais supposons que soit impossible. Voici une alternative pour Windows 8 et Firefox.

Configuration des fenêtres

Pour avoir un plein écran, il faut masquer les barre d’onglets, d’outil, d’adresse… tout ce que Mozilla appelle le « chrome »). Pour ça, l’extension stylish permet de modifier 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émarrez Firefox ;
  • Pressez les touches Ctrl+Shift+A ;
  • Allez dans l’onglet de Stylish [1] et cliquez sur « Créer un nouveau style » [2].

2015-12-29_15h40_30

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

Voici également le code si vous voulez cacher les ascenseurs. :

#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ésactivez la personnalisation, réappuyez 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 dimensions 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 solution la plus simple (OK tout est relatif) est de créer un panneau dynamique 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 navigation sera fluide. Cela évite de dupliquer du contenu et permet de garder fixe le contenu d’un écran pendant un changement de vue dans l’autre écran.

Configuration des écrans

Dans Windows, configurez la position des deux écrans (Bureau > Clic droit > Résolution de l’écran) en fonction de la manière dont l’utilisateur sera réellement 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 ordinateur 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 beaucoup plus modeste : un outil de maquettage réalisé grâce à un outil de maquettage. 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 redimensionner, 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 documenté et nécessite Axure 8).

Meta Axure

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

Menu

Dans un prototype, on veut souvent qu’un menu soit présent dans toutes les vues auquel il permet d’accéder, et qu’un item du menu soit visuellement distinct des autres pour montrer qu’elle correspond à la vue en cours. (Par vue j’entends une page ou une section au sein d’une page.)

Solution bourrine : dupliquer 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 intercaler un nouvel item ou changer un lien, il faudra le répéter partout. Comme d’habitude, évitons de nous répéter.

Meilleure solution : utiliser un master. Comme ça, toute modification ultérieure du menu sera répercutée dans chaque vue. Axure offre même une fonction 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 particulier (par exemple si vous voulez changer la hauteur du menu), vous n’avez plus à toucher à chaque écran. Oui mais, comment signifier qu’une vue est sélectionnée ?

Solution ultime : un mélange de ce qu’Axure appelle les styles d’interaction et de l’évènement onPageLoad.

Premier ingrédient : les styles d’interaction

Les styles d’interactions sont des variations visuelles qui s’activent lorsqu’un widget est dans un état donné. Il y a le clic, le survol, l’inactivité et la sélection.1 C’est cette dernière qui nous intéresse. Il faut spécifier :

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

Axure tuto 1
Axure tuto 2

Second ingrédient : onPageLoad

Axure permet d’exécuter des actions au chargement d’une page, dans l’onglet « Page interactions » du panneau « Page properties ». Ici, cela permet d’activer un item du menu différent à chaque page, même s’il est dans un master.

sans titre 5

Un tutoriel 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 dynamique. Au clic sur l’item 1 du menu, on le passe en « Sélectionné »et on passe le panneau à l’état 1.

Un tutoriel 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électionnée soit en gras, il suffit de suivre les explications plus haut. Mais comment faire pour le nom de la page qui change à chaque fois. La solution, c’est d’utiliser un master pour le fil d’ariane et d’ajouter à chaque chargement de page une action « Set text », avec la valeur [[PageName]]. Cette variable prédéfinie par Axure correspond au titre de la page tel que défini dans votre arborescence, donc si elle s’appelle « 04-b », le fil d’Ariane comportera « 04-b ».

Axure tuto 4


  1. Attention : Axure, aimant la simplicité, distingue ces styles de la liste d’évènements, 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 tournures et des dénominations
  • Apprécier le style d’une police
  • Vérifier des contraintes de formatage ou de longueur

Mais en premier lieu ça sert à dire « là il y a aura du texte ». Une manière stylisée et minimale de signaler cette présence sans induire de connotation indésirable est d’utiliser un effet de « griffonnage » 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 paramètres de génération, aller dans l’onglet « 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électionner une police rarement utilisée (exemple : Comic Sans MS), laquelle sera remplacée par la police souhaitée à la génération de la maquette. Pour font-family saisir « Redacted » (ou le nom de la police saisi dans l’onglet « web fonts »).

5/ Dans votre maquette, les textes spécifiés en Comic Sans MS seront désormais générés en Redacted.

Petits défauts :

  • A taille égale, la police apparait plus petite, il faut donc anticiper en choisissant une taille un peu plus trande.
  • Pas de support des accents, donc attention en convertissant du vrai texte déjà saisi.