Ce qu’il faut retenir de la Figma Config 2024

by audrey.csikos@gmail.com | 27 Jun 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

by audrey.csikos@gmail.com | 21 Jun 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.

Discovering eyetracking with RealEye.io

by audrey.csikos@gmail.com | 11 May 2024 | UX

For this first discovery of Eyetracking with a webcam, we used the website RealEye.io and had to propose 4 tasks to a colleague in the class. The person who carried out the 4 tasks was Karen B.

Test protocol

Hello!

You are about to take part in an eye tracking test. Please do not move your head during the test. Try to keep the brightness the same throughout the test. This should take no more than 5 minutes.

Sometimes you'll have to answer a few questions after the image appears.

Task 1 – website amazon.fr

Amazon is a popular e-commerce site. This site displays a lot of content on the home page. It can be difficult to find information if you don't have a clear idea of what you're looking for.

For the first test, the aim was to identify and click on "Top categories" in the bottom middle of the amazon page in 5 seconds. Scrolling was activated.

Here, mouse movement is displayed and it can be seen that no clicks or scrolls have been performed.

As you can see from the heatmap, no eyes were directed to the bottom of the page. Attention is mainly focused on the upper half of the page.

The fixation points show that Karen's reflexes are to go to the category bar and the lower boxes. As mentioned above, the gaze points are located mainly in the upper half of the screen.

Conclusion: An increase in time would have enabled a better analysis of the page and therefore a better conclusion. Taking information from the bottom of the page and cutting it off is not a good idea. People don't have the reflex to look down or scroll. It would have been preferable to use the category bar at the top of the page to do the test, to increase the image analysis time and to indicate the possibility of scrolling. It's difficult to give any recommendations here.

Task 2 - website happyofficine.ch

The happy officine website is an e-commerce site selling organic cosmetics from French and American brands.

For this second task, the aim was to understand whether the information was clear and whether people understood what the site contained. To do this, the test person was given 5 seconds to look at the site (5 seconds test) and asked a few questions:

What was the first thing you noticed?
What does this site sell?
What is this site about?
Do you trust this site?

Task 2 - website happyofficine.ch - heatmap

The two main points of attention are on the image and on the title to its right.

Task 2 - website happyofficine.ch - fixation points

For the fixation points, the test person actually starts by looking at the product, then the title, and then ends her observation on the navigation bar.

After this analysis, unsurprisingly, the person replied that it was the pots that he noticed first. Indeed, being located on the left and with this size, it's hard not to be visually attracted by the pots. She grasped that this was a site selling make-up. The subject of the site was not found. Confidence in the site is high.

Conclusion: The site appears confident at first glance, and it quickly becomes clear that this site sells make-up. After that, the fact that these are "natural and organic brands" is not emphasized enough. Without the image of the jars, it would be difficult to know what this site contains.

TASK 3 - MEGA22 EVENT FLYER

For this third task, I decided to use the flyer for the MEGA 22 event, organized for graduates in media engineering.

Here, the aim was to find out whether the hierarchy of information made it possible to quickly retain the information put forward. The person was asked to look at the poster for 5 seconds, and then to answer three questions after the test:

Who is organizing the event?
When is the event taking place?
Where does the event take place?

On the heatmap, we can see that the parts with text attracted the most attention, i.e. the title, the inscription and the text at the bottom.

Task 3 - event flyer MEGA22 - fixation points

The fixation points are mainly on the title. Karen stopped first at the title and then examined the poster in a clockwise direction (title - compulsory inscription - QR code - bottom text - date).

Karen replied that the HEIG was organizing the event. This may have been biased by the fact that the poster is displayed in the school corridors. For the date and place of the event, the answers were not found, due to lack of time.

Conclusion: On the poster, the visual hierarchy in terms of font size and location is good, since the points of attention and fixation are located where the bold text is. I think that if the time had been doubled, the person would have been able to retain the information requested.

TASK 4 - website ADHEREUP.CH adhereup.ch

This showcase site belongs to a start-up that wants to find investors. The information needed to be easily and quickly understood on arrival at the site, so as to keep the person's attention.

For the final task, the user had to look at the site again for 5 seconds and answer two questions:

What is the company name?
What is the site about?

Here, the heatmap shows that the catchphrase caught Karen's attention, as did the image on the right.

Task 4 - website adhereup.ch - fixation points

The gaze points are located on both the catchphrase and the phone image,

With the gaze dots, we can see that Karen didn't look at the logo on the top left at all. This explains why the company name couldn't be memorized. Karen understood that the subject of the site was the medication featured in the catchphrase.

Conclusion: In order to be able to understand what the site is trying to sell, the product name, for example, should be highlighted in bold or next to the image, rather than drowned out in the paragraph. The logo could be placed in the middle of the image to catch the eye quickly.

GENERAL CONCLUSION

As this is my first experience, there are a number of improvements that I'd like to take into account for next time.

Firstly, the time allowed for a task should be at least 10 seconds (unless it's a 5 second test). Indeed, for the questions asked after the test, the person often mentioned the lack of time they had to analyze the image. They couldn't answer the questions or perform the action requested. We'd need to be able to run a rough test with an average person to be able to gauge the time needed for each task.

Secondly, for the first task, the mistake was to have taken a piece of information to be found at the very bottom of the page, so it wasn't very visible (and even less so in 5 seconds!). In fact, attention is not focused there, but towards the top of the page.

In conclusion, RealEye.io was generally easy to get to grips with. This first approach enabled us to discover the different means of analysis possible with this tool for UX testing.

DURABILIA

by audrey.csikos@gmail.com | 5 May 2024 | Portfolio

The project aims to attract and redirect users aged 15 to 25 to the Durabilia video games by creating an interactive web documentary on the Sustainable Development Goals (SDGs).

The main objective is to inform the target audience about issues related to sustainable development while actively engaging them in the process through an immersive user journey.

To enhance Durabilia's credibility, the project focuses on creating useful and high-quality content, with a platform designed similarly to Netflix and an administration interface to manage videos and questions.

The project took place over a total period of 18 days, including ideation, filming, design, development, and presentation phases.

Context

As a group of 13 students in the final year of Media Engineering at HEIG-VD (Haute École d'Ingénierie et de Gestion), we embarked on an exciting project: the creation of a web documentary about Durabilia. This research project, led by the Media Engineering Institute (MEI) of HEIG-VD in collaboration with the School of Management (HEG) and the School of Engineering and Architecture (HEIA) in Fribourg, involves the participation of around a hundred people. The main objective of Durabilia is to design a web game aimed at raising awareness about the 17 Sustainable Development Goals (SDGs) defined by the UN..

Our involvement in this project has offered us the opportunity to explore the SCRUM methodology, an agile approach that has enriched our academic experience.

The web documentary we are designing stands out for its interactive nature.Combining videos, texts, sounds, and animations, it constitutes an innovative form of digital storytelling. Users are invited to become engaged actors, actively participating in the story by choosing their own path and exploring different viewpoints. Unlike a traditional documentary, where the viewer remains passive, the web documentary gives a central place to the user. Our goal is not only to make them active but also to make them actors in the story we tell.

Sustainable Development Goals_E_Final sizes

Personas

Respecting Durabilia's strategic direction, the core target audience remains French-speaking individuals aged 15-25, who will be the targeted players. Once the target audience was determined, we developed three personas.

Survey

While we were brainstorming the scenario and interface of our web documentary, we compiled a list of questions and created a survey on Typebot.io. This survey, aimed at young French-speaking individuals aged 15 to 25, was distributed among our contacts to identify the most suitable features, format, and tone for our web documentary. We obtained a total of 105 responses, 76 of which were completed. From this, we derived several insights.

The web documentary format is not a very familiar experience for young people.
The horizontal format for desktop and vertical format for mobile appear to be the best compromise.
A significant portion of the respondents is not interested in a video format requiring a lot of interactions.
The ideal duration of informative videos shows a preference for an experience of over 7 minutes with some dynamism.
The informative videos that work best are accompanied by animations and highlighted text.
A rather serious tone is to be favored.

Concept

We have designed a first version of the web documentary by delving into one of the 17 SDGs: SDG 5 "Gender Equality". The reason behind this choice is the current importance of the issue in Switzerland as well as our personal sensitivity to this topic.

We have come to consider that educating the target audience, of which we are a part, partly fulfills Durabilia's objectives. Therefore, we have imagined a solution as engaging as possible for the audience to involve them.

Therefore, the objectives of the web documentary are to educate and engage the audience on sustainability issues and redirect them to the Durabilia web game.

👉 SIMPLICITY

A user experience as simple as possible considering the significant portion of the target audience that is not familiar with the concept of a web documentary.

👉 IDENTIFICATION

An interview format involving speakers selected for both their expertise and their ability to evoke a sense of identification with our target audience.

👉 PROXIMITY

A direct and informative tone to add proximity and make the target audience feel more involved in the speakers' message.

👉 INTERACTION

User-selected question-answer formats

Scenario

In this web documentary, the user takes on the role of a newcomer to the Durabilia team and must gather information about the 17 SDGs to help develop a game based on them. They choose a theme within an SDG and conduct an interview with a real person involved in that theme. Then, they can decide to redo the interview differently or submit their research to their supervisor.

The scenario is based on real elements to be plausible, coherent, and interesting. Adding a story to this web documentary allows the user to feel immersed in the concept and identify with a role.

The scenario is reproducible and adaptable for all other SDGs, allowing for complete immersion for the user.

Shooting

During our shootings, we primarily chose to use a black and neutral background to create an intimate yet professional atmosphere and highlight the interviewees and their stories. We opted for multi-camera shots to add dynamism and offer a variety of angles. All these choices enhanced the visual quality of our documentary and its message.

Video editing

There were two types of content to edit: the interviews with the speakers on the four themes chosen within SDG 5 and the introductions, presentations, and general conclusions. We were mainly inspired by "Konbini"-style editing for the interviews and "In short" for the introduction videos.

The overall process involved logging the footage, formatting the sequences (for desktop and mobile), and synchronizing the sound with the images from the two cameras. Then, we moved on to the editing stage, which included selecting the most relevant music and speeches, alternating between the two or three camera angles, color grading, and adding special effects. Finally, we added subtitles, exported the videos in the correct format, and implemented them into the web documentary.

The introduction videos feature a person speaking directly to the user, explaining their role and providing various information about the SDGs, either facing the camera or in voice-over. There is also a picture-in-picture video containing multiple speakers discussing Durabilia and the 17 SDGs.

The interviews feature external speakers who "respond" to the user's questions. Moreover, they all start with a catchy phrase just before introducing the speaker, to engage the user and make them want to continue the experience.

Visual identity

We created a visual identity guide to give a visual identity to our future web documentary interface and to guide its concrete design by the developers.

Given that it has always been important to create a connection between our project and the 17 SDGs in our vision, we opted for a simple graphic charter, composed of neutral colors such as a range of grays.

The graphic elements clearly reflect the world of video platforms. The typography, on the other hand, was chosen based on its usage. We aimed to focus the project on an impactful writing style to engage the user.

Benchmark

To design the interface of our web documentary, we first conducted a benchmark on existing web documentaries and popular VOD platforms such as Netflix and Disney+, along with their most relevant features for our target audience.

Interface

We created interface mockups for both desktop and mobile versions, aiming to visualize the appearance of the interface and define typography, navigation, and ergonomics. These mockups were then used to develop the final version of the interface.

User testing

We conducted user tests, including think-aloud and semi-guided tests. The results showed that the clarity of the buttons was an issue and that there was inconsistent coherence between the menu screen and the interactions in the videos.

We iterated on the mockups, proposed two new versions, and retested. The key objectives were coherence and immersion.

Although the developers were unable to implement these versions due to time constraints, the results will help guide future steps of the project.

Development

For this web documentary, we developed several independent tools to facilitate the creation and structuring of interactive videos.

We first designed a user-friendly visual interface for importing videos into various projects and easily linking them together. To enable project playback, we then integrated a small API that provides projects readable by the computer in JSON format. Additionally, to play the projects and perform visual rendering, we created an interactive video player available in an NPM library: https://www.npmjs.com/package/@shammas44/interactive-video-player. Finally, we integrated this library into the final website.

In summary, the end user can easily and independently modify the photos, texts, and videos related to interactions.

All GitHub repositories related to this project are available via this link: 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 used :

For administration: TAL Stack, MySQL,
For the player library: JS Vanilla, WebComponent
For the final website: Angular, SCSS

Communication

The web-documentary can be adapted for various versions that can be reused to promote it on social media platforms.

Alternating Reels with impactful text and images.
Reels showcasing meaningful or emotionally impactful parts of interviews.
1-2 minute documentary teaser
Podcast recording all or part of an interview
Blog post revisiting a topic discussed during an interview.

We want users of the web documentary to reflect on the issue of sustainability, and for Durabilia to serve as a foundation, a starting point for this reflective process.

Instagram

71% of Instagram users are under 30 years old.
Ideal for visual content.
Allows to initiate a dialogue and to create and manage a community.

TikTok

78% of users are between 11 and 24 years old.
Great for humanizing the documentary and the Durabilia project by showcasing individuals.
Using a challenge related to the Durabilia game would foster excitement around the project.

YouTube

Boosts search engine optimization.
Go-to platform for videos.
Consistency in posting frequency and visual identity is key.

Snapchat

70% of users are between 15 and 24 years old in 2016.
Useful for presenting short videos in stories and featuring the long format in swipe up.
Exploiting the recurrence, even the redundancy, of publications.
Relevant filters

Future steps

Given the short time available for this project, just three weeks, we decided to focus on a single SDG, SDG 5. However, the web documentary we created is far from perfect and could be improved with the addition of other content.

First and foremost, it would be necessary to replicate the work done for the other 16 SDGs, meaning finding 2-6 themes to develop within each of them, interviewing relevant individuals, and producing the videos in both desktop and mobile formats.

Speaking of videos, there would be the possibility to revisit and improve the videos already produced, whether it's regarding color grading, sound, editing, subtitles, or format. For instance, the introduction videos couldn't be produced in vertical format due to time constraints; therefore, this would be the first major point to focus on.

It would also be necessary to improve and implement the developed interface. Indeed, as explained in the "UX" section, we found through initial user testing that it could be improved, especially regarding button clarity, the menu screen, and interactions within the videos.

Once this is done, the next steps would be to integrate it with the Durabilia project's game, finalize the online release, and potentially promote the web documentary on social media, as explained in the "Communication" section.

Conclusion

This project has allowed us to learn about collaboration within a team of 13 people. We have seen that in some cases, collective intelligence is very important for moving things forward and evolving.

We were also able to focus on the skill we wanted to deepen since all the necessary skills for the project were present within the group.

This project has been very enriching, especially because we were briefed on the potential reuse of our project later on.

BE MY SUPER ALARM CLOCK

by audrey.csikos@gmail.com | 16 Apr 2024 | Portfolio

The "Be My Super Alarm Clock" project was designed to transform the use of an alarm clock in everyday life. Primarily aimed at making the wake-up moment stronger, the application is targeted towards individuals who may find it difficult to get up in the morning. Either because they waste time on multiple alarm repetitions, or because the alarm isn't even heard.

The application can also be used for daily event reminders, ensuring that users never miss important appointments or tasks. This is the essence of "Be My Super Alarm Clock" – a "super" alarm that requires a unique action to stop the ringing.

Traditionally, an alarm clock rings at a set time and stops with the press of a button. "Be My Super Alarm Clock" goes beyond this and completely changes how the alarm is silenced. Selecting a wake-up sound requires users to perform a unique action to stop the ringing.

Context

The "Be My Super Alarm Clock" alarm application allows users to select a unique wake-up method. From a list of choices provided by the application, users select a wake-up method. The application then uses a unique and evolving alarm tone. "Be My Super Alarm Clock" goes even further, as the way to stop the alarm is unique depending on the chosen tone. This could involve performing a specific action with one's voice, a precise movement of the phone, or even applauding if the user selects the alarm set to Stand Up mode. In this last example, the alarm will play a tone featuring someone performing a Stand Up routine. The voice delivers jokes of questionable taste, and the user must physically applaud to silence the alarm.

TECHNOLOGIES

The application is feasible with current technology. Developing a mobile application for this concept is necessary. Initializing a different alarm tone based on the selection is straightforward. However, "Be My Super Alarm Clock" requires greater expertise in development to implement the various ways of stopping the alarm. Specifically, it requires the ability to develop movements on the X, Y, and Z axes. Additionally, the application needs to analyze the sound produced by the user to determine if the alarm stop sound has been executed correctly. Moreover, it is vital to have a smartphone capable of listening and analyzing sound, as well as detecting touch, gestures, and movements on the X, Y, and Z axes.