Bonjour ! Comment s’est passée ta journée ? Pour ma part, je commence à bien récupérer après plusieurs nuits de sommeil réparateur. Je dois dire que l’application Garmin avec ma montre connectée m’aide beaucoup à suivre mes performances et ma récupération. L’autonomie de 10 jours est un vrai plus, ça évite la corvée de recharge quotidienne !

Aujourd’hui, deux points importants à retenir. Après la partie théorique du matin, j’ai voulu me lancer dans un exercice pratique pour mieux maîtriser Figma. Plutôt que de retravailler directement l’interface de ContactHive, j’ai décidé de reproduire le feed basique d’Instagram.

J’ai pris des images sur Figma et me suis amusé à recréer l’interface (image de droite la copie). Certains éléments, je les ai copiés directement, d’autres je les ai créés from scratch pour mieux comprendre le fonctionnement de l’interface Figma. C’est un excellent exercice que je compte répéter toute la semaine prochaine pendant ma formation HIG (Human Interface Guidelines). Cela me donnera plus de confiance pour les projets de portfolio à venir.

# Apprentissages du jour

## Les différents rôles dans le design UX

Quand on se lance dans une carrière de designer UX, il existe plusieurs spécialisations selon la taille des équipes et l’importance des projets.

### UX Designer

Le rôle le plus polyvalent qui englobe la plupart des tâches :

• Conduit les recherches utilisateur
• Crée le mapping du parcours utilisateur
• Analyse l’architecture d’information
• Crée des wireframes et prototypes
• Exécute des tests d’utilisabilité
• Analyse les données utilisateur
• Collabore avec les équipes fonctionnelles
• Prend en compte l’accessibilité
• Entretient le design system

### UI Designer

Responsable de la forme de l’interface et de la vision du produit. Il se concentre sur l’aspect visuel et l’interaction directe avec l’utilisateur.

### Rôles spécialisés dans les grandes équipes

Visual Designer (ou Graphic Designer) Crée des éléments visuels spécifiques : icônes, logos, bannières, posters et présentations.

Product Designer La tête pensante qui résout les problèmes produit et dirige l’équipe. Il est engagé dans les cinq phases du design thinking (comme le UX Designer).

Information Architect Organise et catégorise le contenu pour aider l’utilisateur à naviguer de manière cohérente. Responsable de la stratégie de contenu.

Motion Designer Responsable des éléments animés : storyboards, mouvements, modèles 3D, particules et animations.

Interaction Designer Se concentre sur chaque interaction spécifique, contrairement au UX designer qui a une vision globale. Il définit et paramètre chaque mouvement de l’application.

UX Researcher Parle aux clients, s’occupe des tests utilisateur et des interviews. Doit avoir de solides connaissances en psychologie utilisateur.

UX Engineer Combine les compétences de design avec le codage. Fait le pont entre les équipes de design et de développement.

Illustrateur Crée des illustrations et peut être responsable des écrans d’onboarding.

UX Writer S’occupe de tout le contenu écrit dans les produits digitaux : boutons, headlines, punchlines.

## Livrables en Design

### Livrables visuels

Mood Board Premier livrable montré aux stakeholders pour s’aligner sur la charte visuelle. Contient logos, palettes de couleur, images, sketches et autres assets pertinents.

Type System Système typographique qui assure la consistance dans le design. Doit être :

• Aligné avec la marque et l’audience
• Limité à 2 ou 3 typefaces maximum
• Structuré avec une bonne hiérarchie
• Prioriser la lisibilité
• Cohérent au niveau des espaces
• Coordonné avec le design system

Color System Ensemble de couleurs utilisées partout dans le produit. Essentiel pour créer de la cohérence et de l’engagement utilisateur. Important de tenir compte de la psychologie des couleurs.

Design System Collection de patterns de design, best practices, snippets de code et guides de style. Kit unifié qui assure :

• La consistance du projet
• Une meilleure collaboration
• Une efficacité accrue
• L’alignement sur l’identité de marque

Grid System Permet d’aligner le contenu grâce à un système de colonnes.

Icons Set Collection de symboles et d’images pour garantir la cohérence visuelle.

### Livrables d’expérience utilisateur

Mind Map Système en arbre pour identifier les relations et comprendre les besoins utilisateur.

Personas Utilisateur Modèles fictifs pour émettre des hypothèses. Important de se baser sur des utilisateurs réels pour les produits finaux.

User Flow Visualisation end-to-end du parcours utilisateur dans le produit. Permet de mapper toutes les décisions possibles.

Storyboard Version bande dessinée des visualisations du produit, contenant scénarios, visuels et captions.

Customer Journey Map Similaire au user flow mais orienté sur l’émotion et l’expérience comportementale de l’utilisateur.

Experience Map Aide à comprendre le comportement utilisateur de manière générale sur son trajet vers l’objectif.

Empathy Map Basée sur les émotions utilisateur avec quatre composantes : “says” (dit), “thinks” (pense), “does” (fait) et “feels” (ressent).

Service Blueprint Vue générale du service delivery concernant le produit.

Site Map Structure hiérarchique de l’application pour définir les relations entre éléments.

Wireframes low-fidelity designs

Prototypes high-fidelity designs avec interactions pour les phases initiales et finales du projet.

Usability Reports Résumés des découvertes et pistes d’amélioration. Important d’éviter le jargon technique pour la compréhension des stakeholders.

## UX Copy et Micro Copy

Tous les petits textes qui accompagnent les éléments UI. Éléments clés pour un bon UX copy :

• Éviter les commentaires vagues
• Être spécifique (“Soumettre paiement” au lieu de “Soumettre”)
• Éviter les doubles négations
• Tourner le négatif en positif
• Éviter les politesses extrêmes
• Ne pas surutiliser le nom de marque
• Utiliser la voix active
• Être concis
• Utiliser les chiffres en chiffres

### Règles de mise en forme

• Première lettre en capitale : pour les CTA (Call to Actions)
• Sentence case : première lettre de phrase en majuscule pour les tips et sous-titres
• Tout en majuscules : pour mettre un texte en évidence (à utiliser avec modération)

## Processus de Design et Méthodes de Recherche

### Design Sprint

Aide à développer des idées rapidement en 5 étapes d’une journée chacune :

1. Mapping : cartographie du problème
2. Sketching : esquisses de solutions
3. Deciding : prise de décision
4. Prototyping : création de prototypes
5. Testing : tests utilisateur

### Double Diamond

Approche plus structurée et itérative avec 4 étapes :

1. Discover : explorer le problème et rechercher des informations
2. Define : cristalliser le problème pour arriver à une solution
3. Develop : créer des solutions et le design
4. Deliver : finaliser et tester la solution

### Tests et Audits

A/B Testing Primordial de tester une seule fonctionnalité à la fois pour des résultats pertinents.

UX Audit Objectif principal d’identifier les problèmes et fournir des recommandations pour améliorer l’expérience utilisateur.

## Architecture d’Information

### Quatre types de systèmes de navigation

1. Global : présent sur chaque page
2. Local : comme une barre de navigation
3. Contextuel : recherches associées, suggestions
4. Supplémentaire : sitemap, index, guides, barre de recherche

### Système Matrix

Structure en réseau permettant à l’utilisateur de naviguer librement, comme dans Obsidian, Uxcel ou Wikipedia. Important de mettre des garde-fous pour éviter que l’utilisateur se sente perdu.

À demain pour de nouveaux apprentissages !