Ce que l’on retiendra du BlendWebMix 2017

Le 26 et 27 Octobre a eu lieu à Lyon la 5ème édition du BlendWebMix.

Conçu dans l’objectif de « mixer » (to blend) tous types de professionnels du web et créer un évènement à échelle national, le BlendWebMix a su s’imposer comme un rendez-vous annuel national de qualité, et incontournable pour les acteurs du métier au sein de la région Rhône-Alpes.

Une fois de plus Clever Age y était, représenté cette année par quatre profils différents de l’équipe Clever Garden, dont deux néophytes du salon. L’occasion parfaite pour récolter des points de vue différents, et ratisser un maximum de conférences !

Vous pourrez donc retrouver dans cet article l’avis de chacun sur cette édition 2017, ainsi qu’un résumé et lien pour visionner les deux conférences qu’ils ont jugées les plus marquantes.

Pour consulter le planning complet de l’évènement, ainsi que la liste de tous les speakers présents, nous vous invitons à vous rendre sur le site officiel du BlendWebMix.

 

C’est ma 4ème participation au Blend et je suis toujours aussi satisfait de cette conférence lyonnaise. La mixité du design, de la tech. et du biz est toujours bien respectée et tout le monde peut y trouver son compte.

Des startups d’État à l’État plateforme
par Pierre Pezziardi

Alors, moi, pour une fois, j’ai trouvé que la keynote d’ouverture était vraiment intéressante. En effet, Pierre Pezziardi nous a raconté l’histoire de beta.gouv.fr, incubateur d’innovations publiques et de “startups d’Etat”. Cet incubateur a fait naître d’excellents sites/services comme labonneboite, Pix, mes-aides.gouv.fr. Ce sont les “personnes de terrain” qui sont à l’initiative de chacun de ses services. Pierre nous a bien rappelé plusieurs fois qu’il travaillait grâce à l’argent des contribuables et qu’il faisait très attention à ne pas gaspiller cet argent.

• Revoir la conférence sur la chaîne Youtube du BlendWebMix

 

Ne parlons plus d’accessibilité
par Arnaud Delafossse

Arnaud Delafosse a fait un état des lieux de l’accessibilité en nous rappelant qu’il faut VULGARISER cette pratique qui touche énormément de monde (20 % de la population française, soit 12 millions de personnes en France déjà). L’accessibilité n’est pas si coûteuse que ça si elle est faite à temps et ne doit pas être la cerise sur le gâteau traitée en fin de projet.

Bref, conférence intéressante où quelques rappels n’ont pas pu faire de mal à l’auditoire.

• Revoir la conférence sur la chaîne Youtube du BlendWebMix

 

 

C’était ma première fois au Blendwebmix, et j’en ressors plutôt satisfaite. J’ai pu assister à diverses conférences que soit en UX (REX, l’expérience au global, guérilla UX) , en design (typographie, design émotionnel) , en gestion de projet (agilité, forfait) , en marketing (analytics, AB test) ou présentation de service (Snapchat, Chatbot). Certaines étaient pointues d’autres un peu moins, à bien choisir donc ! Le lieu était sympa, accessible et plutôt agréable.

Guérilla UX, quick mais pas dirty
par Carine Lallemand

Carine Lallemand, PhD chercheur en psychologie et ergonomie des interactions homme-machine à l’université de Luxembourg, nous a fait l’honneur de présenter un talk sur les méthodologies UX adaptées à des entreprises qui ne pourraient les appliquer à 100 % car contraintes de budget, de temps ou d’accès aux utilisateurs.  Mon avis : ces méthodes de substitutions ne sont pas applicables à tous les contextes projets, donc il faudra étudier le contexte avant de mettre en place un atelier, même de substitution.

Carine  a repris les différentes phases de l’UX Design et a présenté les adaptations possibles. En voici quelques unes :

• Exploration : mettre en place des interviews via email. La méthode est plutôt asynchrone et laisse de l’autonomie aux interviewés.  Moins de biais seront introduits par les interviewés car ils prendront le temps pour expliquer,  mais aussi moins de biais introduits par l’animateur au sujet des questions.  La retranscription sera déjà toute faite, moins de temps sera consacrée à la re-écriture / re-lecture. Par contre, il faut prendre en compte le délai de réponse et certains écrits ne reflètent pas les émotions, le ressenti exact. Mon avis : il faut avoir accès aux emails des utilisateurs cibles et cela n’est pas forcément le cas.

• Observation : Fly on the wall, observer des utilisateurs dans le contexte réel d’activité. On va pouvoir observer ce qu’ils font, comment ils font, les expressions positives, négatives, entendre les remarques. On peut les observer sans valider un rendez-vous, donc il y a un gain de temps.  Mon avis : attention selon le contexte projet, ce n’est pas applicable, un rendez-vous est obligatoire…

• Idéation : Proto-Personae ou adhoc personae ou encore bull-shit personae. C’est la création des fiches personae mais basée sur des données de l’équipe projet. Attention ces données peuvent être erronées car elles sont basées sur des hypothèses la plupart du temps. Il faudrait pouvoir envoyer ces fiches auprès de “vrais” utilisateurs afin de valider les données. Mon avis : il faut avoir accès aux utilisateurs cibles et cela n’est pas forcément le cas.

• Génération : mettre en place des ateliers sketching à disposition dans un endroit visité par les utilisateurs cibles. Ce sont des templates papiers disponibles sur un support afin que les utilisateurs s’ils ont envie de dessiner, puissent imaginer une interface. Certains pourront vous proposer des idées d’amélioration mais globalement les sketchs obtenus ne sont pas à utiliser tels quels, donc il faudra les analyser. Mon avis : selon le contexte projet, les utilisateurs cibles ne sont pas aux mêmes endroits, publics ou privés. Et bien entendu, leur accès peut être compliqué.

• Évaluation : le guerilla testing. Carine ne s’est pas éternisée sur le sujet car beaucoup de références existent sur le web.

En conclusion, Carine a insisté sur le recrutement des utilisateurs ; ils doivent correspondre à la cible et non en être éloignés car des biais peuvent apparaître dans les résultats et les conséquences sur les projets peuvent être plus ou moins graves. Bien entendu, elle a insisté sur la présence des utilisateurs cibles dans les projets.

Il est important de pré-tester n’importe quel atelier pour être sûr du déroulé, de la compréhension et des résultats obtenus. Enfin, en UX-Design, ces ateliers sont des ingrédients et non une recette. Donc il faut les utiliser et les adapter selon le contexte projet sur lequel vous travaillez.

• Revoir la conférence sur la chaîne Youtube du BlendWebMix

 

Chatbot & Relation client
par Thomas Sabatier

Thomas Sabatier  est CEO  chez The chatbot Factory. Il nous a présenté ce que sont les chatbot et leur intérêt dans la relation client. Pour lui, les applications mobiles vont commencer leur déclin d’ici 5 ans car certes il y a de plus en plus de temps passé sur le mobile mais le nombre de nouvelles applications en téléchargement sur mobile est bas. Il faut répondre aux besoins des millenials : immédiateté, ubiquité. Le chatbot peut y répondre notamment dans la relation client.

Un chatbot une intelligence artificielle qui imite le comportement humain, répondant de façon automatique aux questions des utilisateurs par texte ou par voix. Thomas nous a cité quelques exemples de chatbot de type d’interface par  texte :  Facebook Messenger et de type d’interface par voix :  Alexa d’Amazon.

Il y a 3 mécanismes de conversation pour les chatbots :

• linéaire  : arbre de décision avec peu d’intelligence artificielle ou pas du tout. Le bot va mener la conversation et l’utilisateur sera plutôt passif. Il va choisir des réponses proposées par le bot via des boutons par exemple.
• non-linéaire : traitement automatique du langage donc avec de l’intelligence artificielle. Le texte entré par l’utilisateur va être analysé et transformé en langage compréhensible pour l’intelligence artificielle. La structure sera de type : intention (action de la phrase), entité (quantité, lieu, date = paramètre de la phrase). L’utilisateur est actif et le bot va traiter l’information.
• hybride :  un mélange d’arbre de décision et de traitement du langage.

Au sujet des usages, le BTC et le BTB/E sont concernés.

Pour le BTC, un chatbot peut avoir comme fonction la relation client, l’aide donnée aux utilisateurs ou gérer le suivi de commande par exemple.  

Le chatbot peut s’interfacer avec plusieurs types de sites, applications mobiles ou même logiciels (Facebook, Skype, sms, Wechat, Viber, etc).

Pour le BTB/E, les employés pourraient contacter leur support IT ou leur support RH via chatbot. Il peut se connecter aux grands progiciels de la gestion IT/RH comme Saleforces, Oracle, Zendesk, Adobe Marketing Cloud, Skype for business, etc.

L’évolution montre l’ère du chatbot

En 2000, nous avions des agents conversationnels comme Ikea :  l’ère avatar. Mais la compréhension sémantique n’était pas au top, les réponses n’étaient  pas totalement justes et satisfaisantes.  Cela a donc été remplacé par la recherche : développement du langage des moteurs de recherche : mots clés, etc.

Sauf que pour l’humain : comment parler à la machine pour être compris ? Compliqué…  

En 2015 :  mise en place des bot SMS. Exemple JAM : premier chatbot.  

En 2016 : déferlante et ouverture de la plateforme Messenger introduisant le chatbot.

Pour finir, Thomas nous a cité 2 facteurs du pourquoi ça va rester et marcher :

• les usages : mobile first et messaging de plus en plus.

• les progrès techniques : NLP technology et cloud storage. 

 

 

Première participation au Blend pour ma part, et pas déçu du contenu, des intervenants, de l’organisation, du lieu. J’ai apprécié de pouvoir suivre des conférences orientées web en rapport avec mon métier ou non, mais aussi d’autres secteurs, comme la sécurité sur mobile, la typographie, la VR,… Mais je repars un peu frustré par certaines conférences qui étaient intéressantes, mais bien trop courtes et qui méritaient de rentrer plus en profondeur dans le sujet qu’elles abordent.

F.L.I.P. : Layout Animation
par Freddy Harris

En tant que fan de CSS et friant d’animations, c’était une conférence que j’attendais particulièrement. À l’heure où le web cherche à concurrencer les applications natives, grâce notamment aux PWA, il persiste un point dans lequel il est difficile d’être performant : les animations. Freddy nous présente une méthodologie permettant de faire des animations fluides, à 60 fps, en CSS (et un de JavaScript quand même pour les déclencher), rien qu’en utilisant transition, opacity et filter, qui sont les seules propriétés CSS à animer pour rester performant. Cette technique se nomme donc F.L.I.P.

• F pour “First”  : c’est l’état initial du DOM, avant animation. Les éléments sont donc à leur place normale.

• L pour “Last”  : l’état final des éléments dans le DOM, après animation.

• I pour “Invert”  : on inverse visuellement les éléments pour qu’ils semblent être à leur place initiale, avant animation, grâce au propriétés CSS opacity et transform.

• P pour “Play” : on joue l’animation de retour, qui remet donc les éléments à leur place, donc dans l’état final du DOM.

Ainsi, lors des animations, les éléments ne changent pas de position dans le DOM, il n’y a donc plus que les animations à effectuer.

Pour implémenter ces animations, il est préférable de le faire côté Javascript : le calcul des position en JS (avec la fonction getBoundingClientRect()), mais l’exécution des animations en CSS, en “inline” dans le HTML. Il sera plus aisé à l’avenir d’effectuer des animations CSS en JS grâce à la WebAnimation API, encore en état expérimental, mais qui facilitera grandement le travail et la lisibilité du code.

Des problèmes se posent cependant quand on parle d’animations web, notamment : comment animer des éléments qui disparaissent du DOM (on supprime un élément d’une liste par exemple) ? Ces problématiques peuvent être simplifiées en utilisant le virtualDOM comme ReactJS ou VueJS le font.

Il existe d’ores et déjà des package ReactJS, VueJS qui implémentent la méthodologie F.L.I.P. comme react-flip-move.

Dans le futur une nouvelle propriété va faire son apparition : contain. Cette propriété va permettre de prévenir le navigateur qu’un élément et sont contenu sont plus ou moins indépendants du reste de la page. Ainsi, si cet élément a à subir des changements de taille, couleur, disposition, le navigateur saura qu’il n’a pas à recalculer le rendu de toute la page, mais seulement d’une portion d’HTML.

Vous pouvez retrouver la présentation de Freddy, en anglais, à cette adresse.

• Revoir la conférence sur la chaîne Youtube du BlendWebMix

 

CSS Houdini
par Vincent de Oliviera

CSS Houdini est une nouvelle spécification CSS, en cours d’implémentation, qui devrait bientôt arriver dans nos navigateurs (on peut déjà jouer avec la Custom Paint API, ainsi que la Properties & Values API, sous Chrome, cf https://ishoudinireadyyet.com/). Son but est d’étendre les possibilités pour Javascript d’interagir avec le moteur de rendu du navigateur. Et tout comme Harry Houdini, un célèbre magicien a donné son nom à cette nouvelle spécification, les possibilités sont tout autant bluffantes.

Actuellement avec Javascript, nous n’avons accès qu’à une partie du moteur de rendu : le DOM, et le CSSOM. CSS Houdini va permettre de « hacker » le moteur, afin d’avoir accès aux API des autres parties du moteur.

Ces APIs permettent notamment de créer nos propres propriétés CSS, nos propres modes de display, des animations, des fonctions (comme les fonctions lighten() et darken() des préprocesseurs par exemple), de créer de nouveaux sélecteurs… On peut par exemple déformer un élément HTML de la façon que l’on veut, animer cette déformation, créer toute sorte d’effets esthétiques sur n’importe quel élément HTML.

Le gros avantage de CSS Houdini est bien sûr l’étendue des possibilités qu’il offre, mais malheureusement, cela reste du JavaScript. Cependant, il n’existe pas encore de standard, et il faudra espérer que tous les navigateurs l’implémentent de façon similaire.

Une conférence très intéressante (pour un intégrateur) qui nous plonge un peu dans le futur de CSS. Attention toutefois à ne pas trop montrer d’exemples aux clients et aux designer qui pourraient se laisser emporter, CSS Houdini n’est pas tout à fait prêt ! Les slides sont disponibles à cette adresse, avec des exemples d’implémentations.

• Revoir la conférence sur la chaîne Youtube du BlendWebMix

 

 

Cette année marquait pour moi ma quatrième participation au BlendWebMix. L’occasion de constater par mes propres yeux l’énorme effort fait pour se détacher de l’image « bullshito-marketing » associée à l’évènement depuis sa première édition. Fini petits fours, coupes de champagne en smoking et overdose de conférences orientées marketing, place à l’ambiance « street-food », salons de discussion et stands « à la cool », et une meilleure proposition de conférences techniques. Un vrai vent frais pour cette édition 2017, bien plus ancrée dans la culture web, et toujours un grand accent mis sur la parité, bravo aux organisateurs !

The Secret World of Graphic Design for Filmmaking
par Annie Atkins

La conférence The Secret World of Graphic Design for Filmmaking est la preuve que le Blend sait parfois bien porter son nom : c’est un endroit où l’on essaie de « blend » (mélanger) environnements, profils et métiers au maximum.

La présentation d’Annie Atkins était l’incarnation parfaite de la volonté de l’évènement, en nous proposant de nous exposer le métier de graphic design non pas dans le domaine du web, mais du cinéma.

Ayant fait le trajet depuis l’Irlande jusqu’à Lyon spécifiquement pour régaler notre curiosité, Annie dispose d’un palmarès impressionnant de films sur son curriculum vitae :

The Tudors (série), Vikings (série), Les Boxtrolls et plus récemment The Grand Budapest Hotel (ayant justement marqué les esprits de par son empreinte graphique), qui a su attirer la curiosité de nombreuses personnes dans la salle.

La présentation avait pour but de nous montrer que le graphisme au cinéma ne se résume pas simplement à l’affiche du film, mais à tout l’univers qui gravite autour. Fausses enseignes, publicités, ou même fausses cartes de visites : tous les détails graphiques d’un film sont le fruit de recherches, heures de travail, tout ceci dans la volonté de créer la cohérence d’un univers fictif.

Malgré le grand écart entre son domaine d’expertise et le nôtre,  Annie Atkins a su se présenter comme une réelle source d’inspiration, en nous exposant ses méthodes et scandant des phrases motivationnelles telle que « you doesn’t have to make something original to make something of value ! ».

Que vous soyez cinéphiles ou non, une conférence à voir et à revoir, pour découvrir les dessous d’un métier injustement méconnu, et faire le pleins de motivation !

 

Fontes Variables, la matrice typographique par Malou Verlomme

Une conférence courte, mais intense, présentée par Malou Verlomme, typographe, qui se proposait de nous exposer un nouveau format de typographies : les « variables fonts ».

Développé en parallèle par les géants Microsoft, Apple, Google et Adobe, l’idée est la mise en place d’un nouveau format universel pour les polices d’écritures, qui pourraient contenir à lui seul toutes les variations possibles d’une même famille typographique. Fini l’import de Gotham Bold, Light, Medium, Extra Bold et tutti quanti. Un seul fichier d’une variable font contiendra axes et delta, permettant de gérer la forme et graisse des lettres à sa guise. Un beau gain de performance et de simplicité d’utilisation.

Bref, un vrai renouveau pour les typographes, mais de notre côté, une belle promesse d’avenir côté webdesign et intégration web ! Il ne reste plus qu’à attendre que les navigateurs se mettent à la page !

Curieux de tester le rendu d’une variable font ? Munissez-vous d’un navigateur (très) récent, et accédez à l’adresse : www.axis-praxis.org
• Revoir la conférence sur la chaîne Youtube du BlendWebMix