Projet 9 - Design d'interface
Maquette fonctionnelle
Créez un prototype interactif d'application. Cet atelier couvrira les étapes de design d'interfaces et d'expérience utilisateur.
✅ Remise
📁 Livrable final
1 - Co3pedia
Lien avec droits d'édition vers votre projet Figma comprenant :
Observations et questions
Fiche du projet
Wireframe basse fidelité
Moodboards
Prototype interactif
🧭 Objectifs
À la fin de cet atelier, tu auras développé ces compétences :
Analyser une interface existante et identifier ses problèmes UX
Structurer un diagnostic UX complet (frictions, ambiguïtés, navigation, lisibilité)
Formuler des questions pertinentes pour un client réel
Prototyper une interface interactive dans Figma
Justifier vos choix UX/UI lors d’une présentation finale
Cet atelier est basé sur un vrai projet client !
🏗️ L'atelier
Livrable final
Voir les détails dans la théorie ci-dessous.
🎓 La théorie
Observation de CO3PEDIA | Analyse UX
L'objectif ici est de comprendre les forces et les faiblesses de l'application avant d'y toucher. Nous pourrons aussi noter nos questions afin de les poser à notre cliente.
Ce que vous devez observer :
1. Navigation et structure
Où suis-je dans l’interface ?
Est-ce que je comprends comment revenir en arrière ?
Est-ce que les boutons sont logiques ?
Les options sont-elles groupées de manière cohérente ?
2. Clarté et lisibilité
Le texte est-il facile à lire ?
Comprends-tu ce que chaque bouton fait ?
Les étiquettes (labels) sont-elles claires ?
3. Logique des actions
Les actions que j’essaie de faire (créer une entrée, sauvegarder…) sont-elles intuitives ?
Y a-t-il des étapes inutiles ?
4. Frictions et irritants
Exemples de frictions typiques :
Trop de champs à remplir
Boutons mal positionnés
Interface trop chargée
Manque d’indications sur la progression
Pas de hiérarchie visuelle
5. Accessibilité et confort d’usage
Contraste suffisant ?
Icônes compréhensibles ?
Zones cliquables assez grandes ?
Résultat attendu
Chaque participant crée une liste d'observation détaillée, structurée, qu'on pourra ensuite valider en équipe.
Partage en équipe + Brainstorm
Chaque participant partage :
Ses irritants
Ses questions
Ses incompréhensions
Ses suggestions d'améliorations
Etc.
L'objectif est de créer une vision commune des problèmes majeurs, tout en laissant chaque participant libre de sa propre interprétation lors du redesign.
Préparation des questions pour la cliente
Vous devez préparer des questions pour la cliente :
Questions fonctionnelles
Questions techniques
Questions sur les objectifs réels de l'outil
Questions sur les utilisateurs cibles
Etc.
Ajoutez vos questions sous forme de commentaires sur Figma
Fiche du projet
Maintenant, rédigez une fiche de projet complète comprenant :
Objectifs de l'application
Public cible
Problèmes principaux identifiés
Objectifs du redesign
Wireframe basse fidelité
Avant de passer au visuel, commencez par créer un wireframe basse fidelité en pensant avant tout à :
Disposition des éléments
Hierarchie
Logique d'interactions
Options essentielles visibles
Boutons
Titres
Zones de saisie
Progression
Retours visuels (Feedback)
C'est le moment parfait pour vous questionner sur la pertinence de certaines options, voir si les champs sont aux bons endroits, etc. Profitez-en pour réduire le nombre d'étapes, simplifier les formulaires, retirer les distractions, améliorer la clarté de chaque action et garantir la cohérence globale.
Moodboard
Comme pour la majorité des projets créatifs, un moodboard permet de s'assurer que la direction artistique envisagée plaît à la cliente. Créez donc 3 moodboards.
Prototype
Créez maintenant toutes les fenêtres et composants de votre projet
Interactivité
Rendez maintenant le tout interactif
Navigation simple
Actions essentielles
Boutons fonctionnels
Retour en arrière
Hover effects si une action est possible
Présentation finale
Préparez une présentation comme si vous présentiez votre projet à la cliente. Cette présentation doit comprendre :
Problèmes identifiés
Logique UX retenue
Wireframe
Prototype interactif
Justification des choix
Évolutions possibles
Utilisation obligatoire de Figma Slides !
🛠️ Ressources
Voici quelques ressources pertinentes :
Le gabarit de remise est ici : GABARIT