Articles

[Success Story] BETCLIC : Adoption du design sprint

Le secteur des paris sportifs exige aux acteurs d’innover en permanence pour livrer la meilleure expérience possible aux utilisateurs, notamment sur mobile et sur des parcours clés.

C’est ainsi que Betclic, leader du secteur en France, a souhaité retravailler l’étape d’onboarding des nouveaux utilisateurs de son application mobile.

« Ce design sprint a été très positif : les participants sont unanimes, la méthodologie donne des résultats rapides et matche avec la culture de Betclic. L’équipe SQLI a su délivrer une vraie expertise, et les échanges à la fois aux niveaux professionnel et humain étaient de qualité. »

Pierre Jaubert, Responsable Produits, Betclic

Téléchargez la success story Betclic

LES TENDANCES UX A SURVEILLER EN 2021

Qui aurait pu prédire les changements majeurs de notre quotidien personnel et professionnel dus à la crise sanitaire ? Cette adaptation forcée a impacté notre consommation d’Internet et des outils en ligne qui font désormais partie durablement de notre vie. Les pro de l’UX considèrent ces nouvelles contraintes comme un levier et non un obstacle, afin de créer des expériences utiles et positives dans un monde où les contacts physiques deviennent limités.

Avant tout, jetons un œil aux chiffres incroyables du CES 2021 :

  • e-Commerce : augmentation des livraisons e-commerce (l’équivalent de 10 ans de livraison en 2 mois)
  • Télémédecine : augmentation des rendez-vous virtuels (10 fois plus en 2 semaines)
  • Vidéo streaming : bientôt 50 millions d’abonnés sur Netflix (l’équivalent de 7 ans d’abonnements en 5 mois)
  • Apprentissage à distance : augmentation des étudiants en ligne (250 millions en 2 semaines)

La croissance de certains secteurs est clairement boostée par la crise sanitaire. Cela montre à quel point les dispositifs digitaux nous permettent d’adapter rapidement nos habitudes face à une situation inattendue. Nous pouvons imaginer qu’en 2021 ces chiffres vont encore effectuer un bond en avant.

Alors au regard de ces bouleversements inattendus, quelles sont les tendances UX en 2021 portées par la pandémie ?

 

LE TRAVAIL A DISTANCE

Le monde était déjà en train de prendre la direction du télétravail : le virus a accéléré le mouvement d’une dizaine d’années en 6 mois. Afin de rester en contact avec nos collègues, fournisseurs et clients, nous avons dû adopter en peu de temps des outils, tels que la vidéoconférence ou les tableaux blancs virtuels.

VISIOCONFERENCE

La vidéoconférence est désormais un des piliers de notre activité professionnelle. Réunions, brainstorming, soutenances ou encore apéros virtuels… il est ainsi possible de communiquer via voix et vidéo au moyen d’un ordinateur, d’une tablette ou d’un smartphone. Skype en passe de disparaître, deux logiciels tiennent aujourd’hui le haut du pavé : Zoom et Microsoft Teams.

Les chiffres de Zoom sont impressionnants : 300 millions d’utilisateurs quotidiens, une croissance de presque 3 000% depuis début 2020. Malgré des déboires de sécurité désormais résolus, la plateforme a été rapidement adoptée – de par sa facilité d’utilisation et sa qualité audio vidéo – tant dans le cercle privé que professionnel.

Teams est passé en 2020 de 32 à 75 millions d’utilisateurs quotidiens. Très apprécié des entreprises, Teams dépasse largement le cadre d’une simple visioconférence : partage de fichiers, interfaçage facile avec Office 365, modules fonctionnels comme le suivi de projet ou l’affectation de tâches, … En outre, une nouvelle fonction d’intelligence artificielle baptisée Together permet d’afficher les participants dans un décor virtuel unique, donnant l’impressionnant que tout le monde est assis côte à côte dans la même salle. Une autre fonctionnalité notable est la traduction automatique multi-langue : un speaker s’exprime dans sa langue natale et ses contacts lisent la traduction en sous-titrage à la volée dans la langue de leur choix.

A noter deux autres logiciels de visioconférence performants avec lesquels il faut compter : Google Meet et Cisco Webex.

TABLEAUX BLANCS

Les applications de tableaux blancs en ligne (ou « whiteboards ») simulent un espace de travail virtuel de taille infinie sur lequel les participants peuvent partager du contenu, générer des idées, donner des avis, voter, planifier, co-construire… bref mener à distance un atelier de travail complet.

Les whiteboards disposent tous des mêmes caractéristiques de base :

  • Plusieurs modèles d’ateliers déjà à disposition (rétrospective, kanban, carte d’expérience utilisateur, etc.)
  • La possibilité de créer son propre canevas d’atelier à partir de la feuille blanche ou d’un modèle existant
  • Des fonctionnalités de co-création inspirées des bonnes pratiques du Design Thinking (idéation, vote, construction en commun, etc.)
  • Un fonctionnement multi-supports (site en responsive design et applications mobiles disponibles)
  • Des interactions avec d’autres applications (Google Drive, Adobe XD, Dropbox, etc.)

Trois grands leaders ont été clairement identifiés : Miro, MURAL et Klaxoon. Leurs approches et fonctionnalités sont sensiblement les mêmes, à l’exception de la Klaxoon Box, un boitier qui génère son propre réseau Wifi permettant d’utiliser Klaxoon partout. La concurrence les pousse à innover constamment au fil du temps. Fort heureusement, ces outils diffusent des informations régulières sous forme d’aides contextuelles ou de webinars (bonnes pratiques, retours d’expérience, etc.).

Tout cela demande naturellement du temps pour préparer le modèle utilisé (facilitateur) et pour appréhender l’outil (utilisateurs). Couplé à un outil de visioconférence – parfois intégré en natif – les whiteboards permettent de réaliser des ateliers de travail collaboratif complet et ludique en distanciel… à tel point que plusieurs facilitateurs et sprint masters ont décidé de conserver une utilisation partielle de l’outil dans leurs ateliers et design sprint en présentiel.

 

LES TECHNOLOGIES IMMERSIVES

La visioconférence s’est imposée d’elle-même… et certains utilisateurs veulent aller plus loin dans la dématérialisation via les technologies immersives – autrefois associées uniquement au divertissement. Même si la réalité virtuelle et la réalité augmentée existent depuis longtemps, elles peinaient à se développer dans le monde professionnel. La crise sanitaire pourrait bien changer la donne.

REALITE VIRTUELLE

Voici quelques initiatives pertinentes et récentes dans ce domaine :

  • Les conférences de la Game Developers Conference 2020 ont été réalisées en réalité virtuelle, tout comme les visites des stands et les salons de discussion.
  • Certains musées et théâtres, tels que le Louvre et le Tate Modern utilisent la réalité virtuelle pour rester ouverts et permettre des représentations.
  • Des solutions de dématérialisation d’agence fleurissent, comme l’impressionnant Spatial qui mélange intelligemment réalités virtuelles et augmentées.
  • Un des plus gros évènements de réalité virtuelle à venir en 2021 : l’ouverture de Facebook Horizon, permettant à des utilisateurs sous forme d’avatar de discuter, partager du contenu et de jouer dans un univers 3D immersif.

REALITE AUGMENTEE

La réalité augmentée n’est pas en reste. Moins immersive que la réalité virtuelle, elle permet de superposer des objets et autres formes virtuelles dans le monde réel, notamment à travers la caméra des smartphones et tablettes. Les initiatives d’essayage de produits à domicile (comme L’Oréal) pallient les difficultés récurrentes rencontrées en magasin, protocole sanitaire oblige. Le configurateur d’IKEA n’en finit pas de séduire les particuliers soucieux d’organiser au mieux leurs espaces intérieurs.

N’oublions pas Google ARCore et Adobe Aero, des kits de développement logiciel permettant de concevoir et visualiser des expériences de réalité augmentée sur mobile, que ce soit pour le jeu, la vente, l’apprentissage ou la création.

 

LA VISUALISATION DE DONNEES SCIENTIFIQUES

Le métier d’illustrateur médical est venu croiser la route des experts en design UX afin d’agrémenter les médias d’informations avec des courbes, cartes et autres visuels attractifs, clairs, ludiques et parfois interactifs. La situation ne cesse d’évoluer : propagation du virus, vaccination, variants… Les besoins en termes de visualisation « grand public » de données médicales seront encore une probable nécessité pendant des années.

 

LES INTERACTIONS SANS CONTACT

La pandémie nous oblige à être particulièrement attentifs au contact physique avec les interfaces partagées, comme les écrans tactiles pour le paiement individuel en supermarché ou encore les claviers des distributeurs automatiques. Les interactions sans contact ont pour le coup un avenir florissant devant elles.

VOICE USER INTERFACE

Les interfaces vocales (ou VUI) est une tendance encore sous-exploitée en France. Avec la popularisation d’assistants vocaux comme Google Home ou Amazon Alexa, le rôle de la voix dans les interactions avec les univers numériques croit de plus en plus. Les VUI sont devenues une des tendances les plus marquées en 2020. Aujourd’hui, plus de 25% des utilisateurs d’Internet dans le monde utilisent la recherche vocale sur leur mobile.

CONTRÔLE GESTUEL AERIEN

Il s’agit d’une technique captant les mouvements des utilisateurs pour interagir avec le système cible, sans contact physique. La plupart des interfaces tactiles peut être aisément remplacée par un contrôle gestuel aérien. Les usages notables les plus récents ont été relevés chez DS automobiles, en remplacement / complément des volants, leviers et tableaux de bord traditionnels. Il est également possible de commander la télévision avec les gestes de la main, ou encore de suivre une recette de cuisine via un livre dématérialisé en réalité augmentée, par exemple.

 

SIMPLIFICATION DES ACCES

Les phases les plus périlleuses pour les utilisateurs d’applications débutants sont souvent l’inscription, puis les premiers pas. Une expérience utilisateur optimale cherche à effacer les points de friction / frustration, notamment sur ces étapes (appelées également « onboarding »). Au regard de l’usage massif d’outils en ligne pendant les périodes de confinement, une attention toute particulière est désormais portée à l’accès aux applications.

On relève quatre facteurs clés de succès :

  • Un accès rapide à l’application, si possible sans inscription (bon exemple : les paniers de sites BtoC que l’on peut remplir sans avoir à s’authentifier au préalable)
  • Une inscription simple (via Facebook / Google connect, ou peu de champs à remplir dans un premier temps)
  • Un accompagnement à l’utilisation léger et efficace (bon exemple : Miro et ses « conseils « nouveautés » finement distillés)
  • Et bien sûr, une interface instinctive, élégante et rassurante

2021 promet d’être une année riche en expériences immersives et e-produits de qualité. Attendons-nous à un usage croissant de la vidéoconférence et de la dématérialisation des process. Les évènements et salons en ligne rivaliseront de créativité pour attirer des visiteurs, à grand renfort de 3D et de réalité virtuelle. L’adaptation de notre quotidien personnel et professionnel face à la pandémie risque de se poursuivre en 2021, et nous pouvons fort heureusement compter sur de belles initiatives innovantes portées par Internet pour nous accompagner.

Le design éthique, pour un design respectueux de l’Homme et de la nature

Les questions environnementales sont largement débattues dans la sphère publique et sont devenues de forts enjeux politiques et économiques. Les citoyens, en particulier les plus jeunes d’entre nous, sont également plus soucieux des conditions de production et du caractère équitable des transactions. Dans le monde du digital, les marques doivent s’y adapter. Le design éthique vient alors comme une évidence.

L’éclosion de logos verts ne suffit plus à convaincre le consommateur. Le virage vert ou plutôt durable, englobant les problématiques environnementales et sociales, s’est invité dans de nombreux pans de l’économie (énergie, transport, mode et habillement, agro-alimentaire).

Comment les professionnels du digital peuvent-ils accompagner les marques vers une conception de sites et d’applications qui soit plus éthique et ainsi les aider à répondre à cette demande grandissante de la part des consommateurs ?

Si la finalité éthique des projets ou l’inclusive design en font partie, il est aussi et surtout possible d’engager une approche éthique par et dans sa pratique, à la fois plus respectueuse de l’Homme et de son environnement. Les 3 orientations suivantes pourront guider alors cette pratique : la transparence, le design attentionnel, le design durable.

 

La transparence

Dans le design éthique, les messages à destination de l’utilisateur ne doivent souffrir d’aucune ambiguïté dans les motivations sous-jacentes ou la véracité des informations. Les objets de l’interface (bouton d’action, étapier) et leur dénomination sont là pour aider l’utilisateur à faire son choix et à anticiper le résultat de ses actions.

Parmi les dérives, le greenwashing est à la mode. Certaines firmes se refont une virginité à coup de pantone vert et de mise en perspective flatteuse de leurs dernières actions en matière de développement durable ou de commerce éthique, parfois factuellement anecdotiques. Si des actions d’envergure ont effectivement été engagées, les communications seront d’autant plus percutantes et convaincantes qu’elles seront agrémentées des sources qui permettront à l’utilisateur de vérifier par lui-même les garanties données. Dans le secteur de l’habillement (une des industries les plus polluantes et les moins regardantes en matière de conditions de travail), même les grandes firmes de la « fast-fashion » développent des collections écoresponsables et affichent un code de conduite dans le choix et l’audit de leurs sous-traitants, mis en exergue dans leurs sites web. Pour mesurer le chemin parcouru, citons l’application « Good on You » qui attribue un score à ces marques en fonction du respect de 3 critères que sont : les conditions de travail, le respect de l’environnement et enfin le bien-être animal.

Même si les cases à cocher sélectionnées par défaut et au détriment du porte-monnaie ont été combattues par la législation, nous ne sommes pas non plus à l’abri des « dark patterns »[1]. Certains concepteurs maîtrisent les lois de la perception pour les détourner vers leurs sombres designs/desseins. Quiconque a déjà ferraillé pour fermer un pop-up promotionnel, cherché désespéramment le numéro du service client ou été dissuadé par une police infra-lisible a bien été frappé par un dark pattern ! Tout l’inverse d’un design éthique et transparent.

 

Design attentionnel

Les ressources naturelles sont limitées, il en va de même de nos ressources attentionnelles.

Tout praticien UX a à cœur de minimiser la charge cognitive de l’utilisateur final pour lui faciliter littéralement la tâche. Avec le design attentionnel, il s’agit d’aller au-delà car notre utilisateur évolue dans un espace saturé en informations et où il est bombardé de notifications. On économisera son attention en lui offrant :

  • Le service opportun ;
  • La bonne information au bon endroit au bon moment, ou qui se déploiera progressivement et à son initiative ;
  • Une aide à la déconnexion ;
  • Les statuts « occupé » ou « incognito » sur les réseaux sociaux.

Des concepteurs ont par exemple fait le jeu des 7 fonctionnalités pour un Facebook plus éthique[2]. Parmi les idées proposées : des indicateurs de temps passé ; le regroupement, le filtrage ou la « mutification » temporaire des notifications ; l’intégration des niveaux de disponibilité au sein de la messagerie instantanée.

Enfin, le design graphique a bien entendu sa touche à apporter pour des interfaces (UI) plus sereines et visuellement apaisées lorsqu’il se revendique flat ou minimaliste.

L’esprit minimaliste possède, en outre, la vertu d’être soluble dans le design durable.

 

Design durable

Un design durable au sens environnemental du terme cherche à optimiser l’usage des ressources, notamment énergétiques. Un site bien référencé (plus besoin d’écumer les internets et faire chauffer les serveurs pour l’atteindre), avec une information bien architecturée donc facilement et rapidement accessible est un premier effort vers le design durable. Les professionnels de l’UX et UI sauront également alléger le poids des pages en n’apportant que les contenus nécessaires et en optimisant images et photos.

L’exercice du mobile-first peut, à ce titre, être repris au profit du design durable.

De même que les concepteurs sont en mesure de proposer un site dont les contenus s’adapteront aux différents terminaux utilisés à commencer par le mobile, ils peuvent décliner ces mêmes pages en fond clair et fond sombre (Dark Mode) et laisser à l’utilisateur le choix d’opter aisément pour l’un ou l’autre. Le Dark Mode (qui fait son retour en force parmi les dernières tendances du design) est à privilégier pour atténuer la fatigue oculaire lorsque la luminosité est basse et pour atténuer l’épuisement des batteries.

Ces bonnes pratiques de conception une fois respectées par les professionnels de l’UX et de UI, il reviendra aux équipes de développement de poursuivre la chaîne du design durable en produisant un code « propre », à rechargement rapide. Enfin, si le site est hébergé par une compagnie dont les serveurs carburent aux énergies vertes, voilà un pas de plus pour la planète.

[1] https://uxplanet.org/design-ethics-vs-dark-side-ux-15a703870ec6

[2] https ://uxstudioteam.com/ux-blog/ethical-design/

[REPLAY Webinar] Innover avec succès grâce au Remote Design Sprint

Le Design Sprint est de plus en plus plébiscité par les entreprises pour imaginer, prototyper et tester de nouveaux concepts de produits ou services en moins d’une semaine.

Vous êtes adepte de cette méthode mais il vous est impossible de réunir vos équipes ?

Vous souhaitez vous lancer dans l’organisation d’un Design Sprint mais vous n’avez ni le temps ni le budget pour réunir une équipe pluridisciplinaire dans une Sprint Room ?

La solution : le Remote Design Sprint.

Intervenants :

  • Paul Michel – Consultant business transformation et Design Sprint Expert
  • Stephen Demange – Directeur Conseil Experience Strategy et Design Sprint Expert
  • Quentin Briere Bordier – Product Strategist & Design Sprint Expert

 

télécharger le replay sur le Remote Design Sprint

[SUCCESS STORY] COFAQ : cadrage transformation omnicanal

Quelle méthodologie mettre en oeuvre pour poser les fondations d’une mutation vers le commerce omnicanal ? Comment définir le nouveau business model ? Comment aligner tous les acteurs en interne ?

Le groupe Cofaq, centrale d’achat de bricolage, amorce le virage du commerce omnicanal avec un cadrage stratégique réalisé par SQLI.

 

Cofaq premiere page

Leurs objectifs :

  • Une mutation vers l’omnicanal
  • Améliorer l’expérience globale pour l’utilisateur

Découvrez les méthodologies appliquées par la Direction Conseil SQLI et Cofaq pour mener à bien un cadrage stratégique et les résultats obtenus à l’issue de ce cadrage.

 

Télécharger la success story Cofaq

UI : pourquoi concevoir sans couleur ?

A l’heure du Dark Mode, les designers sont toujours plus tournés vers la conception d’interfaces qui priorisent le confort des utilisateurs et les enjeux d’accessibilité. Le choix des couleurs, faisant partie intégrante de tout design system, est crucial pour assurer une expérience utilisateur inclusive et efficace. Et si finalement nous ne conservions que le noir et le blanc ?

Dark mode et Dark UI

Déjà répandu chez les développeurs et proposé par un nombre croissant de services, le Dark Mode donne naissance à la « Dark UI ». Pour preuve, il est maintenant disponible sur iOS13 et Google propose déjà un thème « dark » de son design system Material. Au-delà des considérations purement esthétiques, deux avantages d’ordre pratique sont reconnus :

  • Les interfaces sombres sont plus reposantes pour la lecture sur écran ;
  • La charge mentale est moins élevée lorsque les écrans présentent un grand nombre de contenus par exemple.

Par ailleurs, l’utilisation de la couleur dans ces interfaces sombres permet de mettre plus facilement en avant des composants ou des messages importants. Dans ce court article, l’auteur présente notamment comment l’utilisation du dark mode leur permet de simplifier une interface tout préservant une hiérarchisation des informations facilement perceptible :

Ui 1

Heydon Pickering et la conception en noir et blanc

Heydon Pickering, designer reconnu dans le monde de l’accessibilité et plus largement de l’inclusion, va plus loin que le Dark Mode en utilisant uniquement le noir et le blanc dans ses designs. Il a notamment présenté son approche radicale lors de la conférence Why Every Interface Should Be Black And White. Il aborde différents sujets récurrents lorsqu’il s’agit de Dark UI tels que la gestion des contrastes et l’implémentation du mode nuit des interfaces, mais il présente également quelques avantages spécifiques dans l’utilisation du noir et blanc dans son processus de conception. 

Son approche permet notamment de développer la créativité. Pour découvrir le travail d’Heydon Pickering, je vous recommande ces deux ressources :  

Les contraintes promeuvent la créativité

Nous pouvons bien évidemment utiliser les couleurs à des fins décoratives. Mais comment dynamiser une page sans utiliser de couleur ? L’idée ici est de se challenger afin de trouver de nouveaux moyens, de nouveaux mécanismes, afin de dynamiser une mise en page sans avoir recours à la couleur. 

Dans un exemple, le designer présente des cartes aux formes différentes :

Ui 2

Exemple partagé par Heydon Pickering lors de sa conférence.

In fine, ce n’est pas qu’une contrainte

Les couleurs sont des moyens parfois efficaces pour faire passer des informations, mais s’avèrent quelques fois contre-productives car porteuses de biais cognitifs (les goûts et les couleurs!). A travers la conception en noir et blanc, l’occasion est donnée au concepteur de se libérer de ces contraintes et facilités afin d’explorer de nouvelles voies. 

Au-delà de l’affirmation « Toutes les interfaces devraient être en noir et blanc » (qui peut paraître au premier abord provocatrice), la démarche est avant tout pragmatique. Le designer doit trouver la meilleure manière de transmettre de l’information. Heydon Pickering a d’ailleurs plusieurs fois démontré, au cours de ses travaux, comment la recherche de nouveaux designs l’a amené à l’exploration de solutions techniques de mise en œuvre innovantes. Il partage sur ce sujet des trouvailles plus ludiques basées sur des jeux de formes et imprégnées d’expérimentations de technologies frontend (notamment svg, et css). 

Le designer peut ainsi faire le pont entre conception graphique et conception technique. Ainsi la démarche consistant à faire un premier jet de son interface en noir et blanc est parfois expérimentale mais elle reste toujours très réaliste techniquement.

 

Être indépendant de la couleur

Le concept d’un design qui fonctionne sans couleur est très important en accessibilité puisque certains utilisateurs ne peuvent tout simplement pas percevoir les couleursIl s’agit des non-voyants bien évidemment, mais pas uniquement. Des utilisateurs malvoyants, selon leur pathologie, vont percevoir uniquement le noir et blanc. Enfin, d’autres utilisateurs ne vont pas distinguer correctement les couleurs, ou ne vont avoir qu’un spectre limité (les daltoniens par exemple). 

Comme le dit Heydon Pickering : « Avec une approche en noir et blanc vous ne réfléchissez donc plus en termes de couleurs, mais plutôt en termes de signification. » 

Un exemple simple : comment transmettre une notion d’alerte sans avoir recours au rouge ? 

Ui 3

Vous allez peut-être ajouter une icône.

Ui 4

Maintenant, comment différencier des icônes qui transmettent des informations différentes ?

Ui 5

Vous allez utiliser des icônes de formes différentes. 

Ui 6

En noir et blanc, l’information est toujours perçue par les utilisateurs.

Ui 7

Cette démarche s’applique des concepts les plus simples (les icônes) aux plus complexes (la transmission des informations dans les histogrammes). Même sans être expert en accessibilité, en faisant abstraction de la couleur, vous allez résoudre des problématiques qui sont souvent des challenges pour des utilisateurs en situation de handicap. Car, comme évoqué précédemment, certains utilisateurs ne perçoivent pas les couleurs. Il est important que les informations soient comprises par tous. Si une information est transmise, elle doit être comprise, sans ambiguïté par n’importe quel utilisateur.

Animer, c’est donner vie

Acheter en ligne peut être une expérience extrêmement frustrante. Attendre le chargement en continu de pages, faire défiler de longues listes de produits, savoir ce qu’il y a dans son panier ou connaître l’état actuel de sa commande… c’est épuisant. En plus de cela, l’animation peut facilement ressembler à un dessin animé des années 1930. Mais en utilisant l’animation correctement, on peut atténuer cette frustration. En diminuant les distractionsnous facilitons la conversion et procurons une expérience plus agréable à l’utilisateur ; l’animation est en train de devenir la base de la conception d’une interaction efficace. 

Ux gif 1

UI de type dessin animé lors du processus de commande d’une pizza, par Cuberto 

Introduire du mouvement dans la conception d’une UI
 

La vie est un mouvement perpétuel. Nous marchons, courons ou pédalons, et ce qui nous entourent bougent (souvent) de façon prévisible. Rien d’étonnant, donc, à ce que nous soyons incapables d’imaginer notre quotidien sans mouvement. Notre œil capte les objets en mouvement, presque comme un réflexe. Nous pouvons mettre ce principe à profit en introduisant de l’animation dans une UI. 

En faisant cela, nous adoptons une approche de conception centrée sur l’humain. Après tout, elle engage directement l’utilisateur et l’aide à vivre les transitions et les interactions de façon plus naturelle et plus intuitive. Les meilleures animations de sites web ont à la fois un objectif et un style, et elles créent une impression et une perception proches de celles qu’éprouve une personne qui interagit avec un objet physique dans la vraie vie. Elles racontent des histoires simples, du style « Hé, regarde un peu ça ! » ou « Super, votre commande a été lancée ». Si elle est bien faite, une animation ne se contente pas de divertir l’utilisateur, mais aide aussi à comprendre ce qui se passe ou explique comment utiliser le site plus efficacement. 

Aujourd’hui, les interfaces ne sont plus des suites d’écrans statiques ; elles permettent de combler le fossé entre le logiciel et la nature humaine en ajoutant la dimension de temps. 

 

Utiliser l’animation pour visualiser les traitements 

Lorsqu’on interagit avec un produit (numérique), on veut savoir ce qui se passe à chaque étape. Si votre client est obligé d’attendre dans l’incertitude, vous risquez de le perdre. Souvent, il ne suffit pas de faire savoir à l’utilisateur que le processus est en cours de chargement ; par conséquent, mieux vaut éviter les indicateurs de chargement. Ils ne servent qu’à lui rappeler qu’il attend. Rendez l’attente plus agréable en utilisant le squelette en même temps qu’une animation subtile pour charger un contenu, afin de maintenir l’interaction avec le client. En tenant l’utilisateur au courant du niveau d’avancement, vous transformez une notification peu agréable en élément de divertissement. 

Ux gif 2

Fixer des attentes sur la rapidité de traitement de l’action 

 

Utiliser l’animation pour montrer que l’action est terminée 

Bien que certaines animations illustrent le processus, une animation peut également montrer sa finalisation. L’utilisateur doit comprendre rapidement et clairement que l’action est terminée et savoir que le système y a répondu. L’un des exemples les plus simples est le « bouton » : lorsqu’on appuie dessus – quelle que soit son aspect – on s’attend à ce qu’il se passe quelque chose. La convivialité de la conception du produit va réellement en pâtir si ce type de retour n’est pas prévu de façon visible. Harrods utilise l’animation pour illustrer le mouvement du produit jusqu’au panier une fois qu’on a appuyé sur le bouton « Add to shopping bag » (Ajouter au panier). L’icône du panier se transforme en une boîte sur laquelle apparaît le bouton « Checkout » permettant de valider la commande. Le titre du bouton devient « Added » (ajouté) avec une coche qui disparaît au bout de quelques secondes. Cela évite à l’utilisateur de se demander si l’article a été ajouté ou non et lui permet d’aller sur la page de validation de la commande sans visualiser d’abord le contenu de son panier.

 

Ux gif 3

Fournir un retour visuel sur une action 

 

Utiliser l’animation pour faciliter la compréhension 

Si l’on pense aux états d’erreur et aux écrans qui s’affichent en cas problème, il est important que ces derniers sautent aux yeux de l’utilisateur. Pour la saisie de données, on peut utiliser une animation montrant un mouvement horizontal indiquant que la saisie est refusée. Dans une UI, nous associons ce mouvement à un geste tel que secouer ou hocher la tête. L’utilisateur consacre moins d’énergie ou d’effort à comprendre comment fonctionne le site. 

Ux gif 4

Visualiser le résultat d’une action 

 

Utiliser l’animation pour améliorer une histoire 

De nombreux sites de-commerce affichent leurs produits sur un mur de produits. S’il n’y a pas de mise en lumière, l’utilisateur peut se sentir indécis et se perdre dans des détails. Simply Chocolate, boutique danoise qui vend des barres de chocolat, montre – sans le dire – les caractéristiques spécifiques du produit. La conception très dynamique du site donne à chaque produit suffisamment d’espace pour briller. Exactement comme dans la vie réelle, on peut enlever l’emballage de la barre en le faisant glisser, pour voir à quoi elle ressemble. Les ingrédients de la barre s’animent doucement en arrière-plan. Bien que l’effet soit on ne peut plus direct, l’expérience globale marche car seule une petite quantité d’informations s’affiche en arrière-plan pour chaque produit. 

Ux gif 5

Schéma d’organisation de Simply Chocolate 

 

Quelques réflexions pour conclure 

Comme pour tout ce qui figure dans l’interface, l’animation nécessite une approche réfléchie et un objectif clair. Si elle est bien faite, l’animation permet aux boutiques en ligne de procurer une expérience utilisateur agréable et sans frustration. Vous pouvez guider votre utilisateur tout au long des tâches, lui donner des repères visuels clairs et même lui permettre de s’amuser un peu. Les avantages apportés par l’animation doivent l’emporter sur les éventuels inconvénients : ce doit être la cerise sur le gâteau, pas l’ombre au tableau. 

Data-driven UX : la méthode en 3 phases pour mieux comprendre, mesurer et agir

Pour être optimale, l’amélioration des performances de tout site doit passer par une connaissance fine de ses utilisateurs. Impossible d’optimiser ses KPI sans identifier et comprendre le comportement de l’utilisateur : le remettre au cœur de sa démarche peut s’avérer riche en leçons. Pour cela, il convient d’adopter l’approche data-driven UX.

 

Tweet webagencyfail

Ce tweet du compte parodique @webAgencyFail traduit une réalité : nombre d’organisations adoptent une démarche instinctive sur les canaux digitaux.

 

Pragmatique car basée sur des données tangibles, l’approche data-driven UX présente l’avantage d’offrir une vue globale des parcours utilisateurs, en croisant les méthodes de recherche UX et data. La nécessité de ce rapprochement de ces deux méthodes tient d’un constat simple : se focaliser sur un seul aspect ne peut apporter qu’une réponse incomplète aux problématiques que vous rencontrez. Comment expliquer une baisse du taux de conversion ? Pourquoi les utilisateurs abandonnent leurs parcours sur une page précise ? le problème vient-il du trafic, du contenu, de l’ergonomie, du contexte actuel ?

Il est aujourd’hui possible (et facile) de mettre en place des solutions techniques et organisationnelles pour identifier et tester en temps réel ces axes d’amélioration avec l’appui des utilisateurs grâce à la méthode en 3 phases. Cette dernière s’applique de façon universelle quels que soit les secteurs d’activités ou les environnements techniques.

Méthode en 3 phases – Phase 1 : Mieux comprendre


“If you can’t measure it, you can’t improve it”
– Peter Drucker

 

[DATA] Il s’agit de faire l’audit technique des first party data (données patrimoniales) en :

  • Estimant la qualité et l’homogénéisation des données exploitées
  • Vérifiant le bon paramétrage de l’outil de mesure d’audience pour ne prendre en compte qu’une donnée qualifiée
  • Etablissant un plan d’action à court/moyen terme pour mettre en place des actions correctives si besoin

[UX/DATA] En parallèle, nous réalisons un audit des parcours utilisateurs et performances du site avec une analyse croisée des données UX ANALYTICS, issus de différents outils (Google Analytics, Hotjar…), et une étude experte.

Ce diagnostic peut être complété par différentes méthodes UX dites « qualitatives », comme des tests utilisateurs, pour creuser certains points.

Cette analyse permet d’obtenir une cartographie des comportements utilisateurs, d’identifier les différents axes d’amélioration et hypothèses de travail, de les prioriser et construire une roadmap d’optimisations sur le long terme.

 

Méthode en 3 phases – Phase 2 : Mieux mesurer

 

“Rely on facts, not feelings” Dicton populaire

 

[DATA] Lors de cette seconde phase, nous mettons à plat la stratégie de collecte, d’exploitation et de restitution de la donnée en :

  • Identifiant les besoins métiers et la faisabilité technique
  • Définissant les indicateurs clés à suivre et les moyens intermédiaires pour y parvenir
  • Mettant à plat le système de collecte de données par le biais d’un plan de taggage priorisé
  • Reprenant des processus et des solutions de gestion d’applications tierces (tag management system) afin d’appliquer un assainissement des données récoltées et exploitées
  • Affinant la lecture de données via un paramétrage des comptes de l’outil de mesure d’audience

[UX] Puis, nous mettons en place des outils et méthodes de mesure via :

  • Nouveau paramétrage des outils déjà mis en place dans la cadre de l’audit sur la base de la roadmap d’accompagnement (scroll heatmaps, souris et clics, complétion des formulaires, etc.)
  • Un baromètre de satisfaction utilisateurs via un questionnaire online
  • Un dashboard de suivi des performances

 

Méthode en 3 phases – Phase 3 : Mieux agir

 

“Every large system that works started as a small system that worked.” – Anonyme

 

Optimisation continu test learn

 

Cette troisième et dernière phase consiste en un cycle d’optimisation en continu de test and learn :

  • Mise en place d’optimisations issues de la roadmap ou lancement de tests AB
  • Analyse et suivi de la performance via le dashboard (phase 2)
  • Ajustement, hypothèse d’optimisation
  • Mise en place des optimisations par l’ensemble des équipes UX UI et DEV
  • Mesure
  • ….

Afin d’approfondir la recherche et l’analyse, on peut décider d’opter pour d’autres méthodes d’investigation tels que les tests utilisateurs et des interviews.

En ayant toutes les cartes en main, vous pouvez désormais sortir du schéma « Je n’ai pas besoin d’audit UX car j’ai déjà une analyse et des tableaux de bord, je connais les performances de mon site » et expliquer et améliorer durablement vos performances. Ready ? Set, go !

 

 

Charlotte Salvo, Lead UX Research et Anthony Calvel, Consultant Digital Analytics & Search Marketing

UX et RGPD : Comment proposer une expérience utilisateur de qualité et respecter la légalité ?

En matière de RGPD, 76% des Français se disent préoccupés par ce qui est fait de leurs données personnelles. Pourtant, plus d’un an après sa mise en place, le paradoxe est là : 1 Français sur 2 accepte les conditions d’utilisation de leurs données sans même les lire, selon un sondage d’Odoxa datant de 2019.  

 

Pourquoi un tel paradoxe ? 

Les Français sont-ils paresseux ? Difficile de les blâmer. Qui aurait sérieusement le temps de prendre les 86 minutes nécessaires pour lire intégralement les conditions d’Instagram ? Qui ne se sent pas frustré et agressé par toutes ces fenêtres qui s’ouvrent et bloquent l’accès aux contenus ?  

Les entreprises ne sont-elles pas assez sérieuses ? L’instauration dRGPD a donné rapidement naissance à des formulaires à l’ergonomie douteuse. Avant même de réussir à tomber sur les conditions d’utilisation de ses données, il faudrait déjà réussir à passer les multiples barrières qui viennent polluer leur accès, qui poussent l’utilisateur à « Tout accepter » par dépit 

 

Que faire alors pour nos utilisateurs ?  

Apporter toujours plus de transparence et déthique. Autrement dit, concevoir des produits digitaux qui informent clairement les utilisateurs de leurs choix sans tricherie aucune, tout en leur donnant un accès rapide et permanent pour qu’ils puissent les modifier.  

Tirées de l’article « What does GDPR mean for UX ? » de l’UX Designer Claire Barrett, les guidelines suivantes visent à synthétiser clairement les pratiques à suivre pour à la fois adhérer au RGPD et viser une bonne expérience utilisateur. 

 

  1. Garder le contrôle

L’utilisateur doit choisir s’il souhaite que ses données soient collectées et utilisées. Les contrôles doivent être « user-friendly » : clairs et faciles à comprendre. La base, en somme. 

  1. Respecter la granularité

Les utilisateurs doivent donner leur consentement sur chaque activité requérant le traitement ses donnéee. L’affichage des formulaires de consentement au moment de leur collecte permet de donner un contexte aux utilisateurs (par exemple au moment de la création de leur compte).  

  1. Pouvoir revenir en arrière

Les utilisateurs ont le droit de retirer leur consentement à tout moment. Les paramètres doivent ainsi être conçus pour qu’ils puissent facilement y accéder et les modifier. 

  1. Différencier les conditions

Les conditions générales sont bien à séparer des informations de collecte de données. Le design doit faire en sorte que cela soit bien clair pour l’utilisateur.  

  1. 5.Êtretransparent 

Expliquer à quelles fins la donnée est collectée, de façon courte et concise.   

  1. Expliquer les bénéfices

Lorsqu’on demande l’approbation de l’utilisateur, c’est encore mieux de lui expliquer en quoi son consentement va bénéficier à son expérience. 

 

Quelles pratiques mettre en œuvre ?  

Don’t : la bannière d’information 

Si elle respecte l’aspect légal, la bannière est facilement ignorée par les utilisateurs et elle dégrade leur expérience de navigation en cachant le contenu de la page.  

Dans cet exemple, le bouton « Accepter et fermer » pousse clairement l’utilisateur à opter pour ce choix tandis que le bouton « En savoir plus », permettant à l’utilisateur de refuser l’utilisation de ses données, est dans un “gris sur gris” peu incitateur. 

Banniere information doctissimo

Capture écran réalisé sur le site doctissimo.fr

 

Do : la fenêtre d’info et son FAB (Floating Button Action)

Un message clair (et drôle en plus <3) avec des boutons d’action faciles d’accès et compréhensibles pour l’utilisateur.

Cookie axeptio

Capture écran réalisé sur le site axeptio

 

Don’t : la pop-in

En sélectionnant les « options », l’utilisateur est souvent accueilli par une fenêtre peu engageante.

Une fois celle-ci refermée, elle ne peut être réouverte qu’après une exploration profonde des sous-pages des conditions du site.

Pop in doctissimo

Capture écran réalisée sur le site doctissimo.fr

 

Do : le centre de confidentialité

Accessible partout depuis le même endroit, le centre de confidentialité permet à l’utilisateur de facilement choisir les options qu’il souhaite activer ou non. *BONUS* Et en plus, on lui explique à quoi cela sert.

Cookie axeptio choix

Capture écran réalisée sur le site axeptio.eu

 

Respecter le RGPD pour la loi et pour construire des parcours utilisateurs respectueux, c’est possible !  La Cnil a d’ailleurs récemment renforcé sa base de connaissances sur le sujet avec une nouvelle plateforme : design.cnil.fr.

N’hésitez pas à puiser dans les ressources à disposition ou à échanger avec l’un de nos experts SQLI.

Design Sprint, le raccourci pour savoir ce que votre idée va donner !

Pour entamer cette rentrée 2019, rien de mieux que de se rafraichir les idées avec le retour d’expérience d’une méthode très inspirante le « Design Sprint », lors d’un petit-déjeuner organisé par l’agence toulousaine de SQLI en juillet dernier.

La quarantaine de participants présents a découvert la démarche, ses atouts, ses prérequis, ainsi que quelques-uns des usages les plus adaptés. Cette matinée riche en enseignements a été complétée par un retour d’expérience de la DSI du groupe COFAQ (centrale d’achat du bricolage pour les professionnels), pour qui nous venions de terminer un Design Sprint pour la définition d’une plateforme e-Commerce, la première du genre pour l’entreprise… un gros challenge !

 

Design sprint 1

 

La genèse du Design Sprint

Le Design Sprint puise son inspiration dans le « Design Thinking », et notamment dans son approche centrée humain afin d’adresser des problématiques complexes. Le Design Sprint ajoute une composante, le « time to market », en permettant de tester de nouvelles idées en une semaine et d’avoir les premiers retours immédiats des utilisateurs cibles. Le tout pour valider le concept (et investir sereinement) ou pivoter tant qu’il est encore temps. C’est une vraie démarche pour « dé-risquer » un projet d’innovation qui s’adresse à de nouveaux utilisateurs ou qui consiste à créer une nouvelle offre.

 

Design sprint 2

 

Le Design Sprint en détails

Les cinq étapes/journées de la démarche consistent à identifier la problématique, comprendre le contexte et définir le challenge en conséquence.

La première journée (lundi) est certainement la plus chargée de la semaine. Il conviendra de se concentrer sur l’essentiel – la première des clés de succès de cette démarche – et ne pas vouloir traiter tout l’ensemble d’une problématique. Elle permet également, au travers d’échanges entre les participants, d’aligner les décideurs et de partager une même vision.

On peut alors passer à la deuxième journée (mardi) qui, sur une première phase, permet d’inspirer les participants avec les tendances du marché, les dernières innovations technologiques du moment… – issue d’un travail préparatoire et nocturne produit par nos consultants, la deuxième clé de succès. Pour ensuite, en deuxième phase, laisser libre court à l’idéation et générer un maximum d’idées pour résoudre la problématique identifiée la veille.

Nous sommes déjà mercredi… Il faut maintenant décider du concept que l’on veut tester, en s’appuyant sur un vote participatif des solutions pour co-construire ensemble un scénario. Scénario qui alimentera la phase de « storyboard », via des scénettes représentant toutes les étapes du parcours utilisateurs et qui serviront de brouillon pour la phase du lendemain, à savoir le prototypage.

 

Design sprint 3

Cette phase prototypage (jeudi), est assurée par un expert UX/UI pour fabriquer un prototype d’haute-fidélité. Avec ce prototype, on aura un maximum de retours lors de la phase de test. Le secret pour cette étape clé – 3ème clé de succès –, c’est la préparation en amont avec un design system (charte graphique, framework de développement, bibliothèque d’images…) et surtout un UX designer expérimenté !

Nous voilà arrivés au dernier jour (vendredi) pour enfin découvrir le verdict des tests utilisateurs (5 testeurs minimum). Ces tests utilisateurs sont le véritable point culminant du process – 4ème clé de succès –, tout le reste du sprint consiste en la préparation de ce moment. Un moment qui commence par une série de tests durant la matinée, où l’on retrouve l’équipe derrière un écran qui visualise en temps réel la session de test et ainsi capturer le plus d’informations et d’émotions au regard de l’expérience qui est proposée dans le prototype. L’après-midi est consacrée à l’analyse des enseignements collectés et consolidés par toute l’équipe durant les sessions de tests afin de valider le concept ou le faire pivoter.

Et après le sprint ? Une bonne pratique, si le prototype a rencontré un certain succès, est de repartir pour une itération accélérée (prototypage + test) pour améliorer le concept et être proche d’un pilote à tester en condition réelle.

 

Pour conclure

Mon avis personnel est que le Design Sprint est une démarche qui délivre toute sa valeur dans le cadre de développement de produit, ou lorsqu’il s’agit de challenger un business model.  Il faut faire attention à ne pas en abuser, cela reste consommateur de temps et d’énergie – et c’est d’ailleurs la dernière clé de succès –. Il faut être capable de réunir une équipe créative et motivée (7 personnes maximum), et de dégager 5 jours consécutifs dans l’emploi du temps de tout le monde (et c’est non négociable).  Vous l’aurez compris il se positionne très en amont des projets d’implémentation, pour « dé-risquer » une idée et permettre aux décideurs métiers de prendre une décision en sachant ce que ça va donner !

Afin d’éviter tout écueil, nous avons mis en place un premier atelier de 2 heures pour identifier les bonnes idées candidates à un Design Sprint. N’hésitez pas à nous contacter !

 

Merci à Stephen Demange (Directeur Conseil, SQLI Bordeaux) pour l’animation du petit-déjeuner et son retour d’expérience.