UX & UI DESIGN

ERGONOMIE ET CONCEPTION DES INTERFACES WEB

LP CNEA
cours n°01
‘‘ Comprendre précède l’action.‘‘ - Richard Saul Wurman
 INTRODUCTION

PLANNING RETOUR SUR LA CHAINE DE PRODUCTION WEB

PRINCIPES & DÉFINITIONS

LES DIFFÉRENTES PHASES

PHASE DE DÉCOUVERTE : Connaitre son commanditaire

PHASE DE DÉCOUVERTE : Connaitre ses utilisateurs

PHASE D’IDÉATION : Mise en place du schéma d’ergonomie

EN APARTÉ : S’adapter à tous types de supports

PHASE DE CONCEPTION FONCTIONNELLE : Wireframes

PHASE DE CONCEPTION GRAPHIQUE : Maquettes

EN PARALLÈLE

RÉDACTION ET RÉFÉRENCEMENT

ENSUITE

INTÉGRATION ET DÉVELOPPEMENT
INTRODUCTION

RETOUR SUR LA CHAINE DE PRODUCTION

 LA CHAINE DE PRODUCTION WEB

PHASE DE DÉCOUVERTE PHASE D’IDÉATION PHASE DE CONCEPTION DÉVELOPPEMENT

Connaitre son client Schéma d’ergonomie Maquettes graphiques BackEnd

RENDEZ-VOUS CLIENT PHASE DE DÉCOUVERTE PHASE DE CONCEPTION DÉVELOPPEMENT MISE EN LIGNE

Analyse de la demande Connaitre ses utilisateurs Maquettes fonctionnelles FrontEnd Correction de bugs

UX DESIGN

UI DESIGN

DÉVELOPPEMENT
INTRODUCTION

PRINCIPES & DÉFINITIONS

ERGONOMIE

L’ergonomie est définie comme "l’ensemble des

connaissances scientifiques relatives à l’Homme,
nécessaires pour concevoir des outils, des machines
et des dispositifs qui puissent être utilisés avec le
maximum de confort, de sécurité et d’efficacité" (Alain
Wisner).

L’ergonomie recherche une adéquation entre

caractéristiques humaines et caractéristiques
machines.

Il s’agit d’adapter la nature et le comportement

de la machine au regard des caractéristiques de
l’homme (et non l’inverse).
ERGONOMIE informatique / des interfaces

L’ergonomie informatique (ou ergonomie des interfaces) est une branche de

l’ergonomie, elle a pour objectif d’améliorer les interactions homme-machine et de
faciliter l’utilisation et l’apprentissage des produits interactifs.

Cette pratique cherche à concevoir ou modifier des interfaces afin qu’elles soient en
adéquation avec les caractéristiques physiologiques, perceptives et cognitives de
leurs utilisateurs potentiels.

L’ergonomie informatique, appelée aussi « utilisabilité », est la capacité du produit

informatique à être facilement utilisé par une personne pour réaliser la tâche pour laquelle
il a été conçu, répondant à toutes ses attentes et besoins le plus aisément possible.

Un site ergonomique n’est pas un site utilisable par les plus novices mais par ses utilisateurs.
-Amélie Boucher
UX DESIGN
Le terme UX vient de ‘User Experience’ ou Expérience Utilisateur. L’UX Design consiste
à concevoir des interfaces accessibles et facilement manipulables par SES utilisateurs
cibles. L’UX Design c’est l’ergonomie des interfaces et l’utilisabilité, avec en plus la notion
d’impact émotionnel ressenti par l’utilisateur.

L’UX est l’expérience de l’utilisateur dans la globalité de l’interaction avec l’interface.

ATTENTION
DESIGN différent de DESSIN
DESIGN égal à CONCEVOIR

UI DESIGN
Le terme UI vient de ‘User Interface’ ou l’interface utilisateur. L’UI Design est axé sur la
conception d’une interface graphique en prenant en compte l’aspect esthétique. L’UI
est la partie visible de l’interface, l’identité visuelle, la charte graphique, les maquettes
graphiques, etc.

L’UI est l’organisation des éléments graphiques, esthétiques, textuels et fonctionnels. Il

vient «emballer», tel un joli papier cadeau, l’UX design.
 ARCHITECTE : UX DESIGNER MAÇON : DÉVELOPPEUR

DÉCORATEUR D’INTÉRIEUR : UI DESIGNER

https://www.youtube.com/watch?v=z_xBEN58_Jo
BENCHMARK
Le benchmark, ou benchmarking, désigne une technique de marketing utilisée par les
entreprises visant à observer, à comparer et à analyser les performances de produits
ou services concurrents et leaders sur le marché. Le benchmark a pour but d’optimiser
la conception d’un nouveau produit plus ou moins équivalent à ceux observés.

> ÉTUDE DE LA CONCURRENCE DIRECTE ET INDIRECTE

PERSONA
Un persona est une description de l’utilisateur type d’un service ou d’une application. Il
permet d’avoir une représentation personnifiée des utilisateurs.

Les personas sont des archétypes spécifiques et représentatifs dans lesquels nous
retrouvons différentes informations : nom, prénom, photo, objectifs, motivations,
humeur, relation au numérique, à la marque, etc.
reSponsive website

Un site web adaptatif, responsive website, reponsive design, est un site web dont la
conception vise, grâce à différents principes et techniques, à offrir une consultation
confortable sur des écrans de tailles et de résolutions très différentes. Le site doit
savoir s’adapter à tout appareil : ordinateurs, smartphones, tablettes, TV, etc.

mobile first

Le concept mobile first consiste à concevoir un site en réalisant en priorité la version

mobile et en adaptant progressivement celui-ci pour les écrans plus larges. Cette
façon de procéder est contraire à la démarche ordinaire qui consiste à dégrader
progressivement un site web pour l’adapter à un affichage sur des écrans plus petit.
 phase de
découverte

CONNAITRE SON COMMANDITAIRE

Problématique

La première phase de découverte consiste à emmagasiner

un maximum d’informations sur votre commanditaire.
Vous devez cerner le plus précisément possible plusieurs
paramètres.

Lors du premier rendez-vous, votre commanditaire

exprimera ses besoins, ses envies, ses attentes, mais parfois
de manière floue.

Il vous soumettra parfois un cahier des charges plus ou

moins détaillé. Celui-ci a le désavantages de figer le projet
avant même qu’il ne soit commencé. Et l’objectif ou les
objectifs même du projet sont souvent mal exprimés.

Vous devrez en tant que concepteur comprendre le mieux

possible votre client afin de définir avec lui ses objectifs.

>> Découvrir le commanditaire

Son domaine d’activité, sa position sur le marché, ses
concurrents...

>> Découvrir ses perspectives d’évolution

SOLUTIONS

Documents internes à l’entreprise

Demandez un maximum de documents concernant l’activité
du commanditaire. (plaquette, organigramme, rapport
annuel, etc).

Interviews
Pour découvrir au mieux votre commanditaire, la meilleure
des méthodes est l’interview. Vous devez interviewer le chef
de projet, mais aussi toutes les personnes de l’équipe qui
seront impliquées dans le projet.
Préparez une grille de questions destinées à cerner les
objectifs et les attentes de votre commanditaire.

Étude de la concurrence
D’après les informations de votre commanditaire, vous
pourrez établir une première liste de concurrents directs et
indirects. Vous pourrez l’étoffer par vos propres recherches.

Dans cette étude vous analyserez la présence ou non des

concurrents sur le Web. Si présence il y a, vous ferez une
analyse détaillée de leurs solutions (site web, application,
réseaux sociaux, etc). > le benckmarking.
SOLUTIONS

exemple de questionnaire type

L’ENTREPRISE
Qui communique sur Quoi ?

LEUR COMMUNICATION
Quels supports de communication sont déjà existants ?

LEURS CIBLES
Envers qui communique t-on ?

LEURS CONCURRENTS
Contre qui communique t-on ?

LEURS PERSPECTIVES
Où devons-nous nous projeter ?
 BENCHMARKING

Le benchmarking UX, ou étude de concurrence/étude

comparative, est l’analyse des interfaces et applications
concurrentes. L’idée du benchmark est que le problème
auquel on est confronté a peut-être déjà été résolu, de façon
efficace, par d’autres.

1. Trouver les meilleurs pratiques.

2. Analyser en détail ces pratiques.

3. Prendre ces pratiques comme références.

Les pratiques et fonctionnalités sont parfois à chercher dans

d’autres domaines d’activités. Soyez curieux !

Afin d’être efficace dans son benchmark nous pouvons, entre

autre, utiliser une grille d’analyse. Attention, cette grille doit
être adaptée à chaque projet.

! ALerTE EXO !
Les concurrents dans le transport ?
BENCHMARKING
EXEMPLE

ASPECT GRAPHIQUE SCORE ASPECT ERGONOMIQUE SCORE INTERACTIVITÉ SCORE

Visibilité Section Homepage Personnalisation

Lisibilité Menu Fidélisation

Contribution des img Navigation Fonctionnalités

Cohérence graphique Structures des pages Identification

Convivialité graphique Liens Espace privé

TOTAL TOTAL TOTAL

CONTENU SCORE ACCESSIBILITÉ SCORE SCORE TOTAL

Pertinence de l’info Normes

Offre permanente
Offre promotionnelle
Contenu informatif
L’analyse à l’aide de la grille doit servir de base au benchmark. Il est
Compatibilité important d’en tirer des conclusions constructives. Vous devez mettre
en évidence :
Vitesse de chargement
> les points forts
Positionnement Ce qui fonctionne, ce qui est intéressant pour votre projet.

Hiérarchisation infos Liens morts > les points faibles

Ce qui ne fonctionne pas, les pratiques à éviter pour votre projet.
TOTAL TOTAL
TD
PROJET Tuteuré

Dans le cadre de votre projet tuteuré vous fournirez

un benchmark complet pour votre commanditaire.

Celui-ci peut prendre la forme que vous souhaitez,

tableau, grille, texte, image, dessin, etc.
Vous analyserez au moins trois concurrents.
Pensez à sourcer vos recherches.

Soyez curieux, analytiques et synthétiques.

Date de rendu donnée en cours.

Aucun retard ne sera toléré.

Pénalité de 5 points par heure de retard.

À envoyer à : cnea@afa-multimedia.com
« Le design, c’est la créativité associée à la stratégie » - Rob Curedale / Designer

UX & UI DESIGN
LP CNEA