Ingénierie Dirigée par les Modèles (IDM),

Qualité du logiciel et IHM

Emefa A. KPEGBA
UNIVERSITE DE LOME – ECOLE POLYTECHNIQUE DE LOME
MASTER 2 | 2024

1
Table of Contents
A. Conception de systè mes interactifs .......................................................................................................... 4
A.1. L’ingénierie dirigée par les modèles (IDM) ................................................................................... 4
A.2. La qualité du logiciel ............................................................................................................................... 4
A.3. L’interface homme-machine (IHM) .................................................................................................. 4
A.3. Relation entre IDM, Qualité du logiciel et IHM ............................................................................. 5
B. Conception IHM ................................................................................................................................................ 6
B.0. Référentiel d’écoconception du numérique .................................................................................. 6
B.1. Design Thinking ....................................................................................................................................... 6
B.2. Conception des systèmes informatiques ........................................................................................ 7
Génie Logiciel ................................................................................................................................................ 7
Approches Génie Logiciel ......................................................................................................................... 7
B.3. Méthodes de conception génie logiciel............................................................................................ 7
B.3.1. Modèle en cascade (Waterfall model) ..................................................................................... 7
Note .............................................................................................................................................................. 8
B.3.2. Modèle en V ....................................................................................................................................... 8
Note .............................................................................................................................................................. 9
B.3.3. Modèle en spirale ......................................................................................................................... 10
Note ........................................................................................................................................................... 11
B.3.4. Bilan........................................................................................................................................................ 12
Note ................................................................................................................................................................ 12
B.3.5. Modèle prototype .............................................................................................................................. 13
B.3.6. Autres .................................................................................................................................................... 14
Le processus unifié rationnel (RUP) ................................................................................................. 14
Modèle incrémental et itératif ............................................................................................................. 15
B.4. Méthodes Agile ...................................................................................................................................... 15
B.4.1. SCRUM .............................................................................................................................................. 16
B.4.2. Kanban .............................................................................................................................................. 17
B.4.3. Programmation extrême (XP) ................................................................................................. 18
C. UI Design /UX Design................................................................................................................................... 19
C.1. Qu’est-ce que l’UX Design ? ............................................................................................................... 19
C.2. Qu’est-ce que l’UI Design ?................................................................................................................. 20

2
 C.3. Quelle différence entre UX Design et UI Design ? ..................................................................... 21
C.4. Conclusion ............................................................................................................................................... 21
C.5. Outils .......................................................................................................................................................... 22
D. Le parcours utilisateur ............................................................................................................................... 22
D.1. Cartographier le parcours de l’utilisateur .................................................................................. 22
D.2. Conclusion ............................................................................................................................................... 23
E. Réalisations IHM............................................................................................................................................ 24
E.1. Méthodologies et techniques pour la conception ergonomique des interfaces
informatiques ................................................................................................................................................. 24
Analyse de la tâche ................................................................................................................................... 24
Analyse de l’activité ................................................................................................................................. 24
Principes de solutions............................................................................................................................. 24
Le Test de Perception ............................................................................................................................. 24
Evaluation.................................................................................................................................................... 24
Techniques de conception et d’évaluation des IHM ................................................................... 24
Les Personas ............................................................................................................................................... 24
Le Tri de Cartes ......................................................................................................................................... 25
Le Test Utilisateur .................................................................................................................................... 25
E.2. Audit ergonomique et design d’interface .................................................................................... 25
1 - Le zoning des interfaces informatiques .................................................................................... 25
2 - Les couleurs .......................................................................................................................................... 25
3 - Les polices de caractères et lecture sur écran ........................................................................ 26
4 - Les éléments graphiques ................................................................................................................. 26
F. IHM dans la pratique : Exemples de réalisations .............................................................................. 26
G. Exercices ........................................................................................................................................................... 26
H. Révision Perso ............................................................................................................................................... 27

3
A. Conception de systèmes interactifs
A.1. L’ingénierie dirigée par les modèles (IDM)
L’ingénierie dirigée par les modèles (IDM) est un processus de développement de
logiciels qui utilise des modèles pour représenter les exigences, la conception et
l’implémentation du logiciel. Les modèles sont des représentations abstraites du système
logiciel, et ils sont utilisés pour communiquer et partager les connaissances entre les
différents intervenants du projet.
L’ingénierie dirigée par les modèles est notre champ d’applications avec comme domaine
cible le développement d’Interfaces Homme-Machine. Dans ce contexte, les modèles sont le
pivot du processus de production là où les IHM deviennent le produit, i.e. le résultat à
atteindre. Le domaine de l’interaction homme-machine, phare de l’ère internet et de la
mobilité, a suscité un grand intérêt en particulier depuis l’émergence de nouveaux moyens
d’interaction.
L’IDM vise à fournir différents types de modèles pour exprimer séparément chacune des
préoccupations des utilisateurs, des concepteurs, des architectes, etc.
L’application de l’ingénierie dirigée par les modèles à l’étude de l’interaction homme-
machine en se focalisant sur trois de ses principaux axes : - les techniques de modélisation
et métamodélisation - les techniques de transformation - les méthodologies de
développement

A.2. La qualité du logiciel

La qualité du logiciel est une mesure de la conformité d’un logiciel aux exigences et de sa
capacité à répondre aux besoins des utilisateurs. La qualité du logiciel est importante car
elle peut affecter la satisfaction des utilisateurs, la fiabilité du système et le coût de
maintenance.

A.3. L’interface homme-machine (IHM)

L’interface homme-machine (IHM) est le moyen par lequel les utilisateurs interagissent
avec un système logiciel. Une bonne IHM est facile à utiliser, intuitive et efficace. L’IHM est
importante car elle peut affecter l’efficacité de l’utilisation du logiciel et la satisfaction des
utilisateurs.
Les systèmes interactifs ont évolué pour offrir aux utilisateurs des systèmes efficaces, quel
que soit le contexte d’utilisation. L’objectif principal est de promouvoir, autant que
possible, une communication naturelle avec l’utilisateur final. La combinaison de multiples
modalités en entrée et/ou sortie permet d’améliorer à la fois la robustesse et la fiabilité de
l’interaction.

4
Les travaux de Bolt (1980) sont à l’origine de la conception et du développement
d’applications multimodales, où l’ordinateur est enrichi de nouveaux modes d’interaction
pour les soutenir. En outre, l’émergence de l’informatique mobile, les différents types de
capteurs qui équipent les appareils mobiles (smartphones, tablette …) a permis
l’émergence de nouvelles modalités [Bellik, 1995], tels que l’inclinaison du téléphone ou de
changer son orientation. La multimodalité réduit considérablement les limites des
plateformes d’interaction, tels que les petits écrans ou les claviers inconfortables, et limite
les erreurs de reconnaissance.
Les principes de l’interaction homme-machine sont véhiculés par deux objectifs principaux
: - le premier est de renforcer l’adéquation des systèmes aux besoins des utilisateurs. - Le
second objectif est d’augmenter la facilité d’utilisation des systèmes par la conception
d’interfaces en adéquation avec l’environnement dans lequel l’application va évoluer, et
ayant des modalités d’interaction conviviales.

A.3. Relation entre IDM, Qualité du logiciel et IHM

L’IDM, la qualité du logiciel et l’IHM sont toutes des aspects importants du développement
de logiciels. Ils sont interdépendants et peuvent se renforcer mutuellement.
• L’IDM peut aider à améliorer la qualité du logiciel en fournissant un moyen de
capturer et de communiquer les exigences de manière complète et précise. Les
modèles peuvent également être utilisés pour automatiser certains aspects du
processus de développement, ce qui peut réduire les erreurs et améliorer l’efficacité.
• La qualité du logiciel peut aider à améliorer l’IHM en veillant à ce que le logiciel
soit conforme aux exigences des utilisateurs. Les exigences peuvent fournir des
informations sur les besoins et les préférences des utilisateurs, ce qui peut être
utilisé pour concevoir une IHM qui soit facile à utiliser et intuitive.
• L’IHM peut aider à améliorer la qualité du logiciel en facilitant la communication
entre les utilisateurs et le système logiciel. Une bonne IHM peut aider les utilisateurs
à fournir des commentaires et des suggestions sur le logiciel, ce qui peut être utilisé
pour améliorer la qualité du logiciel au fil du temps.
Exemples de la façon dont l’IDM, la qualité du logiciel et l’IHM peuvent être utilisées
ensemble
Voici quelques exemples de la façon dont l’IDM, la qualité du logiciel et l’IHM peuvent être
utilisées ensemble :
• Une équipe de développement de logiciels peut utiliser l’IDM pour créer des
modèles des exigences et de la conception du logiciel. Ces modèles peuvent
ensuite être utilisés pour automatiser des tests de qualité du logiciel, ce qui
peut aider à identifier et à corriger les erreurs tôt dans le cycle de
développement.
• Une entreprise peut utiliser l’IDM pour créer un modèle de l’IHM de son
application. Ce modèle peut ensuite être utilisé pour tester l’IHM avec des

5
 utilisateurs réels, ce qui peut aider à identifier et à résoudre les problèmes
d’utilisation.
• Une organisation peut utiliser la qualité du logiciel pour établir des normes
pour l’IHM de ses applications. Ces normes peuvent être utilisées pour
garantir que les applications sont faciles à utiliser et intuitives pour tous les
utilisateurs.
L’IDM, qualité du logiciel et l’IHM sont tous des domaines importants du développement de
logiciels. En travaillant ensemble, ces domaines peuvent aider à créer des logiciels de
meilleure qualité qui répondent aux besoins des utilisateurs.
Le défi : Comment intégrer cette nouvelle définition de l’interaction homme-machine au
développement d’interfaces d’applications en se basant sur une approche de type IDM ?
Proposer une approche pour la conception et la génération d’interfaces d’applications
pouvant s’adapter à différentes plateformes d’interaction, tout en offrant un confort
optimal d’utilisation.

B. Conception IHM
B.0. Référentiel d’écoconception du numérique
Version Janvier 2024 :
https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-
ecoconception/
Les objectifs sont de réduire la consommation de ressources informatiques et énergétiques
et la contribution à l’obsolescence des équipements, qu’il s’agisse des équipements
utilisateurs ou des équipements réseau ou serveur.
Composants :
• Stratégie
• Spécifications
• Architecture
• UX/UI
• Contenus
• Frontend
• Backend
• Hébergement

B.1. Design Thinking

Cf. PPT et Atelier Pratique

6
B.2. Conception des systèmes informatiques
Génie Logiciel
• Ensemble de méthodes et outils pour produire et maintenir des logiciels de qualité
• Gros logiciels, problèmes complexes
• Formalisation, rigueur, modularité, évolutivité

Approches Génie Logiciel

1. Modèles en cascade

2. Modèle en V

3. Modèle en spirale

4. Modèle par incréments

5. Besoin du client (idée du concepteur)

6. Cahier des charges (fonctionnel)

Spécification

▪ fonctionnelle : description du logiciel en termes de fonctionnalités (métier),

scénarios, cas d’utilisation

▪ technique : comment réaliser ces fonctionnalités, architecture

7. Méthodes d’analyse et de conception : pour formaliser ce processus

B.3. Méthodes de conception génie logiciel

B.3.1. Modèle en cascade (Waterfall model)

7
Phases du modèle en cascade :
• Phase d’analyse : Planification, analyse et spécification des besoins. Phase de
conception: Conception et spécification du système.
• Phase de mise en oeuvre: Programmation et tests unitaires.
• Phase de vérification : Intégration de systèmes, tests système et d’intégration.
• Phase de déploiement: Déploiement de systèmes
• Phase d’entretien : Livraison, maintenance et amélioration.

Note
• Principe
– Planification globale
– On ne passe à l’étape suivante que lorsque que l’étape est satisfaisante
– conception orientée vers l’implantation
– importance des documents
• cahier des charges, spécifications
• signés par les clients
• Rôle des utilisateurs : prise en compte limitée
• Limites :
– l’évaluation intervient en dernier
– Retours en arrière : uniquement dans la version avec itérations

B.3.2. Modèle en V

Le cycle en V est constitué de 9 étapes qui ont toutes leur importance.

1. Étude de faisabilité : Il s’agit de l’étude préalable que le client doit réaliser avant de
commencer à définir son besoin de manière plus précise. Cela doit répondre aux
questions “Que veut-on ?”, “Est-ce réalisable ?” et “À quel coût ?”.
2. Spécifications fonctionnelles : C’est le cahier des charges exact du produit final, tel
que le désire le client. Il doit couvrir l’intégralité des cas d’utilisation du produit, en
expliquant ce qu’il doit faire et non pas comment il va le faire.

8
 3. Spécifications techniques : C’est une traduction des spécifications fonctionnelles en
termes techniques. C’est durant l’élaboration des spécifications techniques que sont
choisies les technologies à mettre en œuvre pour développer le produit.
4. Modélisation et conception : Il s’agit de la phase technique pendant laquelle
l’architecture logicielle du produit est détaillée. Tous les différents modules logiciels
sont exposés, ainsi que leurs entrées-sorties. Les choix techniques les plus pointus
sont résolus durant cette étape.
5. Codage : C’est la phase de réalisation à proprement parler, pendant laquelle sont
développées des briques qui sont ensuite assemblées pour créer le produit fini.
6. Tests unitaires : Ces tests interviennent à un niveau “atomique”. Chaque brique
logicielle a été modélisée puis codée durant les étapes précédentes. Les tests
unitaires assurent que ces briques respectent de manière individuelle leur cahier
des charges.
7. Tests d’intégration : Ce sont là les premiers tests grandeur nature du produit fini. On
s’assure qu’il suit les indications des spécifications techniques.
8. Validation : Le produit est à ce moment testé en regard de la spécification
fonctionnelle. Toutes les utilisations qui y ont été définies doivent pouvoir se
vérifier dans les faits.
9. Recette : Le produit est vérifié une dernière fois avant d’être mis en production
(Concepteur au Client).

Note
• Principe
– détailler l’application jusqu’à sa réalisation
– tester l’application
– association phase de production/phase de validation
– les documents ont un rôle important
• Rôle des utilisateurs
– lors de l’analyse des besoins et tests
– mais prise en compte limitée
• Limites
– évaluation en fin : après le codage
– portée des retours arrière non précisée

9
B.3.3. Modèle en spirale

Les phases du modèle en spirale sont :

• Phase de planification : La première étape consiste à identifier et à mettre en place
des objectifs et des buts à atteindre. Puis, en tant qu’alternatives, ils présentent les
meilleures voies potentielles pour satisfaire les objectifs. Tout cela nécessite une
communication continue entre le client et l’équipe de gestion de projet.
• Phase d’analyse des risques : Lors de la planification et de la finalisation de la
stratégie de réduction des risques, les dangers potentiels sont identifiés. Chaque
danger mis en évidence fait l’objet d’un examen approfondi. Des prototypes peuvent
être créés pour éliminer la possibilité d’exigences ambiguës. Les risques sont
minimisés en prenant des précautions.
• Phase d’ingénierie : Cela implique le codage, les tests et le déploiement du logiciel.
Suite à une évaluation des risques, le modèle de développement est adopté. Le
modèle à utiliser est déterminé par le niveau de risque reconnu pour cette phase.
• Phase d’évaluation : L’évaluation du programme par le client. Il est décidé de
répéter ou non le cycle. Ici, la prochaine phase du projet est en cours de
planification.

10
Note
• Principe
– versions successives du logiciel de plus en plus comple
– importance de l’évaluation (+ précoce)
– pour chaque cycle
• identification des objectifs, alternatives, contraintes
• analyse des risques et choix de développement
• développement et validation du cycle
• analyse des résultats et planification du cycle suivant
• Rôle des utilisateurs
– prise en compte limitée
– mais à chaque cycle

11
B.3.4. Bilan

Note
• Avantages
– méthodes structurées
– adaptées aux gros projets
• Limites
– rôle des utilisateurs trop limité
– processus centré sur les
– fonctionnalités du logiciel IHM définie tardivement : prévoir l’usage en même
temps que les fonctionnalités
– évaluation tardive

12
B.3.5. Modèle prototype
Le modèle prototype est une application fonctionnelle du produit qui donne une idée des
caractéristiques fondamentales du produit ou du système final.

Phases du modèle prototype :

• Analyse des exigences : L’étape initiale du modèle consiste à établir les exigences du
système souhaitable.
• Conception : Après l’identification des exigences système souhaitées, une
conception conceptuelle de base est formée.
• Formation de prototypes : À l’aide de la conception conceptuelle de base, un
prototype fonctionnel est construit pour le système souhaité.

13
 • Évaluation initiale : Le prototype est testé par le client dans cette étape pour évaluer
les fonctionnalités et les limitations.
• Prototype de raffinage : Le prototype est encore affiné, en analysant l’évaluation
effectuée par le client.
• Production : Une fois le processus de raffinage exécuté, le système final est produit
pour une utilisation en temps réel.

B.3.6. Autres
Le processus unifié rationnel (RUP)
Le Rational Unified Process (RUP) est un développement d’applications logicielles
approche qui comprend un certain nombre d’outils pour aider au codage du produit final et
des activités qui l’accompagnent. RUP est une méthodologie orientée objet pour gestion de
projet SUR mesure et le développement de logiciels de haute qualité.
Le RUP est un ensemble d’approches adaptables à l’environnement et aux exigences de
chaque entreprise, plutôt qu’un système avec des processus rigides.

Phases du modèle RUP (Rational Unified Process) :

• Date de début: L’idée centrale est visualisée.
• Élaboration: Les cas d’utilisation et l’architecture sont conçus.
• Construction: Activités de la conception au produit fini.
• Transition: Activités de suivi pour assurer la satisfaction de la clientèle.

14
Modèle incrémental et itératif
Le développement logiciel itératif et incrémental est une technique de développement
logiciel basée sur un modèle cyclique de publication et de mise à jour et sur une
augmentation constante des ajouts de fonctionnalités.
Le développement logiciel itératif et incrémentiel commence par la planification et se
poursuit à travers des cycles de développement itératifs avec des commentaires continus
des utilisateurs et des ajouts de fonctionnalités incrémentiels, aboutissant à la mise en
œuvre du logiciel à la fin de chaque cycle.
Phases du modèle incrémental et itératif :
• Phase de démarrage : La phase de lancement d’un projet traite de la portée, des
besoins et des risques à un niveau supérieur.
• Phase d’élaboration : Crée une architecture fonctionnelle qui atténue les risques
identifiés lors de la première phase et répond aux critères non fonctionnels.
• Phase de construction : Complète progressivement les composants de l’architecture
avec un code prêt pour la production, qui est développé par l’analyse des exigences
fonctionnelles, la mise en œuvre, la conception et les tests.
• Phase de transition : Livrer le système à l’environnement d’exploitation de
production pendant la phase de transition.

B.4. Méthodes Agile

Les entreprises qui se consacrent à une transformation numérique complète finissent par
appliquer et développer des approches agiles au sein de leurs départements afin d’offrir
des biens et/ou services de meilleure qualité à moindre coût et en moins de temps.
L’approche agile du développement logiciel vise à fournir des systèmes logiciels
fonctionnels dans un court laps de temps.
Les méthodologies agiles peuvent être classées en différents types, tels que :

15
B.4.1. SCRUM
Lorsqu’ils relèvent des défis, les projets utilisant cette technique accordent une grande
valeur à l’intellect, à l’expérience et aux capacités que les membres de l’équipe de
développement apportent à la table.
Les activités du projet sont réalisées en cycles courts appelés sprints, qui sont relativement
gérables et bien hiérarchisés, permettant un suivi facile des progrès.
Par rapport à d’autres modèles de développement logiciel, cette stratégie profiterait à des
initiatives plus importantes, et l’une des raisons est que les développeurs se sentent dédiés
aux objectifs et responsables du succès de l’initiative.

Phases du modèle Scrum Agile :

• Carnet de produit : La phase de backlog de produit correspond à la détermination
des tâches prioritaires et à la collecte d’informations concises et complètes sur le
projet à créer.
• Sprint: Le sprint est le cœur battant du processus Scrum, un laps de temps d’un mois
pendant lequel se déroule la création d’un produit potentiellement livrable.
• Incendier: Le burn down est la phase au cours de laquelle la progression d’un projet
scrum est mesurée. Lorsque chaque sprint est terminé, le scrum master sera
responsable de la mise à jour des visuels.

16
B.4.2. Kanban
Kanban est un cadre bien connu pour agile et Développement de logiciels DevOps. Cela
nécessite une communication de capacité en temps réel et une ouverture totale au travail.
Kanban est une approche flexible de la gestion visuelle du travail qui évolue en fonction des
besoins de l’équipe.
Kanban aide à visualiser le travail afin qu’il puisse être mieux compris, montré aux autres
et que ceux qui sont intéressés puissent être tenus au courant. En conséquence, nous
pouvons garantir que le service est capable de faire la tâche demandée par le client.

Phases du modèle Agile Kanban :

• Identifiez et expliquez en détail chaque processus qui se déroule dans la fabrication.
• Visualisez les processus mentionnés ci-dessus : attribuez à chacun d’eux une carte et
placez-la sur le panneau Kanban.
• Une fois les processus visualisés, il est plus important d’identifier les problèmes, tels
que les goulots d’étranglement, afin qu’ils puissent être révisés et rationalisés si
nécessaire.
• Gardez votre travail en cours au minimum. Autrement dit, essayez de limiter la
quantité d’activités réalisées afin que les employés puissent se concentrer sur ce qui
compte le plus.
• Prenez des mesures et agissez en conséquence. Parce que Kanban est une technique
dynamique, il sera important d’examiner les résultats et de prendre des mesures
pour améliorer la situation.

17
B.4.3. Programmation extrême (XP)
La technique de programmation extrême permet aux spécialistes d’apporter des
modifications même après le début de l’itération. Il faut normalement 1 à 2 semaines pour
terminer une itération.
L’XP ou Approche de programmation extrême est une méthodologie de développement
agile dans le but de développer et de gérer des projets avec efficacité, flexibilité et contrôle.
Il repose sur la communication, la réutilisation du code généré et les commentaires.

Phases du modèle de programmation extrême (XP) :

• Planification: Les user stories sont hiérarchisées et divisées en mini-versions en
fonction de leur identité. Il y aura une réévaluation de la planification.
• Encodage: Travailler avec un code simple dans cette phase, n’effectuer que le
minimum absolu pour le faire fonctionner. Il sera possible d’obtenir le prototype.
• Test: La programmation se fait en couple devant le même ordinateur, « à deux mains
». Il est courant que les partenaires soient changés. Cela garantit qu’un code plus
général est créé, que tout autre programmeur peut comprendre et utiliser.
• Lancement: Si nous sommes arrivés à cette phase, cela signifie que nous avons testé
avec succès toutes les user stories ou mini versions tout en tenant compte des
besoins du client.

18
C. UI Design /UX Design
C.1. Qu’est-ce que l’UX Design ?
L’UX Design se définit donc comme l’ensemble des moyens mis en œuvre pour concevoir
une interface qui répond pleinement aux besoins en utilisabilité de chaque utilisateur.
L’objectif étant de fournir la meilleure expérience utilisateur possible.
L’UX design appliqué à une application Web/Mobile, c’est de définir une bonne expérience
utilisateur :
• Le rendre accessible et facile à utiliser grâce à son ergonomie, son apparence, son
design cohérent et ses fonctionnalités intuitives
• Le rendre crédible, de part son utilisation qui rassure
• Le rendre compatible, c’est à dire utilisable par les utilisateurs quel que soit le
support digital (Smartphone, tablette, grands écrans…)
Selon l’infographie de Magnus Revang, il est possible de classifier l’expérience utilisateur
en 6 étapes principales correspondantes à une multitude de paramètres que l’UI designer
doit prendre en compte dans son process de conception UX d’interface.
1. Visibilité : nécessiter d’optimiser le référencement en amont du projet de
conception
2. Accessibilité : réaliser un site compatible à l’ensemble des différents supports
techniques et terminaux mobiles et tactiles
3. Attractivité : faire le choix d’un design conforme à une ergonomie agréable, utile,
intuitive et pratique
4. Facilité : l’ergonomie doit faciliter la recherche de l’information
5. Crédibilité : vitrine de la marque, le site doit rassurer et convaincre les internautes

19
 6. Efficacité : les internautes doivent sans difficultés et facilement trouver les
réponses à leurs questions

C.2. Qu’est-ce que l’UI Design ?

Avec l’UI, l’interface utilisateur, on rentre dans le registre de la technologie de l’information
et plus spécifiquement dans la conception d’interface homme-machine (IHM).
Son but étant d’améliorer l’interaction d’un utilisateur avec l’interface.
L’UI designer est donc la personne en charge de réaliser une interface agréable et utile pour
les utilisateurs. Selon les règles et méthodes dédiées à l’ergonomie des interfaces, il conçoit
et positionne les différents éléments graphiques et textuels d’une interface web par
exemple. Ses objectifs étant de faciliter la navigation des internautes en leur proposant des
éléments ergonomiques intuitifs, utiles et pratiques.

20
C.3. Quelle différence entre UX Design et UI Design ?
• UX design : User eXperience (Expérience Utilisateur)
• UI design : User Interface (Interface Utilisateur) / IHM
• Objectif :
– élargir le point de vue au-delà de l’utilisabilité
– couvrir tous les aspects de l’expérience de utilisateur avec le système
–

C.4. Conclusion
Retenons que l’UX est bien différent de l’UI, même si les deux se complètent et sont
incontournables dans le projet de conception.
La première notion intervient en amont de la deuxième.

21
C.5. Outils
1. Figma
2. Adobe XD
3. Marvel
4. Hotjar
5. FlowMapp
6. Webflow
7. Origami Studio
8. InVision
9. Balsamiq
10. Axure
11. Proto.io
12. Lucidspark (brainstorming)
13. UserTesting (obtenir en temps réel les réactions des clients)
14. Miro
15. Quant-UX

D. Le parcours utilisateur
Le parcours utilisateur ou carte d’expérience (experience map) représente
visuellement l’expérience progressive (étape par étape) de l’utilisateur d’un produit, d’un
service, voire d’un écosystème.

D.1. Cartographier le parcours de l’utilisateur

Le parcours utilisateur a pour objectif de permettre aux utilisateurs de réaliser une série
d’actions de la manière la plus fluide possible. Il s’agit de cartographier le cheminement
mental de l’utilisateur et les questions qu’il est amené à se poser.
Pour construire cette cartographie, il faut répondre à trois questions portant sur les usages,
les besoins et les sentiments :
• Usages : quelles sont les actions de l’utilisateur pour atteindre ses objectifs ?
• Besoins : quelles sont ses pensées durant ce parcours ou la réalisation de sa tâche ?
• Sentiments : quelles sont ses émotions à chacune des étapes et interactions ?
Comment dessiner le parcours ou la carte d’expérience
La méthode la plus simple pour dessiner le parcours ou la carte d’expérience consiste à
tracer un axe horizontal avec les étapes du parcours utilisateur de manière chronologique,
puis un axe vertical avec ses actions, pensées et émotions.

22
D.2. Conclusion
• Outre l’utilité de cette cartographie, sa création constitue pour l’équipe une
expérience positive.
• En effet, le processus de construction de la carte est ludique. En adoptant le point de
vue des utilisateurs, les participants ont souvent une image différente du service ou
produit.
• Enfin, c’est un excellent moyen de permettre à toute l’équipe d’adopter un état
d’esprit UX, centré sur l’usage, plus que sur la technique.

23
E. Réalisations IHM
E.1. Méthodologies et techniques pour la conception ergonomique des
interfaces informatiques
Principes méthodologiques en ergonomie informatique

Analyse de la tâche
Cette étape est consacrée à la compréhension des objectifs des clients, des conditions
techniques et organisationnelles de l’activité des utilisateurs ou clients. Modéliser de façon
descriptive la tâche (process) puis analyser ses exigences cognitives, grâce aux recherches,
questionnements… Ceci est indispensable pour formuler des hypothèses testables
préparant l’analyse de l’activité pour une interface homme-machine.

Analyse de l’activité
Tester les hypothèses issues de l’analyse de la tâche par des techniques d’observation et
d’entretien semi-directif. A cette étape, il faut identifier les problèmes liés à l’utilisation.

Principes de solutions
Proposer des solutions adaptées au fonctionnement cognitif, en réponse aux problèmes
identifiés dans l’analyse de l’activité. Concrètement, nous concevons des états testables de
ces principes de solutions, par exemple des maquettes fonctionnelles.

Le Test de Perception
Il se base sur des maquettes fixes de l’interface, son but étant de déceler quels sont les
éléments réellement perçus par les utilisateurs. Les résultats d’un test de perception
guident les choix effectués ensuite sur des prototypes plus complexes, en termes de
présentation des informations.
A quelle étape il faut l’utiliser ? : Avant la conception des premières maquettes ou
prototypes.

Evaluation
Tester et corriger les principes de solutions, de manière à assurer leur intégration auprès
des utilisateurs via des tests utilisateurs en situation réelle, pour valider les maquettes
fonctionnelles.

Techniques de conception et d’évaluation des IHM

Elles doivent s’inscrire dans la démarche ergonomique mise en place et validée.

Les Personas
Des études préalables sur les caractéristiques des utilisateurs ciblés par l’interface
permettent de construire des profils, que nous appelons personas. L’identification précise

24
de divers profils d’utilisateurs autorise l’anticipation de certains modes opératoires sur une
interface homme-machine et guide ainsi la phase de conception.
A quelle étape il faut l’utiliser ? : Principalement en phase amont du projet, lorsque les
utilisateurs finaux de l’interface sont mal connus, par exemple pour les sites web.

Le Tri de Cartes
Le tri de cartes consiste à présenter les éléments de l’interface, dont les appellations sont
dispersées sur des cartes, et à demander aux utilisateurs de créer des regroupements. Un
utilisateur peut corriger les termes à sa convenance. Lors de la dernière étape, l’utilisateur
nomme les groupes de cartes qu’il a composés. Cette technique permet de faire ressortir
une architecture de base pour votre interface.
A quelle étape il faut l’utiliser ? : En correction, lorsque des problèmes de compréhension
de la terminologie sont perçus, ou bien sur l’architecture de l’interface. En conception, pour
former une architecture d’interface proche de la représentation des utilisateurs.

Le Test Utilisateur
Très connu sur le marché de l’ergonomie IHM, il est néanmoins impossible de réaliser un
test utilisateur digne de ce nom sans analyse préalable de la situation de votre interface. Le
test utilisateur permet de faire ressortir des problèmes de navigation et de
compréhension de votre interface. En cela, il se base sur un scénario d’utilisation
défini, qui correspond aux tâches principales des utilisateurs sur votre système.
A quelle étape il faut l’utiliser ? : Après la phase d’analyse de la tâche, dans une optique
de correction d’un système déjà existant. Dans une optique de conception, le test utilisateur
est obligatoirement réalisé sur les maquettes et prototypes de la future interface.

E.2. Audit ergonomique et design d’interface

L’analyse en ergonomie informatique et la définition du besoin utilisateur.
L’audit en ergonomie correspond à une évaluation des éléments statiques de l’interface. La
présentation de l’écran est en effet composée de diverses zones, de choix de couleurs et de
polices de caractères… qui influent sur la lisibilité et la compréhension générale du logiciel.

1 - Le zoning des interfaces informatiques

Selon le placement des informations sur l’écran, le message de votre application pourra
être perçu différemment par les utilisateurs. De plus, les zones de navigation ne doivent pas
être placées aléatoirement : les propriétés perceptives de l’être humain et l’accessibilité
limitent les choix possibles pour le produit.

2 - Les couleurs
Les utilisateurs sont très sensibles au jeu de couleurs utilisé. Les couleurs revêtent des
significations diverses selon le contexte d’utilisation, qu’il convient de prendre en compte.

25
De plus, il est nécessaire de combiner avec précaution la couleur de fond et celle de vos
éléments textuels, pour une lisibilité correcte.

3 - Les polices de caractères et lecture sur écran

La multiplication des polices de caractères amène parfois une utilisation abusive de ce
moyen de mise en évidence. Les activités de lecture à l’écran de l’utilisateur sont
cognitivement différentes de celles employées pour la lecture sur format papier. Il faut
donc favoriser la lecture et la compréhension des éléments textuels sur écran.

4 - Les éléments graphiques

Le graphisme logiciel agit également sur la prise en main du logiciel par les utilisateurs.
L’affichage de certains effets graphiques peut favoriser l’attrait pour votre produit, tout
comme engendrer une surcharge cognitive et gêner la compréhension du message
important de votre interface. Il faut analyser la pertinence des jeux d’icônes, qui revêtent
des symboliques devant être adaptées au contexte d’utilisation.

F. IHM dans la pratique : Exemples de réalisations

1. Interface tactile pour l’identification et le suivi d’objets trouvés : La société
réalise des livraisons de colis sur toute la France. De très nombreux sites
réceptionnent, trient et expédient des colis.
2. Un projet marketing & IHM : Une enseigne de vente de chaussures, propose à ses
clients des modes d’achat sur différents canaux et cherche à fluidifier les parcours
cross-canal tels que Web-to-Store, Store-to-Web et Store-to-Store et optimiser les
services offerts.
3. Optimisation du parcours client pour un devis en ligne : Un projet pour la
facilité de navigation. Une mutuelle santé, prévoyance et retraites cherche à faciliter
l’étape de devis en ligne de ses futurs adhérents.

G. Exercices
1. Faire l’étude IHM de la plateforme Web de https://trankyl.me/

2. Faire l’étude IHM de la plateforme Mobile

https://play.google.com/store/apps/details?id=com.yandex.yango&hl=fr
3. IHM de la conception d’une application mobile du code de la route et de test en
ligne pour obtenir le permis de conduire au Togo

26
H. Révision Perso

• Savoir définir l’IHM, identifier une approche pertinente

• Savoir choisir une méthode de conception adaptée à un contexte donné

• Savoir choisir une technique d’évaluation adaptée à un besoin

• Savoir nommer précisément les composants d’une interface et les événements

d’interaction

• Connaître les concepts et critères d’évaluation ergonomique pour chaque concept,

savoir donner un exemple de bonne application et un contre-exemple (erreur
d’ergonomie)

• Savoir identifier, en particulier du point de vue de l’ergonomie, les spécificités du

Web, du mobile, du tactile, du handicap

• Savoir identifier et corriger des erreurs d’ergonomie

• Savoir décrire les problèmes de manière persuasive pour convaincre le concepteur
de les corriger

• Savoir illustrer à main levée les interfaces Web et Mobiles en ce qui concerne les
applications (utilisateurs)

BONNE SUITE…

27