# UX - Améliorer l'Éxpérience Utilisateur ## 1 Introduction à l'UX --- ### Qu'est-ce que l'UX ? - **Optimiser l'expérience utilisateur** : Adapter le site pour répondre aux besoins et attentes des utilisateurs. - **Analyser** le comportement des visiteurs, **définir** leurs attentes, et **satisfaire** ces besoins pour une meilleure conversion. - **Objectifs UX** : Pertinente, intuitive, simple, assistée. --- ### UI vs UX | UI (User Interface) | UX (User Experience) | | ---------------------- | ------------------------- | | Interface visuelle | Parcours utilisateur | | Design et interactions | Ergonomie et satisfaction | | Conception graphique | Analyse du comportement | - **Différence clé** : L'UI est ce que l'utilisateur voit, l'UX est ce qu'il ressent. --- ## 2 Recherche et Analyse --- ### Comment mettre en place l'UX ? - **Processus itératif** : Tester, analyser, corriger, recommencer. - **Étapes clés** : - **Avant le développement** : Analyse des objectifs et compréhension des utilisateurs. - **Pendant le développement** : Ajustements basés sur les retours utilisateurs. - **Après le développement** : Tests finaux pour valider l'efficacité UX. --- ### Organiser et tester le contenu - **Hiérarchisation** : Définir, catégoriser, tester. - **Méthode** : Tri de cartes pour valider la structure avec les utilisateurs réels. - **Outils** : [Optimal Workshop](https://www.optimalworkshop.com/) , [Octopus.do](https://octopus.do/) ![Carte](https://i.imgur.com/svTk1DX.png) --- ## 3 Définition et Architecture de l'Information --- ### La taxonomie du site - **Arborescence horizontale** : Limiter les sous-catégories. - **Plan de site dynamique** : Utile pour les utilisateurs et le SEO. - **Exemples** : Arborescence pour e-commerce et blog. ```mermaid graph TD Accueil --> Produit Accueil --> About(A propos) Accueil --> SAV Accueil --> FAQ Accueil --> Contact Produit --> Catégorie1 Produit --> Catégorie2 Produit --> Catégorie3 Catégorie1 --> Produit1 Catégorie1 --> Produit2 Catégorie2 --> Produit3 Catégorie2 --> Produit4 Catégorie3 --> Produit5 Catégorie3 --> Produit6 ``` --- ### Organiser le contenu par catégorie - **Définir le contenu** : Produits, services, articles de blog, témoignages. - **Catégoriser** : Groupes logiques adaptés à l'audience. - **Hiérarchiser** : Prioriser les informations essentielles. --- ## 4 Design et Prototypage --- ### Créer des prototypes - **Modéliser la structure** : Tri de cartes, arborescences, wireframes. - **Définir le graphisme** : Respect de la charte graphique, maquettes graphiques. - **Valider les parcours** : Tester interactions, identifier points de friction. - **Guider le développement** : Spécifications claires, choix technologiques. --- ### Eye Tracking (Oculométrie) - **Optimisation visuelle** : Positionner les éléments selon les zones les plus regardées. - **Prendre en compte la ligne de flottaison** : Les éléments importants doivent apparaître au-dessus de cette ligne. - **Bonnes pratiques** : - Navigation cohérente - Repérage évident - Sobriété visuelle - Structure monocolonne - Images avec `alt` et légendes - Interactions facilitant le contact et le partage ![Priorités](https://i.imgur.com/ZRIs4iv.png) ![Eye Tracking](https://i.imgur.com/NcHmbT1.png) --- ## 5 Développement et Implémentation --- ### Les outils de recherche - **Positionnement stratégique** : Barre de recherche près du menu principal. - **Recherche prédictive** : Suggestions automatiques. - **Filtres de résultats** : Affiner la recherche par catégories, dates, prix. --- ### Le menu de navigation - **Termes clairs et non-ambigus** - **Menus mobiles** : Menu hamburger avec étiquette "Menu". - **Ergonomie mobile** : Accessibilité avec une seule main. - **Zone de confort mobile** : Placement ergonomique pour interaction au pouce. ![UX](https://i.imgur.com/SnmHTCH.png) --- ### Les liens hypertextes - **Prédictifs et identifiables** : Texte clair, infobulles. - **Boutons distincts** : Couleurs contrastées, texte explicite. - **Boutons interrupteurs** : Codes de couleur (rouge/désactivé, vert/activé). ![Boutons explicites](https://i.imgur.com/O6Cz203.png) --- ### Plan de site - **Sitemap** : Utile pour SEO et utilisateurs. - **Outils recommandés** : [visualsitemaps.com](https://www.visualsitemaps.com/) --- ## 6 Interaction et Engagement --- ### Aide en ligne - **Aide contextuelle** : FAQ, chatbots, contact direct pour résoudre les problèmes rapidement. - **Moteur de recherche interne** : Facilite la recherche d'informations dans la FAQ. --- ### Les formulaires - **Simplicité et concision** : Phrases courtes, labels clairs. - **Formulaire dynamique pas à pas** : Étapes claires. - **Gestion des erreurs** : Validation en temps réel, messages proches des champs. ![Formulaire One Page](https://i.imgur.com/7j9qUKm.png) ![Validation](https://i.imgur.com/RvsqCUs.png) ![Formulaire dynamique](https://i.imgur.com/464Y0xr.png) ![Validation dynamique](https://i.imgur.com/XQc97e6.png) --- ## 7 Optimisation et Monétisation --- ### La boutique - **Création de compte en fin de processus** : Faciliter l'achat. - **Réduction des abandons de panier** : Processus simplifié, rappels par email. --- ### Les annonces publicitaires - **Deux modèles économiques** : Vente de produits/services ou annonces publicitaires. - **Mix publicitaire** : - **Contenu unique** : Acceptation des publicités. - **Contenu de valeur** : Caution du support pour la publicité. - **Contenu régulièrement mis à jour** : Incitation à revenir. - **Bonnes pratiques** : - Publicités honnêtes : Non intrusives, non déguisées. - Publicités pertinentes : Ciblage adapté, remarketing. ![Annonces Publicitaires](https://i.imgur.com/2fBUhQq.png) --- ### La Landing Page - **Conversion** : Transformer un clic en action. - **Éviter le rebond** : - Limiter distractions visuelles - Peu de texte et de couleurs - Options limitées - **Optimiser le taux de conversion** : - Crédibilité : Témoignages, labels - Proposition claire - Garanties - Formulaires courts ![Landing Page](https://i.imgur.com/A6V5fHH.png) ![Gating](https://i.imgur.com/zTYMIU2.png) --- ## 8 Rédaction et Contenu --- ### L'édition - **Processus de lecture** : - Lecture non linéaire – balayage - Recherche de points d'entrée - Abandon sur les lignes trop longues - **Règles d'or** : - Écriture concise : Phrases et mots simples, paragraphes courts. - Écriture structurée : Plan clair, titres hiérarchisés, listes. - Écriture objective : Contenu factuel, neutralité. - **Écrire pour informer** : - Simplifier la structure - Limiter les niveaux de titres (3 max) --- ## 9 Conclusion --- - **Synthèse des bonnes pratiques** : Navigation claire, contenus optimisés, accessibilité, interactions facilitées. - **Importance de l'UX** : Amélioration continue pour fidéliser et convertir les utilisateurs. - **Encouragement à l'itération** : Tester régulièrement et adapter en fonction des retours utilisateurs. ---