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

Protocoles, normes, infrastructures : la main invisible de Google

Plusieurs journalistes ont raconté leurs périples pour se passer des géants américains du numérique (chez Motherboard, chez Gizmodo). Conclusion : c’est compliqué, tant ils sont omniprésents. Par exemple, Amazon (via AWS) c’est un tiers de l’infonuagique.

Je vais décrire quelque chose d’à la fois similaire et différent :

  • D’abord, comment on peut passer la journée sans quitter l’univers Google – avec des degrés de probabilité variable suivant les étapes : les productions Youtube n’ont pas la même prégnance que Youtube lui‐même.
  • Ensuite, comment cet univers n’est pas seulement constitué des offres qu’il propose et des filiales qu’il possède, mais aussi des langages, normes, et protocoles invisibles sur lesquelles il a un large contrôle.
Chromebook

1. J’ouvre mon ordinateur Google.

Logo OS Fuschia

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

Logo language Dart

3. Je lance une application 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 protocole 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 transmises par un cable sous‐marin en partie contrôlé par Google.

9. L’intégrité de la page est garantie par un certificat de sécurité 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 plateforme 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 assistant Google Home m’envoie 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’exploitation contrôlé par Google.

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

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

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 tellement de variantes à travers les sociétés humaines que l’exception doit être considé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écanismes qu’il existe toute une littérature à ce sujet, avec un titre devenu coutumier : « Les erreurs que font les développeurs avec [bidule]».

S’il existe une longue liste de ces dispositifs, c’est qu’ils sont trop souvent mal pris en compte en informatique. 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 programmation et que vous faites tout bugger.

C’est un problème classique d’écart entre le territoire et la carte. Un concepteur modélise la réalité comme il peut, en faisant des raccourcis : un être humain est identifié par un prénom et un nom, dans cet ordre et sans rien d’autre. Il doit bien exister deux trois exceptions 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éfinition implicite.

Admettons que ce sont surtout des limites commerciales pensées pour que les gens n’abusent pas du système en ajoutant 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 quotidien et définit quels films peut regarder un enfant, avec qui et sur quel appareil. Tout ça dans un contexte d’objets toujours plus présents et connectés, où la famille peut avoir un appareil Google dans chaque pièce et plus d’appareils que de membre.

Nom, prénom et design tragique

Bref, concevoir un système peut avoir des conséquences graves et inattendues, c’est un thème dont la profession prend conscience, avec différents approches (design tragique, design systémique…) et spécialités (impact sur les minorités, biais et automatisation forcenée en intelligence artificielle…).

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’attaque de missiles à tout Hawaï ou de cockpits d’avions mal conçus. La majorité des gens aujourd’hui saisissent leur nom en deux secondes et leur adresse par auto‐complétion. Pourtant les noms sont une construction à l’intersection de bien des enjeux et des institutions sociales :

Enfin et plus largement, les noms de personnes sont en eux‐même un phénomène social complexe, avec un champ d’étude dédié en sciences sociales : l’anthroponymie, dont on pourra lire une synthèse fascinante ici. Elle nous apprend qu’ils ne servent pas qu’à identifier une personne, loin de là, mais aussi à classer et hiérarchiser, à inscrire la personne dans une certaine organisation sociale et symbolique, 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 formulaire.

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.