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.

Le guide relativement exhaustif et raisonnablement ultime des outils de prototypage

J’ai commencé un guide des différents logiciels de prototypage, sous forme de matrice de fonctionnalités. Elle est sur Wikipedia et toutes suggestions et contributions sont les bienvenues.

Pour y voir plus clair, il y a trois sections : généraliste, wireframing (zoning) et animation (souvent des outils dédiés au mobile). Je pensais au départ faire un guide plus large, afin d’inclure des outils pouvant être pratiques pour du prototypage mais dont ce n’est pas le but premier : frameworks CSS, logiciels de design UI (Fireworks, Sketch), IDE web avec des fonctions de templating et de préprocesseur, aides au prototypage papier, etc. Finalement l’article est limité aux logiciels 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 comparaison de fonctionnalités à terme à terme. Une liste brute des outils exclus se trouve dans la page de discussion.

Évidemment, ce choix et les catégories retenues sont discutables, tout comme la manière dont j’ai tenté de normaliser les atouts de chaque logiciel en les faisant rentrer dans des cases. Certains services ont certes des concepts propres et sont remplis de petites astuces qui peuvent les démarquer, mais ils sont pourtant globalement assez homogènes. Si vous avez des idées de meilleur découpage ou s’il y a des points obscurs, n’hésitez pas.

Nota bene : les tableaux sont scrollables horizontalement. Ce n’est pas idéal mais c’est la présentation que j’ai trouvé la plus optimale.

À faire :

  • Remplir la section Wireframing.
  • Trouver un découpage pour la section Animations.
  • Je compte faire quelques posts pour mettre en valeur des logiciels méconnus ou des fonctionnalités que j’ai trouvé cool.
  • J’envisage de faire un flowchart qui servirait de vrai guide pour choisir le logiciel le plus adapté à ses besoins. Un arbre de décision moins rude que les tableaux actuels. À voir.

Axure 7 : panorama des nouveautés

Pour ceux qui ne sont pas sortis de l’industrie du livrable au kilo1 et qui ont toujours besoin d’un outil de maquettage IHM polyvalent, la sortie d’Axure 7 est une bonne nouvelle, d’autant plus que la mise à jour est gratuite pour les possesseurs d’une licence. Même si certaines nouveautés peuvent laisser perplexes (ombres portées internes et externes, un mode pseudo‐responsive, etc.), la liste des fonctionnalités et des améliorations est impressionnante. La page de présentation est très détaillée, mais voici une liste de ce qui est intéressant pour moi au quotidien.

Je vous préviens, l’article est plein d’anglicismes et de features (argh ça commence) qui vous paraitront sans doute dérisoires.

  • Meilleure gestion du texte : ajout de widgets header, libellé, paragraphe (avec lorem ipsum intégré !). Le wrapping du texte peut se désactiver au double clic ou via une option (ce qui permet au widget de se redimensionner comme un grand suivant la longueur du texte).
  • Chaque écran possède maintenant un historique d’action, changer d’écrans n’annule pas la possibilité d’annuler une action. J’en pleurerais.
  • Possibilité d’ajouter des dossiers dans l’arborescence. J’en pleure.
  • Interactions : beaucoup plus d’évènements gérés, scripting étendu.
  • Des interactions de plus haut niveau sont incluses (pour faciliter la gestion du z‐index, la création de popins, d’accordéons ou de menus au survol).
  • Lien rapide entre pages, pour éviter l’usine à gaz qu’est le gestionnaire d’interactions.
  • Les widgets peuvent être cachés ou déplacés, comme un panneau dynamique. Le gestionnaire de panneau dynamique inclut les widgets.
  • Les dynamic panels peuvent s’ajuster automatiquement à la taille du contenu.
  • Moins de limites artificielles dans la personnalisation des widgets : possibilité de transformer un widget en un autre type de widget, de changer la hauteur d’un droplist (ie. un menu « select »). Les menus de navigationt sont moins galère à redimensionner.
  • Un nouveau mode de prévisualisation rapide des maquettes, en plus du classique, qui fonctionne un peu comme LiveReload. La première génération est très rapide et il suffit de rafraichir le navigateur pour que les changements soient pris en compte. Chaque chargement de page est plus long, mais plus besoin de générer en permanence dans Axure.
  • Possibilité de chercher dans l’arborescence d’une maquette HTML et de surligner les éléments interactifs.
  • Gestion des polices d’icônes, ce qui permet d’avoir des icônes colorisables et redimensionnables sans perte de qualité.
  • Réorganisation des menus contextuels et des panneaux style et propriété.
  • Un pattern de « répétition », pour créer une liste ou une grille d’éléments basée sur un jeu de données. Le tout peut être interactif (filtre, tri, ajout et suppression d’éléments). La fonction est probablement overkill et son utilisation totalement alambiquée. Toutefois, une utilisation basique et intéressante est de pouvoir mettre à jour facilement une mise en page complexe et répétitive. Par exemple on peut générer une grille de produits avec à chaque fois un titre, une description, une image, etc. en spécifiant une seule celulle.