Ce qu’il faut retenir de la Figma Config 2024

par audrey.csikos@gmail.com | 27 Juin 2024 | Actualité

Simplification et amélioration de l’expérience utilisateur

Une interface utilisateur redessinée

L’un des changements les plus audacieux est la refonte de l’interface utilisateur de Figma. La nouvelle UI, baptisée UI3, vise à simplifier l’expérience de conception. Les outils sont désormais placés en bas de l’écran pour donner plus de visibilité au contenu et aider les utilisateurs à rester concentrés. La transition vers cette nouvelle interface sera progressive, permettant aux utilisateurs de basculer entre l’ancienne et la nouvelle version pendant un certain temps.

Améliorations ciblées pour les concepteurs et développeurs

Suggest Auto Layout : L’une des fonctionnalités phares est le « Suggest Auto Layout », qui facilite l’utilisation de l’auto layout en ajustant automatiquement et de manière plus intuitive les éléments dans les cadres. Cela simplifie la structure des designs et améliore la productivité des utilisateurs.

Kits de Design intégrés : Figma introduit des kits de design iOS 18 et Material 3 directement dans la plateforme. Ces kits standardisés permettent une conception plus rapide et une intégration simplifiée des composants couramment utilisés.

Dev Mode amélioré : La transition du design au développement est désormais plus fluide grâce à la génération automatique de code pour SwiftUI, Compose et React. Cette fonctionnalité aide les développeurs à transformer rapidement les conceptions en production.

Figma Connect, pour une meilleure collaboration avec les clients externes

Prévu pour début 2025, Figma Connect facilitera la collaboration avec des clients externes. Cela est particulièrement bénéfique pour les freelances et les agences qui travaillent régulièrement avec des clients externes.

Figma prévoit également d’améliorer le transfert de projets des agences vers les clients, avec des mises à jour attendues dans les prochains mois pour simplifier ce processus.

De nouvelles fonctionnalités de gestion de la facturation permettent aux administrateurs de mieux contrôler les notifications et les mises à jour de l’éditeur. Les administrateurs peuvent désormais exiger une approbation avant toute mise à jour, offrant plus de contrôle et de flexibilité.

Améliorations du Dev Mode

L’année dernière, Figma a lancé le Dev Mode, un espace dédié aux développeurs pour faciliter l’accès aux informations nécessaires à la mise en œuvre des designs. Au cours de l’année écoulée, Figma a continué d’améliorer le Dev Mode avec des outils d’annotation, une refonte de la comparaison des modifications, et bien plus encore, grâce aux retours de la communauté.

Nouveautés dans le Dev Mode

Ready for Dev : Figma introduit des mises à jour majeures pour le Dev Mode, visant à simplifier l’inspection des fichiers volumineux et à rapprocher le code et le design. Une nouvelle vue « Ready for Dev » permet aux développeurs de voir tous les éléments prêts pour le développement, masquant ce qui n’est pas pertinent.

Focus View : Cette nouvelle fonctionnalité affiche uniquement le design à inspecter. Les développeurs peuvent voir une liste de toutes les modifications apportées à un cadre spécifique, facilitant la vérification des changements et l’implémentation rapide.

Prototype responsive : Un nouveau paramètre responsive pour le visualiseur de prototypes permet de voir comment le design fonctionne sur différents tailles d’écran, assurant une implémentation correcte et responsive.

Statut de complétion : Les développeurs peuvent désormais marquer un design comme complété, envoyant une notification aux designers pour fermer la boucle de feedback. Si des mises à jour sont nécessaires, le design revient à l’état « Ready for Dev » et envoie une notification au développeur.

Code Connect : intégration des systèmes de Design

Cette fonctionnalité sort de la phase bêta et permet aux développeurs de voir le code réel des composants de leur propre système de design dans Figma. Le Code Connect SDK permet de décrire les différences entre les composants en design et en code, et de publier ces changements dans Figma. En utilisant Code Connect, les développeurs peuvent changer les propriétés et les variantes des composants et voir le code se synchroniser automatiquement avec le design.

Nouvelles fonctionnalités IA

Figma a également dévoilé plusieurs nouvelles fonctionnalités axées sur l’intelligence artificielle, visant à simplifier et enrichir l’expérience de design.

Un ajout notable est le panneau Actions, identifiable par une petite étoile au bas de la barre d’outils. Ce panneau permet de lancer des commandes directement dans Figma et sert également de point d’entrée pour les nouvelles fonctionnalités AI.

Objectifs de l'intégration de l’IA

L’approche de Figma avec l’IA est de résoudre des problèmes concrets qui affectent le flux de travail et la créativité des utilisateurs. L’accent est mis sur trois aspects principaux :

Commencer un projet : Faciliter le démarrage sur une toile vierge en générant des designs à partir de simples commandes textuelles.
Trouver ce dont vous avez besoin : Aider les utilisateurs à localiser rapidement les éléments nécessaires dans leurs projets.
Maintenir le flux créatif : Éviter les interruptions et faciliter la continuité du processus de design.

Fonctionnalités principales

Make Design

Cette fonctionnalité permet de générer des designs à partir de descriptions textuelles. Par exemple, en entrant une demande pour une application de recherche de pizzerias, Figma utilise OpenAI et un modèle de diffusion pour créer un design complet, incluant les systèmes de design préétablis. Les utilisateurs peuvent ensuite personnaliser facilement les thèmes, les couleurs, les rayons des coins, et les espacements.

Figma peut également gérer des projets plus complexes, comme la création d’un site web de portfolio pour un architecte spécialisé en durabilité. L’IA génère un design détaillé avec des images appropriées, des témoignages de clients, et même une section de contact. Les utilisateurs peuvent par la suite modifier les designs générés en y ajoutant des éléments spécifiques comme des formulaires de contact.

La capacité de l’IA à générer des designs variés et détaillés aiderait ainsi les designers à surmonter le problème de la page blanche et à explorer de nouvelles idées.

Recherche visuelle

Figma a dévoilé une autre fonctionnalité révolutionnaire pour ses utilisateurs : la recherche visuelle alimentée par l’IA. Cette nouvelle capacité vise à faciliter la recherche et la récupération d’actifs de conception, en réponse aux défis courants rencontrés par les équipes de design.

Beaucoup de designers connaissent la difficulté de retrouver des fichiers spécifiques dans un océan de captures d’écran et de discussions. Avec la nouvelle fonctionnalité de recherche visuelle, Figma simplifie ce processus. Les utilisateurs peuvent ainsi trouver instantanément le fichier Figma exact correspondant à une capture d’écran en recherchant des éléments vectoriels similaires.

La fonctionnalité ne se limite pas aux captures d’écran. Les utilisateurs peuvent également rechercher des écrans spécifiques en utilisant des chaînes de caractère. Par exemple, en cherchant une chaîne comme « confirmez votre lieu de prise en charge », Figma affiche immédiatement les écrans pertinents, facilitant l’ajout de ces éléments au projet en cours.

Une autre caractéristique innovante est la possibilité de dessiner des formes simples pour rechercher des composants similaires. Par exemple, en dessinant un cercle avec des croix pour représenter une icône de centrage de carte, Figma peut identifier et récupérer l’icône exacte parmi les composants disponibles, accélérant ainsi le processus de conception.

Pour les utilisateurs individuels ou les petites équipes, Figma propose également une recherche visuelle au sein de sa communauté. En recherchant des termes comme « admin dashboard UI », les utilisateurs peuvent explorer et intégrer des designs de la communauté Figma.

Automatisation et enrichissement de contenu

L’une des nouvelles fonctionnalités permet aux designers de dupliquer des composants et de remplacer automatiquement le contenu. Par exemple, en travaillant sur une application de recettes, un designer peut facilement ajouter des ingrédients, des images et des descriptions sans interrompre son flux de travail. En utilisant des commandes simples, les utilisateurs peuvent générer des images, réécrire des descriptions et même supprimer les arrière-plans des photos, rendant le processus de création plus fluide et rapide.

Traduction et adaptation linguistique

Figma facilite également l’adaptation des designs à différentes langues. En traduisant automatiquement le contenu, les designers peuvent voir comment leurs créations s’affichent dans différentes langues. Cela permet d’ajuster rapidement les composants pour éviter la troncation et s’assurer que le design fonctionne bien quelle que soit la langue utilisée.

Gestion des noms de couches et prototypage

Pour ceux qui sont soucieux de la propreté de leurs fichiers, Figma propose désormais une fonctionnalité de renommage automatique des couches. Cela permet de garder les projets organisés et de les partager sans embarras. De plus, Figma aide à créer des prototypes en générant automatiquement les connexions entre les différentes pages et composants, simplifiant ainsi le processus de prototypage et de test.

Figma Slides

Figma a récemment dévoilé Figma Slides, un nouvel outil destiné à transformer la façon dont les présentations sont conçues et partagées. Intégré à la plateforme Figma, Figma Slides promet de simplifier et d’enrichir l’expérience de création de diapositives de manière novatrice.

Conçu initialement comme un projet de Makery, l’équivalent d’un hackathon interne chez Figma, Figma Slides est né de la volonté de répondre aux besoins des utilisateurs qui utilisaient déjà Figma pour créer des présentations visuelles de manière non conventionnelle.

Fonctionnalités clés

Automatisation et personnalisation : Figma Slides simplifie le processus de création de diapositives en permettant aux utilisateurs de changer rapidement les styles et les couleurs sans compromettre la cohérence visuelle. Grâce à des fonctionnalités comme le mode grille et la sélection de modèles, il est facile de structurer et d’organiser les présentations en fonction des besoins narratifs.
Intégration du prototypage : Une caractéristique unique de Figma Slides est l’intégration directe du prototypage interactif. Les utilisateurs peuvent insérer des liens de prototypage dans leurs diapositives, permettant aux spectateurs de naviguer et d’interagir avec les maquettes directement depuis la présentation. Cela élimine le moment fastidieux de capturer des enregistrements d’écran pour montrer des interactions dynamiques.
Collaboration améliorée : Conforme à l’ADN collaboratif de Figma, Figma Slides facilite la coédition et le partage en temps réel des présentations. Les fonctionnalités comme les notes de présentateur et les sondages en direct permettent de maintenir l’engagement de l’audience et d’encourager les interactions bidirectionnelles, transformant ainsi les présentations traditionnelles en conversations enrichissantes.

Pour conclure

En résumé, Figma Config 2024 démontre l’engagement continu de Figma à innover et à répondre aux besoins changeants de sa communauté de designers et de développeurs, consolidant ainsi sa position de leader dans le domaine des outils de conception collaborative.

Voir la conférence 👇

Amélioration de l’Expérience Utilisateur sur Smapshot

par audrey.csikos@gmail.com | 21 Juin 2024 | UX

Ce travail a été réalisé dans le cadre du cours de Laboratoire Expérience Utilisateur (UXLab). A travers ce projet, nous avons ainsi analyser les besoins d’un site, réaliser des tests utilisateurs afin de démontrer une problématique et finalement analyser les résultats obtenus.

Le produit testé est le site de Smapshot: https://smapshot.heig-vd.ch/.

Smapshot est un site qui permet de géolocaliser les images historiques et a pour but de créer un globe virtuel des éléments historiques. En eet, de nombreuses photographies historiques allant jusqu’à la fin du 19ème siècle n’ont pas de lieu défini. Le site permet donc aux utilisateurs d’aligner les images historiques avec le globe virtuel afin d’avoir une géolocalisation en 3 dimensions.

Business case

Ce test utilisateur a pour but d’améliorer l’expérience utilisateur sur le site de Smapshot. En eet, avoir une bonne expérience utilisateur est primordiale et incitera les utilisateurs du site à revenir, autrement dit, à les fidéliser. De plus, le but du test est de trouver un moyen d’atteindre une nouvelle cible, notamment par l’aspect ludique.

En effet, le site n’a que très peu d’utilisateurs et il est donc primordial de réaliser des tests afin d’augmenter le trafic. Sans ces tests, il sera compliqué de trouver des pistes d’amélioration et donc d’augmenter l’utilisation de Smapshot.

Nos objectifs

Comme nous l’avons dit précédemment, le premier but de Smapshot est de localiser les images historiques. Ainsi, nous pouvons en déduire que les personnes utilisant ce site sont de réels passionnés de l’histoire.

Cependant, après une brève analyse du site, nous avons pu constater que l’aspect ludique du site doit être développé. En eet, nous pourrions comparer Smapshot à une sorte de jeu vidéo, notamment par le biais du classement des utilisateurs qui localisent le plus d’images.

Par conséquent, l’aspect divertissant est primordial et doit faire partie intégrante du site. En eet, d’une part cette approche permettra de fidéliser l’audience mais elle permettra également d’attirer de nouveaux utilisateurs.

Ainsi, à travers ce test, notre principal objectif est de définir les améliorations potentielles pour la partie jeu (“Participation”) de votre site.

Comment peut-on apporter une dimension divertissante à l’aspect historique Smapshot ? Faudrait-il gamifier le site ? Autrement dit, faudrait-il utiliser les codes des jeux vidéo afin d’améliorer le côté divertissement de votre plateforme ? Ce sont les diérentes questions que nous nous posons.

Méthodologie

Nous allons analyser le déroulé des tests grâce aux métriques ci-dessous:

le temps mis pour la réalisation de chaque scénario
le contenu des verbalisations des utilisateurs pendant le test (pensée à voix haute)
le contenu des entretiens au cours du débriefing Participants

Un participant test sera nécessaire afin de valider le processus de l’expérience dans sa globalité, puis 15 participants seront recrutés pour eectuer des tests utilisateurs.

Proto-personas

Script

Smapshot est un site qui permet de géolocaliser les images historiques et a pour but de créer un globe virtuel des éléments historiques. Le site permet donc aux utilisateurs d’aligner les images historiques avec le globe virtuel afin d’avoir une géolocalisation en 3 dimensions.

Trouver le classement des participants du mois de juin 2022
Scénario: Vous avez entendu parler du site et voulez découvrir les participants du mois de juin 2022.
Changer la transparence sur la photo
Scénario: Vous souhaitez découvrir une photo de votre ville à l’époque. Une fois que vous l’avez trouvée, changez la transparence sur la photo choisie
Trouver les photos d’une collection appartenant à un propriétaire
Scénario: Vous êtes à la recherche de glaciers et avez découvert que la bibliothèque de l’école polytechnique fédérale de Zürich a une collection de ces glaciers. Trouvez les photos qu’ils ont mis à disposition sur le site
Mettre la map en SwissTopo noir et blanc
Scénario: Vous êtes en train de découvrir le site, mais vous n’aimez pas le thème graphique de la map. Cherchez donc à changer le thème de la map.
Choisir une photo et acher les bâtiments
Scénario: Vous trouvez que la photo que vous avez choisie manque de détail et qu’elle est trop plate. Vous décidez donc d’acher les bâtiments sur la photo.
Trouver une photo d’Yverdon en 1956
Scénario: Vous habitez à Yverdon depuis votre plus jeune âge et vous aimeriez découvrir la ville en 1956.
Trouver une photo non répertoriée sur le site
Scénario: Vous appréciez le site et souhaitez participer en essayant de géolocaliser quelques anciennes photos.
Créer une observation sur l’image
Scénario: Vous tombez sur une photo d’un lieu connu et vous avez quelques anecdotes sur le lieu que vous avez envie de partager. Vous décidez donc d’ajouter une observation à la photo.
Géolocaliser une image choisie
Scénario: Vous avez trouvé une ancienne photo et souhaitez la géolocaliser sur le site pour qu’elle soit répertoriée.

Analyse des observateurs

Lors des tests de l’utilisateur, les observateurs se focaliseront sur les points suivant :

Le parcours emprunté par le testeur,
les hésitations du testeur lors des réalisations de ses tâches,
le temps que le testeur va faire à réaliser ce que la tâche lui demande,
la compréhension des tâches,
les explications orales données par le testeur lors de ses tâches.

Analyse des résultats post-test

Remarques préalables

Il faut savoir que ce test a été réalisé de sorte à ce que l’utilisateur puisse entamer les tâches que nous avons prédéfinies de manière progressive. Les tâches que nous jugions hypothétiquement les plus simples ont été faites au début, et progressivement les tâches les plus complexes ou nécessitant le plus d’étapes ont été faites à la fin.

Par conséquent, l’utilisateur a pu construire ses “connaissances” de la plateforme au fur et à mesure et cela a probablement aidé à ce dernier de réaliser les tâches les plus complexes.

Nous estimons que si l’on avait modifié l’ordre des tâches, les tâches les plus complexes auraient probablement été moins intuitives à réaliser.

Retour général sur l’expérience

Le test s’est globalement bien passé. Le temps que nous avions estimé pour chaque tâche a généralement été dépassé. Le testeur a généreusement partagé ses pensées à voix haute ce qui a pu révéler les diérentes dicultés rencontrées durant le test ainsi que leurs raisons. En général, l’utilisateur a trouvé les tâches faciles (voir questionnaire SEQ) et a eu une satisfaction plutôt correcte lors de la prise en main de Smapshot.

Lors de la dernière tâche (tâche 9), vers la fin de la géolocalisation, le chargement ne se terminait pas. Ceci est probablement dû à la version bêta utilisée lors de ce test. Par conséquent, cela a rallongé le temps de la tâche (interruption d’un membre de l’équipe).

Un autre point important sur l’expérience se porte sur la facilitation. Le scénario a parfois pu être mal expliqué, ce qui a parfois engendré un temps de latence entre la compréhension de la tâche et l’application de cette dernière.

Problèmes rencontrés

Nous avons regroupé les problèmes rencontrés lors de du test en thèmes ainsi que en fonction de leur gravité et fréquence.

Usabilité

Le déplacement sur la map est parfois compliqué. Lors du déplacement sur la ville d’Yverdon depuis la ville de Chernex (Montreux) durant la tâche 6, l’utilisateur a eu du mal à arriver jusqu’à la ville d’Yverdon. L’utilisateur n’était tout de fois pas en possession de souris ce qui a pu fausser l’usabilité du test.
Il y a eu notamment un problème de lenteur de chargement de la map durant le test qui a pu prolonger la durée des tâches notamment sur la tâche 9.
Lors de la tâche 9, l’utilisateur a souligné que la tâche n’était pas difficile mais fastidieuse à réaliser. En effet, la mise en place des points sur la map puis sur la photo peut demander une certaine concentration et précision. De plus, la version beta n’est pas optimisée et a posé certains problèmes de lenteur et/ou de lag durant le test.

Solution proposée: résoudre des problèmes de lag et de lenteur de chargement.

Visibilité

4. Lors de la tâche 4, l’utilisateur devait changer le thème de la map. Cette option était présente sur la page où il se trouvait. Malgré plusieurs passages sur la mini map, il a dû demander l’aide au facilitateur.

Solution proposée: mettre en avant les éléments importants.

Informations

5. Toujours lors de la tâche 4, après un certain moment, l’utilisateur souhaitait chercher de l’aide pour réaliser la tâche. Malheureusement, la rubrique “aide” ne lui a pas donné beaucoup plus d’informations que ce qu’il savait déjà.

6.L’utilisateur a mentionné qu’un menu sur la page d’accueil aurait permis de trouver plus facilement les informations qu’on lui demandait de trouver comme par exemple les participants lors de la tâche 1.

7. Lors de la tâche 2, l’utilisateur n’a pas saisi la mention de Lausanne sur une photo de Chernex. Ici, le nom du propriétaire de la photo n’est pas clair car rien ne l’indique.

8. Lors de la tâche 1, lorsque l’utilisateur cherche le classement des participants pour le mois de juin, il scrolle sur la page d’accueil. Cependant, la page est longue et l’utilisateur ne va pas jusqu’en bas de la page car il en déduit que l’information qu’il cherche ne se situera pas ici. En somme, la surcharge d’éléments sur la page ne permet pas à l’utilisateur de savoir ce qu’il va trouver sur la page.

9. Lors de la tâche 4, comme expliqué au point 5, quand il est demandé à l’utilisateur de changer le style de la map et de la mettre en “SwissTopo noir et blanc”. il ne trouve ni d’aide ni de filtre dans les endroits qu’il attendait. Après avoir essayé il se déclare vaincu ne sachant plus où chercher. Sans l’aide du facilitateur il n’aurait pas pu finir la tâche. Cela démontre un emplacement de ces filtres (type de map) mal placé, qu’ils ne sont pas intuitifs.

Comme relève plusieurs points précédents (4, 5, 8, 9), plusieurs aspects de ce site ne sont pas intuitifs. Si l’utilisateur ne passe pas un moment à explorer le site, il ne pourra en comprendre totalement le fonctionnement. L’expérience utilisateur n’est pas assez pensée.

Solutions proposées: alimenter la rubrique “aide”, faire un didacticiel, changer le vocabulaire (filtre), revoir la structure de l’information, inclure un menu

Affichage et bugs techniques (calendrier)

10. Lors de la première tâche demandée, l’utilisateur a fait face à un bug technique lors du choix de date dans le classement des participants. Il a inséré par mégarde 31.06.2022, or il n’y a pas de 31ème jour le mois de juin.

Solution proposée: résoudre les problèmes techniques.

solutions proposées

Solutions pour l’Usabilité

Les problèmes de lag et de lenteur de chargement nuisent fortement à l’expérience utilisateur, cependant l’effort pour résoudre ces problèmes peut être conséquent.

Solutions pour la Visibilité

La solution n’est pas vraiment complexe par rapport à l’importance de ce point. En effet, il suffirait de mieux mettre en avant des éléments importants comme par exemple mettre un cadre coloré autour de la mini-map.

Solutions pour les Informations

Mieux classer les informations permettrait à l’utilisateur de mieux se retrouver sur le site. Cela permettrait même de résoudre certains problèmes de visibilité (comme par exemple avoir un didacticiel qui indique où est la mini-map). Par contre, il faudrait travailler l’architecture de l’information, ce qui est un travail important. C’est une tâche fastidieuse et nécessite beaucoup de recherches et de testing.

Solutions pour le Calendrier

Ceci est un aussi un problème technique. Néanmoins résoudre ce problème nécessite moins d’efforts car on peut assez facilement le résoudre en ajoutant des restrictions dans les dates par exemple. La valeur apportée n’est pas significative par rapport aux autres problèmes car on le retrouve avec peu de fréquences sur le site et nuit peu à l’expérience utilisateur.

Plan d’action

Malgré le fait que les problèmes d’usabilité soient majeurs, l’effort à mettre est potentiellement important. Il faudrait commencer par résoudre les problèmes de visibilité, car c’est assez facile à mettre en place et apporterait une meilleure expérience utilisateur. Ensuite en parallèle travailler sur l’architecture de l’information et les problèmes d’usabilité, car ces deux points sont majeurs dans l’expérience utilisateur. Et dans un dernier temps, régler la gestion des dates.

Découverte de l’eyetracking avec RealEye.io

par audrey.csikos@gmail.com | 11 Mai 2024 | UX

Pour cette première découverte de Eyetracking avec une webcam, nous avons utilisé le site RealEye.io et avons dû proposer 4 tâches à un·e collègue de la classe. La personne qui a réalisé les 4 tâches était Karen B.

Protocole du test

Bonjour!

Vous allez participer à un test d’eye tracking. Veuillez ne pas bouger votre tête durant le test. Essayez de faire en sorte que la luminosité reste la même tout au long du test. Cela ne devrait pas vous prendre plus de 5 minutes.

Vous aurez parfois à répondre à certaines questions après l’apparition de l’image.

Tâche 1 – site amazon.fr

Amazon est un site e-commerce populaire. Ce site affiche beaucoup de contenus sur la page d’accueil. Il est parfois difficile de trouver les informations si on n’a pas une idée précise de ce qu’on cherche.

Pour le premier test, le but était d’identifier et de cliquer en 5 secondes “Les top catégories” se trouvant en bas au milieu de la page d’amazon. Le scrolling était activé.

Ici, le mouvement de la souris est affiché et on peut remarquer qu’aucun click n’a été effectué ainsi qu’aucun scroll.

Comme on le voit avec la heatmap, aucun regard ne s’est dirigé vers le bas de la page. L’attention se trouve principalement sur la moitié supérieure de la page.

Les points de fixations permettent d’analyser que les réflexes de Karen sont d’aller sur la barre des catégories et sur les cases plus bas. Comme dit précédemment, les gaze points sont situés surtout sur la moitié supérieure de l’écran.

Conclusion: Une augmentation du temps aurait permis d’avoir une meilleure analyse de la page et donc une meilleure conclusion. Avoir pris une information en bas de page qui de plus est coupée n’est pas une bonne idée. La personne n’a pas le réflexe de regarder en bas ou scroller. Il aurait été préférable d’utiliser la barre des catégories du haut pour faire le test, augmenter le temps d’analyse de l’image ainsi que d’indiquer la possibilité de scroller. Il est difficile ici de pouvoir donner des recommandations.

Tâche 2 – site happyofficine.ch

Le site happy officine est une site e-commerce revendant de la cosmétique biologique de marques françaises ou encore étasuniennes.

Pour cette deuxième tâche, le but était de pouvoir comprendre si l’information est claire et si on comprend ce que contient le site. Pour cela, la personne testée avait 5 secondes pour regarder le site (5 seconds test) et quelques questions lui était posée:

Quel est le premier élément que vous avez remarqué?
Que vend ce site?
Quel est le sujet de ce site?
Avez-vous confiance en ce site?

Tâche 2 - site happyofficine.ch - heatmap

Les deux points principaux d’attention sont sur l’image et sur le titre à sa droite.

Tâche 2 - site happyofficine.ch - points de fixationi

Pour les points de fixation, la personne testée commence effectivement à regarder le produit puis le titre et elle termine ensuite son observation sur la barre de navigation..

Après cette analyse, sans surprise, la personne a répondu que ce sont les pots qu’elle a remarqué en premier. En effet, étant situé à gauche et avec cette taille, il est difficile de ne pas être attiré visuellement par les pots. Elle a saisi que c’était un site qui vendait du maquillage. Le sujet du site n’a pas été trouvé. La confiance pour le site est accordée.

Conclusion: Le site paraît confiant au premier abord et l’on comprend rapidement que ce site vend du maquillage. Après, le fait que ce soit des “marques naturelles et biologiques“ n’est pas assez mis en avant. Sans l’image des pots, il serait difficile de savoir ce que contient ce site.

Tâche 3 – flyer événementiel MEGA22

Pour cette troisième tâche, j’ai décidé d’utiliser le flyer pour l’événement MEGA 22, organisé pour les diplomé·e·s en ingénierie des médias.

Ici, le but était de savoir si la hiérarchie de l’information permettait de rapidement retenir les informations mises en avant. La personne devait regarder pendant 5 secondes l’affiche puis trois questions après le test ont été posées:

Qui organise l’événement?
Quand se passe l’évènement?
Où se déroule l’évènement?

Tâche 3 - flyer événementiel MEGA22 - heatmap

Sur la heatmap, on peut remarquer que les parties où il y a du texte ont le plus attiré l’attention, c’est-à-dire le titre, l’inscription et le texte du bas.

Tâche 3 - flyer événementiel MEGA22 - points de fixation

Les points de fixation se situent essentiellement sur le titre. Karen s’est d’abord arrêtée sur le titre puis à examiner l’affiche dans le sens d’une aiguille d’une montre (titre – inscription obligatoire – QR code – texte du bas – date).

Karen a répondu que c’était la HEIG qui organisait cet événement. Cela a pu être biaisé par le fait que cette affiche est présente dans les corridors de l’école. Pour la date et le lieu de l’évènement, les réponses n’ont pas été trouvées, par manque de temps.

Conclusion: Sur l’affiche, la hiérarchie visuelle au niveau de la taille de la police et de l’emplacement est bonne étant donné que les points d’attention et de fixation sont situés là où les textes en gras sont placés. Je pense que si le temps était doublé, la personne aurait pu retenir les informations demandées.

Tâche 4 – site adhereup.ch

Ce site vitrine appartient à une startup qui souhaite pouvoir trouver des investisseurs. L’information doit pouvoir être facilement et rapidement comprise lors de l’arrivée sur le site afin de pouvoir garder l’attention de la personne.

Pour la dernière tâche, il fallait à nouveau regarder le site pendant 5 secondes et répondre à deux questions:

Quel est le nom de l’entreprise?
Quel est le sujet du site?

Ici, la heatmap permet de remarquer que la phrase d’accroche a retenu l’attention de Karen ainsi que l’image à droite.

Tâche 4 - site adhereup.ch - points de fixation

Les gaze points sont situés sur la phrase d’accroche ainsi que sur l’image du téléphone,

Avec les gaze points, on peut remarquer que Karen n’a pas du tout regardé le logo en haut à gauche. Cela explique pourquoi le nom de l’entreprise n’a pas pu être mémorisé. Karen a compris que le sujet du site était la médication qui se trouve sur la phrase d’accroche.

Conclusion: Afin de pouvoir comprendre ce que le site veut vendre, il faudrait mettre en avant par exemple le nom du produit en gras ou à côté de l’image au lieu qu’il soit noyé dans le paragraphe. Le logo pourrait être placé au milieu pour pouvoir attirer l’oeil rapidement.

Conclusion générale

Étant donné que c’est une première prise en main, beaucoup d’améliorations sont, pour ma part, à prendre en compte pour la prochaine fois.

Premièrement, le temps accordé pour une tâche doit être au minimum de 10 secondes (à moins que ce soit un 5 second test). En effet, pour les questions demandées après le test, souvent, la personne mentionnait le manque de temps qu’elle avait pour analyser l’image. Elle n’arrivait pas à répondre aux questions ou faire l’action demandée. Il faudrait pouvoir faire passer un test brouillon avec une personne lambda pour pouvoir jauger le temps nécessaire pour chaque tâche.

Deuxièmement, pour la première tâche, l’erreur était d’avoir pris une information à retrouver se situant tout en bas de page, donc très peu visible (et encore moins en 5 secondes!). En effet, l’attention ne se situe pas à cet endroit mais vers la partie du haut.

Pour conclure, la prise en main de RealEye.io a été de manière générale aisée. Cette première approche a permis de découvrir les différents moyens d’analyse possibles avec cet outil pout réaliser des tests UX.

DURABILIA

par audrey.csikos@gmail.com | 5 Mai 2024 | Portfolio

Le projet vise à attirer et rediriger des utilisateurs de 15 à 25 ans vers les jeux vidéo Durabilia en créant un web-documentaire interactif sur les Objectifs de Développement Durable (ODD).

L’objectif principal est d’informer le public cible sur les questions liées au développement durable tout en les engageant activement dans le processus par le biais d’un parcours utilisateur immersif.

Pour renforcer la crédibilité de Durabilia, le projet se concentre sur la création de contenu utile et qualitatif, avec une plateforme au design similaire à Netflix et une interface d’administration pour gérer les vidéos et les questions.

Le projet s’est déroulé sur une période totale de 18 jours, comprenant des phases d’idéation, de tournage, de conception, de développement, et de présentation.

A propos

En tant que groupe de 13 étudiant•e•s en dernière année d’Ingénierie des Médias à la HEIG-VD (Haute École d’Ingénierie et de Gestion), nous avons entrepris un projet passionnant : la création d’un web-documentaire autour de Durabilia. Ce projet de recherche, mené par le MEI (Media Engineering Institute) de la HEIG-VD en collaboration avec la HEG (Haute École de Gestion) et la HEIA(Haute École d’Ingénierie et d’Architecture) de Fribourg, implique la participation d’une centaine de personnes. L’objectif principal de Durabilia est de concevoir un jeu web visant à sensibiliser le public aux 17 Objectifs de Développement Durable (ODD) définis par l’ONU.

Notre implication dans ce projet nous a offert l’opportunité d’explorer la méthodologie SCRUM, une approche agile qui a enrichi notre expérience académique.

Le web-documentaire que nous concevons se distingue par son caractère interactif. Combinant vidéos, textes, sons et animations, il constitue une forme de narration numérique novatrice. Les utilisateurs sont invités à devenir des acteurs engagés, participant activement à l’histoire en choisissant leur propre chemin et en explorant différents points de vue. À la différence d’un documentaire classique, où le spectateur demeure passif, le web-documentaire donne une place centrale à l’utilisateur. Notre objectif est de le rendre non seulement actif, mais également acteur de l’histoire que nous racontons.

Sustainable Development Goals_E_Final sizes

Personas

En respectant la direction stratégique de Durabilia, le cœur de la cible demeure les romand•e•s de 15-25 ans, qui seront les joueurs visés. Une fois le public cible déterminé, nous avons développé trois personas.

Sondage

Pendant que nous réfléchissions au scénario et à l’interface de notre web-documentaire, nous avons dressé une liste de questions et créé un sondage sur Typebot.io. Ce sondage, destiné aux jeunes romand•e•s âgé•e•s de 15 à 25 ans, a été propagé auprès de nos contacts pour identifier les fonctionnalités, le format ou encore el ton le plus adaptés pour notre web- documentaire. Nous avons obtenu au total 105 réponses, dont 76 complétées. Nous en avons déduit plusieurs « insights ».

Le format de web-documentaire n’est pas une expérience très connue des jeunes.
Le format horizontal pour le desktop et vertical pour le mobile semblent être le meilleur compromis.
Une part importante des répondants n’est pas intéressée par un format de vidéos nécessitant beaucoup d’interactions.
La durée idéale des vidéos informatives montre une préférence pour une expérience de plus de 7 minutes avec un certain dynamisme.
Les vidéos informatives qui fonctionnent le mieux sont accompagnées d’animations et de mises en évidence textuelles.
Une tonalité plutôt sérieuse est à privilégier.

Concept

Nous avons conçu une première version du web-documentaire en approfondissant l’un des 17 ODD: l’ODD 5 « Égalité entre les sexes ». La raison derrière ce choix demeure l’importance actuelle de la problématique en Suisse ainsi que notre sensibilité personnelle à cette thématique.

Nous en sommes venus à considérer qu’instruire le public cible, duquel nous faisons partie, constitue déjà en partie l’atteinte des objectifs de Durabilia. Nous avons donc imaginé une solution aussi impliquante que possible pour le public en vue de l’engager.

Les objectifs du web-documentaire sont donc d’instruire et d’engager le public sur les questions de développement durable et de les rediriger vers le jeu web Durabilia.

👉 SIMPLICITÉ

Une expérience utilisateur aussi simple que possible au vu de l’importante part du public cible qui n’est pas familière avec le concept de web-documentaire

👉 IDENTIFICATION

Un format d’interviews sollicitant des intervenants choisis à la fois pour leur expertise et leur aptitude à susciter un sentiment d’identification envers notre public cible

👉 PROXIMITÉ

Un ton direct et informatif afin d’ajouter de la proximité et faire sentir le public cible davantage concerné par le propos des intervenants

👉 INTERACTION

Des formats de questions-réponses choisis par l’utilisateur

Scénario

Dans ce web-documentaire, l’utilisateur incarne un nouvel arrivant dans l’équipe Durabilia et doit récolter des informations sur les 17 ODD pour aider à développer un jeu dessus. Il choisit un thème au sein d’un ODD et mène un interview avec une personnes réelle concernée par ce thème. Ensuite, il peut décider de refaire différemment l’interview ou de rendre ses recherches à son superviseur.

Le scénario est basé sur des éléments réels afin d’être plausible, cohérent et intéressant. Ajouter une histoire à ce web-documentaire permet à l’utilisateur de se sentir happé par le concept et de s’identifier à un rôle.

Le scénario est reproductible et modulable pour tous les autres ODD et permet une immersion complète pour l’utilisateur.

Tournage

Lors de nos tournages, nous avons principalement choisi d’utiliser un fond noir et neutre pour créer une atmosphère intime mais professionnelle et mettre en avant les personnes interviewées et leurs histoires. Nous avons opté pour une prise multi-caméra pour ajouter du dynamisme et proposer une alternance des angles. Tous ces choix ont renforcé la qualité visuelle de notre documentaire et son message.

Montage

Il y a eu deux types de contenus à monter : les interviews des intervenants des quatre thèmes choisis au sein de l’ODD 5 et les introductions, présentations et conclusions générales. Nous nous sommes principalement inspiré des montages de type « Konbini » pour les interviews et « En bref » pour les vidéos d’introduction.

Le processus global a été de dérusher, de formater les séquences (en format desktop et mobile) et de synchroniser le son avec les images des deux caméras. Il a ensuite fallu passer à l’étape du montage, avec la sélection des musiques et des discours les plus pertinents, l’alternance entre les deux, voire trois plans, l’uniformisation des couleurs et l’ajout d’effets spéciaux. Enfin, nous avons ajouté les sous-titres, exporté les vidéos au bon format et les avons implémentées au web-documentaire.

Les vidéos d’introduction contiennent une personne qui s’adresse directement à l’utilisateur en lui indiquant son rôle et en lui fournissant diverses informations sur les ODD, que ce soit face à la caméra ou en voix off. Il y a également une vidéo dans une vidéo contenant plusieurs intervenants venus pour parler de Durabilia et des 17 ODD.

Les interviews, elles, contiennent des intervenants externes qui « répondent » aux questions de l’utilisateur. D’ailleurs, elles commencent toutes par une phrase d’accroche juste avant la présentation de l’intervenant, pour interpeller l’utilisateur et lui donner envie de continuer l’expérience.

Identité visuelle

Nous avons créé une charte graphique afin de donner une identité visuele à notre future interface de web-documentaire et de guider sa conception concrète par les développeurs.

Étant donné qu’il a toujours été important de créer un lien entre notre projet et les 17 OD dans notre vision, nous avons opté pour une charte graphique sobre, composée de couleurs neutres telles qu’une séquence des gris.

Les éléments graphiques reprennent clairement l’univers des plateformes vidéos. La typographie, elle, a été choisie en fonction de son utilisation. Nous souhaitions focaliser le projet sur un style d’écriture impactant pour toucher l’utilisateur.

Benchmark

Pour concevoir l’interface de notre web-documentaire, nous avons en premier lieu effectué un benchmark sur les web-documentaires existants et sur les plateformes VOD populaires telles que Netflix et Disney+ ainsi que de leurs fonctionnalités les plus pertinentes pour notre public cible.

Interface

Nous avons créé des maquettes de l’interface pour la version desktop et mobile, dans le but de visualiser l’apparence de l’interface et de définir notamment la typographie, la navigation et l’ergonomie. Ces maquettes ont ensuite été utilisées pour développer la version finale de l’interface.

Tests utilisateurs

Nous avons mené des tests utilisateurs, incluant des tests de pensée à voix haute et semi-guidés. Les résultats ont montré que al clarté des boutons posait problème et qu’il y avait une cohérence disparate entre l’écran de menu et les interactions dans les vidéos.

Nous avons itéré sur les maquettes, proposés deux nouvelles versions et retesté. Les mots d’ordre étaient cohérence et immersion.

Bien que les développeurs n’aient pas pu implémenter ces versions par manque de temps, les résultats vont aider à orienter les futures étapes du projet.

Développement

Pour ce web-documentaire, nous avons développé plusieurs outils indépendants pour faciliter la création et la structuration des vidéos interactives.

Nous avons d’abord conçu une interface visuelle conviviale permettant d’importer des vidéos dans différents projets et de les relier facilement entre elles. Pour permettre la lecture des projets, nous avons ensuite intégré une petite API qui permet d’obtenir les projets lisibles par l’ordinateur en format JSON. Afin de lire les projets et d’effectuer un rendu visuel, nous avons aussi créé un lecteur vidéo interactif disponible dans une librairie NPM : https://www.npmjs.com/package/@shammas44/interactive-video-player. Enfin, nous avons intégré cette librairie dans le site web final.

En somme, l’utilisateur final peut modifier les photos, textes et vidéos liés aux interactions de manière simple et autonome.

Tous les dépôts Github relatifs à ce projet sont disponibles via ce lien : https://github.com/orgs/Durabequipe/repositories.

Pour se connecter et utiliser l’outil d’administration, un simple login nom d’utilisateur/mot de passe est nécessaire. Pour le player vidéo et l’intégration dans le site final, une clé API.

Techniques utilisées :

Pour l’administration :TAL Stack, MySQL,
Pour la librairie du lecteur : JS Vanilla, WebComponent
Pour le site web final : Angular, SCSS

Communication

Le web-documentaire peut faire l’objet de déclinaisons qui pourront être réutilisées pour promouvoir ce dernier sur les réseaux sociaux:

Reels alternants textes et images à fort impact émotionnel
Reels montrant des parties d’interview à forte signification ou à fort impact émotionnel
Teaser de 1 à 2 minutes de documentaire
Podcast enregistrant tout ou une partie d’une interview
Article de blog revenant sur une thématique abordée lors d’un interview

Nous voulons que les utilisateurs du web-documentaire ait une réflexion sur la question de durabilité et que Durabilia soit une base, un début dans ce travail de réflexion.

Instagram

71% des membres d’Instagram ont moins de 30 ans
Idéal pour les contenus visuels
Permet d’initier un dialogue et de créer et gérer une communauté

TikTok

78% des utilisateurs ont entre 11 et 24 ans
Bon pour humaniser le documentaire et le projet Durabilia en montrant des personnes
Utiliser un challenge lié au jeu Durabilia favoriserait l’engouement autour du projet

YouTube

Favorise le référencement
Plateforme de référence pour les vidéos
La récurrence de publication et l’uniformité de l’identité visuelle sont la clé

Snapchat

70% des utilisateurs ont entre 15 et 24 ans en 2016
Utile pour présenter les vidéos courtes en stories et y mettre le format long en swipe up
Exploiter la récurrence, voire la redondance des publications
Filtres pertinents

Etapes futures

Étant donné le court temps à disposition pour ce projet, soit trois semaines, nous avons décidé de nous focaliser sur un seul ODD, I’ODD 5. Mais le web-documentaire que nous avons réalisé est loin d’être parfait et peut faire l’objet d’améliorations et d’ajouts d’autres contenus.

En premier lieu, il faudrait évidemment reproduire le travail effectué pour les 61 autres ODD, donc trouver 2-6 thèmes à développer en leur sein, interviewer les personnes en fonction et produire les vidéos, en format desktop et mobile.

En parlant des vidéos, il y aurait la possibilité de reprendre et d’améliorer les vidéos déjà produites, que ce soit au niveau de la colorimétrie, du son, du montage, des sous-titres ou encore du format. Typiquement, les vidéos d’introduction n’ont pas pu être produites en format vertical par manque de temps ; cela serait donc le premier point majeur sur lequel se concentrer.

lI faudrait également améliorer et implémenter l’interface développée. En effet, comme expliqué dans « UX », nous avons constaté avec les premiers tests utilisateurs que celle-ci était améliorable, notamment au niveau de la clarté des boutons, de l’écran de menu et des interactions dans les vidéos.

Une fois cela fait, les prochaines étapes seront le raccordement avec le jeu du projet Durabilia, la mise en ligne finale et la potentielle promotion du web-documentaire sur les réseaux sociaux, telle qu’expliquée dans « Communication ».

Conclusion

Ce projet nous a permis d’apprendre la collaboration dans une équipe de 13 personnes. Nous avons pu voire que dans certains cas, l’intelligence collective est très importante pour faire avancer et évoluer les choses.

Nous avons également pu nous concentrer sur la compétence que nous voulions approfondir puisque toutes les compétences nécessaires au projet étaient présentes dans le groupe.

Ce projet a été très enrichissant, surtout car nous avons été briefé sur la potentielle réutilisation de notre projet plus tard

BE MY SUPER ALARM CLOCK

par audrey.csikos@gmail.com | 16 Avr 2024 | Portfolio

Le projet “Be My Super Alarm Clock” a été conçu afin de transformer l’utilisation d’un réveil au quotidien. Conçu principalement pour rendre le moment du réveil plus fort, l’application s’adresse aux personnes pouvant avoir du mal à se lever le matin. Soit parce qu’ils perdent du temps dans les multiples répétitions de réveil, soit parce que le réveil n’est même pas entendu.

L’application peut également être utilisée pour des rappels d’événements journaliers qui sont importants. L’utilisateur ne manquera aucun rappel. C’est le principe de “Be My Super Alarm Clock”, un “super” réveil qui nécessite un geste unique pour stopper la sonnerie.

Traditionnellement, un réveil sonne à une heure précise et s’arrête avec la pression d’un bouton. “Be My Super Alarm Clock” va au-delà de cet aspect et modifie entièrement la manière dont le réveil s’arrête. La sélection d’un son de réveil demande à l’utilisateur une manière unique d’arrêter la sonnerie.

A propos

L’application de réveil “Be My Super Alarm Clock” permet de sélectionner une méthode de réveil unique. Selon une liste de choix proposé par l’application, l’utilisateur sélectionne une méthode de réveil. L’application va alors utiliser une sonnerie unique et évolutive. “Be My Super Alarm Clock” va encore plus loin, car la manière d’arrêter le réveil est unique selon la sonnerie choisie. Cela peut être un son de la voix à réaliser, une manière précise de déplacer son téléphone, voire d’applaudir dans le cas où l’utilisateur choisit la sonnerie configurée sur le mode Stand Up. Dans ce dernier exemple, le réveil va alors lancer une sonnerie qui présente une personne réalisant un Stand Up. La voix enchaine les blagues de mauvais goût et l’utilisateur doit physiquement applaudir pour que le réveil s’arrête.

TECHNOLOGIES

L’application est réalisable, avec la technologie actuelle. Il est nécessaire de développer une application mobile pour ce concept. Initialiser une sonnerie différente selon la sélection est simple à réaliser. “Be My Super Alarm Clock” demande par contre une plus grande maitrise en développement pour réaliser les différentes manières d’arrêter le réveil. En effet, il faut pouvoir développer les mouvements sur les axes X, Y et Z. Il est également nécessaire de pouvoir analyser le son produit par l’utilisateur, afin que l’application puisse définir si le son d’arrêt du réveil à bien été réalisé. De plus, il est vital d’avoir un Smartphone qui permet l’écoute et l’analyse du son, du tactile de la gestuelle et des mouvements sur les axes X, Y et Z