Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/camara94/uxpourleweb

UX design is a still a relatively new field, with many companies only just waking up to the fact that they need someone on their payroll if they want to succeed in attracting and retaining customers.
https://github.com/camara94/uxpourleweb

creativity ui ui-design ui-testing ux ux-design ux-experience ux-framework ux-ui

Last synced: about 1 month ago
JSON representation

UX design is a still a relatively new field, with many companies only just waking up to the fact that they need someone on their payroll if they want to succeed in attracting and retaining customers.

Awesome Lists containing this project

README 

        
# L'UX pour le design web



Dans cette formation de Didier Mazier, vous apprendrez à améliorer et à optimiser l'expérience utilisateur (UX, User eXperience) de votre site web commercial. Après avoir abordé les principes de base, vous étudierez et vous tiendrez compte du comportement des utilisateurs ainsi que de leur parcours lors de leurs visites. Vous verrez comment soigner et optimiser la structure, la navigation, le design et l'aspect du site et de ses contenus texte et graphique. Enfin, vous vous pencherez sur un autre aspect important de l'UX, à savoir les techniques d'acquisition et de fidélisation des clients.



## Le Programme De Ce Cours

### Depasser Les Aspects suivants 

![aspect](images/aspectgraphique.png)



### Les Principes Aborder Dans Ce Cours

![principes](images/principes.png)



### Application Des Pratiques

![pratiques](images/pratiques.png)



### Approche Centré Produit VS Utilisateur

![centre](images/centreutilisateur.png)

### Optimiser La Structure Et La Navigation

![navigation](images/optimiserlastructure.png)



### Vérifier Les Points Clés

![pointscles](images/pointcles.png)



## Distinguer UI Et UX



### Qu'est L'UI

![ui](images/ui.png)

### Qu'est L'UX

![uX](images/ux.png)



### Les Axes de L'UX

![axes](images/axes.png)



## Objectif de UX

### Les Objectifs Des Sites

![objectifs](images/objectifdesites.png)



### Les Objectifs De L'Utilisateur

![objectifs](images/objectifutilisateur.png)



### Scénario: Les Bases

Pour repondre à un problème d'UX, nous devons segmenter le travail (Qui ?, Pourquoi?, Comment ?) et repondre à ces questions:

1. Qui sont nos utilisateurs ?

2. Pourquoi viennent-ils sur notre site et quel est le problème qu'ils veulent répondre ?

3. Comment vont-ils se comporter sur notre site ou à l'exterieur de notre site(réseaux, ....), quelle fréquence, quel va être leurs modes de visite ?

4. C'est ainsi que nous allons pouvoir faire émerger les objectifs de nos utilisateurs

   

![scenario](images/scenario.png)



## Intégrer UX Dans Un Projet Web

### Problématique

la création d'un site web fait  face à des problèmes reccurents et souvent répétitifs

![probleme](images/problemedeprojetweb.png)



### Solution

La création d'un site web fait intervenir une équipe pluridisciplinaire, donc le rôle de l'UX va être l'intégration des diffrentes compétences avec une approche centré sur les bésoins de utilisateur.



![approche](images/approchecentreutilisateur.png)



L'UX va également faire travailler les différentes équipes en parallèle pour éviter les effets de silo



![parallele](images/parallele.png)

### illustration

![enchainement](images/enchainementdetravail.png)

![uxintregre](images/uxintregre.png)



### Avantages

![avantages](images/avantageux.png)



## Conduire Des Tests

On mesure les aspects suivants:

1. le nombre de succès d'utilisation du produit

2. le nombre d'echecs d'utilisation du produit

3. le taux d'erreur

4. la facilité d'utilisation

   

![mesure](images/mesure.png)

### Type de tests

Nous allons faire nos tests sur les éléments suivants:

1. le contenu

2. la forme

3. le parcours

![test](images/typedetest.png)

Il y a également ce genre de test

![test](images/typedetest2.png)

### Conduite De Tests

![conduite de test](images/conduitedetest.png)

### Organisation Des Tests

![organisation des test](images/organisationdestest.png)



## Prototyper Sur Papier

### Trier De Carte

![prototypepapier](images/prototypesurpapier.png)

### Prototype Sur Papier

![prototypepapier](images/prototypesurpapier2.png)



## Logiciel de Prototypage

![solution](images/logicielux.png)



## Comprendre Le Comportement Utilisateur

### Etudes

![etude](images/etude.png)

### Statistique

![statistique](images/statistique.png)

### Persona

Pour bien comprendre nos utilisateurs, il va falloir créer des persona:

c'est à dire des profiles de segments significatifs

1. Socio-démographiques 

    * l'âge

    * niveau d'études

    * profession

    * situation familiale

    * l'habitat...

2. Comportementales

    * quelles sont les motivations

    * quelles sont les attentes

    * quel est le niveau technologique de notre cible

    * comment il va s'exprimer avec quel langage

3. Problème

    * quels sont ses objectifs

    * quelles sont ses frustrations

4. Points de contact

    * où nous allons entrer en contact avec ce persona

    * quels sont les media qu'il semble fréquenter

    * quels sont les réseaux sociaux qu'il fréquence le plus souvent

    * quelle est appartenance à des groupes (réligieux, politique, raciale, ....)


![person](images/persona.png)

###  Vision Claire

![vision](images/vision.png)



### Organisation Du Processus

![processus](images/organisationprocessus.png)



## Concevoir Pour Toutes Les Générations

![genration](images/concevoirpourtoutesgeneration.png)

### Analyse Générationnelle

1. Technique/physiques liées à l'âge

   * la baisse de la vision

   * la baisse de la mobilité, 

   * ...

2. Sociétales

   * quel est le status professionel(actif ou retraiter)

   * le genre

   * l'habitat

   * l'éducation

   * ...

3. Générationnelles

   * quels sont les modes de pensés et d'actions communes à un groupe d'âge liées la position dans le temps de la génération à quelle va appartenir l'individu.



### Génération

![generation](images/generation.png)

### Plages Des Générations

![plage](images/plagedegeneration.png)

## Comprendre Les Attentes Des Générations Boomers

![boomers 1](images/boomers1.png)

![boomers 2](images/boomers2.png)

![boomers 3](images/boomers3.png)

![boomers 4](images/boomers4.png)

## Comprendre Les Attentes Des Générations X

![x 1](images/x1.png)

![x 2](images/x2.png)



## Comprendre Les Attentes Des Générations Milléniaux

![Milléniaux 1](images/milleniaux1.png)

![Milléniaux 2](images/milleniaux2.png)

![Milléniaux 3](images/milleniaux3.png)



## Comprendre Les Attentes Des Générations Z

![z 1](images/z1.png)

![z 2](images/z2.png)

## Comprendre Les Attentes Des Générations Alpha

![alpha 1](images/alpha1.png)

![alpha 2](images/alpha2.png)

## Les points De Contact

![lespointsdecontact](images/pointdecontact.png)



## Appréhender Le Parcours Utilisateur

### Le Parcours Client

![parcoursclient](images/parcoursclient.png)

### Les Etapes Du Parcours Client

![etape](images/etapesparcoursu.png)

### Les Stratégies A Mettre en place

![strategies](images/strategies.png)

### La Carte d'Expérience

![carteexperience](images/carteexperience.png)

## Distingguer Le Parcours Et Séquences



### Parcours Pour L'Utilisateur

![utilisateur](images/parcoursutilisateur.png)

### Penser << Séquences >>

![penser sequences](images/pensersequences.png)



### Options Claires

![optionsclaires](images/optionsclaires.png)

![optionsclaires](images/optionsclaires2.png)

### Micromoment

![micromoment](images/micromoment.png)

### Engager Les Clients Au Micromoment

![engager](images/engagementmicromoment.png)

## Employer La Persuasion Et Les Dark Patterns

### Définition du Dark Pattern

![definition](images/darkpattern.png)

### Notion De Zone Grise

![zonegrise](images/notiondezonegrise.png)

![zonegrise](images/notiondezonegrise2.png)

![zonegrise](images/notiondezonegrise3.png)

![zonegrise](images/notiondezonegrise4.png)

![zonegrise](images/notiondezonegrise5.png)



### Où Placer La Limite ?

![limite](images/placerlimite.png)

![limite](images/placerlimite2.png)

### Critères de Persuasion

On doit se baser sur les critères suivants pour trancher avant de proceder à la persuation


![critere](images/criterepersuation.png)



## Guider L'Utilisateur

![guider](images/guideruser.png)

### Onboarding

![onboarding](images/onboarding.png)

### Pour Réussir Onboarding

![reussironboarding](images/reussironboarding.png)

### Guider Un Utilisateur Quand

![quandguider](images/guiderquand.png)

### Où Et Comment Guider L'Utilisateur

![ouetcomment](images/ouetcommentguider.png)

### Apprentissage Et Intuitivité

![apprentissage](images/apprentissageintuivite.png)



## Solution Guider Utilisateur

![guidersolution](images/soulutionguider.png)

## Soigner Les Interactions

### Etablir Des Ponts

![ponts](images/ponts.png)

### Penser <>

![penserm](images/pensermulticanal.png)

## Comment Employer Les Modals

![modal](images/modal.png)

### Avant L'Accès Au Contenu

![modal](images/modalavantaccess.png)

### Conditionner L'Accès 

![conditionneraccess](images/conditionneracces.png)

### Susciter Le Feedback

![feedback](images/feedback.png)

### Promotion 

![promouvoir](images/promouvoir.png)

## Comprendre Les Causes De Rebond



### Insatisfaction

![rebond](images/insatisfaction.png)

### Cause D'Insatisfaction

![cause](images/causeinsatisfaction.png)



### Autres Causes

1. Une navigation trop complexe basée sur l'organisation de l'entreprise, soit sur son catalogue

   ![nav](images/nav1.png)

2. Une navigagiton éparpillé avec des menu un peu partout

   ![navfrag](images/navfrag.png)

3. Une arborescence atomisée c'est à dire qui va diviser la navigation dans un souci d'organisation

   ![navatom](images/navatom.png)



4. Des média intrusifs qui vont s'introduire automatique vont perturber l'utilisateur et cela va interrompre son cheminement et finalement, il va quitter votre site

   ![navmedia](images/navmedia.png)

5. La présence des barrières qu'on appelle en développement web getting qui permet d'obtenir des informations sur les utilisateurs en échange de contenu c'est quelque chose qui donne une mauvaise réputation

   ![getting](images/gettingweb.png)

6. La mauvaise lisibilité comme l'usage de plusieurs couleurs, petite taille de police, ...

   ![lisiblite](images/lisibilite.png)



## Gérer Les Preuves Sociales

### Le Bouche A Oreille

![boucheaoreille](images/boucheaoreille.png)

### Réduire L'Incertitude

![incertitude](images/reduireincertitude.png)

### Réseaux Sociaux (Arme A Double Tranchant)

![arm](images/armeadoubletranchant.png)

### Montrer Les Meilleures Ventes

![vente](images/meilleuresvente.png)

### Cross-selling: Vente Croisée

![cross-selling](images/crossselling.png)

### Up-selling: Montée En Gamme

![up-selling](images/upselling.png)

### Temoignage Sur Les Leading Pages

![langdingpage](images/landingpage.png)

## Optimiser L'Accessibilité

### Définition De L'Accessibilité

![accessibilite](images/accessibilite.png)

### Principaux Type De Handicap

![typehandicap](images/typehandicap.png)

### Bésoins Fonctionels

![besoinf](images/besoinfonctionnels.png)

### Impact D'Âge

![impactage](images/impactage.png)



### Tous Concernés

Nous sommes tous concernés par les problèmes ci-dessous selons les conditions dans lesquelles, nous consultons les sites:

![tousconcernes](images/tousconcernes.png)



### Règles Absolues

![regleabsolues](images/regleabsolues.png)