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

Design system, mood­board, créa­tion de maquette avec Studio… Invision est devenue une plate­forme complète. Voici pour­tant trois fonc­tions que vous avez peut-être manqué.

Visite guidée

Quoi : Guide le visi­teur à travers une suite de commen­taires. Cliquer sur Suivant l’emmène au prochain commen­taire, même dans une autre page.

Pourquoi : Le visi­teur découvre la maquette de manière contrôlée, avec des expli­ca­tions en contexte. Parfait pour les clients qui veulent voir la maquette avant une réunion et qui ne liraient jamais un mail d’ar­gu­men­taire.

Comment : Ajouter un commen­taire et changer son type en cliquant en haut à gauche du panneau (cf. screen­shot).

ajout d'une étape de visite guidée

Export local

Quoi : exporter vos maquettes en version HTML. Conserve les inter­ac­tions.

Pourquoi : Pratique pour les présen­ta­tions ou tests utili­sa­teur dans un endroit sans réseau, ou pour faire un backup.

Pour y accéder : accueil du projet > points de suspen­sion à droite de la barre de menu > Download proto­type > 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 corres­pond au statut de l’écran. Invision possède en effet un système assez complet de gestion de projet. De base cela permet d’as­si­gner un statut à une maquette (en attente, en cours, validé, etc.) et de changer de changer en chan­geant la maquette de colonne.

S’y ajoutent des fonc­tions plus avan­cées. on peut notam­ment asso­cier é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 desi­gners UX qui travaillent sur Sketch, voici des plugins utiles pour faire des wire­frames ou des wire­flows.

Diagrammes

Userflows : sélec­tionner un calque, un plan de travail, générez une flèche et hop ça fait un wire­flow. Il peut être actua­lisé à chaque dépla­ce­ment de plan de travail.

Connection Flow Arrows : pareil mais vers n’im­porte quel calque. Et avec pas mal de para­mètres utiles. Le détail qui fait la diffé­rence : des pointes de flèche orien­té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 wire­flow et là paf, les titres d’écrans sont minus­cules et illi­sibles. Pas grave : ce plugin ajoute au dessus de chaque plan de travail un calque préci­sant son nom.

Deux plugins d’or­ga­ni­sa­tion auto­ma­ti­que­ment des plans de travail : Artboard Manager et Artboard Tools. Le premier fonc­tionne en continu et a plus d’op­tions de style. Le second doit être actionné manuel­le­ment et a plus d’op­tions de dispo­si­tion.

Cliquer sur l’ani­ma­tion pour l’ar­rêter

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

Composants

Sketch Repeat : Duplique un objet à la même posi­tion dans tous les plans de travail. Pratique pour les compo­sants trans­verses.

Sketch Material : générer faci­le­ment des compo­sants 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éa­toires.

Anima Autolayout propose plusieurs fonc­tions pour gérer des dimen­sions dyna­miques. La gestion auto­ma­tique du padding peut faci­liter la vie quand on veut poser rapi­de­ment les blocs d’un wire­frame.

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épa­ra­teur. Pratique quand on doit reco­pier plein de contenu depuis un brief.

Accessibilité des couleurs avec Stark : test de contraste, simu­la­tions de dalto­nisme et sugges­tions de couleur. Un autre plugin permet de tester une palette de couleurs entière.

Chercher & remplacer

Décompte de charac­tère

Lorem Ipsum

Un plugin de typographie française pour Sketch

Résumé : j’ai créé un plugin Sketch pour respecter auto­ma­ti­que­ment les règles typo, espaces insé­cables et bien plus.

icone du plugin
Typographie frenchy

Tout a commencé par une inter­face comme celle-ci :

screenshot de boite de dialogue

… Dans le titre, un magni­fique point d’ex­cla­ma­tion seul sur sa ligne, problème récur­rent dans une appli­ca­tion mobile sur laquelle je travaillais. Je me suis demandé comment résoudre ce problème, sans demander aux déve­lop­peurs de mémo­riser chaque règle et d’in­sérer systé­ma­ti­que­ment des carac­tères spéciaux à la main. Ces carac­tères, ce sont les espaces insé­cables, qui collent la ponc­tua­tion au signe précé­dent. Sur le web ça implique de taper des choses sympa­thiques comme   ou d’uti­liser d’obs­curs raccourcis clavier.

Une meilleure alter­na­tive est d’au­to­ma­tiser 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 nati­ve­ment SPIP). Vu qu’il faudrait attendre long­temps que chaque système ait son plugin de typo, j’ai choisi d’ex­plorer la première piste en créant un plugin pour Sketch. Ca ne règle pas le problème du contenu saisi direc­te­ment dans l’in­ter­face de contri­bu­tion des diffé­rents CMS, mais, de même qu’un déve­lop­peur peut copier-coller un code RGB depuis Zeplin ou Invision, l’idée est que des gens pour­raient copier et coller du texte d’in­ter­face, par exemple celui d’une barre de menu. On est d’ac­cord que c’est opti­miste : 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é­res­sante. Après tout, Invision, Figma ou Framer génèrent des maquettes de plus en plus compa­tibles avec du HTML/CSS. Cette proxi­mité entre concep­tion et réali­sa­tion pour­rait aussi s’ap­pli­quer au texte.

Dans un tout autre angle, voir aussi Kopie, outil de rédac­tion colla­bo­ra­tive synchro­nisée avec Sketch.

Ajoutons que le plugin apporte aussi quelques embel­lis­se­ments direc­te­ment dans les maquettes, indé­pen­dam­ment de ces ques­tions de work­flow :

  • De " à «
  • De double tiret (--) à tiret demi-quadratin ( – )
  • Certaines frac­tions (½, ⅓, ¼ )
  • Suffixes ordi­naux : de 2e à 2ᵉ
  • Points de suspen­sion…
  • De N° à №

Bref. Plugin de typo­gra­phie auto­ma­tique. C’était fun à faire. Retours bien­venus.

Gestion des styles dans Axure

Axure n’est pas un outil de maquet­tage à haute fidé­lité, pour­tant il est parfois inté­res­sant de modi­fier les styles par défaut des widgets ou de disposer d’une biblio­thèque de styles. Cela évite par exemple de sélec­tionner cinquante fois un niveau de gris et se retrouver avec une palette de gris pas homo­gè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 exis­tant, en allant dans Fichier > Importer. Là, avancez dans l’as­sis­tant jusqu’à la fenêtre d’im­por­ta­tion de styles de widgets puis sélec­tionnez ceux qui vous inté­ressent.

Axure - Import styles

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