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
L’analyse à l’aide de la grille doit servir de base au benchmark. Il est
Offre permanente Compatibilité important d’en tirer des conclusions constructives. Vous devez mettre
en évidence :
Offre promotionnelle Vitesse de chargement
> les points forts
Contenu informatif 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 à : [email protected]
« Le design, c’est la créativité associée à la stratégie » - Rob Curedale / Designer
UX & UI DESIGN
LP CNEA
