Refonte de l'expérience utilisateur : Une étude de cas sur les améliorations du site web et de l'application mobile

Hugo, le créateur de escape-games.net, est le premier participant. Son site web permet aux utilisateurs d'organiser des escape games à la maison. Son objectif est d'améliorer l'expérience utilisateur en remplaçant les indices imprimés par une application mobile qui gère les positions des indices en utilisant la réalité augmentée.

Le design actuel comprend une section verte et plusieurs versions de la page d'accueil. Plusieurs erreurs et domaines d'amélioration ont été identifiés, en mettant l'accent sur la refonte de la page d'accueil pour qu'elle soit claire et attrayante pour les utilisateurs entrant dans l'univers du jeu Escape.

Les améliorations de conception proposées comprennent la suppression de la barre d'onglets pour simplifier la navigation, le déplacement du bouton de compte et de la fonction de recherche, et l'adoption d'un thème de couleur sombre pour mettre en valeur les visuels. Suggéré une interface monochrome pour éviter les conflits de couleurs avec différents univers de jeux.

Informations redondantes telles que le titre, la catégorie et l'âge ont été identifiées à l'écran. L'importance de réorganiser les informations par hiérarchie et regroupement logique a été soulignée. Il a été mis en avant la nécessité de prioriser les informations essentielles pour les utilisateurs et d'améliorer la lisibilité en évitant le texte centré.

Le débat sur l'alignement du texte se pose, avec une préférence pour le texte aligné à gauche plutôt que justifié. Le texte aligné à gauche est considéré comme plus visible en raison de l'espacement irrégulier dans le texte justifié, créant des lignes blanches verticales appelées "rivières blanches" qui perturbent la lisibilité. Le texte justifié rend la navigation plus difficile et provoque une fatigue visuelle, surtout en ligne où la lecture diagonale est courante.

Le conférencier discute d'une stratégie de bouton d'appel à l'action pour un jeu, optant pour un seul bouton 'JOUER' au lieu de deux boutons séparés pour la démo et l'achat. Cette approche consolidée vise à améliorer la clarté et l'accessibilité, en garantissant une expérience utilisateur plus fluide en révélant les options de démo ou d'achat via une fenêtre contextuelle après avoir cliqué sur le bouton 'JOUER'.

Le conférencier utilise Figma pour créer un prototype de design, en mettant l'accent sur la suppression de la barre d'onglets et le placement des icônes pour le compte, la recherche et la participation aux jeux en haut. Le processus de conception implique une réflexion sur l'utilisation d'une pile, d'un carrousel ou d'un curseur pour l'illustration du jeu, avec des améliorations supplémentaires prévues ultérieurement.

Le conférencier mentionne l'utilisation du Samsung Galaxy Book 4 Pro pour le travail de conception, mettant en avant sa finesse, sa légèreté et sa batterie longue durée. Le processeur Intel Core de l'appareil est loué pour ses capacités de multitâche et de génération d'images, mettant en valeur son utilité dans des tâches de conception telles que la suppression de texte des images et la création visuelle pour divers scénarios.

Le conférencier utilise des techniques d'amélioration visuelle en dupliquant et en floutant des images pour créer une ambiance colorimétrique sur la page. Cette méthode améliore l'immersion et modifie dynamiquement le schéma de couleurs de la page en fonction de l'image affichée. De plus, le conférencier positionne les éléments d'information suivant une mise en page filaire, comprenant des titres, des tags, de courtes descriptions, des chiffres importants et des jauges de difficulté.

Le conférencier réalise des tests de prototype en dupliquant l'espace de travail et en créant une page pour un autre jeu, 'Mystères de Noël'. Des liens de prototype animés sont établis entre les pages, affinant les paramètres pour des transitions fluides et des animations fluides. Une page de connexion avec une animation visuellement attrayante est également ajoutée, présentant les résultats finaux de la refonte pour un projet de jeu d'évasion.

Jérôme, pas du monde de la technologie, a créé une application de paris sportifs en utilisant Figma et Flutter. Il cherche des retours et des suggestions de redesign pour son application appelée PFR. La signification de PFR reste secrète, suscitant des spéculations de la part des spectateurs.

Deux domaines principaux d'amélioration dans l'application de Jérôme sont identifiés : des composants d'interface flous et incohérents et la structure de navigation de l'application. Le problème des ligues, des prédictions, des classements et du chat étant au même niveau dans la hiérarchie de l'application pose un défi qui nécessite une résolution.

Une solution suggérée consiste à placer la sélection de la ligue en haut à gauche de l'écran, à l'instar de la façon dont la sélection de l'emplacement influence les options disponibles dans des applications comme Deliveroo ou UberEats. Cet affichage hiérarchique vise à résoudre le problème de la visibilité de la ligue dans la structure de l'application.

Le processus de conception impliquait d'affiner la mise en page de l'application sur Figma, en incorporant une barre d'onglets en bas et une sélection de ligue en haut à gauche. L'expérimentation avec les couleurs a conduit à une décision spontanée de dessiner à la main des icônes directement sur l'écran pour une sensation plus engageante et authentique, améliorant l'ambiance amusante et décontractée de l'application.

Le Samsung Galaxy Book Pro, avec son écran vibrant et anti-reflet, a facilité le prototypage en extérieur malgré les conditions de lumière du jour. Les fonctionnalités de l'appareil, y compris de nombreuses options de connectivité et une webcam Full HD, contribuent à une productivité accrue. Les acheteurs peuvent trouver les détails d'achat du produit chez FNAC.

Le conférencier exprime sa gratitude à Samsung pour avoir soutenu leur travail, mentionnant comment les icônes dessinées à la main ont aidé à libérer leur créativité dans la conception de divers éléments.

Se rendant compte de la nécessité pour une application d'avoir des couleurs différentes en fonction des ligues pour une navigation plus facile, l'orateur a décidé d'incorporer différentes couleurs pour différencier efficacement les sections.

Le conférencier discute du processus de création de zones de prédiction dans l'application, y compris les états pour faire des prédictions et visualiser les prédictions déjà remplies.

Pour attirer l'attention des utilisateurs, le conférencier a ajouté des balayages brillants sur les prédictions à faire, dans le but d'engager efficacement les utilisateurs.

Damien et son équipe ont développé Georide, une solution pour connecter les motos afin de prévenir le vol, suivre les trajets sur une carte et rassurer les proches lors des sorties en moto.

Le conférencier donne un retour sur l'application Georide, mettant en avant des problèmes tels que des libellés d'onglets peu clairs, des éléments trop décoratifs et un besoin de se concentrer sur les informations essentielles plutôt que sur un design excessif.

Le conférencier expose les améliorations prévues pour Georide, notamment la création d'une barre d'onglets plus propre, une meilleure hiérarchie de l'information, la simplification des éléments de design pour la confiance de l'utilisateur et l'amélioration de l'interactivité.

Le conférencier invite les téléspectateurs à soumettre leurs sites web ou applications pour une refonte en s'abonnant à la chaîne, en aimant la vidéo et en envoyant leurs candidatures par e-mail.

Le conférencier décide de travailler sur un design de carte plus minimaliste en utilisant Sneezy Maps pour générer une nouvelle apparence de carte. En ajustant les paramètres, ils créent une carte déroulante dans Figma avec une animation de cercle pulsante à des fins de suivi.

Le conférencier simplifie la conception de la barre d'onglets en utilisant des icônes fines de la bibliothèque Material Design et en ajoutant des étiquettes pour plus de clarté. Ils ajustent également les couleurs et passent du orange au noir pour un aspect plus professionnel et rassurant.

Le conférencier se concentre sur l'animation de la transition d'une petite carte fermée à une grande carte ouverte, en veillant à ce que la photo de la moto ne soit pas trop grande. Ils donnent la priorité aux actions importantes pour hiérarchiser efficacement les informations.

Le conférencier aime travailler sur la visualisation des données pour l'écran des statistiques, mettant en avant les statistiques sur de grands en-têtes et des icônes d'illustration. Ils améliorent également l'accessibilité en déplaçant les détails des voyages cachés dans un onglet séparé dans la barre d'onglets.