Gestion des styles dans Axure

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.

Axure - Style par défaut
Axure Créer un style réutilisable

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.

Axure - Import styles

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

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, voi­ci 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éa­li­sé grâce à un outil de maquet­tage. Pour être hon­nête, il s’agit plu­tôt d’un outil de zoning très pri­mi­tif. Il per­met de pla­cer des rec­tangles, de les redi­men­sion­ner, de les effa­cer, de les renom­mer et de les mettre à l’avant-plan ou à l’arrière-plan.

Il est tes­table en ligne à cette adresse et le fichier source est ici (il n’est pas du tout docu­men­té 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 pro­to­type, on veut sou­vent qu’un menu soit pré­sent dans toutes les vues auquel il per­met d’accéder, et qu’un item du menu soit visuel­le­ment dis­tinct des autres pour mon­trer qu’elle cor­res­pond à la vue en cours. (Par vue j’entends une page ou une sec­tion 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­ca­ler un nou­vel item ou chan­ger un lien, il fau­dra le répé­ter par­tout. Comme d’habitude, évi­tons de nous répé­ter.

Meilleure solu­tion : uti­li­ser un mas­ter. Comme ça, toute modi­fi­ca­tion ulté­rieure du menu sera réper­cu­tée dans chaque vue. Axure offre même une fonc­tion pour insé­rer à votre place un mas­ter dans les pages et à l’emplacement de votre choix (clic droit sur un mas­ter dans le pan­neau dédié, puis « Add to pages ». Sauf cas par­ti­cu­lier (par exemple si vous vou­lez chan­ger la hau­teur du menu), vous n’avez plus à tou­cher à chaque écran. Oui mais, com­ment signi­fier qu’une vue est sélec­tion­née ?

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

Premier ingrédient : les styles d’interaction

Les styles d’interactions sont des varia­tions visuelles qui s’activent lorsqu’un wid­get est dans un état don­né. Il y a le clic, le sur­vol, l’inactivité et la sélec­tion.1 C’est cette der­nière qui nous inté­resse. Il faut spé­ci­fier :

  • Le style lui-même. Ici, ça peut être que le libel­lé passe en gras. Une fois ajou­té, il appa­rait dans le pan­neau « Widget pro­per­ties ».
  • L’action qui le déclenche.

Axure tuto 1
Axure tuto 2

Second ingrédient : onPageLoad

Axure per­met d’exécuter des actions au char­ge­ment d’une page, dans l’onglet « Page inter­ac­tions » du pan­neau « Page pro­per­ties ». Ici, cela per­met d’activer un item du menu dif­fé­rent à chaque page, même s’il est dans un mas­ter.

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 aus­si au sein d’une page. Dans ce cas, le menu n’est plus un mas­ter mais une simple suite de wid­gets, et chaque vue est un état d’un pan­neau dyna­mique. Au clic sur l’item 1 du menu, on le passe en « Sélectionné »et on passe le pan­neau à l’état 1.

Un tuto­riel plus com­plet.

Fil d’Ariane

Un fil d’Ariane, c’est encore un objet constant à tra­vers les pages mais dont un aspect change. Pour que la page sélec­tion­née soit en gras, il suf­fit de suivre les expli­ca­tions plus haut. Mais com­ment faire pour le nom de la page qui change à chaque fois. La solu­tion, c’est d’utiliser un mas­ter 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é­fi­nie par Axure cor­res­pond au titre de la page tel que défi­ni dans votre arbo­res­cence, donc si elle s’appelle « 04-b », le fil d’Ariane com­por­te­ra « 04-b ».

Axure tuto 4


  1. Attention : Axure, aimant la sim­pli­ci­té, dis­tingue ces styles de la liste d’évènements, laquelle com­porte des termes très proches (mou­seO­ver vs onMou­se­Ho­ver 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.

Le guide relativement exhaustif et raisonnablement ultime des outils de prototypage

J’ai com­men­cé un guide des dif­fé­rents logi­ciels de pro­to­ty­page, sous forme de matrice de fonc­tion­na­li­tés. Elle est sur Wikipedia et toutes sug­ges­tions et contri­bu­tions sont les bien­ve­nues.

Pour y voir plus clair, il y a trois sec­tions : géné­ra­liste, wire­fra­ming (zoning) et ani­ma­tion (sou­vent des outils dédiés au mobile). Je pen­sais au départ faire un guide plus large, afin d’inclure des outils pou­vant être pra­tiques pour du pro­to­ty­page mais dont ce n’est pas le but pre­mier : fra­me­works CSS, logi­ciels de desi­gn UI (Fireworks, Sketch), IDE web avec des fonc­tions de tem­pla­ting et de pré­pro­ces­seur, aides au pro­to­ty­page papier, etc. Finalement l’article est limi­té aux logi­ciels dédiés, ce qui fait tout de même quarante-six items. Cela per­met d’éviter le coté fourre-tout et de per­mettre la com­pa­rai­son de fonc­tion­na­li­tés à terme à terme. Une liste brute des outils exclus se trouve dans la page de dis­cus­sion.

Évidemment, ce choix et les caté­go­ries rete­nues sont dis­cu­tables, tout comme la manière dont j’ai ten­té de nor­ma­li­ser les atouts de chaque logi­ciel en les fai­sant ren­trer dans des cases. Certains ser­vices ont certes des concepts propres et sont rem­plis de petites astuces qui peuvent les démar­quer, mais ils sont pour­tant glo­ba­le­ment assez homo­gènes. Si vous avez des idées de meilleur décou­page ou s’il y a des points obs­curs, 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 trou­vé la plus opti­male.

À faire :

  • Remplir la sec­tion Wireframing.
  • Trouver un décou­page pour la sec­tion Animations.
  • Je compte faire quelques posts pour mettre en valeur des logi­ciels mécon­nus ou des fonc­tion­na­li­tés que j’ai trou­vé cool.
  • J’envisage de faire un flow­chart qui ser­vi­rait de vrai guide pour choi­sir le logi­ciel le plus adap­té à ses besoins. Un arbre de déci­sion moins rude que les tableaux actuels. À voir.

Axure 7 : panorama des nouveautés

Pour ceux qui ne sont pas sor­tis de l’industrie du livrable au kilo1 et qui ont tou­jours besoin d’un outil de maquet­tage IHM poly­va­lent, la sor­tie d’Axure 7 est une bonne nou­velle, d’autant plus que la mise à jour est gra­tuite pour les pos­ses­seurs d’une licence. Même si cer­taines nou­veau­tés peuvent lais­ser per­plexes (ombres por­tées internes et externes, un mode pseudo-responsive, etc.), la liste des fonc­tion­na­li­tés et des amé­lio­ra­tions est impres­sion­nante. La page de pré­sen­ta­tion est très détaillée, mais voi­ci une liste de ce qui est inté­res­sant pour moi au quo­ti­dien.

Je vous pré­viens, l’article est plein d’anglicismes et de fea­tures (argh ça com­mence) qui vous parai­tront sans doute déri­soires.

  • Meilleure ges­tion du texte : ajout de wid­gets hea­der, libel­lé, para­graphe (avec lorem ipsum inté­gré !). Le wrap­ping du texte peut se désac­ti­ver au double clic ou via une option (ce qui per­met au wid­get de se redi­men­sion­ner comme un grand sui­vant la lon­gueur du texte).
  • Chaque écran pos­sède main­te­nant un his­to­rique d’action, chan­ger d’écrans n’annule pas la pos­si­bi­li­té d’annuler une action. J’en pleu­re­rais.
  • Possibilité d’ajouter des dos­siers dans l’arborescence. J’en pleure.
  • Interactions : beau­coup plus d’évènements gérés, scrip­ting éten­du.
  • Des inter­ac­tions de plus haut niveau sont incluses (pour faci­li­ter la ges­tion du z-index, la créa­tion de popins, d’accordéons ou de menus au sur­vol).
  • Lien rapide entre pages, pour évi­ter l’usine à gaz qu’est le ges­tion­naire d’interactions.
  • Les wid­gets peuvent être cachés ou dépla­cés, comme un pan­neau dyna­mique. Le ges­tion­naire de pan­neau dyna­mique inclut les wid­gets.
  • Les dyna­mic panels peuvent s’ajuster auto­ma­ti­que­ment à la taille du conte­nu.
  • Moins de limites arti­fi­cielles dans la per­son­na­li­sa­tion des wid­gets : pos­si­bi­li­té de trans­for­mer un wid­get en un autre type de wid­get, de chan­ger la hau­teur d’un dro­plist (ie. un menu « select »). Les menus de navi­ga­tiont sont moins galère à redi­men­sion­ner.
  • Un nou­veau mode de pré­vi­sua­li­sa­tion rapide des maquettes, en plus du clas­sique, qui fonc­tionne un peu comme LiveReload. La pre­mière géné­ra­tion est très rapide et il suf­fit de rafrai­chir le navi­ga­teur pour que les chan­ge­ments soient pris en compte. Chaque char­ge­ment de page est plus long, mais plus besoin de géné­rer en per­ma­nence dans Axure.
  • Possibilité de cher­cher dans l’arborescence d’une maquette HTML et de sur­li­gner les élé­ments inter­ac­tifs.
  • Gestion des polices d’icônes, ce qui per­met d’avoir des icônes colo­ri­sables et redi­men­sion­nables sans perte de qua­li­té.
  • Réorganisation des menus contex­tuels et des pan­neaux style et pro­prié­té.
  • Un pat­tern de « répé­ti­tion  », pour créer une liste ou une grille d’éléments basée sur un jeu de don­nées. Le tout peut être inter­ac­tif (filtre, tri, ajout et sup­pres­sion d’éléments). La fonc­tion est pro­ba­ble­ment over­kill et son uti­li­sa­tion tota­le­ment alam­bi­quée. Toutefois, une uti­li­sa­tion basique et inté­res­sante est de pou­voir mettre à jour faci­le­ment une mise en page com­plexe et répé­ti­tive. Par exemple on peut géné­rer une grille de pro­duits avec à chaque fois un titre, une des­crip­tion, une image, etc. en spé­ci­fiant une seule celulle.