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

Protocoles, normes, infrastructures : la main invisible de Google

Plusieurs jour­na­listes ont raconté leurs périples pour se passer des géants améri­cains du numé­rique (chez Motherboard, chez Gizmodo). Conclusion : c’est compliqué, tant ils sont omni­pré­sents. Par exemple, Amazon (via AWS) c’est un tiers de l’in­fo­nua­gique.

Je vais décrire quelque chose d’à la fois simi­laire et diffé­rent :

  • D’abord, comment on peut passer la journée sans quitter l’uni­vers Google – avec des degrés de proba­bi­lité variable suivant les étapes : les produc­tions Youtube n’ont pas la même prégnance que Youtube lui-même.
  • Ensuite, comment cet univers n’est pas seule­ment constitué des offres qu’il propose et des filiales qu’il possède, mais aussi des langages, normes, et proto­coles invi­sibles sur lesquelles il a un large contrôle.
Chromebook

1. J’ouvre mon ordi­na­teur Google.

Logo OS Fuschia

2. Bientôt, j’allumerai un système d’exploitation inté­gra­le­ment créé par Google.

Logo language Dart

3. Je lance une appli­ca­tion de mail codée dans un langage créé par Google.

Logo AMP pour Email

4. J’ouvre un message affiché dans un sous‐langage contrôlé par Google.

Logo format d'image Webp

5. Je clique sur une image, qui est dans un format contrôlé par Google.

Logo protocole QUIC

6. Pour ouvrir la page, une requête est envoyée dans un proto­cole contrôlé par Google.

Logo Google DNS

7. L’URL de la page est traduite en IP avec un annuaire contrôlé par Google.

Carte du cable sous-marin FASTER

8. Les donnée sont trans­mises par un cable sous-marin en partie contrôlé par Google.

9. L’intégrité de la page est garantie par un certi­ficat de sécu­rité racine délivré par Google.

Logo Google Cloud Platform

10. La page est hébergée chez Google.

Logo Youtube Red

11. J’arrive sur une plate­forme de vidéo et regarde une série produite par Google.

Logo Widevine

12. Je ne peux pas télé­charger la vidéo à cause d’un DRM géré par Google.

galerie de matériel Google

13. Mon assis­tant Google Home m’en­voie une alerte d’une caméra Google connectée à une borne wifi Google.

Mascotte Android en cag

14. Pour en savoir plus, j’ouvre mon télé­phone Google et son système d’ex­ploi­ta­tion contrôlé par Google.

Et cetera et cetera. Je n’ai pas inclus l’offre d’accès à Internet Google Fiber puis­qu’elle est en pause.

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

Toute la complexité du monde se cache dans le champ Nom d’un formulaire

Une personne n’a pas forcé­ment un seul prénom suivi d’un seul nom de famille. Elle peut avoir un seul nom, ou trois prénoms et quatre noms de famille, en changer au cours de sa vie, son nom peut être très long ou très court… il y a telle­ment de variantes à travers les sociétés humaines que l’ex­cep­tion doit être consi­dérée comme la norme. Cette complexité existe aussi pour les numéros de télé­phone, les adresses, et pour tant d’autres méca­nismes qu’il existe toute une litté­ra­ture à ce sujet, avec un titre devenu coutu­mier : « Les erreurs que font les déve­lop­peurs avec [bidule] ».

S’il existe une longue liste de ces dispo­si­tifs, c’est qu’ils sont trop souvent mal pris en compte en infor­ma­tique. Cela peut avoir des consé­quences très gênantes, par exemple si votre nom de famille est aussi un mot réservé qui signifie le « rien » en program­ma­tion et que vous faites tout bugger.

C’est un problème clas­sique d’écart entre le terri­toire et la carte. Un concep­teur modé­lise la réalité comme il peut, en faisant des raccourcis : un être humain est iden­tifié par un prénom et un nom, dans cet ordre et sans rien d’autre. Il doit bien exister deux trois excep­tions mais on verra plus tard, se dit-il.

Les noms sont déjà complexes, alors imaginez une notion comme la famille. Par exemple le service Google Play Family impose des règles qui forment une défi­ni­tion impli­cite.

Admettons que ce sont surtout des limites commer­ciales pensées pour que les gens n’abusent pas du système en ajou­tant trois cent personnes du monde entier à leur « famille ». Mais quand même. Qui est Google pour dire qu’une famille ne peut être composée de nombreuses personnes vivant dans plusieurs pays ? Ensuite, ça influe forcé­ment sur la vie des gens : le service devient intriqué avec leur quoti­dien et définit quels films peut regarder un enfant, avec qui et sur quel appa­reil. Tout ça dans un contexte d’ob­jets toujours plus présents et connectés, où la famille peut avoir un appa­reil Google dans chaque pièce et plus d’ap­pa­reils que de membre.

Nom, prénom et design tragique

Bref, conce­voir un système peut avoir des consé­quences graves et inat­ten­dues, c’est un thème dont la profes­sion prend conscience, avec diffé­rents approches (design tragique, design systé­mique…) et spécia­lités (impact sur les mino­rités, biais et auto­ma­ti­sa­tion forcenée en intel­li­gence arti­fi­cielle…).

Mais ce que j’aime avec mes exemples, c’est qu’ils paraissent anodins. On ne parle pas de l’UI qui a causé l’envoi d’une fausse alerte d’at­taque de missiles à tout Hawaï ou de cock­pits d’avions mal conçus. La majo­rité des gens aujourd’hui saisissent leur nom en deux secondes et leur adresse par auto-complétion. Pourtant les noms sont une construc­tion à l’in­ter­sec­tion de bien des enjeux et des insti­tu­tions sociales :

Enfin et plus large­ment, les noms de personnes sont en eux-même un phéno­mène social complexe, avec un champ d’étude dédié en sciences sociales : l’an­thro­po­nymie, dont on pourra lire une synthèse fasci­nante ici. Elle nous apprend qu’ils ne servent pas qu’à iden­ti­fier une personne, loin de là, mais aussi à classer et hiérar­chiser, à inscrire la personne dans une certaine orga­ni­sa­tion sociale et symbo­lique, ainsi qu’à s’adresser à elle d’une certaine manière, dans un certain contexte.

Bref, pour peu qu’on creuse un peu, toute la complexité de ce qu’on appelle un système socio-technique peut surgir d’un modeste champ de formu­laire.

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.