Restitution des conférences UX et Web de Paris Web 2018

Texte par Rémi KACZMAREK , vidéo par Bastien Marécaux

Avec notre agence Atecna nous avons eu la chance cette année de participer aux conférences de Paris Web 2018. En voici une restitutions sur les faits importants à retenir à nos yeux.

La vidéo ci-dessus relate de nos aventures à Paris sous forme d’un “Vlog” comme disent les Millenials. Ci-dessous vous trouver une restitution complète préparée avec soin par Rémi.

UX en Terre inconnue
Sébastien Desbenoit (UX Designer chez Seb)

L’objectif de cette première heure de conférence présentée par Sébastien Desbenoit, Manager UX chez Seb, était de nous transmettre des moyens pour exercer notre métier d’UX designer dans un environnement de travail inconnu et parfois complexe.

Comme le dit très bien Sébastien, il faut parfois revenir aux méthodes simples et basiques pour faire avancer les projets. Sur des terrains hétérogènes, Benoît nous conseille de travailler autour de 3 piliers : la préparation, l’accompagnement et la synthèse.

La préparation

Les débuts d’un projet sont généralement flous, on ne connaît pas grand chose, c’est le brouillard. On va donc se préparer en prenant connaissance :

• Du sujet : que sais-je ? de quoi parlons-nous ?
• Des parties prenantes : qui sont mes interlocuteurs ?
• Du contexte : y a-t-il des conflits entre les personnes ?
• Du vocabulaire utilisé : y a-t-il un jargon, des mots techniques ?

Benoît conseille toutefois de ne pas trop se préparer afin de rester en écoute active tout au long du projet. Il faut arriver en écoutant et non en conquérant.

L’accompagnement

Pour la phase d’accompagnement, Benoît nous a livré quelques astuces :

• Faire sortir les collaborateurs de leurs rythmes habituels, en allant se poser dans un canapé autour d’un café par exemple
• Éviter les boucliers d’écrans pendant les ateliers
• Toujours reformuler les échanges par des mots simples pour s’assurer que tout le monde ait bien compris la même chose
• Se mettre dans la peau d’une sage-femme : aider à faire sortir le bébé aux équipes
• S’assurer qu’il n’y ait qu’un seul objectif car tout le monde a une vision différente
• Ne pas donner son avis sur le projet, l’UX designer doit aider, s’adapter et accompagner.

La synthèse

Benoît conseille vivement de toujours faire un compte-rendu. Ce compte-rendu est à réaliser rapidement afin d’avoir encore les idées fraîches.

Pour synthétiser, il recommande de toujours reformuler les propos avec des mots simples.

Suivre Sébastien Desbenoit sur Twitter

L’ère de l’analyse à tout va, ou comment les applications nous rendent accro à leurs produits
Sabine Condiescu (UX Designer chez In-Tact)

En tant que UX designer nous sommes souvent en train d’analyser : de la data, des comportements d’utilisateurs, etc. Sabine Condiescu, UX Designer, fait de l’analyse dans son travail mais également dans son quotidien lorsqu’elle utilise des produits digitaux.

Dans une ère où tout le monde utilise des produits digitaux, Sabine a essayé de comprendre comment ces applications nous rendent accro avec l’appui d’exemples réels. Une sorte de déformation professionnelle dit-elle.

Toutes les entreprises analysent nos données, cela s’est même très bien vu avec le scandale Facebook Cambridge Analytica. Elles analysent nos données pour positionner des publicités mais aussi pour comprendre nos comportements (temps passé, nombre de clics, comportements d’achat, etc.). Toutes ces données vont aider les entreprises à mieux concevoir mais aussi à nous faire revenir encore et encore.

En plus des données comportementales, d’autres moyens sont mis en place par les concepteurs pour nous rendre toujours plus fidèle. Sabine a étudié ces moyens et a décidé de nous les partager. En voici quelques exemples :

En mettant en place une stratégie itérative. En ajoutant des fonctionnalités en itération, le produit évolue constamment. L’utilisateur va revenir sur le produit pour utiliser et tester les nouveautés. Par exemple l’application Instagram a évolué constamment depuis sa sortie. Les concepteurs ont ajouté de nouvelles fonctionnalités progressivement et aujourd’hui encore l’application continue d’évoluer ! On est passé d’une application permettant de partager des photos à envoyer des messages, lancer des appels vidéos, etc. Toutes ces fonctionnalités s’éloignent du concept de base mais suivent une ligne directrice : le partage de contenus. Selon vous, quelle est la prochaine fonctionnalité sur Instagram ? ;-)

En évoluant l’interface graphique. Toutes les applications des géants du Web ont au moins réalisé une refonte graphique de leur application. Ces refontes ont permis de repositionner stratégiquement les éléments selon les usages et les comportements des utilisateurs, de simplifier la lecture des informations et créer une émotion forte. L’utilisateur revient sur l’application car il s’y sent bien.

En créant du contenu temporaire. Snapchat, Instagram et d’autres applications ont mis en place le système de stories. Ce contenu temporaire pousse l’utilisateur à revenir sur l’application pour découvrir de nouveaux contenus. Les contenus temporaires vont également créer de l’anxiété à certains utilisateurs de peur de louper du contenu.

En jouant sur les statuts. Nous connaissons tous les statuts de délivrances des messages (message envoyé, message reçu, message lu, etc.) mais ce que nous ne savons pas exactement, ce sont les raisons pour lesquels ils ont été mis en place. Les statuts sont généralement là pour nous rassurer (message délivré par exemple) et donner de l’information précise mais, ils peuvent également dériver notre comportement et nos émotions.
Le statut « en train d’écrire » par exemple, nous entraîne à attendre la réponse sans quitter l’application.
Le statut « délivré » nous rassure sur la délivrance du message mais peut nous mettre dans un état stressant si l’utilisateur ne nous répond pas. Nous pouvons être angoissé de ne pas avoir de réponse immédiate.
Alors, ces statuts sont plutôt rassurants ou perturbants pour vous ?

Il existe encore d’autres exemples qui illustrent comment les concepteurs nous font revenir sur leur produit mais ceux exposés par Sabine nous ont déjà permis de bien comprendre comment nous sommes accros à nos applications. Allez, avouons le que nous regardons tous des stories plusieurs fois par jour ;-).

Sabine nous a également présenté quelques chiffres frappants sur les usages actuels.

• Notre capacité de concentration est de seulement 8 secondes en 2018 vs. 12 secondes en 2000. 2000 étant l’avènement du numérique. Et pour comparer, un poisson rouge a une capacité de concentration de 9 secondes.
• Nous regardons en moyenne notre téléphone 26 fois par jour, sachant qu’il faut 20 minutes pour se concentrer.
• Nous regardons plusieurs fois par jour notre téléphone pour vérifier des statuts (commandes, messages, etc.) même si nous n’avons pas reçu de notifications. Cela devient un automatisme.

Sabine a très bien terminé la conférence en nous demandant si nous subissons les usages ou s’ils ont été prévus pour nous rendre accro ?

Suivre Sabine Condiescu sur Twitter

UX du futur : au delà des buzzwords
Amélie Boucher (UX Designer chez L’UX sur le gâteau)

Lors de cette conférence, Amélie Boucher, UX Designer Senior très reconnue dans le monde du digital, nous a transmis un retour d’expériences sur 3 cas d’usages stratégiques et tendances : les enceintes connectées, les chatbots et le machine learning.

Pour nous, designers et technophiles, les enceintes connectées peuvent paraître comme un objet courant sans enthousiasme particulier mais, en réalité, elles sont fortement appréciées par beaucoup d’utilisateurs.

Même si les enceintes sont limitées aujourd’hui, beaucoup de particuliers les trouvent très « cool » et « fun » . Ce phénomène est assez inédit puisqu’en général lorsqu’un produit est restreint, le succès en est limité.

Amélie nous a fait part des limites de l’enceinte connectée :

• Temps passé important : les possibilités de réponses étant encore limitées et parfois les réponses peu complètes, l’utilisateur risque d’échanger avec l’enceinte pendant un petit moment.
• Absence de repère visuel : contrairement à une interface graphique, aucun repère visuel n’est présent pour accompagner l’utilisateur dans son parcours.
  Par exemple, lorsqu’un utilisateur demande à l’enceinte d’allumer une ampoule connectée, il ne pourra pas visualiser le choix des couleurs, il ne visualisera pas non plus l’état des autres ampoules de son logement.
• Accès au contenu difficile : l’utilisateur aura besoin de son imagination pour interpréter les réponses de l’enceinte connectée. Si l’utilisateur demande la biographie de Queen par exemple, il sera dépendant de la réponse retournée par l’enceinte. Il ne pourra pas parcourir le contenu qu’il souhaite.
• Besoin de capacité mémorielle : en plus d’une imagination, l’utilisateur aura besoin d’une bonne mémoire pour mémoriser toutes les informations retournées par l’enceinte. Par exemple, si l’utilisateur demande de comparer des billets d’avion, il devra utiliser sa mémoire pour retenir tous les prix selon les dates, les compagnies, les aéroports autour de vous, etc.

En résumé, l’enceinte permet de demander des informations sans aucun effort physique et nous pouvons interagir avec elle quelle que soit notre position. Elle défie l’espace et nous donne donc l’impression de gagner de la place dans notre environnement.

Comme l’a très bien dit Amélie, les requêtes envoyées aux enceintes sont simples mais les réponses sont trop compliquées aujourd’hui.

En analysant la concurrence des chatbots, Amélie s’est rendu compte que beaucoup de chatbots n’étaient pas encore à la pointe. Pour la seconde partie, Amélie a décidé de nous illustrer ces mauvais exemples et nous donner des tips pour bien concevoir un chatbot. Nous vous avons listé ces quelques tips :

• Se présenter comme un bot. Ne pas tromper l’utilisateur et éviter toute ambiguïté avec son interlocuteur.
• Apporter des réponses simples lors des échanges avec l’utilisateur.
• Utiliser des codes de chat naturel : indicateur de saisie en cours, indicateur de message délivrée.
• Créer une personnalité au chatbot. Ajouter de l’humain et une personnalité à votre chatbot. Petite précision, un chatbot peut avoir une personnalité neutre 😉
• Anticiper l’échec et offrir des moyens de sortie pour l’utilisateur. Rien n’est plus agaçant de ne pas être compris et tourner en rond. Il est indispensable de prévoir une redirection vers un humain par exemple.

Par manque de temps, Amélie est allée extrêmement vite sur le dernier thème des IA.

Amélie nous a démontré qu’elles étaient d’une grande efficacité et pouvaient être d’une grande utilité. Par exemple sur Gmail, nous connaissons tous les suggestions de réponses à nos emails. Le pouvoir suggestif de Gmail est monumental mais à la fois angoissant. Ces suggestions sont pertinentes, bien intégrées à l’écosystème et vont fortement attirer les utilisateurs à les utiliser, notamment des utilisateurs qui n’avaient pas prévu de répondre à la base. Les réponses ne proviennent plus d’une envie personnelle mais d’une suggestion d’une machine.

Toutes ces intelligences sont très efficaces et pertinentes, mais ne perdons-nous pas l’aspect humain ? Les échanges sont-ils en train de s’uniformiser ? Un appauvrissement des échanges est en train de se créer ? Toutes ces questions nous ont fait cogiter le cerveau.

Suivre Amélie Boucher sur Twitter

Atomic Design
Dylan Cozian (Designer d’Interface Freelance)

Avant de démarrer l’atelier, Dylan Cozian, Designer d’Interface, nous a rappelé la distinction entre l’atomic Design et le design System. L’atomic design est plus communément un référentiel UI et le Design System rassemble les composants UI et UX.

L’Atomic Design est avant tout un concept, une autre façon de gérer les interfaces et les composants graphiques.

Dylan n’a pas hésité à faire le rapprochement avec la conception orientée objet en développement informatique. Le principe est sensiblement le même et consiste à décomposer les pages en composants graphiques. Le Designer ne devrait plus designer en page mais plutôt en composants.

En effet, les tailles des écrans varient de plus en plus, nous devons trouver des accélérateurs de production sans devoir designer chaque type d’écran. En adoptant une démarche « Atomic », vous produisez des composants uniques que vous allez pouvoir réutiliser quelle que soit la taille de l’écran cible dans un temps optimisé.

Dylan a donc décomposé les composants de l’Atomic Design de cette façon :

Atome (Picto, typo) -> Molécule (Regroupement d’atomes) -> Organisme (Morceaux de page) -> Template (Sans contenu) -> Page (avec contenu).

Composants de l’Atomic Design. Source : Atomic Design by Brad Frost

Et pour mieux comprendre ces notions, la suite de l’après-midi était consacré à un atelier pratique.

Chaque participant devait choisir une page Internet et la décomposer en atomes, molécules, organismes et pages à l’aide de Post-it.

Cet atelier est très approprié pour comprendre les principes de l’atomic design.

Grâce à cet exercice, les participants ont pu réellement constater les bénéfices et forces de l’Atomic Design :

• Unicité : un seul composant suffit pour plusieurs interfaces et devices.
• Modularité : les composants s’adaptent selon l’environnement.
• Evolution : les composants peuvent facilement évoluer.
• Héritage : toutes les instances héritent des caractéristiques du composant maître.
• Maintenance : les composants sont facilement maintenables grâce à l’héritage.

L’atelier s’est terminé par une démonstration de l’Atomic Design sur Sketch avec l’utilisation des symboles.

Tout comme Dylan, nous sommes convaincus de la force de l’Atomic Design dans un monde digital en mutation constante.

À utiliser sans modération donc 😉

PS : Basti UI a réalisé une vidéo sur l’Atomic Design, n’hésitez pas à la consulter si vous souhaitez en savoir plus.

Suivre Dylan Cozian sur Twitter

Bien choisir son outil de prototypage
Thibault Cabanas (UX/UI Designer chez Sloclap)

Dans une démarche UX, il est naturel de tester des hypothèses mais comment ? Avec quel(s) outil(s) ? Beaucoup d’entre nous utilisent InVision depuis longtemps mais, est-ce le plus adapté ?

Cette conférence présentée par Thibault Cabanas, UX/UI Designer, avait pour but de mettre de l’ordre dans une offre pléthorique d’outils de prototypages.

Avant de parler d’outils, Thibault nous a rappelé l’intérêt de la phase de prototypage : tester des hypothèses. En UX, on émet souvent des hypothèses de conception, qu’elles soient purement ergonomiques (la position d’un bouton de validation par exemple) ou conceptuelles (le parcours de souscription à une banque en ligne par exemple). L’outil va donc nous aider à mettre en forme nos hypothèses et les tester auprès des utilisateurs.

L’avantage ultime des prototypes c’est qu’on peut se planter sans risque ! Eh oui, si les tests utilisateurs ne sont pas concluants, nous pouvons facilement modifier le prototype. Contrairement à une application développée, le prototype peut s’ajuster facilement.

Selon le niveau de détails que vous souhaitez donner à votre prototype, le temps nécessaire de préparation sera croissant.

Thibault a très bien résumé cette représentation :

Le temps n’est pas la seule variable qui rentre dans l’équation du choix de votre outil. Les variables ci-dessous sont également importantes à prendre en compte pour choisir votre outil :

• L’avancée du projet : si vous êtes au tout début du projet, un outil très basique fera l’affaire. Même des feuilles A4 peuvent suffir ;-)
• Vos hypothèses : souhaitez-vous tester le parcours global ou le comportement des utilisateurs ? Souhaitez-vous tester une nouvelle interface ? Une nouvelle charte graphique ? Selon vos hypothèses à tester, certains outils vous faciliteront la tâche.
• Le type du prototype : animations, comportemental, prototype cliquable, etc.

Une fois vos variables définies, il va falloir faire un choix dans l’outil final. De nouveau, Thibault a très bien rangé les outils par type et on peut constater que le nombre d’outils est important :

Pour vous donner quelques noms d’outils, nous pouvons citer :

• Concept énoncé : votre main, un crayon et une feuille blanche
• Maquette noir & blanc : feuille blanche, Balsamiq
• Prototype cliquable : InVision, Marvel, Sketch, etc.
• Animations : Flinto, InVision Studio, Principle, etc.
• Comportements : Axure (oui oui il existe encore !), Framer.

Cette conférence nous a prouvé qu’il n’y avait pas d’outil tout-en-un pouvant faire du test cliquable, de l’animation et du test de variabilisé. Selon notre besoin, un ou plusieurs outils seront nécessaires pour prototyper. Eh oui encore des licences… ;-)

Suivre Thibault Cabanas sur Twitter

Texte par Rémi KACZMAREK — UX Designer chez Atecna

Vidéo par Bastien Marécaux — Lead UI Designer chez Atecna

Merci à tous d’avoir lu cette article 🙂