UX / UI - Design et optimisation de l'expérience utilisateur pour des sites internet performants

• Identifier la stratégie d’un projet digital
• Conceptualiser des prototypes de navigation
• Appliquer les phases méthodologiques UX / UI sur un projet web 

1- QU’EST QUE LE DESIGN D’EXPÉRIENCE UTILISATEUR ?

• Concept et objectif du design
• Origines du design UX
• Différencier UI et UX

2- OBJECTIFS DE L'EXPÉRIENCE UTILISATEUR

• Objectifs du site
• Objectifs des utilisateurs
• Qui, pourquoi, comment ?

3 - INTÉGRER L’UX DANS UN PROJET WEB

• Intégrer l’expérience utilisateur
• La problématique
• La conception de sites est une discipline pluridisciplinaire
• La méthodologie UX

4- LES TESTS UTILISATEURS

• Objectifs de la conduite de test
• Que teste-on ?
• Quels types de tests ?
• Conduite des tests
• Points importants à respecter

5- LE COMPORTEMENT DES UTILISATEURS

• À qui s’adresse-t-on ?
• Étudier le public cible
• Créer un persona

6- APPLICATION DANS UN PROJET WEB E-COMMERCE

• L’utilisateur
• Le contexte
• Identifier les différents points de contact
• Le parcours utilisateur
• La persuasion et les dark patterns
• Aider et guider l’utilisateur
• Optimiser les interactions
• Le rebond
• La preuve sociale
• L’accessibilité 

7- AMÉLIORER LA NAVIGATION

• Navigation axée produit versus navigation axée utilisateur
• L’arborescence
• Cas pratique : faire un tri de carte
• Principes
• Classer le contenu disponible
• Améliorer les menus de navigation
• Offrir une fonction de recherche performante
• Utiliser les FAQ
• Profiter des avantages des smartphones

8- OPTIMISER LA MISE EN FORME

• La charte graphique
• Points à optimiser
• La ligne de flottaison

9- CIBLAGE CLIENT - ATELIER PERSONA

• Ajustement entre besoin du commanditaire et persona
• Atelier persona avec Figma / FigJam

10- CONCEPTS UX/UI DESIGN

• Principes généraux de l’UX Design pour des sites web
• Différents composants d’un site web
• Principes ergonomiques

11- FIGMA

• Création du projet Figma
• Découvrir l’interface Figma :
• Mise en forme des éléments : le panneau Design
• Gestion avancée de mise en forme : le mode auto-layout
• Création de composants figma
• Ajout d’interactivité aux éléments : interaction utilisateur : déclencheurs et animations
• Création d’un wireframe simple de site web
• Création d’une maquette graphique simple de site web
• Le panneau Prototype
• Créer une connection entre deux frames
• Visualiser le prototype
• Exportation et partage