3 fonctions d’Invision qui mériteraient d’être plus connues

Design system, moodboard, création de maquette avec Studio… Invision est devenue une plateforme complète. Voici pourtant trois fonctions que vous avez peut‐être manqué.

Visite guidée

Quoi : Guide le visiteur à travers une suite de commentaires. Cliquer sur Suivant l’emmène au prochain commentaire, même dans une autre page.

Pourquoi : Le visiteur découvre la maquette de manière contrôlée, avec des explications en contexte. Parfait pour les clients qui veulent voir la maquette avant une réunion et qui ne liraient jamais un mail d’argumentaire.

Comment : Ajouter un commentaire et changer son type en cliquant en haut à gauche du panneau (cf. screenshot).

ajout d'une étape de visite guidée


Export local

Quoi : exporter vos maquettes en version HTML. Conserve les interactions.

Pourquoi : Pratique pour les présentations ou tests utilisateur dans un endroit sans réseau, ou pour faire un backup.

Pour y accéder : accueil du projet > points de suspension à droite de la barre de menu > Download prototype > choisir ZIP.

Démonstration :

Démonstration d'accès à la fonction d'export

gestion de projet

Vite ! A quoi sert le rond bleu en bas en à droite quand vous consultez une maquette ?

Screenshot de la barre d'outils en bas de l'écran quand on visualise une maquette dans Invision

C’est assez discret mais cela correspond au statut de l’écran. Invision possède en effet un système assez complet de gestion de projet. De base cela permet d’assigner un statut à une maquette (en attente, en cours, validé, etc.) et de changer de changer en changeant la maquette de colonne.

S’y ajoutent des fonctions plus avancées. on peut notamment associer échéance, personne et tâches à chaque maquette.

Screenshot des colonnes de statut de maquettes dans Invision

Plus de détails ici

16 extensions Sketch pour aider le designer UX

Pour les designers UX qui travaillent sur Sketch, voici des plugins utiles pour faire des wireframes ou des wireflows.

Diagrammes

Userflows : sélectionner un calque, un plan de travail, générez une flèche et hop ça fait un wireflow. Il peut être actualisé à chaque déplacement de plan de travail.

Connection Flow Arrows : pareil mais vers n’importe quel calque. Et avec pas mal de paramètres utiles. Le détail qui fait la différence : des pointes de flèche orientées par rapport au trait, pas à l’objet cible.

Exemple de flèches avec le plugin Connection flow arrows
Connection Flow Arrows

Plans de travail

Artboard Titles : vous exportez votre grand wireflow et là paf, les titres d’écrans sont minuscules et illisibles. Pas grave : ce plugin ajoute au dessus de chaque plan de travail un calque précisant son nom.

Deux plugins d’organisation automatiquement des plans de travail : Artboard Manager et Artboard Tools. Le premier fonctionne en continu et a plus d’options de style. Le second doit être actionné manuellement et a plus d’options de disposition.

Cliquer sur l’animation pour l’arrêter

Exemple d'arrangement automatique des blocs avec Artboard manager
Artboard Manager

Composants

Sketch Repeat : Duplique un objet à la même position dans tous les plans de travail. Pratique pour les composants transverses.

Sketch Material : générer facilement des composants Material, même complexes comme des tableaux.

Générateur de carte

Générateur de graphique, avec des données réelles ou aléatoires.

Anima Autolayout propose plusieurs fonctions pour gérer des dimensions dynamiques. La gestion automatique du padding peut faciliter la vie quand on veut poser rapidement les blocs d’un wireframe.

Contenu

Automate Sketch : plein de commandes utiles. Ma préférée : Décomposer un calque de texte en plusieurs, en prenant le retour à la ligne comme séparateur. Pratique quand on doit recopier plein de contenu depuis un brief.

Accessibilité des couleurs avec Stark : test de contraste, simulations de daltonisme et suggestions de couleur. Un autre plugin permet de tester une palette de couleurs entière.

Chercher & remplacer

Décompte de charactère

Lorem Ipsum

Un plugin de typographie française pour Sketch

Résumé : j’ai créé un plugin Sketch pour respecter automatiquement les règles typo, espaces insécables et bien plus.

icone du plugin
Typographie frenchy

Tout a commencé par une interface comme celle‐ci :

screenshot de boite de dialogue

… Dans le titre, un magnifique point d’exclamation seul sur sa ligne, problème récurrent dans une application mobile sur laquelle je travaillais. Je me suis demandé comment résoudre ce problème, sans demander aux développeurs de mémoriser chaque règle et d’insérer systématiquement des caractères spéciaux à la main. Ces caractères, ce sont les espaces insécables, qui collent la ponctuation au signe précédent. Sur le web ça implique de taper des choses sympathiques comme   ou d’utiliser d’obscurs raccourcis clavier.

Une meilleure alternative est d’automatiser le problème, soit en début de chaine (comme le fait Word), soit en fin de chaine (comme ce plugin pour WordPress ou comme le fait nativement SPIP). Vu qu’il faudrait attendre longtemps que chaque système ait son plugin de typo, j’ai choisi d’explorer la première piste en créant un plugin pour Sketch. Ca ne règle pas le problème du contenu saisi directement dans l’interface de contribution des différents CMS, mais, de même qu’un développeur peut copier‐coller un code RGB depuis Zeplin ou Invision, l’idée est que des gens pourraient copier et coller du texte d’interface, par exemple celui d’une barre de menu. On est d’accord que c’est optimiste : si demain ce texte change, il y a peu de chance qu’il soit ressaisi d’abord dans Sketch.

Mais c’est une voie intéressante. Après tout, Invision, Figma ou Framer génèrent des maquettes de plus en plus compatibles avec du HTML/CSS. Cette proximité entre conception et réalisation pourrait aussi s’appliquer au texte.

Dans un tout autre angle, voir aussi Kopie, outil de rédaction collaborative synchronisée avec Sketch.

Ajoutons que le plugin apporte aussi quelques embellissements directement dans les maquettes, indépendamment de ces questions de workflow :

  • De " à «
  • De double tiret (--) à tiret demi‐quadratin ( – )
  • Certaines fractions (½, ⅓, ¼ )
  • Suffixes ordinaux : de 2e à 2ᵉ
  • Points de suspension…
  • De N° à №

Bref. Plugin de typographie automatique. C’était fun à faire. Retours bienvenus.

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