SlideShare une entreprise Scribd logo
Ergonomie et Modélisation des
utilisateurs des IHM
Octobre 2015
Teresa Colombi
Université de Nice-Sophia
Antipolis
LudoTIC Consulting
1.Définitions d’ergonomie
2.Techniques de modélisation des utilisateurs
Tri de cartes
Focus Group
Entretiens
Questionnaires
3. Maquettage IHM
Plan du cours
Le marché des TIC
• Téléphone
• SMS/MMS
• Lecteur MP3
• Vidéo
• Télévision
• Internet/mail
• Appareil photo
• Applications de toute sorte…
Un logiciel
et ses manuels faciles
d’utilisation de 800
pages et leurs
annotations
Le marché des TIC
Le marché des TIC
Dans les projets à forte composante technologique,
nous oublions souvent l’utilisateur final de cette
technologie
Qu’est ce que l’utilisateur achète ?
Une technologie ?
Un produit ?
 Surtout ce que ceci lui permet de faire…
Ce qui passe obligatoirement par l’IHM
Nouvelles Technologies de plus en plus puissantes et
“envahissantes”, alors que les utilisateurs sont de moins en moins
compétents
Logiciels avec de plus en plus de fonctions, mais moins de
40% sont réellement utilisées
L’introduction de nouveaux dispositifs informatiques en
entreprise correspond souvent à une baisse de la productivité
Le paradoxe actuel
Exemple de non-sens
S.E.L.F. : L’ergonomie (ou l’étude des facteurs humains) est
la discipline scientifique qui vise la compréhension
fondamentale des interactions entre les êtres humains et
les autres composantes d’un système, et la mise en
œuvre dans la conception de théories, de principes, de
méthodes et de données pertinentes afin d'améliorer le
bien-être des hommes et l'efficacité globale des systèmes
(2001)
Définition officielle de l’Ergonomie
De l’ergonomie à la User Experience
Intro Méthodo Cible Maquettes Audit Tests
11
Pourquoi cela devient-il si important ?
Encore il y a quelques années
personne ne parlait d’UX… Effet de mode ?
Intro Méthodo Cible Maquettes Audit Tests
Il était une fois, l’informatique…
Ses écrans intuitifs
Intro Méthodo Cible Maquettes Audit Tests
Il était une fois, l’informatique…
Ses interactions logiques et compréhensibles
Intro Méthodo Cible Maquettes Audit Tests
Il était une fois, l’informatique…
Ses chartes graphiques Glamour
Intro Méthodo Cible Maquettes Audit Tests
Il était une fois, l’informatique…
Ses Smartphones plus phones que smart
Intro Méthodo Cible Maquettes Audit Tests
Et puis, la révolution est arrivée
Interaction ultra-simplifiée (1 bouton)
Skéuomorphisme pour faire baisser les
réticences au changement
Design soigné dans les moindres détails
Centré sur besoins et usages
Positionnement produit « Luxe »
En pratique…
Les ergonomes contribuent à la conception et à l’évaluation de
tâches, produits, contextes et systèmes ayant pour but de les
rendre compatibles avec les besoins, les compétences et les
limites des êtres humains
Pourquoi a-t-on besoin d’ergonomes ?
Machine
Développeur /
Utilisateur
Développeur /
Utilisateur
Hier Machine
UtilisateurDéveloppeur
Aujourd’hui
Le rôle de l’ergonomie
Machine
UtilisateurDéveloppeurs
Aujourd’hui
Ergonomie
Commanditaire
Marketing
…
L’ergonome est une interface
Utilisateur
Utilisateur
L’ergonomie à l’intersection de plusieurs disciplines
HardWare
SoftWare
Physiologie
& Anthropométrie
I.A.
Architecture
Sociologie &
Psychologie Sociale
Psychologie
Cognitive
Étude des dimensions et formes du corps humain
Le concept de centile
centimètres
%
5% 50% 95%
L’Ergonomie Anthropométrique
centimètres
%
5% 50% 95%
Étude des dimensions et formes du corps humain
Le concept de centile
L’Ergonomie Anthropométrique
Enseignements à tirer :
 Travailler sur la « moyenne » est toujours un mauvais choix
 En outre, dès qu’on croise 3 dimensions (ex. taille, poids,
pointure) on se retrouve avec <5% des personnes !
 On ne pourra jamais satisfaire tout le monde…
L’Ergonomie Anthropométrique
L’Ergonomie Sociologique
 La communication et le comportement entre individus
et groupes
 La sociologie des usages : l’utilité et la désirabilité des
objets technologiques
 Etude des tendances sociétales
La psychologie cognitive
 la vision et la perception,
 l’attention,
 la compréhension,
 l’apprentissage,
 la mémoire,
 la résolution de problèmes,
 l’impact de facteurs tels que le stress, la
fatigue…
Organessensoriels
Détection
Discrimination
Identification
Stade
perceptif
Traitement
Mémoire
de Travail
Mémoire
à long terme
Stade
cognitif
Choix
action
Préparation
action
Exécution
action
Stade
comportemental
Attention
Emotion
Human Information Processing
L’ergonome parmi les autres acteurs de la création de TIC
Les composantes de l’UX selon LudoTIC
• Technologique
• Physique
• Design
• Gamification
• Persuasion
• …
• Feeback
• Gestion des erreurs
• Navigation
• …
• Pertinence
• Adéquation aux
profils des utilisateurs
Utilité Utilisabilité
AccessibilitéDésirabilité
La Conception Centrée Utilisateur
29
Types d’intervention
30
Données qualitatives
Données quantitatives
Ce que les
gens font
Ce que les
gens disent
Entretiens
Focus groups
Journal de Bord
Instructions au Sosie
Enquêtes contextuelles
Questionnaires
Tri de cartes
Observations terrain
Eye Tracking
A/B Testing
Test Utilisateurs
Analyse des Logs
Types d’intervention
Avec
utilisateurs
Sans
utilisateurs
Sans Interface Avec Interface Sans Interface Avec Interface
Entretiens,
Questionnaires,
Focus Groups…
Tests,
Évocations,
Jugements…
Benchmarking,
Analyse de la tâche,
Prototypage…
Analyse Heuristique
En phase de conception d’un produit IT
Lors de la conception d’une interface complexe, la modélisation
permet de l’optimiser
3 axes de modélisation :
Modélisation de l’utilisateur
 Méthodes: entretiens, questionnaires, Focus Groups, Card Sorting…
 Objectifs : connaître les attentes, le niveau d’expertise préalable, les
souhaits, les opinions…
Modélisation de la tâche
 Méthodes : MAD, cognitive walkthrough…
 Objectifs : identifier l’architecture de l’information et la séquence d’actions
idéale
Modélisation du contexte
 Méthodes : entretiens, scénarios, benchmarking…
 Objectifs : identifier le contexte cognitif, environnemental et social
En phase de réalisation
Lors de la réalisation de l’interface, il est important de vérifier le
respect des critères de base d’utilisabilité
Cela se fait en utilisant des check-list
Les principes en question sont souvent du bon sens
Le choix de la grille est à la base du succès de la démarche
En phase de validation
Sur un produit fini (ou sur des béta) il est possible de
réaliser des tests utilisateurs, pour étudier l’interaction
homme-machine
Plusieurs méthodes peuvent être utilisées :
- Tests « classiques » avec enregistrement de données telles que le
temps d’exécution des tâches et les erreurs
- Tests avec enregistrement des fichiers LOG
- Tests oculométriques (pistage des mouvements des yeux)
- Post-Test : évocations, questionnaires de satisfaction, tests de
compréhension
En réalisant des tests comparatifs sur plusieurs prototypes il est
possible d’identifier celui qui permet les meilleures performances
Un exemple : WebApp dans le domaine médical
Environ 50 use cases identifiés par les développeurs
Comment les traduire en enchainements d’actions cohérents ?
Avec MAD !
Un exemple : WebApp dans le domaine médical
Associer à chaque User Story des fonctions et des écrans
Un exemple : WebApp dans le domaine médical
Prototypage rapide (module par module) et séances de confrontation
avec les utilisateurs de différents profils
Un exemple : WebApp dans le domaine médical
Un exemple : WebApp dans le domaine médical
Norme ISO 9241-210
Le but de l’ergonomie selon cette norme : rendre l’interaction
avec les interfaces homme-machine
 plus efficace
 plus efficiente
 plus satisfaisante
3 façons de prendre en compte ces dimensions :
 Mesures théoriques
 Données objectives issues du test
 Ressenti utilisateur (efficacité et efficience perçues)
Intro Méthodo Cible Maquettes Audit Tests
L’utilisabilité d’un produit est définie par rapport à :
 une population cible (avec des caractéristiques précises),
 des buts spécifiques
 à accomplir dans un contexte précis
Norme ISO 9241-210
Changer un de ces 3 paramètres peut
rendre un produit ergonomique
totalement inutilisable
Connaitre la population cible
 Aspects perceptifs (vision, audition, toucher et leur maladies)
 Aspects physiques et haptiques (anthropométrie)
 Aspects cognitifs (attention, mémoire, résolution de
problèmes…)
 L’expertise (the user’s cube)
Les aspects socioculturels (langage, conventions sociales)
Données sur l’équipement (PC, modem, browser, plug-in…)
La perception visuelle
L’illusion optique de Muller-Lyer
L’illusion optique de Kanitzsa
Le cerveau peut se tromper…
Perception ≠ traitement du signal
The Simpsons™
copyright by Fox
Interprétation
Notre expérience de vie façonne notre manière de voir les choses
Interaction perception/compréhension
L’effet Stroop
La dénomination des couleurs est influencée par le
traitement sémantique (lecture automatique)
Jaune Noir Bleu Orange Vert
Giallo Nero Blu Arancione Verde
The User Cube
Expertise sur l’environnement
informatique
ExpertisesurlesupportIT
La courbe de l’expertise
Le concept de centile n’est pas uniquement lié à la réalisation
d’objets « physiques »
Les centiles peuvent s’appliquer également à des caractéristiques
cognitives
Si l’on dessine la courbe relative à la maîtrise de l’ordinateur, par
rapport à quel centile doit-on baser la développement d’un nouveau
logiciel destiné au grand public?
Connaissances informatiques
5% 50% 95%
L’utilisateur « lambda »
 Il se demande pourquoi cliquer sur « démarrer » pour
éteindre le PC ?
 Il se demande où sont passés A: et B: ?
 Il est perplexe devant des mots comme login, plugin… ?
 Il ne comprend pas bien la notion de ressources réseau
 Ne fait pas la différence entre Internet et IE
Ne pensez pas pouvoir vous mettre à sa place !
Structurer la navigation par use case
 Comprendre les tâches des utilisateurs permet de structurer la
navigation
Structurer la navigation par use case
Le cycle en V
Analyse des
besoins et
faisabilité
Spécifications
Conception
architecturale
Conception
détaillée
Codage
Tests
unitaires
Tests
d’intégration
Tests
de validation
Recette
Analyse des
besoins
utilisateurs
Spécifications
d’Utilisabilité
Prototypage
Evaluation
Experte
Tests
d’Utilisabilité
Evaluation
Experte
Connaître les utilisateurs : techniques
 La récupération des représentations mentales : le Tri de
Cartes
 Connaissance approfondie de l’utilisateur : les Entretiens
 Les attentes et les souhaits : le Focus Group
Le recueil de données sur large échelle : les Questionnaires
Phase : conception
Coûts : - Expérimentateurs : 1
- Participants: à partir de 5
- Appareillage : fiches papier, logiciels gratuits
Données : qualitatives ou quantitatives (selon traitement)
Le Tri de cartes (ou Card Sorting) permet de recueillir des infos sur l’organisation
mentale des contenus, selon les futurs utilisateurs, ce qui permet de créer
l’arborescence du site, la structure des menus du logiciel…
+ : codage ergonomique des informations. Bas coût de réalisation du point de vue
du nombre de participants et de l’appareillage
- : besoin de périmètre fonctionnel définitif
Structurer les contenus : le tri de cartes
Un exemple de tri de cartes
Le tri de cartes « électronique »
Logiciels gratuits comme UxSort, IBM EZ Calc…
Avantages :
 Pas de coûts de « temps expérimentateur »
 Possibilité de toucher plus d’utilisateurs
 Analyse statistique des données
Inconvénients :
 Pas de certitude que la tâche soit bien
comprises/réalisée sérieusement
 Inutilisable sur certaines populations (jeunes enfants,
personnes peu familières avec l’informatique…)
Phase : CONCEPTION
Coûts : - EXPERIMENTATEURS : 1
- SUJETS : à partir de 5
- APPAREILLAGE : magnétophone
Données : qualitatives
L’entretien sert à recueillir des données relatives aux besoins et aux
attentes, à comprendre le point de vue des utilisateurs, à créer le/les
premier/s profil/s de l’usager “cible”
+ : l’entretien est un outil “souple”, qui, si bien maîtrisé par
l’expérimentateur, peut donner des informations précises et très utiles
- : il faut un expérimentateur qui sache bien gérer la souplesse de cette
technique…
Les entretiens
Méthodes spécifiques d’entretien : instruction au sosie
57
“Imaginez que je sois en tout point identique à vous
physiquement. Je vais devoir faire votre travail à votre
place sans que personne ne se rende compte qu’il ne
s’agit pas de vous mais d’un sosie. Donnez-moi toutes
les instructions nécessaires”
Technique axée sur l’aspect “procédurale” et la mise en oeuvre d’actions sans
“rationnaliser” les raisons sous-jacentes
Méthodes spécifiques d’entretien : enquête contextuelle
58
“Imaginez que je sois un apprenti qui arrive dans votre
service. Montrez moi comment je dois me servir de ce
logiciel pour réaliser les tâches principales”
Technique qui met en exergue les strategies et les habitudes des utilisateurs
dans l’interaction avec un produit metier
Réussir ses entretiens utilisateurs
 Etablir un Guide d’Entretien clair et précis
 Si possible, faire un « pilote »
 Mettre les participants à l’aise
 Ne pas tourner au dialogue
 Recadrer sans froisser
 Prendre le temps pour « débriefer » avec chaque participant
 Créer une matrice Problématiques/participants pour exploiter
les résultats
Phase : CONCEPTION et RÉALISATION
Coûts : - EXPERIMENTATEURS : 1 ou 2
- SUJETS : ~ 24
- APPAREILLAGE : caméscope, magnétophone (vitre
sans tain)
Données : qualitatives
Technique qui met en lumière l’apport créatif des utilisateurs.
Discussions ludiques pour faire sortir le coté imaginatif.
+ : recueil d’informations pertinentes et difficiles à obtenir
autrement
- : budget élevé et pour l’appareillage et pour le nombre de sujets
Les Focus Groups
Un exemple de focus group
Jeu vidéo sur support innovant : le distributeur de boissons à
interaction gestuelle
Plein de questions :
Quel type de jeu ?
Seuls ou à plusieurs ?
Peur du ridicule ?
File d’attente ?
Comment attirer l’utilisateur ?
Quels rewards ?
Comment le fidéliser ?
Réussir ses focus groups
 Cacher le plus possible les caméras (même si les participants
sont informés de leur présence)
 Contexte décontracté (pièce chaleureuse, boissons, chips…)
 Utiliser des ice breakers (jeu du menteur, jeu « lève la main
qui… ») pour chauffer les participants
 Veiller au bon rythme des activités
 Animer les sessions pour que tout le monde participe (éviter
« l’effet mouton »)
Faire une bonne synthèse finale
Phase : CONCEPTION et TEST
Coûts : - EXPERIMENTATEURS :
1 en Conception (sauf si à distance), 1 en Test
- SUJETS : selon la phase
- APPAREILLAGE : /
Données : qualitatives et quantitatives
En conception : vérification sur large échelle des hypothèses conçues
pendant les entretiens/focus groups… En phase de test d’utilisabilité :
recueil de données sur la satisfaction, les impressions sur le produit,
les critiques...
+ : il permet de recueillir beaucoup de données et quantifier la
fréquence des profils utilisateurs
- : c’est un outil « rigide »
Les questionnaires
Questionnaires : caractéristiques
La validité externe : définir dans quelle mesure les résultats
d’une expérience peuvent être généralisés à d’autres
situations et d’autres personnes
La validité interne : s’assurer que rien d’autre que la VI
n’affecte la VD choisie (unidimensionnalité de la batterie de
questions)
La fiabilité de l’outil : alpha de Cronbach, indice de la
cohérence du questionnaire (entre 0 et 1).
Alpha= nQ r
1+(nQ-1)r
Questionnaires : format des questions
Réponses binaires : oui/non, vrai/faux
Cases à cocher : avec 1 ou plusieurs réponses
possibles
Réponses ouvertes et phrases à compléter : laissent
la place à l’expression du sujet
L’échelle de Likert : expression accord/désaccord
Le différentiel sémantique :
Je trouve l’utilisation du site :
facile 1 2 3 4 5 6 7 difficile
Questionnaires : les options de réponse
Les cases à cocher
Combien de fois par mois faites-vous vos courses ?
 1-2 fois
 2-4 fois
 4-6 fois
 plus de 6 fois
3 problèmes :
 empan temporel trop large
recouvrement entre les réponses
 manque d’options
Questionnaires : les options de réponse
L’échelle de Likert
Je trouve que le logo de l’application est très joli
1 2 3 4 5
tout à fait en désaccord tout à fait d’accord
pas d’avis
Attention au point neutre
 Le problème de Marradi : sous-utilisation des
points extrêmes et décalage du point d’équilibre
Questionnaires : formuler correctement les questions
 questions courtes
 formes verbales actives
 éviter les doubles négations
 éviter les “questions doubles”
 vérifier que les termes employés sont connus par le
public visé
 attention à la valeur affective des mots
Les questionnaires à distance
Plusieurs possibilités :
 Envoi de fichier Word avec éléments actifs (cases à
cocher, champs de saisie…)
 Utilisation de systèmes d’enquête en ligne
(attentions à la fausse gratuité de certains),
kwiksurveys.com est bien
 Publication en Intranet possible (par ex. via
Limesurvey)
 Le recours à des outils « pro » comme Sphynx n’est
pas souvent nécessaire
La qualité des données recueillies
Pour s’assurer que les personnes restent concentrées
et fournissent des « bonnes » réponses dans un
questionnaire à distance :
 Limiter le nombre de questions (max 60, idéalement
30 ou 40)
 Introduire des vérificateurs de cohérence (questions
qui se répètent) et de concentration (« svp choisissez
l’option 3 »)
 S’assurer de la bonne ergonomie du questionnaire
(affichage, gestion des erreurs…) !
Modelisation et maquettage 2015
Modelisation et maquettage 2015
Objectif du questionnaire
Bien que le questionnaire serve également à recueillir
toute information intéressante relative à la population
cible, le but ultime est d’arriver à quantifier les profils
utilisateurs
 Les questions doivent être discriminantes, autrement
dit en fonction des options de réponse on doit pouvoir
« classer » les répondants
Ex. : si réponse A aux Q 2 et 3 et réponse B aux Q 4, 5 et 7, alors
profil = early adopter
Questionnaires : quelles analyses ?
 Mise en relation entre les réponses données et les
profils utilisateurs attendus
 Statistiques « descriptives »
 Statistiques plus approfondies, dites
« inférentielles »
Questionnaires : données
 Données nominales : il s’agit de catégories (sexe, cat.
Professionn., …)
 Données ordinales : il s’agit de rangs (niveau de performances,
classes d’âge, …)
 Échelle d’intervalles : données permettant de comparer
l’ampleur des différences (temps, erreurs)
Les analyses statistiques
Statistiques
Descriptives Inférentielles
Indices de
Tendance Centrale
Indices de
Dispersion
Etude des
Relations
Etude des
Différences
Les analyses statistiques
Statistiques descriptives: indices de tendance centrale
 Mode : modalité dont l'effectif est le plus important
(échelle nominale et +)
 Médiane : modalité partageant la distribution en 2
parties d'effectifs égaux (échelle ordinale et
d’intervalles)
 Moyenne : valeur arithmétique représentant la
moyenne (variable quantitative uniquement)
Les analyses statistiques
Statistiques descriptives: indices de dispersion
 Variance : moyenne des écarts aux
carré par rapport à la moyenne
 Écart type : racine carrée de la
variance
Intro Méthodo Cible Maquettes Audit Tests
La corrélation
Statistique non paramétrique permettant de mettre en lumière
une relation entre 2 variables  cela ne permet pas d’étudier le
lien cause/effet
 R (de Bravais Pearson) varie entre -1 et +1
A
B
Corrélation
positive
A
B
Corrélation
négative
A
B
Corrélation nulle
Un, personne, cent mille…
Si tous les utilisateurs sont différents, comment créer une interface
adaptée ?
Solution 1 : une interface très « large »
 trop de choix tue le choix…
Solution 2 : une interface pour chaque personne
 trop cher!
Solution 3 : une interface pour chaque profil modélisé
 ergonomique et viable
Modéliser les utilisateurs
Idéalement, la démarche de compose de :
 une approche qualitative (entretiens en profondeur, focus groups…)
 une approche quantitative (questionnaires)
 suivi d’une synthèse des problématiques principales sous forme de
Personas
Ceci permet d’identifier les profils principaux et leurs spécificités
(besoins, contexte…) et de faire des choix basés sur leur fréquence (on
ne peut pas plaire à tout le monde…)
Les Personas sont « statiques », d’autres approches sont nécessaires
pour modéliser la tâche des utilisateurs (MAD, tri de cartes)
Les Personas
Archétypes des utilisateurs cible, prenant en compte :
 Leurs caractéristiques (âge, préférences, habitudes, contexte…)
 Les tâches à accomplir via le produit (use case)
En marketing on s’en sert pour un meilleur ciblage commercial
Ceci ne correspond à aucun profil !
Les Personas en Ergonomie
On ne doit pas dépasser 3, 4 personas pour que les résultats
soient réellement utiles
Un exemple : appli iPhone pour suivi de la bourse
Bernard : le broker
branché
Catherine :
l’occasionnelle multi-
tâche
Hugo : le touche-à-
tout
30%
45%
10%
Maîtrise iPhone
5° 50° 95°
B C H
Compétences métier
5° 50° 95°
H C B
Les Personas en Ergonomie
Bernard : le broker
branché
Catherine :
l’occasionnelle multi-
tâche
Hugo : le touche-à-
tout
55%
25%
15%
On ne doit pas dépasser 3, 4 personas pour que les résultats
soient réellement utiles
Un exemple : appli iPhone pour suivi de la bourse
Maîtrise iPhone
5° 50° 95°
B C H
Compétences métier
5° 50° 95°
H C B
Du Persona à la conception IHM
Projet : réseau social dans le domaine des achats
Mickael P.
Responsable
Informatique
Peut supporter une « charge informationnelle »
importante
Exigent quant à l’efficacité du moteur de
recherche
Peu intéressé au design
Peu fidèle
Sophie L.
Assistante de
gestion
Vite perdue dans les sites trop « chargés »
Attirée par nouveautés, idées cadeau…
Très intéressée au design
Assez fidèle
Personas : tableau de correspondance
Caractéristiques Michael Sophie Impact
Compétences IT Très bonnes Basiques Gestion de la charge
informationnelle
Exigences vis-à-vis de
la qualité du moteur
de recherche
Sexe Homme Femme Importance du design
Besoins Trouver au plus
vite les contenus
souhaités
Etre guidée à la
découverte,
conseillée
Importance de la
qualification du lead
Objectifs Gagner du temps Occuper le
temps
Parcours de
navigation
Des Personas à la conception d’interface : un exemple
87
Une fois que la cible du produit est bien définie et que les tâches
qu’elle a à realiser sont claires, il sera facile de concevoir une interface
autour de ces données
Intro Méthodo Cible Maquettes Audit Tests
Success Story : VEFA Immobilier
En partenariat avec
Rebonds : 55%
Visites : 5.500/mois
Leads générés : 650/mois
Intro Méthodo Cible Maquettes Audit Tests
Step 1 : comprendre les utilisateurs
Intro Méthodo Cible Maquettes Audit Tests
Step 2 : reconcevoir l’architecture de l’information
Intro Méthodo Cible Maquettes Audit Tests
Step 3 : maquettage itératif
Intro Méthodo Cible Maquettes Audit Tests
Step 4 : design
Rebonds : 40% (-15%)
Visites : 7000/mois (+27%)
Leads générés : 800/mois (+23%)
Intro Méthodo Cible Maquettes Audit Tests
Le site en ligne
Maquetter une interface signifie…
Formaliser
un concept un fonctionnement
Présenter pour
brainstormer valider
Evaluer
l’ergonomie le coût
un aspect
spécifier
la faisabilité
un concept un aspect un fonctionnement
brainstormer spécifier valider
l‘ergonomie la faisabilité le coût
Le maquettage en cycle en V
Analyse des
besoins et
faisabilité
Spécifications
Conception
architecturale
Conception
détaillée
Codage
Tests
unitaires
Tests
d’intégration
Tests
de validation
Déploiement
Analyse des
besoins
utilisateurs
Spécifications
d’Utilisabilité
Prototypage
ergonomique
Evaluation
Experte
Tests
d’Utilisabilité
Evaluation
Experte
96
Les maquettage en « Agile »
Types d’intervention
Intervention dans le processus complet :
Conception
Réalisation
Validation
○ Ergonomie de conception
Intervention ponctuelle sur produit fini/béta version :
Evaluation (par Test Utilisateur ou Évaluation Experte)
○ Ergonomie de correction
Maquettage de
conception
Maquettage
correctif
Ergonomie de conception : prototypage ergonomique
Avantages :
 Réduction du temps de dév jusqu’à 30% (ROI++) car dès le début les
développeurs sont guidés par les ergonomes en ce qui concerne le
développement de l’IHM, voire de l’architecture des contenus
 Assurance d’une IHM qui respecte les principes d’ergonomie
 Possibilité de cycles de tests utilisateurs
 Support de travail collaboratif : validations à l’intérieur de l’équipe
 Base pour la mise au point des spécifications IHM
• à fournir aux développeurs (rédaction Word)
• à fournir aux graphistes (visuels et contraintes de couleurs, police…)
Inconvénients :
 Prévoir budget
 Prévoir du temps en amont du projet
Les clé d’un prototype ergonomique
Pour s’assurer que le prototype en cours de
conception est ergonomique il faut le construire :
 en respectant les principes de base d’ergonomie
des IHM (organisation visuelle, lisibilité…)
 en prenant en compte la logique métier des
utilisateurs finaux (langage, besoins, enchaînements
d’écrans…)
Principes de base d’ergonomie des IHM
1. Feedback du système
2. Match avec les profils utilisateurs
3. Sensation de contrôle
4. Cohérence et standard
8. Flexibilité
9. Surcharge cognitive
10. User Experience
5. Gestion des erreurs 12. Aide et documentation
11. Dialogue Homme-Machine
6. Optimisation des performances
7. Mise en page
13. Collaboration
Recueil d’infos sur la logique métier
Plusieurs recueils de données peuvent être utiles et pertinents :
 Analyse de la tâche (organisation et séquence des contenus)
 Tri de cartes (architecture des contenus)
 Entretiens/Focus groups (besoins, attentes, critiques de
l’existant…)
 Questionnaires
 Autres sources d’infos : tickets SAV, remontées des commerciaux
ou des formateurs…
Enchainer écrans et fonctions : un exemple
Enchainer écrans et fonctions : un exemple
Application xxx – la vision « tâche utilisateur »
Délivrer
attestation
Identification
Entreprise/TI
Plusieurs
réponses
1 seule bonne
réponse
Choisir la
bonne
Rechercher
attestations
Générer
attestation
Consulter
attestation
Application xxx – la vision « tâche utilisateur »
Poser
opposition
Identification
Entreprise/TI
Plusieurs
réponses
1 seule bonne
réponse
Choisir la
bonne
Rechercher
oppositions
Poser
opposition
Consulter
opposition
Les IHM
Recherche Résultats
Détails
attestations/oppositions
IHM « avant »
Zoning issu de
l’analyse de la
tâche
Ergonomie de correction : prototypage ergonomique
Suite à un Test Utilisateur ou à une Évaluation Experte, il est
possible d’illustrer les modifications/recommandations
formulées par des maquettes ou prototypes
Avantages :
 Support « visuel » facilement compréhensible pour les
développeurs
Inconvénients :
 Compétences sur outils de maquettage « haute fidélité »
nécessaires
Exemples
Avant
Exemples
Après
Titres pour
les critères
de
recherche
et le panier
Avant
Exemples
Après
Exemples
Maquette ou Prototype ?
Prototype
• Est conçu sur la plateforme réelle et peut être connecté à des
données fictives ou réelles
• Souvent une Beta du produit final
Maquette
• Réalisée sur un système différent de celui qui sera utilisé pour le
produit final
• Pas de connexion à des bases de données
 Si on n’est pas censés faire du code réutilisable on fait des maquettes
et non pas des prototypes
Prototypage horizontal et vertical
Nielsen (1994) distingue 2 degrés de prototypage lHM selon le
niveau d’interactivité :
Prototype horizontal
Correspond à la partie graphique de l’interface
Présente l’agencement général et les éléments de l’interface
(boutons, menus, champs de saisie, etc.)
Permet :
• la confirmation des exigences de l’IHM (nombre de zones de contenu,
positions…) par rapport à la globalité du produit
• d’avoir une version de démonstration pour obtenir des retours des
commanditaires du produit par rapport à leurs besoins initiaux
• une première estimation du développement en termes de temps, de
coût et de charge de travail
Prototypage horizontal et vertical
Prototype vertical
Met en œuvre certaines fonctionnalités afin que l’utilisateur
puisse dérouler un scénario complet d’utilisation (via une
suite d’écrans ou des interactions réelles)
Permet :
• d’avoir une idée concrète de la cinématique d’utilisation
• le dimensionnement du système de données, les besoins
d'interaction de l'interface
• d’avoir plus de précisions sur la complexité des exigences par rapport
aux fonctionnalités actuelles du produit (on va plus dans le détail)
Fidélité visuelle des prototypes
Low fidelity (Lo-Fi) ou bas niveau
○ Première idée de l’organisation visuelle des contenu
Medium fidelity (Mi-Fi) ou moyen niveau
○ Prototypes informatiques respectant le zoning final (wireframes)
○ Rudiments de visuel tel qu’images, couleurs…
High fidelity (Hi-Fi) ou haut niveau
○ Look&feel définitif, charte graphique finale
Bas niveau de fidélité visuelle
Avantages :
 la réalisation ne nécessite pas de compétences techniques
(support facile à produire)
 facile à modifier pendant un brainstorming (moins de contraintes
« mentales » devant un dessin que devant une IHM)
 permet de se concentrer sur le contenu et non pas sur le visuel
Inconvénients :
 non respect des contraintes visuelles
(taille écran, polices…)
Moyen niveau de fidélité visuelle
Avantages :
 permet de valider de façon précise les tailles des zones, des polices
 contient les rudiments de visuel tel qu’images, couleurs…
 étant interactive, la maquette permet de valider la cinématique et
l’enchainement des écrans
Inconvénients :
 ne prétend pas à la perfection en termes de valeur artistique et
n’est pas à considérer définitive en termes de charte graphique
 savoir faire « la part des choses » car il manque le look&feel (on
doit valider le fonctionnel, non pas l’esthétisme)
 il faut un peu plus de compétences techniques
Entre la basse et la moyenne fidélité
Moyen niveau de fidélité visuelle : exemple
La même chose en haute fidélité
Maquette Mi-Fi avec zoning
Haute fidélité visuelle
Avantages :
 Impression de voir « le produit fini »
 Permet de valider les « petits détails » d’ordre graphique
(design)
Inconvénients :
 Temps de réalisation
 si réalisée trop tôt, danger que votre interlocuteur prête plus
d’attention à la valeur artistique qu’à l’optimisation
ergonomique
Maquette Mi-Fi
Maquette Hi-Fi
Types de maquette
On choisit la meilleure approche en fonction de nos
objectifs et du contexte de l’intervention !
Fidélité visuelle
Basse
Statique
Dynamique
Moyenne Haute
Intro Méthodo Cible Maquettes Audit Tests
Les visuels Lo-Fi, Mi-Fi, Hi-Fi ne sont
pas suffisants car :
 les images ne se « auto-
commentent » pas
 il n’est pas possible de tout
maquetter (trop de temps)
 si on ne définit pas des « grands
principes » on ne pourra pas
intégrer correctement les
évolutions futures
Le document « GUI specifications »
Intro Méthodo Cible Maquettes Audit Tests
C’est le résumé de toute la démarche entreprise, il détaille :
 l’aspect statique de chaque page-écran (zoning –
maquette bas/moyen niveau)
 les principes de fonctionnement (cinématique)
 les principes de design et interaction (ex. taille min des
polices, couleurs à utiliser…)
 les visuels Hi-Fi (il devient un « StyleGuide »)
Le document « GUI specifications »
Modelisation et maquettage 2015
Quels outils ?
 Tableau blanc
 Papier/crayon
 Mais aussi… une multitude d’outils informatiques
et bien d’autres…
Quels outils ?
 Des tas de sites pour vous aider à choisir :
http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools
http://www.newsphil-blog.com/une-selection-de-21-outils-de-prototypage-de-web-et-mobile
http://www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/
 Un Consensus autour de 3 outils :
- Balsamiq (rapide)
- Axure (puissant)
- Photoshop (charte graphique)
 Mais aussi Power Point (avec une librairie de composants)
Ce qui compte c’est de choisir un outil adapté à
vos besoins en fonction de vos types de projets,
clients , processus de développement, etc.
Papier/crayon ou tableau blanc effaçable
Fidélité : *
Interactivité : *
Composants IHM : NON
Prix : /
Prise en main : facile
Points forts : permet de commencer à réfléchir à plusieurs
(brainstorming), notamment sur tableau blanc (grand, effaçable).
Points faibles : très basse fidélité des images (pas de prise en
compte de taille de police, taille/résolution écran…)
Balsamiq
Fidélité : *
Interactivité : **
Composants IHM : OUI
Prix : 79€
Prise en main : facile
Points forts : visuel « dessin à main libre », permet de se détacher
des aspects de look&feel, tout en ayant un fichier informatique,
génère des Pdf cliquables
Points faibles : pas d’évolutions possibles vers Mi-Fi et Hi-Fi, peu
d’interactivité
133
Exemple de maquette « commentée »
Axure
Fidélité : **
Interactivité : ***
Composants IHM : OUI
Prix : 600 $
Prise en main : moyennement
facile
Points forts : rendu « sketching » possible, doc de specs associé,
proto HTML totalement dynamique
Points faibles : code non réutilisable
Le maquettage itératif
PowerPoint
Fidélité : **
Interactivité : **
Composants IHM : NON
Prix : inclus dans le pack office
Prise en main : facile
Points forts : du Lo-Fi au Mi-Fi, possibilité de l’utiliser pour mini-
test utilisateurs
Points faibles : pas de code réutilisable, pas de doc de specs,
actions clavier impossibles
Existant
Existant
38/70
Aucune
fixation sur
les
messages
d’erreur
Existant
Pré souscription
• Questionnaire
Vos versements ValidationVotre profil
• Conditions générales • Coordonnées
• Versements initial
• Versements programmés
• Bénéficiaires
• Récapitulatif
• Impression documents
 Choix du courtier
Choix du courtier
Avant toute souscription, vous devez prendre connaissance de la
Fiche de présentation du Courtier.
Le téléchargement des documents ci-dessous nécessitent le logiciel Acrobat Reader
Audit Conseil Gestion
35 rue Pastorelli
06000 Nice
Assurance vie en ligne
BUREAUX DU RHUL
5 rue Gabriel Fauré
06000 Nice
3 résultat(s) exacte(s)
Votre recherche : 06000
Cabinet CERF
8 avenue Gustave Nadaud
06000 Nice
Consultez la Fiche de présentation de ce
Courtier (PDF, 108 Ko)
Souscrire
Souscrire
Consultez la Fiche de présentation de ce
Courtier (PDF, 210 Ko)
Consultez la Fiche de présentation de ce
Courtier (PDF, 167 Ko)
Souscrire
Maquette
Pré souscription
• Questionnaire
Vos versements ValidationVotre profil
• Conditions générales • Coordonnées
• Versements initial
• Versements programmés
• Bénéficiaires
• Récapitulatif
• Impression documents
 Choix du courtier
Choix du courtier
Avant toute souscription, vous devez prendre connaissance de la
Fiche de présentation du Courtier.
Le téléchargement des documents ci-dessous nécessitent le logiciel Acrobat Reader
Audit Conseil Gestion
35 rue Pastorelli
06000 Nice
Assurance vie en ligne
BUREAUX DU RHUL
5 rue Gabriel Fauré
06000 Nice
3 résultat(s) exacte(s)
Votre recherche : 06000
Cabinet CERF
8 avenue Gustave Nadaud
06000 Nice
Consultez la Fiche de présentation de ce
Courtier (PDF, 108 Ko)
Souscrire
Souscrire
Consultez la Fiche de présentation de ce
Courtier (PDF, 210 Ko)
Consultez la Fiche de présentation de ce
Courtier (PDF, 167 Ko)
Souscrire
1
3
2
Maquette
Pré souscription
• Questionnaire
Vos versements ValidationVotre profil
• Conditions générales • Coordonnées
• Versements initial
• Versements programmés
• Bénéficiaires
• Récapitulatif
• Impression documents
 Choix du courtier
Choix du courtier
Avant toute souscription, vous devez prendre connaissance de la
Fiche de présentation du Courtier.
Le téléchargement des documents ci-dessous nécessitent le logiciel Acrobat Reader
Audit Conseil Gestion
35 rue Pastorelli
06000 Nice
Assurance vie en ligne
BUREAUX DU RHUL
5 rue Gabriel Fauré
06000 Nice
3 résultat(s) exacte(s)
Votre recherche : 06000
Cabinet CERF
8 avenue Gustave Nadaud
06000 Nice
SouscrireConsultez la Fiche de présentation de ce
Courtier (PDF, 108 Ko)
Souscrire
Souscrire
J’ai pris connaissance du document
Consultez la Fiche de présentation de ce
Courtier (PDF, 210 Ko)
Consultez la Fiche de présentation de ce
Courtier (PDF, 167 Ko)
4
Pré souscription
• Questionnaire
Vos versements ValidationVotre profil
• Coordonnées
• Versements initial
• Versements programmés
• Bénéficiaires
• Récapitulatif
• Impression documents Conditions générales
• Choix du courtier
Conditions générales
Audit Conseil Gestion
Avant de continuer, prenez connaissance, imprimez, et enregistrez sur votre disque dur la Note
d'information valant Conditions Générales du contrat et de son Annexe Financière
Complémentaire. (PDF, 120 Ko)
Vous disposerez ainsi de toutes les règles de fonctionnement de votre contrat.
Le téléchargement de ce document nécessitent le logiciel Acrobat Reader
Continuer
5
6
Pré souscription
• Questionnaire
Vos versements ValidationVotre profil
• Coordonnées
• Versements initial
• Versements programmés
• Bénéficiaires
• Récapitulatif
• Impression documents Conditions générales
• Choix du courtier
Conditions générales
Audit Conseil Gestion
Avant de continuer, prenez connaissance, imprimez, et enregistrez sur votre disque dur la Note
d'information valant Conditions Générales du contrat et de son Annexe Financière
Complémentaire. (PDF, 120 Ko)
Vous disposerez ainsi de toutes les règles de fonctionnement de votre contrat.
Le téléchargement de ce document nécessitent le logiciel Acrobat Reader
J’ai pris connaissance des Conditions Générales Continuer
7
Pré souscription Vos versements ValidationVotre profil
• Conditions générales
• Versements initial
• Versements programmés
• Bénéficiaires
• Récapitulatif
• Impression documents
 Questionnaire• Choix du courtier
• Coordonnées
Questionnaire
Questionnaire d’aversion
Votre profil de risque
Profil Défensif (PDF, 67 Ko)
Consultez les descriptions des
différents profils que Audit Conseil
Gestion vous présente, afin de vous
permettre d’effectuer la répartition de
votre versements entre les différents
supports.
Le téléchargement des documents ci-dessous
nécessitent le logiciel Acrobat Reader
Profil Équilibré (PDF, 89 Ko)
Profil Audacieux (PDF, 54 Ko)
Profil Dynamique (PDF, 123 Ko)
Continuer sans questionnaire
Audit Conseil Gestion met à votre disposition un outil de mesure de votre
goût pour le risque ou aversion du risque appelé « Questionnaire
d’aversion au risque» vous permettant de déterminer votre Profil de risque
et de vous recommander une répartition de votre versement en fonction de
ce profil.
Toutefois, vous pouvez continuer la souscription sans faire appel au
questionnaire d’aversion. Vous serez ainsi libre de répartir vos versements.
8
9
10
Microsoft Visio
Fidélité : *** (IHM type Logiciel en OS Windows)
Interactivité : *
Composants IHM : OUI
Prix : 250$ pour la version standard
Prise en main : facile
Points forts : produit boîtes de dialogue, fenêtres, etc. dans le
look&feel d’un logiciel fini (en OS Windows)
Points faibles : pas d’interactivité
Modelisation et maquettage 2015
Existant Maquette
Editeur HTML de type WYSIWYG
Fidélité : ***
Interactivité : ***
Composants IHM : OUI
Prix : très variable
Prise en main : moyenne
Points forts : proto HTML, code éventuellement réutilisable
Points faibles : pour avoir du « bon » code compétences
techniques nécessaires
Flash
Fidélité : ***
Interactivité : ***
Composants IHM : NON
Prix : 700€
Prise en main : difficile
Points forts : possibilité de coder un produit final
Points faibles : compétences design/codage nécessaires
Photoshop
Fidélité : ***
Interactivité : *
Composants IHM : NON
Prix : +700€
Prise en main : moyenne
Points forts : permet de visualiser le look&feel final
Points faibles : compétences design/technique nécessaires,
notion de template/masque commun à plusieurs images
uniquement dans CS6
DynamiqueStatique DynamiqueStatique
Haute
fidélité
Moyenne
fidélité
Modifier IHM
existante
Concevoir
IHM
Haute
fidélité
Moyenne
fidélité
Prototypage
ergonomique
Photoshop
+
PowerPoint
Photoshop
+
Dreamweaver
PhotoshopAxure
Dreamweaver
Outils et méthodes de prototypage : COMMENT CHOISIR
PowerPoint
MS Visio
si Logiciel
Axure
Dreamweaver
MS Visio
+
Axure ou
PowerPoint ou
Dreamweaver
PowerPoint
Basse
fidélité
Balsamiq Axure
PowerPoint
MS Visio
si Logiciel
& Statique
Flash
Photoshop
+
Axure
Photoshop
+
Dreamweaver
A vous de jouer !
153
Utilisez la demo en ligne de Balsamiq pour concevoir la page d’accueil de
l’un de ces sites :
- Club sportif
- Restaurant
- Bibliothèque de quartier
- Association culturelle (langues étrangères, musique…)
N’oubliez pas de vous poser des questions sur les utilisateurs :
- Pourquoi viendraient-ils sur ce site? A quelle fréquence? Sont-ils experts
du domaine? Quelles informations comptent le plus pour eux?

Contenu connexe

Tendances

Pfe book insodev 2022 vf
Pfe book insodev 2022 vfPfe book insodev 2022 vf
Pfe book insodev 2022 vf
Sarra Sassi
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédia
Nazih Heni
 
Présentation solution web orientée service SOA pour la gestion du processus d...
Présentation solution web orientée service SOA pour la gestion du processus d...Présentation solution web orientée service SOA pour la gestion du processus d...
Présentation solution web orientée service SOA pour la gestion du processus d...
Hicham DJELLOULI
 
Présentation du stage technicien:Application VBA de gestion des employés
Présentation du stage technicien:Application VBA de gestion des employésPrésentation du stage technicien:Application VBA de gestion des employés
Présentation du stage technicien:Application VBA de gestion des employés
Meher Zayani
 
Slide farany l3
Slide farany l3Slide farany l3
Slide farany l3
Angelito Mandimbihasina
 
Business Intelligence
Business IntelligenceBusiness Intelligence
Business Intelligence
s.poles
 
Business Intelligence Reporting Solution
Business Intelligence Reporting Solution Business Intelligence Reporting Solution
Business Intelligence Reporting Solution
Imad ALILAT
 
Rapport PFE
Rapport PFERapport PFE
Rapport PFE
ArwaArgoubi
 
Rapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbachRapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbach
Ayoub Mkharbach
 
salwfrarapp137.pdf
salwfrarapp137.pdfsalwfrarapp137.pdf
salwfrarapp137.pdf
SASarah3
 
Projet de fin d’études
Projet de fin d’études  Projet de fin d’études
Projet de fin d’études
TombariAhmed
 
Chp1 - Introduction à l'Informatique Décisionnelle
Chp1 - Introduction à l'Informatique DécisionnelleChp1 - Introduction à l'Informatique Décisionnelle
Chp1 - Introduction à l'Informatique Décisionnelle
Lilia Sfaxi
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Riadh K.
 
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Rim ENNOUR
 
Conception et développement de la gestion de visa sous Dynamics Ax R2
Conception et développement de la gestion de visa sous Dynamics Ax R2Conception et développement de la gestion de visa sous Dynamics Ax R2
Conception et développement de la gestion de visa sous Dynamics Ax R2
Rawdha MABROUKI
 

Tendances (20)

Pfe book insodev 2022 vf
Pfe book insodev 2022 vfPfe book insodev 2022 vf
Pfe book insodev 2022 vf
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédia
 
Présentation solution web orientée service SOA pour la gestion du processus d...
Présentation solution web orientée service SOA pour la gestion du processus d...Présentation solution web orientée service SOA pour la gestion du processus d...
Présentation solution web orientée service SOA pour la gestion du processus d...
 
Chap1 2 dw (1)
Chap1 2 dw (1)Chap1 2 dw (1)
Chap1 2 dw (1)
 
Présentation du stage technicien:Application VBA de gestion des employés
Présentation du stage technicien:Application VBA de gestion des employésPrésentation du stage technicien:Application VBA de gestion des employés
Présentation du stage technicien:Application VBA de gestion des employés
 
Slide farany l3
Slide farany l3Slide farany l3
Slide farany l3
 
Business Intelligence
Business IntelligenceBusiness Intelligence
Business Intelligence
 
Pfe
PfePfe
Pfe
 
Business Intelligence Reporting Solution
Business Intelligence Reporting Solution Business Intelligence Reporting Solution
Business Intelligence Reporting Solution
 
Rapport PFE
Rapport PFERapport PFE
Rapport PFE
 
Rapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbachRapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbach
 
salwfrarapp137.pdf
salwfrarapp137.pdfsalwfrarapp137.pdf
salwfrarapp137.pdf
 
Projet de fin d’études
Projet de fin d’études  Projet de fin d’études
Projet de fin d’études
 
Prez PFE
Prez PFEPrez PFE
Prez PFE
 
Introduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHMIntroduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHM
 
Modele rapport pfe esprit
Modele rapport pfe  espritModele rapport pfe  esprit
Modele rapport pfe esprit
 
Chp1 - Introduction à l'Informatique Décisionnelle
Chp1 - Introduction à l'Informatique DécisionnelleChp1 - Introduction à l'Informatique Décisionnelle
Chp1 - Introduction à l'Informatique Décisionnelle
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
 
Conception et développement de la gestion de visa sous Dynamics Ax R2
Conception et développement de la gestion de visa sous Dynamics Ax R2Conception et développement de la gestion de visa sous Dynamics Ax R2
Conception et développement de la gestion de visa sous Dynamics Ax R2
 

En vedette

Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
Atelier IHM Polytech Nice Sophia
 
Intro conception2015vf bis
Intro conception2015vf bisIntro conception2015vf bis
Intro conception2015vf bis
Atelier IHM Polytech Nice Sophia
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateurs
Anne-Marie Pinna-Dery
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
Anne-Marie Pinna-Dery
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Atelier IHM Polytech Nice Sophia
 
Présentation ceihma tous
Présentation ceihma tousPrésentation ceihma tous
Présentation ceihma tous
Atelier IHM Polytech Nice Sophia
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
Anne-Marie Pinna-Dery
 
Plasticitérecherche2017
Plasticitérecherche2017Plasticitérecherche2017
Plasticitérecherche2017
Anne-Marie Pinna-Dery
 
Task analysis
Task analysisTask analysis
Task analysis
DCU_MPIUA
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Plasticité des IHM
Plasticité des IHMPlasticité des IHM
Plasticité des IHM
Anne-Marie Pinna-Dery
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Anne-Marie Pinna-Dery
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
Atelier IHM Polytech Nice Sophia
 
Cours Adaptation des IHM
Cours Adaptation des IHMCours Adaptation des IHM
Cours Adaptation des IHM
Atelier IHM Polytech Nice Sophia
 
Idm et ihm
Idm et ihmIdm et ihm
Plasticité2015 intro
Plasticité2015 introPlasticité2015 intro
Plasticité2015 intro
Atelier IHM Polytech Nice Sophia
 
Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
Atelier IHM Polytech Nice Sophia
 

En vedette (18)

Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 
Intro conception2015vf bis
Intro conception2015vf bisIntro conception2015vf bis
Intro conception2015vf bis
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateurs
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
 
Présentation ceihma tous
Présentation ceihma tousPrésentation ceihma tous
Présentation ceihma tous
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
 
Plasticitérecherche2017
Plasticitérecherche2017Plasticitérecherche2017
Plasticitérecherche2017
 
Task analysis
Task analysisTask analysis
Task analysis
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Introduction à la plasticité
Introduction à la plasticitéIntroduction à la plasticité
Introduction à la plasticité
 
Plasticité des IHM
Plasticité des IHMPlasticité des IHM
Plasticité des IHM
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Cours Adaptation des IHM
Cours Adaptation des IHMCours Adaptation des IHM
Cours Adaptation des IHM
 
Idm et ihm
Idm et ihmIdm et ihm
Idm et ihm
 
Plasticité2015 intro
Plasticité2015 introPlasticité2015 intro
Plasticité2015 intro
 
Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
 

Similaire à Modelisation et maquettage 2015

Persona grata
Persona grata Persona grata
Persona grata
Eric Brangier
 
IHM
IHMIHM
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
Eric Brangier
 
Construire son système d'exploitation
Construire son système d'exploitationConstruire son système d'exploitation
Construire son système d'exploitation
Julian Legendre
 
séminaire Veille et marché Pros new IHM
séminaire Veille et marché Pros new IHMséminaire Veille et marché Pros new IHM
séminaire Veille et marché Pros new IHM
buisine
 
Chp3 - IHM
Chp3 - IHMChp3 - IHM
Chp3 - IHM
Lilia Sfaxi
 
L'Ergonomie pour les Nuls
L'Ergonomie pour les NulsL'Ergonomie pour les Nuls
L'Ergonomie pour les Nuls
PALO IT
 
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours IntroductionErgonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Julien Roland
 
081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation
Amaury de Buchet
 
L'avent de la super intelligence artificielle et ses impacts
L'avent de la super intelligence artificielle et ses impactsL'avent de la super intelligence artificielle et ses impacts
L'avent de la super intelligence artificielle et ses impacts
Fernando Alcoforado
 
Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...
Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...
Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...
louschwartz
 
Thème11
Thème11Thème11
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Guillaume Abel
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat
 
GT Agile-UX - présentation UCD
GT Agile-UX - présentation UCDGT Agile-UX - présentation UCD
GT Agile-UX - présentation UCD
Flupa
 
Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...
La French Tech Rennes St Malo
 
Data science et Ux design [MEET UP Palo IT / Le LAPTOP]
Data science et Ux design [MEET UP Palo IT / Le LAPTOP]Data science et Ux design [MEET UP Palo IT / Le LAPTOP]
Data science et Ux design [MEET UP Palo IT / Le LAPTOP]
Nadège Bide
 
COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...
COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...
COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...
Faga1939
 

Similaire à Modelisation et maquettage 2015 (20)

Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 
Persona grata
Persona grata Persona grata
Persona grata
 
IHM
IHMIHM
IHM
 
IHM
IHMIHM
IHM
 
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
 
Construire son système d'exploitation
Construire son système d'exploitationConstruire son système d'exploitation
Construire son système d'exploitation
 
séminaire Veille et marché Pros new IHM
séminaire Veille et marché Pros new IHMséminaire Veille et marché Pros new IHM
séminaire Veille et marché Pros new IHM
 
Chp3 - IHM
Chp3 - IHMChp3 - IHM
Chp3 - IHM
 
L'Ergonomie pour les Nuls
L'Ergonomie pour les NulsL'Ergonomie pour les Nuls
L'Ergonomie pour les Nuls
 
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours IntroductionErgonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
 
081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation
 
L'avent de la super intelligence artificielle et ses impacts
L'avent de la super intelligence artificielle et ses impactsL'avent de la super intelligence artificielle et ses impacts
L'avent de la super intelligence artificielle et ses impacts
 
Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...
Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...
Personnalisation basée sur l'utilisation d'ontologies, utilisation du context...
 
Thème11
Thème11Thème11
Thème11
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
GT Agile-UX - présentation UCD
GT Agile-UX - présentation UCDGT Agile-UX - présentation UCD
GT Agile-UX - présentation UCD
 
Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...
 
Data science et Ux design [MEET UP Palo IT / Le LAPTOP]
Data science et Ux design [MEET UP Palo IT / Le LAPTOP]Data science et Ux design [MEET UP Palo IT / Le LAPTOP]
Data science et Ux design [MEET UP Palo IT / Le LAPTOP]
 
COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...
COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...
COMMENT FONCTIONNENT L'INTELLIGENCE ARTIFICIELLE ET SES LOGICIELS ET ALGORITH...
 

Dernier

1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 
Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
TimogoTRAORE
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
NadineHG
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
Txaruka
 

Dernier (7)

1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 
Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
 

Modelisation et maquettage 2015

  • 1. Ergonomie et Modélisation des utilisateurs des IHM Octobre 2015 Teresa Colombi Université de Nice-Sophia Antipolis LudoTIC Consulting
  • 2. 1.Définitions d’ergonomie 2.Techniques de modélisation des utilisateurs Tri de cartes Focus Group Entretiens Questionnaires 3. Maquettage IHM Plan du cours
  • 3. Le marché des TIC • Téléphone • SMS/MMS • Lecteur MP3 • Vidéo • Télévision • Internet/mail • Appareil photo • Applications de toute sorte…
  • 4. Un logiciel et ses manuels faciles d’utilisation de 800 pages et leurs annotations Le marché des TIC
  • 5. Le marché des TIC Dans les projets à forte composante technologique, nous oublions souvent l’utilisateur final de cette technologie Qu’est ce que l’utilisateur achète ? Une technologie ? Un produit ?  Surtout ce que ceci lui permet de faire… Ce qui passe obligatoirement par l’IHM
  • 6. Nouvelles Technologies de plus en plus puissantes et “envahissantes”, alors que les utilisateurs sont de moins en moins compétents Logiciels avec de plus en plus de fonctions, mais moins de 40% sont réellement utilisées L’introduction de nouveaux dispositifs informatiques en entreprise correspond souvent à une baisse de la productivité Le paradoxe actuel
  • 8. S.E.L.F. : L’ergonomie (ou l’étude des facteurs humains) est la discipline scientifique qui vise la compréhension fondamentale des interactions entre les êtres humains et les autres composantes d’un système, et la mise en œuvre dans la conception de théories, de principes, de méthodes et de données pertinentes afin d'améliorer le bien-être des hommes et l'efficacité globale des systèmes (2001) Définition officielle de l’Ergonomie
  • 9. De l’ergonomie à la User Experience
  • 10. Intro Méthodo Cible Maquettes Audit Tests
  • 11. 11 Pourquoi cela devient-il si important ? Encore il y a quelques années personne ne parlait d’UX… Effet de mode ?
  • 12. Intro Méthodo Cible Maquettes Audit Tests Il était une fois, l’informatique… Ses écrans intuitifs
  • 13. Intro Méthodo Cible Maquettes Audit Tests Il était une fois, l’informatique… Ses interactions logiques et compréhensibles
  • 14. Intro Méthodo Cible Maquettes Audit Tests Il était une fois, l’informatique… Ses chartes graphiques Glamour
  • 15. Intro Méthodo Cible Maquettes Audit Tests Il était une fois, l’informatique… Ses Smartphones plus phones que smart
  • 16. Intro Méthodo Cible Maquettes Audit Tests Et puis, la révolution est arrivée Interaction ultra-simplifiée (1 bouton) Skéuomorphisme pour faire baisser les réticences au changement Design soigné dans les moindres détails Centré sur besoins et usages Positionnement produit « Luxe »
  • 17. En pratique… Les ergonomes contribuent à la conception et à l’évaluation de tâches, produits, contextes et systèmes ayant pour but de les rendre compatibles avec les besoins, les compétences et les limites des êtres humains
  • 18. Pourquoi a-t-on besoin d’ergonomes ? Machine Développeur / Utilisateur Développeur / Utilisateur Hier Machine UtilisateurDéveloppeur Aujourd’hui
  • 19. Le rôle de l’ergonomie Machine UtilisateurDéveloppeurs Aujourd’hui Ergonomie Commanditaire Marketing … L’ergonome est une interface Utilisateur Utilisateur
  • 20. L’ergonomie à l’intersection de plusieurs disciplines HardWare SoftWare Physiologie & Anthropométrie I.A. Architecture Sociologie & Psychologie Sociale Psychologie Cognitive
  • 21. Étude des dimensions et formes du corps humain Le concept de centile centimètres % 5% 50% 95% L’Ergonomie Anthropométrique
  • 22. centimètres % 5% 50% 95% Étude des dimensions et formes du corps humain Le concept de centile L’Ergonomie Anthropométrique
  • 23. Enseignements à tirer :  Travailler sur la « moyenne » est toujours un mauvais choix  En outre, dès qu’on croise 3 dimensions (ex. taille, poids, pointure) on se retrouve avec <5% des personnes !  On ne pourra jamais satisfaire tout le monde… L’Ergonomie Anthropométrique
  • 24. L’Ergonomie Sociologique  La communication et le comportement entre individus et groupes  La sociologie des usages : l’utilité et la désirabilité des objets technologiques  Etude des tendances sociétales
  • 25. La psychologie cognitive  la vision et la perception,  l’attention,  la compréhension,  l’apprentissage,  la mémoire,  la résolution de problèmes,  l’impact de facteurs tels que le stress, la fatigue…
  • 26. Organessensoriels Détection Discrimination Identification Stade perceptif Traitement Mémoire de Travail Mémoire à long terme Stade cognitif Choix action Préparation action Exécution action Stade comportemental Attention Emotion Human Information Processing
  • 27. L’ergonome parmi les autres acteurs de la création de TIC
  • 28. Les composantes de l’UX selon LudoTIC • Technologique • Physique • Design • Gamification • Persuasion • … • Feeback • Gestion des erreurs • Navigation • … • Pertinence • Adéquation aux profils des utilisateurs Utilité Utilisabilité AccessibilitéDésirabilité
  • 29. La Conception Centrée Utilisateur 29
  • 30. Types d’intervention 30 Données qualitatives Données quantitatives Ce que les gens font Ce que les gens disent Entretiens Focus groups Journal de Bord Instructions au Sosie Enquêtes contextuelles Questionnaires Tri de cartes Observations terrain Eye Tracking A/B Testing Test Utilisateurs Analyse des Logs
  • 31. Types d’intervention Avec utilisateurs Sans utilisateurs Sans Interface Avec Interface Sans Interface Avec Interface Entretiens, Questionnaires, Focus Groups… Tests, Évocations, Jugements… Benchmarking, Analyse de la tâche, Prototypage… Analyse Heuristique
  • 32. En phase de conception d’un produit IT Lors de la conception d’une interface complexe, la modélisation permet de l’optimiser 3 axes de modélisation : Modélisation de l’utilisateur  Méthodes: entretiens, questionnaires, Focus Groups, Card Sorting…  Objectifs : connaître les attentes, le niveau d’expertise préalable, les souhaits, les opinions… Modélisation de la tâche  Méthodes : MAD, cognitive walkthrough…  Objectifs : identifier l’architecture de l’information et la séquence d’actions idéale Modélisation du contexte  Méthodes : entretiens, scénarios, benchmarking…  Objectifs : identifier le contexte cognitif, environnemental et social
  • 33. En phase de réalisation Lors de la réalisation de l’interface, il est important de vérifier le respect des critères de base d’utilisabilité Cela se fait en utilisant des check-list Les principes en question sont souvent du bon sens Le choix de la grille est à la base du succès de la démarche
  • 34. En phase de validation Sur un produit fini (ou sur des béta) il est possible de réaliser des tests utilisateurs, pour étudier l’interaction homme-machine Plusieurs méthodes peuvent être utilisées : - Tests « classiques » avec enregistrement de données telles que le temps d’exécution des tâches et les erreurs - Tests avec enregistrement des fichiers LOG - Tests oculométriques (pistage des mouvements des yeux) - Post-Test : évocations, questionnaires de satisfaction, tests de compréhension En réalisant des tests comparatifs sur plusieurs prototypes il est possible d’identifier celui qui permet les meilleures performances
  • 35. Un exemple : WebApp dans le domaine médical Environ 50 use cases identifiés par les développeurs Comment les traduire en enchainements d’actions cohérents ? Avec MAD !
  • 36. Un exemple : WebApp dans le domaine médical Associer à chaque User Story des fonctions et des écrans
  • 37. Un exemple : WebApp dans le domaine médical Prototypage rapide (module par module) et séances de confrontation avec les utilisateurs de différents profils
  • 38. Un exemple : WebApp dans le domaine médical
  • 39. Un exemple : WebApp dans le domaine médical
  • 40. Norme ISO 9241-210 Le but de l’ergonomie selon cette norme : rendre l’interaction avec les interfaces homme-machine  plus efficace  plus efficiente  plus satisfaisante 3 façons de prendre en compte ces dimensions :  Mesures théoriques  Données objectives issues du test  Ressenti utilisateur (efficacité et efficience perçues)
  • 41. Intro Méthodo Cible Maquettes Audit Tests L’utilisabilité d’un produit est définie par rapport à :  une population cible (avec des caractéristiques précises),  des buts spécifiques  à accomplir dans un contexte précis Norme ISO 9241-210 Changer un de ces 3 paramètres peut rendre un produit ergonomique totalement inutilisable
  • 42. Connaitre la population cible  Aspects perceptifs (vision, audition, toucher et leur maladies)  Aspects physiques et haptiques (anthropométrie)  Aspects cognitifs (attention, mémoire, résolution de problèmes…)  L’expertise (the user’s cube) Les aspects socioculturels (langage, conventions sociales) Données sur l’équipement (PC, modem, browser, plug-in…)
  • 43. La perception visuelle L’illusion optique de Muller-Lyer L’illusion optique de Kanitzsa Le cerveau peut se tromper… Perception ≠ traitement du signal The Simpsons™ copyright by Fox Interprétation
  • 44. Notre expérience de vie façonne notre manière de voir les choses
  • 45. Interaction perception/compréhension L’effet Stroop La dénomination des couleurs est influencée par le traitement sémantique (lecture automatique) Jaune Noir Bleu Orange Vert Giallo Nero Blu Arancione Verde
  • 46. The User Cube Expertise sur l’environnement informatique ExpertisesurlesupportIT
  • 47. La courbe de l’expertise Le concept de centile n’est pas uniquement lié à la réalisation d’objets « physiques » Les centiles peuvent s’appliquer également à des caractéristiques cognitives Si l’on dessine la courbe relative à la maîtrise de l’ordinateur, par rapport à quel centile doit-on baser la développement d’un nouveau logiciel destiné au grand public? Connaissances informatiques 5% 50% 95%
  • 48. L’utilisateur « lambda »  Il se demande pourquoi cliquer sur « démarrer » pour éteindre le PC ?  Il se demande où sont passés A: et B: ?  Il est perplexe devant des mots comme login, plugin… ?  Il ne comprend pas bien la notion de ressources réseau  Ne fait pas la différence entre Internet et IE Ne pensez pas pouvoir vous mettre à sa place !
  • 49. Structurer la navigation par use case  Comprendre les tâches des utilisateurs permet de structurer la navigation
  • 50. Structurer la navigation par use case
  • 51. Le cycle en V Analyse des besoins et faisabilité Spécifications Conception architecturale Conception détaillée Codage Tests unitaires Tests d’intégration Tests de validation Recette Analyse des besoins utilisateurs Spécifications d’Utilisabilité Prototypage Evaluation Experte Tests d’Utilisabilité Evaluation Experte
  • 52. Connaître les utilisateurs : techniques  La récupération des représentations mentales : le Tri de Cartes  Connaissance approfondie de l’utilisateur : les Entretiens  Les attentes et les souhaits : le Focus Group Le recueil de données sur large échelle : les Questionnaires
  • 53. Phase : conception Coûts : - Expérimentateurs : 1 - Participants: à partir de 5 - Appareillage : fiches papier, logiciels gratuits Données : qualitatives ou quantitatives (selon traitement) Le Tri de cartes (ou Card Sorting) permet de recueillir des infos sur l’organisation mentale des contenus, selon les futurs utilisateurs, ce qui permet de créer l’arborescence du site, la structure des menus du logiciel… + : codage ergonomique des informations. Bas coût de réalisation du point de vue du nombre de participants et de l’appareillage - : besoin de périmètre fonctionnel définitif Structurer les contenus : le tri de cartes
  • 54. Un exemple de tri de cartes
  • 55. Le tri de cartes « électronique » Logiciels gratuits comme UxSort, IBM EZ Calc… Avantages :  Pas de coûts de « temps expérimentateur »  Possibilité de toucher plus d’utilisateurs  Analyse statistique des données Inconvénients :  Pas de certitude que la tâche soit bien comprises/réalisée sérieusement  Inutilisable sur certaines populations (jeunes enfants, personnes peu familières avec l’informatique…)
  • 56. Phase : CONCEPTION Coûts : - EXPERIMENTATEURS : 1 - SUJETS : à partir de 5 - APPAREILLAGE : magnétophone Données : qualitatives L’entretien sert à recueillir des données relatives aux besoins et aux attentes, à comprendre le point de vue des utilisateurs, à créer le/les premier/s profil/s de l’usager “cible” + : l’entretien est un outil “souple”, qui, si bien maîtrisé par l’expérimentateur, peut donner des informations précises et très utiles - : il faut un expérimentateur qui sache bien gérer la souplesse de cette technique… Les entretiens
  • 57. Méthodes spécifiques d’entretien : instruction au sosie 57 “Imaginez que je sois en tout point identique à vous physiquement. Je vais devoir faire votre travail à votre place sans que personne ne se rende compte qu’il ne s’agit pas de vous mais d’un sosie. Donnez-moi toutes les instructions nécessaires” Technique axée sur l’aspect “procédurale” et la mise en oeuvre d’actions sans “rationnaliser” les raisons sous-jacentes
  • 58. Méthodes spécifiques d’entretien : enquête contextuelle 58 “Imaginez que je sois un apprenti qui arrive dans votre service. Montrez moi comment je dois me servir de ce logiciel pour réaliser les tâches principales” Technique qui met en exergue les strategies et les habitudes des utilisateurs dans l’interaction avec un produit metier
  • 59. Réussir ses entretiens utilisateurs  Etablir un Guide d’Entretien clair et précis  Si possible, faire un « pilote »  Mettre les participants à l’aise  Ne pas tourner au dialogue  Recadrer sans froisser  Prendre le temps pour « débriefer » avec chaque participant  Créer une matrice Problématiques/participants pour exploiter les résultats
  • 60. Phase : CONCEPTION et RÉALISATION Coûts : - EXPERIMENTATEURS : 1 ou 2 - SUJETS : ~ 24 - APPAREILLAGE : caméscope, magnétophone (vitre sans tain) Données : qualitatives Technique qui met en lumière l’apport créatif des utilisateurs. Discussions ludiques pour faire sortir le coté imaginatif. + : recueil d’informations pertinentes et difficiles à obtenir autrement - : budget élevé et pour l’appareillage et pour le nombre de sujets Les Focus Groups
  • 61. Un exemple de focus group Jeu vidéo sur support innovant : le distributeur de boissons à interaction gestuelle Plein de questions : Quel type de jeu ? Seuls ou à plusieurs ? Peur du ridicule ? File d’attente ? Comment attirer l’utilisateur ? Quels rewards ? Comment le fidéliser ?
  • 62. Réussir ses focus groups  Cacher le plus possible les caméras (même si les participants sont informés de leur présence)  Contexte décontracté (pièce chaleureuse, boissons, chips…)  Utiliser des ice breakers (jeu du menteur, jeu « lève la main qui… ») pour chauffer les participants  Veiller au bon rythme des activités  Animer les sessions pour que tout le monde participe (éviter « l’effet mouton ») Faire une bonne synthèse finale
  • 63. Phase : CONCEPTION et TEST Coûts : - EXPERIMENTATEURS : 1 en Conception (sauf si à distance), 1 en Test - SUJETS : selon la phase - APPAREILLAGE : / Données : qualitatives et quantitatives En conception : vérification sur large échelle des hypothèses conçues pendant les entretiens/focus groups… En phase de test d’utilisabilité : recueil de données sur la satisfaction, les impressions sur le produit, les critiques... + : il permet de recueillir beaucoup de données et quantifier la fréquence des profils utilisateurs - : c’est un outil « rigide » Les questionnaires
  • 64. Questionnaires : caractéristiques La validité externe : définir dans quelle mesure les résultats d’une expérience peuvent être généralisés à d’autres situations et d’autres personnes La validité interne : s’assurer que rien d’autre que la VI n’affecte la VD choisie (unidimensionnalité de la batterie de questions) La fiabilité de l’outil : alpha de Cronbach, indice de la cohérence du questionnaire (entre 0 et 1). Alpha= nQ r 1+(nQ-1)r
  • 65. Questionnaires : format des questions Réponses binaires : oui/non, vrai/faux Cases à cocher : avec 1 ou plusieurs réponses possibles Réponses ouvertes et phrases à compléter : laissent la place à l’expression du sujet L’échelle de Likert : expression accord/désaccord Le différentiel sémantique : Je trouve l’utilisation du site : facile 1 2 3 4 5 6 7 difficile
  • 66. Questionnaires : les options de réponse Les cases à cocher Combien de fois par mois faites-vous vos courses ?  1-2 fois  2-4 fois  4-6 fois  plus de 6 fois 3 problèmes :  empan temporel trop large recouvrement entre les réponses  manque d’options
  • 67. Questionnaires : les options de réponse L’échelle de Likert Je trouve que le logo de l’application est très joli 1 2 3 4 5 tout à fait en désaccord tout à fait d’accord pas d’avis Attention au point neutre  Le problème de Marradi : sous-utilisation des points extrêmes et décalage du point d’équilibre
  • 68. Questionnaires : formuler correctement les questions  questions courtes  formes verbales actives  éviter les doubles négations  éviter les “questions doubles”  vérifier que les termes employés sont connus par le public visé  attention à la valeur affective des mots
  • 69. Les questionnaires à distance Plusieurs possibilités :  Envoi de fichier Word avec éléments actifs (cases à cocher, champs de saisie…)  Utilisation de systèmes d’enquête en ligne (attentions à la fausse gratuité de certains), kwiksurveys.com est bien  Publication en Intranet possible (par ex. via Limesurvey)  Le recours à des outils « pro » comme Sphynx n’est pas souvent nécessaire
  • 70. La qualité des données recueillies Pour s’assurer que les personnes restent concentrées et fournissent des « bonnes » réponses dans un questionnaire à distance :  Limiter le nombre de questions (max 60, idéalement 30 ou 40)  Introduire des vérificateurs de cohérence (questions qui se répètent) et de concentration (« svp choisissez l’option 3 »)  S’assurer de la bonne ergonomie du questionnaire (affichage, gestion des erreurs…) !
  • 73. Objectif du questionnaire Bien que le questionnaire serve également à recueillir toute information intéressante relative à la population cible, le but ultime est d’arriver à quantifier les profils utilisateurs  Les questions doivent être discriminantes, autrement dit en fonction des options de réponse on doit pouvoir « classer » les répondants Ex. : si réponse A aux Q 2 et 3 et réponse B aux Q 4, 5 et 7, alors profil = early adopter
  • 74. Questionnaires : quelles analyses ?  Mise en relation entre les réponses données et les profils utilisateurs attendus  Statistiques « descriptives »  Statistiques plus approfondies, dites « inférentielles »
  • 75. Questionnaires : données  Données nominales : il s’agit de catégories (sexe, cat. Professionn., …)  Données ordinales : il s’agit de rangs (niveau de performances, classes d’âge, …)  Échelle d’intervalles : données permettant de comparer l’ampleur des différences (temps, erreurs)
  • 76. Les analyses statistiques Statistiques Descriptives Inférentielles Indices de Tendance Centrale Indices de Dispersion Etude des Relations Etude des Différences
  • 77. Les analyses statistiques Statistiques descriptives: indices de tendance centrale  Mode : modalité dont l'effectif est le plus important (échelle nominale et +)  Médiane : modalité partageant la distribution en 2 parties d'effectifs égaux (échelle ordinale et d’intervalles)  Moyenne : valeur arithmétique représentant la moyenne (variable quantitative uniquement)
  • 78. Les analyses statistiques Statistiques descriptives: indices de dispersion  Variance : moyenne des écarts aux carré par rapport à la moyenne  Écart type : racine carrée de la variance
  • 79. Intro Méthodo Cible Maquettes Audit Tests La corrélation Statistique non paramétrique permettant de mettre en lumière une relation entre 2 variables  cela ne permet pas d’étudier le lien cause/effet  R (de Bravais Pearson) varie entre -1 et +1 A B Corrélation positive A B Corrélation négative A B Corrélation nulle
  • 80. Un, personne, cent mille… Si tous les utilisateurs sont différents, comment créer une interface adaptée ? Solution 1 : une interface très « large »  trop de choix tue le choix… Solution 2 : une interface pour chaque personne  trop cher! Solution 3 : une interface pour chaque profil modélisé  ergonomique et viable
  • 81. Modéliser les utilisateurs Idéalement, la démarche de compose de :  une approche qualitative (entretiens en profondeur, focus groups…)  une approche quantitative (questionnaires)  suivi d’une synthèse des problématiques principales sous forme de Personas Ceci permet d’identifier les profils principaux et leurs spécificités (besoins, contexte…) et de faire des choix basés sur leur fréquence (on ne peut pas plaire à tout le monde…) Les Personas sont « statiques », d’autres approches sont nécessaires pour modéliser la tâche des utilisateurs (MAD, tri de cartes)
  • 82. Les Personas Archétypes des utilisateurs cible, prenant en compte :  Leurs caractéristiques (âge, préférences, habitudes, contexte…)  Les tâches à accomplir via le produit (use case) En marketing on s’en sert pour un meilleur ciblage commercial Ceci ne correspond à aucun profil !
  • 83. Les Personas en Ergonomie On ne doit pas dépasser 3, 4 personas pour que les résultats soient réellement utiles Un exemple : appli iPhone pour suivi de la bourse Bernard : le broker branché Catherine : l’occasionnelle multi- tâche Hugo : le touche-à- tout 30% 45% 10% Maîtrise iPhone 5° 50° 95° B C H Compétences métier 5° 50° 95° H C B
  • 84. Les Personas en Ergonomie Bernard : le broker branché Catherine : l’occasionnelle multi- tâche Hugo : le touche-à- tout 55% 25% 15% On ne doit pas dépasser 3, 4 personas pour que les résultats soient réellement utiles Un exemple : appli iPhone pour suivi de la bourse Maîtrise iPhone 5° 50° 95° B C H Compétences métier 5° 50° 95° H C B
  • 85. Du Persona à la conception IHM Projet : réseau social dans le domaine des achats Mickael P. Responsable Informatique Peut supporter une « charge informationnelle » importante Exigent quant à l’efficacité du moteur de recherche Peu intéressé au design Peu fidèle Sophie L. Assistante de gestion Vite perdue dans les sites trop « chargés » Attirée par nouveautés, idées cadeau… Très intéressée au design Assez fidèle
  • 86. Personas : tableau de correspondance Caractéristiques Michael Sophie Impact Compétences IT Très bonnes Basiques Gestion de la charge informationnelle Exigences vis-à-vis de la qualité du moteur de recherche Sexe Homme Femme Importance du design Besoins Trouver au plus vite les contenus souhaités Etre guidée à la découverte, conseillée Importance de la qualification du lead Objectifs Gagner du temps Occuper le temps Parcours de navigation
  • 87. Des Personas à la conception d’interface : un exemple 87 Une fois que la cible du produit est bien définie et que les tâches qu’elle a à realiser sont claires, il sera facile de concevoir une interface autour de ces données
  • 88. Intro Méthodo Cible Maquettes Audit Tests Success Story : VEFA Immobilier En partenariat avec Rebonds : 55% Visites : 5.500/mois Leads générés : 650/mois
  • 89. Intro Méthodo Cible Maquettes Audit Tests Step 1 : comprendre les utilisateurs
  • 90. Intro Méthodo Cible Maquettes Audit Tests Step 2 : reconcevoir l’architecture de l’information
  • 91. Intro Méthodo Cible Maquettes Audit Tests Step 3 : maquettage itératif
  • 92. Intro Méthodo Cible Maquettes Audit Tests Step 4 : design Rebonds : 40% (-15%) Visites : 7000/mois (+27%) Leads générés : 800/mois (+23%)
  • 93. Intro Méthodo Cible Maquettes Audit Tests Le site en ligne
  • 94. Maquetter une interface signifie… Formaliser un concept un fonctionnement Présenter pour brainstormer valider Evaluer l’ergonomie le coût un aspect spécifier la faisabilité un concept un aspect un fonctionnement brainstormer spécifier valider l‘ergonomie la faisabilité le coût
  • 95. Le maquettage en cycle en V Analyse des besoins et faisabilité Spécifications Conception architecturale Conception détaillée Codage Tests unitaires Tests d’intégration Tests de validation Déploiement Analyse des besoins utilisateurs Spécifications d’Utilisabilité Prototypage ergonomique Evaluation Experte Tests d’Utilisabilité Evaluation Experte
  • 96. 96 Les maquettage en « Agile »
  • 97. Types d’intervention Intervention dans le processus complet : Conception Réalisation Validation ○ Ergonomie de conception Intervention ponctuelle sur produit fini/béta version : Evaluation (par Test Utilisateur ou Évaluation Experte) ○ Ergonomie de correction Maquettage de conception Maquettage correctif
  • 98. Ergonomie de conception : prototypage ergonomique Avantages :  Réduction du temps de dév jusqu’à 30% (ROI++) car dès le début les développeurs sont guidés par les ergonomes en ce qui concerne le développement de l’IHM, voire de l’architecture des contenus  Assurance d’une IHM qui respecte les principes d’ergonomie  Possibilité de cycles de tests utilisateurs  Support de travail collaboratif : validations à l’intérieur de l’équipe  Base pour la mise au point des spécifications IHM • à fournir aux développeurs (rédaction Word) • à fournir aux graphistes (visuels et contraintes de couleurs, police…) Inconvénients :  Prévoir budget  Prévoir du temps en amont du projet
  • 99. Les clé d’un prototype ergonomique Pour s’assurer que le prototype en cours de conception est ergonomique il faut le construire :  en respectant les principes de base d’ergonomie des IHM (organisation visuelle, lisibilité…)  en prenant en compte la logique métier des utilisateurs finaux (langage, besoins, enchaînements d’écrans…)
  • 100. Principes de base d’ergonomie des IHM 1. Feedback du système 2. Match avec les profils utilisateurs 3. Sensation de contrôle 4. Cohérence et standard 8. Flexibilité 9. Surcharge cognitive 10. User Experience 5. Gestion des erreurs 12. Aide et documentation 11. Dialogue Homme-Machine 6. Optimisation des performances 7. Mise en page 13. Collaboration
  • 101. Recueil d’infos sur la logique métier Plusieurs recueils de données peuvent être utiles et pertinents :  Analyse de la tâche (organisation et séquence des contenus)  Tri de cartes (architecture des contenus)  Entretiens/Focus groups (besoins, attentes, critiques de l’existant…)  Questionnaires  Autres sources d’infos : tickets SAV, remontées des commerciaux ou des formateurs…
  • 102. Enchainer écrans et fonctions : un exemple
  • 103. Enchainer écrans et fonctions : un exemple
  • 104. Application xxx – la vision « tâche utilisateur » Délivrer attestation Identification Entreprise/TI Plusieurs réponses 1 seule bonne réponse Choisir la bonne Rechercher attestations Générer attestation Consulter attestation
  • 105. Application xxx – la vision « tâche utilisateur » Poser opposition Identification Entreprise/TI Plusieurs réponses 1 seule bonne réponse Choisir la bonne Rechercher oppositions Poser opposition Consulter opposition
  • 106. Les IHM Recherche Résultats Détails attestations/oppositions IHM « avant » Zoning issu de l’analyse de la tâche
  • 107. Ergonomie de correction : prototypage ergonomique Suite à un Test Utilisateur ou à une Évaluation Experte, il est possible d’illustrer les modifications/recommandations formulées par des maquettes ou prototypes Avantages :  Support « visuel » facilement compréhensible pour les développeurs Inconvénients :  Compétences sur outils de maquettage « haute fidélité » nécessaires
  • 112. Maquette ou Prototype ? Prototype • Est conçu sur la plateforme réelle et peut être connecté à des données fictives ou réelles • Souvent une Beta du produit final Maquette • Réalisée sur un système différent de celui qui sera utilisé pour le produit final • Pas de connexion à des bases de données  Si on n’est pas censés faire du code réutilisable on fait des maquettes et non pas des prototypes
  • 113. Prototypage horizontal et vertical Nielsen (1994) distingue 2 degrés de prototypage lHM selon le niveau d’interactivité : Prototype horizontal Correspond à la partie graphique de l’interface Présente l’agencement général et les éléments de l’interface (boutons, menus, champs de saisie, etc.) Permet : • la confirmation des exigences de l’IHM (nombre de zones de contenu, positions…) par rapport à la globalité du produit • d’avoir une version de démonstration pour obtenir des retours des commanditaires du produit par rapport à leurs besoins initiaux • une première estimation du développement en termes de temps, de coût et de charge de travail
  • 114. Prototypage horizontal et vertical Prototype vertical Met en œuvre certaines fonctionnalités afin que l’utilisateur puisse dérouler un scénario complet d’utilisation (via une suite d’écrans ou des interactions réelles) Permet : • d’avoir une idée concrète de la cinématique d’utilisation • le dimensionnement du système de données, les besoins d'interaction de l'interface • d’avoir plus de précisions sur la complexité des exigences par rapport aux fonctionnalités actuelles du produit (on va plus dans le détail)
  • 115. Fidélité visuelle des prototypes Low fidelity (Lo-Fi) ou bas niveau ○ Première idée de l’organisation visuelle des contenu Medium fidelity (Mi-Fi) ou moyen niveau ○ Prototypes informatiques respectant le zoning final (wireframes) ○ Rudiments de visuel tel qu’images, couleurs… High fidelity (Hi-Fi) ou haut niveau ○ Look&feel définitif, charte graphique finale
  • 116. Bas niveau de fidélité visuelle Avantages :  la réalisation ne nécessite pas de compétences techniques (support facile à produire)  facile à modifier pendant un brainstorming (moins de contraintes « mentales » devant un dessin que devant une IHM)  permet de se concentrer sur le contenu et non pas sur le visuel Inconvénients :  non respect des contraintes visuelles (taille écran, polices…)
  • 117. Moyen niveau de fidélité visuelle Avantages :  permet de valider de façon précise les tailles des zones, des polices  contient les rudiments de visuel tel qu’images, couleurs…  étant interactive, la maquette permet de valider la cinématique et l’enchainement des écrans Inconvénients :  ne prétend pas à la perfection en termes de valeur artistique et n’est pas à considérer définitive en termes de charte graphique  savoir faire « la part des choses » car il manque le look&feel (on doit valider le fonctionnel, non pas l’esthétisme)  il faut un peu plus de compétences techniques
  • 118. Entre la basse et la moyenne fidélité
  • 119. Moyen niveau de fidélité visuelle : exemple
  • 120. La même chose en haute fidélité
  • 122. Haute fidélité visuelle Avantages :  Impression de voir « le produit fini »  Permet de valider les « petits détails » d’ordre graphique (design) Inconvénients :  Temps de réalisation  si réalisée trop tôt, danger que votre interlocuteur prête plus d’attention à la valeur artistique qu’à l’optimisation ergonomique
  • 125. Types de maquette On choisit la meilleure approche en fonction de nos objectifs et du contexte de l’intervention ! Fidélité visuelle Basse Statique Dynamique Moyenne Haute
  • 126. Intro Méthodo Cible Maquettes Audit Tests Les visuels Lo-Fi, Mi-Fi, Hi-Fi ne sont pas suffisants car :  les images ne se « auto- commentent » pas  il n’est pas possible de tout maquetter (trop de temps)  si on ne définit pas des « grands principes » on ne pourra pas intégrer correctement les évolutions futures Le document « GUI specifications »
  • 127. Intro Méthodo Cible Maquettes Audit Tests C’est le résumé de toute la démarche entreprise, il détaille :  l’aspect statique de chaque page-écran (zoning – maquette bas/moyen niveau)  les principes de fonctionnement (cinématique)  les principes de design et interaction (ex. taille min des polices, couleurs à utiliser…)  les visuels Hi-Fi (il devient un « StyleGuide ») Le document « GUI specifications »
  • 129. Quels outils ?  Tableau blanc  Papier/crayon  Mais aussi… une multitude d’outils informatiques et bien d’autres…
  • 130. Quels outils ?  Des tas de sites pour vous aider à choisir : http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools http://www.newsphil-blog.com/une-selection-de-21-outils-de-prototypage-de-web-et-mobile http://www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/  Un Consensus autour de 3 outils : - Balsamiq (rapide) - Axure (puissant) - Photoshop (charte graphique)  Mais aussi Power Point (avec une librairie de composants) Ce qui compte c’est de choisir un outil adapté à vos besoins en fonction de vos types de projets, clients , processus de développement, etc.
  • 131. Papier/crayon ou tableau blanc effaçable Fidélité : * Interactivité : * Composants IHM : NON Prix : / Prise en main : facile Points forts : permet de commencer à réfléchir à plusieurs (brainstorming), notamment sur tableau blanc (grand, effaçable). Points faibles : très basse fidélité des images (pas de prise en compte de taille de police, taille/résolution écran…)
  • 132. Balsamiq Fidélité : * Interactivité : ** Composants IHM : OUI Prix : 79€ Prise en main : facile Points forts : visuel « dessin à main libre », permet de se détacher des aspects de look&feel, tout en ayant un fichier informatique, génère des Pdf cliquables Points faibles : pas d’évolutions possibles vers Mi-Fi et Hi-Fi, peu d’interactivité
  • 133. 133 Exemple de maquette « commentée »
  • 134. Axure Fidélité : ** Interactivité : *** Composants IHM : OUI Prix : 600 $ Prise en main : moyennement facile Points forts : rendu « sketching » possible, doc de specs associé, proto HTML totalement dynamique Points faibles : code non réutilisable
  • 136. PowerPoint Fidélité : ** Interactivité : ** Composants IHM : NON Prix : inclus dans le pack office Prise en main : facile Points forts : du Lo-Fi au Mi-Fi, possibilité de l’utiliser pour mini- test utilisateurs Points faibles : pas de code réutilisable, pas de doc de specs, actions clavier impossibles
  • 140. Pré souscription • Questionnaire Vos versements ValidationVotre profil • Conditions générales • Coordonnées • Versements initial • Versements programmés • Bénéficiaires • Récapitulatif • Impression documents  Choix du courtier Choix du courtier Avant toute souscription, vous devez prendre connaissance de la Fiche de présentation du Courtier. Le téléchargement des documents ci-dessous nécessitent le logiciel Acrobat Reader Audit Conseil Gestion 35 rue Pastorelli 06000 Nice Assurance vie en ligne BUREAUX DU RHUL 5 rue Gabriel Fauré 06000 Nice 3 résultat(s) exacte(s) Votre recherche : 06000 Cabinet CERF 8 avenue Gustave Nadaud 06000 Nice Consultez la Fiche de présentation de ce Courtier (PDF, 108 Ko) Souscrire Souscrire Consultez la Fiche de présentation de ce Courtier (PDF, 210 Ko) Consultez la Fiche de présentation de ce Courtier (PDF, 167 Ko) Souscrire Maquette
  • 141. Pré souscription • Questionnaire Vos versements ValidationVotre profil • Conditions générales • Coordonnées • Versements initial • Versements programmés • Bénéficiaires • Récapitulatif • Impression documents  Choix du courtier Choix du courtier Avant toute souscription, vous devez prendre connaissance de la Fiche de présentation du Courtier. Le téléchargement des documents ci-dessous nécessitent le logiciel Acrobat Reader Audit Conseil Gestion 35 rue Pastorelli 06000 Nice Assurance vie en ligne BUREAUX DU RHUL 5 rue Gabriel Fauré 06000 Nice 3 résultat(s) exacte(s) Votre recherche : 06000 Cabinet CERF 8 avenue Gustave Nadaud 06000 Nice Consultez la Fiche de présentation de ce Courtier (PDF, 108 Ko) Souscrire Souscrire Consultez la Fiche de présentation de ce Courtier (PDF, 210 Ko) Consultez la Fiche de présentation de ce Courtier (PDF, 167 Ko) Souscrire 1 3 2 Maquette
  • 142. Pré souscription • Questionnaire Vos versements ValidationVotre profil • Conditions générales • Coordonnées • Versements initial • Versements programmés • Bénéficiaires • Récapitulatif • Impression documents  Choix du courtier Choix du courtier Avant toute souscription, vous devez prendre connaissance de la Fiche de présentation du Courtier. Le téléchargement des documents ci-dessous nécessitent le logiciel Acrobat Reader Audit Conseil Gestion 35 rue Pastorelli 06000 Nice Assurance vie en ligne BUREAUX DU RHUL 5 rue Gabriel Fauré 06000 Nice 3 résultat(s) exacte(s) Votre recherche : 06000 Cabinet CERF 8 avenue Gustave Nadaud 06000 Nice SouscrireConsultez la Fiche de présentation de ce Courtier (PDF, 108 Ko) Souscrire Souscrire J’ai pris connaissance du document Consultez la Fiche de présentation de ce Courtier (PDF, 210 Ko) Consultez la Fiche de présentation de ce Courtier (PDF, 167 Ko) 4
  • 143. Pré souscription • Questionnaire Vos versements ValidationVotre profil • Coordonnées • Versements initial • Versements programmés • Bénéficiaires • Récapitulatif • Impression documents Conditions générales • Choix du courtier Conditions générales Audit Conseil Gestion Avant de continuer, prenez connaissance, imprimez, et enregistrez sur votre disque dur la Note d'information valant Conditions Générales du contrat et de son Annexe Financière Complémentaire. (PDF, 120 Ko) Vous disposerez ainsi de toutes les règles de fonctionnement de votre contrat. Le téléchargement de ce document nécessitent le logiciel Acrobat Reader Continuer 5 6
  • 144. Pré souscription • Questionnaire Vos versements ValidationVotre profil • Coordonnées • Versements initial • Versements programmés • Bénéficiaires • Récapitulatif • Impression documents Conditions générales • Choix du courtier Conditions générales Audit Conseil Gestion Avant de continuer, prenez connaissance, imprimez, et enregistrez sur votre disque dur la Note d'information valant Conditions Générales du contrat et de son Annexe Financière Complémentaire. (PDF, 120 Ko) Vous disposerez ainsi de toutes les règles de fonctionnement de votre contrat. Le téléchargement de ce document nécessitent le logiciel Acrobat Reader J’ai pris connaissance des Conditions Générales Continuer 7
  • 145. Pré souscription Vos versements ValidationVotre profil • Conditions générales • Versements initial • Versements programmés • Bénéficiaires • Récapitulatif • Impression documents  Questionnaire• Choix du courtier • Coordonnées Questionnaire Questionnaire d’aversion Votre profil de risque Profil Défensif (PDF, 67 Ko) Consultez les descriptions des différents profils que Audit Conseil Gestion vous présente, afin de vous permettre d’effectuer la répartition de votre versements entre les différents supports. Le téléchargement des documents ci-dessous nécessitent le logiciel Acrobat Reader Profil Équilibré (PDF, 89 Ko) Profil Audacieux (PDF, 54 Ko) Profil Dynamique (PDF, 123 Ko) Continuer sans questionnaire Audit Conseil Gestion met à votre disposition un outil de mesure de votre goût pour le risque ou aversion du risque appelé « Questionnaire d’aversion au risque» vous permettant de déterminer votre Profil de risque et de vous recommander une répartition de votre versement en fonction de ce profil. Toutefois, vous pouvez continuer la souscription sans faire appel au questionnaire d’aversion. Vous serez ainsi libre de répartir vos versements. 8 9 10
  • 146. Microsoft Visio Fidélité : *** (IHM type Logiciel en OS Windows) Interactivité : * Composants IHM : OUI Prix : 250$ pour la version standard Prise en main : facile Points forts : produit boîtes de dialogue, fenêtres, etc. dans le look&feel d’un logiciel fini (en OS Windows) Points faibles : pas d’interactivité
  • 149. Editeur HTML de type WYSIWYG Fidélité : *** Interactivité : *** Composants IHM : OUI Prix : très variable Prise en main : moyenne Points forts : proto HTML, code éventuellement réutilisable Points faibles : pour avoir du « bon » code compétences techniques nécessaires
  • 150. Flash Fidélité : *** Interactivité : *** Composants IHM : NON Prix : 700€ Prise en main : difficile Points forts : possibilité de coder un produit final Points faibles : compétences design/codage nécessaires
  • 151. Photoshop Fidélité : *** Interactivité : * Composants IHM : NON Prix : +700€ Prise en main : moyenne Points forts : permet de visualiser le look&feel final Points faibles : compétences design/technique nécessaires, notion de template/masque commun à plusieurs images uniquement dans CS6
  • 152. DynamiqueStatique DynamiqueStatique Haute fidélité Moyenne fidélité Modifier IHM existante Concevoir IHM Haute fidélité Moyenne fidélité Prototypage ergonomique Photoshop + PowerPoint Photoshop + Dreamweaver PhotoshopAxure Dreamweaver Outils et méthodes de prototypage : COMMENT CHOISIR PowerPoint MS Visio si Logiciel Axure Dreamweaver MS Visio + Axure ou PowerPoint ou Dreamweaver PowerPoint Basse fidélité Balsamiq Axure PowerPoint MS Visio si Logiciel & Statique Flash Photoshop + Axure Photoshop + Dreamweaver
  • 153. A vous de jouer ! 153 Utilisez la demo en ligne de Balsamiq pour concevoir la page d’accueil de l’un de ces sites : - Club sportif - Restaurant - Bibliothèque de quartier - Association culturelle (langues étrangères, musique…) N’oubliez pas de vous poser des questions sur les utilisateurs : - Pourquoi viendraient-ils sur ce site? A quelle fréquence? Sont-ils experts du domaine? Quelles informations comptent le plus pour eux?