Cette année encore nous nous sommes rendus au Beffroi de Montrouge pour assis­ter à deux jour­nées de confé­rences à Paris Web.Lors de cette édition, nous avons abordé des sujets très divers, voici les prin­ci­pales théma­tiques abor­dées.

Data, Big data, méga cata

Qui dit big data dit GAFA : comment ne pas abor­der le sujet sans parler des ces multi­na­tio­nales du Web qui cumulent, exploitent et revendent nos données ?Car il convient d’être lucide sur la ques­tion, aujourd’­hui, les GAFA nous connaissent mieux que nos propres parents, entre les données que nous publions, les données publiées par notre entou­rage et le recou­pe­ment de ces données. Le tracking permet égale­ment aux GAFA de cumu­ler de la donnée sur nous : quand on visite un site on envoie des requêtes qui sont iden­ti­fiées et enre­gis­trées.Autre acteur de la big data :  data broa­kers, ces grandes entre­prises (Acxiom en premier lieu) dont le modèle écono­mique repose sur l’ac­qui­si­tion et la revente des données, ils ne sont ni plus ni moins que des cour­tiers en data.

A quoi servent ces data cumu­lées sur nous ?

  • On peut les explo­rer, pour étudier les compor­te­ments.
  • On peut les exploi­ter, comme dans le cas de l’ap­pli­ca­tion “Knockin” : une appli recen­sant par le croi­se­ment de data les adresses de personnes ayant liké la page de Nico­las Sarkozy ou retweeté une de ses publi­ca­tions, afin d’op­ti­mi­ser le porte à porte.
  • On peut aussi les exploi­ter contre la gratuité d’un service, c’est le modèle des GAFA.

Comment nous, profes­sion­nels du Web, devons-nous agir ?

La règle numéro est de consi­dé­rer que chaque donnée cumu­lée est une donnée sensible, quelle qu’elle soit. Une infor­ma­tion être anodine pour les uns et sensible pour les autres, elle peut égale­ment deve­nir sensible si un chan­ge­ment de contexte inter­vient.Il est alors impé­ra­tif d’of­frir à l’uti­li­sa­teur la possi­bi­lité de modi­fier et effa­cer les données qui le concernent.On peut aussi envi­sa­ger une déra­ti­sa­tion des sites sur lesquels nous travaillons : suppres­sion des trackeurs, suppres­sion de la fonc­tion de partage sur les réseaux sociaux, évic­tion des services propo­sés par les GAFA (analy­tics, fonts, maps, CDN…)Enfin, on peut adop­ter la stra­té­gie “privacy by design” :

  • Par défaut, l’ap­pli­ca­tion respecte la vie privée, c’est l’user qui modi­fie la priva­ti­sa­tion de telle ou telle donnée
  • Usage du chif­fre­ment (https)
  • Inter­na­li­sa­tion des fonc­tion­na­li­tés : pas de disqus par exemple
  • Penser a la valeur ajou­tée des features
  • Ne pas bloquer tor
  • Struc­tu­rer le stockage des données pour ne pas avoir les données sensibles liées a l’iden­tité, au cas ou la base de données soit compro­mise
  • Ne pas recueillir de données non néces­saires au fonc­tion­ne­ment du service
  • Faire atten­tion au stockage des mots de passe
  • Ne pas recueillir de données sans en infor­mer l’uti­li­sa­teur
  • Ne pas revendre les données

L’UX au coeur des réflexions

Cette année de nombreuses confé­rences UX étaient au programme, soule­vant des ques­tions qui nous ont parti­cu­liè­re­ment inté­res­sées.

Les tests utili­sa­teurs : pourquoi, comment ?

Les tests utili­sa­teurs ont pour objec­tif d’éva­luer l’uti­li­sa­bi­lité d’une inter­face avec des vraies personnes. En géné­ral, ces tests sont réali­sés dans des labos : on met les sujets en face du logi­ciel et on les observe, on prend des notes. Il est forte­ment recom­mandé de filmer les tests utili­sa­teurs, car la vidéo est un outil de commu­ni­ca­tion puis­sant qui génère de l’em­pa­thie entre l’équipe qui déve­loppe un outil et un utili­sa­teur : l’uti­li­sa­teur n’est plus une personna, mais une vraie personne.  Les tests sur mobile soulèvent des ques­tions supplé­men­taires :

  • Quel télé­phone possède mon utili­sa­teur ?Un télé­phone clas­sique, un smart­phone ou un touch phone ? La qualité d’uti­li­sa­tion du télé­phone lui même a un impact sur le test. On recom­mande de tester avec les télé­phones person­nels des sujets, si toute­fois on préfère leur prêter des télé­phones, il est indis­pen­sable que les utili­sa­teurs puissent s’ap­pro­prier le télé­phone et apprendre à s’en servir, sinon on risque de faus­ser le test.
  • Dans quel contexte l’user utilise l’ap­pli­ca­tion ?En plus du test lab, il est recom­mandé de tester l’ap­pli­ca­tion dans le lieu d’usage, cela peut révé­ler des problèmes qu’on ne trouve pas dans le lab.
  • De quelle connexion dispose l’uti­li­sa­teur ?Globa­le­ment, les appli­ca­tions qui requièrent une connexion wifi pour effec­tuer une action ne sont pas forcé­ment très perti­nentes, dans la mesure où la 4G offre souvent une meilleure connexion que le wifi. Il faut malgré tout anti­ci­per une connexion avec seule­ment du edge, et éviter de tester l’uti­li­sa­bi­lité d’une app avec le wifi.
  • Quel est le setup idéal pour mener un test utili­sa­teur ?Il y a plusieurs équi­pe­ments qui permettent de filmer les tests utili­sa­teurs, mais ils sont souvent trop lourds, trop chers, ou mal adap­tés. La meilleure solu­tion reste le DIY : créer un système qui permette de filmer l’écran et les mains de l’uti­li­sa­teur et s’adap­tant à tous types de mobiles.

A vos tour­ne­vis !

Inté­grer une dose d’ethique dans la démarche UX

Aujourd’­hui, les sites Web sont soumis à de nombreuses lois, mais faut-il respec­ter ces lois à la lettre ou mettre l’uti­li­sa­teur au centre de la réflexion ?Un exemple simple : les CGV sont obli­ga­toire sur un site e-commerce, mais elles sont lues en moyenne 7 secondes par l’user, le temps pour lui de trou­ver la check­box à cocher et le bouton d’ac­cep­ta­tion.Les ateliers de co-concep­tion peuvent permettre à faire remon­ter des conflits entre les diffé­rents acteurs d’un projet : les dev, les clients et l’UX desi­gner.Le code de conduite de l’UXPA peut aussi appor­ter des éléments de réponse sur le sujet, avec les 7 objec­tifs listés ci-dessous :

  • Agir dans le meilleur inté­rêt de tous
  • Être honnête envers tous
  • Ne pas nuire, et si possible contri­buer aux béné­fices de tous
  • Agir avec inté­grité
  • Éviter les conflits d’in­té­rêt
  • Respec­ter la vie privée, la confi­den­tia­lité et l’ano­ny­mat
  • Commu­niquer tous les résul­tats

L’UX du futur : screen­less

Nous avions déjà appris lors des UX days que le futur des inter­faces était dans les messen­gers, équi­pés d’IA. Aujourd’­hui, la réflexion a été pous­sée plus loin dans le futur notam­ment du côté de l’ioT, avec la “screen­less expé­rience” : des objets qui inté­ra­gi­raient avec nous autre­ment que par l’in­ter­mé­diaire d’écrans, par exemple :

  • Par les gestes : une enceinte qui pour­rait augmen­ter de volume en mimant un bouton de volume, et des musiques diffu­sées selon nos gouts
  • Par du para­mé­trage : des lumières qui s’al­lu­me­raient en fonc­tion de la lumi­no­sité exté­rieure, bais­se­raient en inten­sité après le diner lorsque l’on regarde la télé­vi­sion
  • Par la voix, comme cela existe déjà, malgré la réti­cence de nombreux utili­sa­teurs à parler à des objets
  • En fonc­tion de notre posi­tion : un fauteuil qui diffu­se­rait tel ou tel type de musique en fonc­tion de l’in­cli­nai­son.
  • L’hu­main augmenté avec des puces implan­tées sous la peau

Sans écran, l’ex­pé­rience devient le produit. Le futur du design sera proba­ble­ment senso­riel, mais cela pose la ques­tion du libre arbitre, de la déter­mi­na­tion des actes ou des goûts de chacun par des algo­rithmes.Pour tout vous dire, on trouve ça glaçant !

Opti­mi­ser son tunnel de commande e-commerce

Nous avons vu quelques protips sur le tunnel de commande en e-commerce, des guide­lines simples à appliquer, qui vous permet­tront d’op­ti­mi­ser vos taux de conver­sion :

  • Si vous ne pouvez pas faire de https, écri­vez “paie­ment sécu­risé” sur la page, ça rassure
  • Mettez en place un numéro de télé­phone que l’user peut appe­ler dans le tunnel
  • Ne mettez pas de champ “code promo”, décep­tif pour l’user qui n’en a pas, et risque de quit­ter le tunnel pour aller en cher­cher un sur google, pour peut-être ne jamais reve­nir. Conten­tez vous d’une simple check­box “j’ai un code promo” qui fait appa­raître le champ
  • N’obli­gez pas vos users à créer un compte utili­sa­teur pour ache­ter
  • Mettez un message leur indiquant que leur commande a bien été prise en compte
  • AU lieu d’en­voyer des e-mails à vos clients pour leur vendre d’autres produits, envoyez leur des e-mails les infor­mant du statut de leur commande
  • Prenez soin de vos users pendant la commande, mais aussi après

Et la créa­ti­vité dans tout ça ?

Ques­tion­ne­ments sur l’in­ter­net prêt-à-porter

L’ex­cel­lente Amélie Boucher fait le constat qu’aujourd’­hui beau­coup de sites se ressemblent en termes de design et d’ex­pé­rience. Souvent le design passe comme un non sujet, avec le syndrome du « on ne va pas réin­ven­ter la roue ». Le plagiat ou l’uti­li­sa­tion de templates sont une solu­tion de faci­lité, cela s’ap­pa­rente plus à du bench­mar­king qu’à de la créa­tion. Alors comment propo­ser quelque chose de diffé­rent? Parfois on nous demande de créer quelque chose qui soit « comme » quelque chose de déjà exis­tant, cela a pour effet de produire des clones, et donc de nive­ler la créa­tion par le bas : on ne pense plus, on se contente de produire des clones.Parfois il arrive de prendre des idées sans s’en rendre compte, on fait des choses à la tinder, à la airbnb, et on reste sur la route tracée, on ne prend pas de risques ni de chemins de traverse. On assiste à une stan­dar­di­sa­tion des fiches produit par exemple. Ce que vous produi­sez doit dire qui vous êtes, en tant qu’in­di­vidu. Plus quali­ta­tif mais surtout plus vous. Le site de colette est un bon exemple, ils sont les seuls à pouvoir mettre de la musique sans être maudits. Il ne faut pas non plus être origi­nal pour faire origi­nal, il faut se poser de bonnes ques­tions, se lais­ser aller à comprendre le domaine, s’im­pré­gner véri­ta­ble­ment. Le rôle du desi­gner est d’être dans le détail et pas dans la faci­lité, il faut essayer de révé­ler ce qui sommeille.

Le site dayuse.fr est un bon exemple d’adap­ta­tion de la créa­tion au concept : les photos sont adap­tées (de jour) et on cherche a faire dire a l’user pourquoi il veut une chambre pour quelques heures en jour­née et les visuels s’adaptent (repos, loisirs, busi­ness).

« enga­geant et moderne » ne veut rien dire car ce n’est pas ancré dans la réalité.

Quel process employer pour pous­ser la créa­ti­vité sans regar­der ce qu’il se passe ailleurs ?

  • Il faut se mettre a la place de l’user, la carte d’em­pa­thie prépare a des solu­tions de design inat­ten­dues. Il faut partir de rien, d’une page blanche, ne pas se faire influen­cer par ce qui vient d’ailleurs.
  • Il faut éviter le bench­mark au début du projet car il condi­tionne.
  • A éviter égale­ment : le brains­tor­ming : on n’a jamais vu de grandes idées collec­tives naître, il faut réflé­chir seul et échan­ger ensuite, sinon on sort des brains­tor­mings avec des idées bateaux « faisons comme untel »
  • Il faut sortir de sa zone de confort. Souvent les bonnes idées ne viennent pas devant l’or­di­na­teur.
  • Il faut être habité par l’en­vie de bien faire.

Retour d’ex­pé­rience sur la refont graphique du bon coin

Le bon coin est proba­ble­ment le site le plus connu de france, une refonte graphique a eu lieu en 2015, non sans diffi­culté. Tout d’abord il faut comprendre que la philo­so­phie du bon coin est la suivante : l’UX d’abord, le graphisme ensuite. Histo­rique­ment, le jaune pâle en fond était présent parce qu’en 2006 les écrans faisaient mal aux yeux, et le fond blanc était très désa­gréable pour l’uti­li­sa­teur, le jaune a été choisi pour une ques­tion de confort. La diffi­culté était de faire une refonte graphique qui ne perturbe pas l’user, ils y sont donc allé à tâton, en déployant quelques parties du site à quelques utili­sa­teurs pour recueillir leurs remarques. Cette refonte a été très lente et très progres­sive, toujours en écou­tant l’avis des prin­ci­paux inté­res­sés : les utili­sa­teurs. Ainsi, ils ont posté des message sur twit­ter invi­tant les utili­sa­teurs à se connec­ter à tel ou tel moment pour décou­vrir la nouvelle version du site et leur donner leur ressenti. Une démarche payante puisque le site a plutôt recueilli une progres­sion de trafic, ce qui est très rare sur le court terme dans le cadre d’une refonte graphique.

Un peu de tech­nique, juste un peu

Lancer son site inter­na­tio­nal : facile ! A condi­tion d’avoir pensé à tout

Il arrive régu­liè­re­ment que l’on veuille faire évoluer son site pour le rendre à l’in­ter­na­tio­nale. Seule­ment pour cela, encore eut-il fallu y penser dès le départ. Voici la liste de ce à quoi il faut penser si un jour, on compte passer son site à l’in­ter­na­tio­nal :

  • Langues
  • Devises
  • Taxes
  • Frais de douane
  • Dates (gestion des time­zone)
  • Gestion des erreurs sur les formu­laires (nom/prénom, contrôle email et télé­phone, ajout de champ comme par exemple l’État pour les USA)
  • Sécu­rité : les capt­cha pas utili­sable sur le terri­toire chinois par exemple
  • Il faut tester des adresses de vrais users locaux
  • Le design aussi doit chan­ger comme par ex pour les langues qui se lisent de droite a gauche ou tout est inversé
  • Choi­sir une typo qui fonc­tionne sur tous les alpha­bets
  • SEO : google n’est pas le moteur de recherche numéro 1 partout dans le monde
  • Partage sur les réseaux sociaux qui ne sont pas les mêmes dans tous les pays, et n’ont pas néces­sai­re­ment le même fonc­tion­ne­ment
  • Utili­ser des CDN
  • Les services externes ne sont pas forcé­ment les mêmes, par ex google maps marche mal en corée du sud

Éco-concep­tion : les sites Web au regime

L’éco-concep­tion, c’est la rencontre entre déve­lop­pe­ment durable et concep­tion de site Web. Il y a aujourd’­hui 70 fois plus d’in­ter­nautes qu’il y a 20 ans, et les pages Web sont de plus en plus lourdes, donc de plus en plus polluantes : en 20 ans le poids des pages web a été multi­plié par 115, et ces 5 dernières années, elles ont été multi­pliées par 3. Le Web a une empreinte envi­ron­ne­men­tale très impor­tante, c’est véri­ta­ble­ment un 6eme conti­nent. Les objec­tifs de l’éco concep­tion sont les suivants :

  • Réduire l’em­preinte envi­ron­ne­men­tale
  • Réduire les coûts
  • Amélio­rer l’ex­pé­rience utili­sa­teur

On analyse la promesse fonda­men­tale du site Web, on eb fait le moins possible pour se concen­trer sur les fonc­tion­na­li­tés essen­tielles, utilise à l’uti­li­sa­teur. L’enjeu est avant les lignes de code et après les lignes de code, il a un impact sur l’al­lon­ge­ment de la durée de vie des termi­naux et la réduc­tion du nombre de serveurs. Le gras numé­rique est avant tout du gras fonc­tion­nel et graphique. Plus les sites sont épurés plus on réduit l’im­pact envi­ron­ne­men­tal et plus l’ac­ces­si­bi­lité est possible. Atten­tion a la surqua­lité les features pas néces­saires et les gadgets. Voici quelques bonnes pratiques clé :

  • Élimi­ner les fonc­tion­na­li­tés non essen­tielles
  • Quan­ti­fier le besoin : ai-je besoin de mettre 75 articles sur une page ?
  • Approche mobile first pour être plus simple et plus léger
  • Compres­ser les fichiers avant de passer en prod

Les progres­sive webapps

Souvent, sur mobile, la ques­tion est de choi­sir entre une webapp ou une app native. Une appli native coûte en moyenne deux fois plus chère qu’une webapp, et même une appli hybride (déve­lop­pée sur tita­nium ou react native) reste plus chère qu’une webapp. Sur une utili­sa­tion ponc­tuelle ou éphé­mère, l’user ne veut pas instal­ler une appli, comme par exemple doodle, et 25 % des app sont suppri­mées par l’uti­li­sa­teur à l’is­sue de la première utili­sa­tion. Alors comment profi­ter des avan­tages des app natives et des webapp à la fois ?En créant une progres­sive webapp. Ce n’est pas une app à propre­ment parler, mais une app survi­ta­mi­née.Quelques attri­buts attri­buts permettent de défi­nir une webapp :

  • Linkable : il n’est pas néces­saire de télé­char­ger quoi que ce soit pour l’uti­li­ser
  • Respon­sive
  • Safe : en https, ce qui n’existe pas dans une app
  • Fresh : toujours très à jour, sur tous les devices
  • Inte­rac­tive sur le même modèle qu’une app native, notam­ment avec des écrans de char­ge­ment pour faire patien­ter l’user
  • Décou­vrable
  • Instal­lable
  • Affi­chable hors ligne sur les pages déjà consul­tées

Pour le moment ce n’est pas à 100% équi­valent, mais dans les quelques mois / années à venir, cela semble être la solu­tion idéale pour pallier aux coûts des appli mobiles.

Pour conclure, nous avons passés 2 jours à apprendre, et échan­ger autour de nos métiers. Cette expé­rience qui nous permet une fois de plus de tour­ner notre métier vers l’ave­nir, d’in­ter­ro­ger notre respon­sa­bi­lité de profes­sion­nels du Web sur des ques­tions comme la vie privée, l’im­pact envi­ron­ne­men­tal, la collecte des datas, et le bien être de l’uti­li­sa­teur.Merci Paris Web, et à l’an­née prochaine.