Cours 2

Conception des IHM

INFO
Stéphanie Jean-Daubias
[Link]-Daubias@[Link]
[Link]

Dernière mise à jour

jeudi 25 janvier 2024
Déroulement
• Cours Organisation de l’UE Introduction
• Cours Introduction l’IHM VOUS ÊTES ICI
• Cours Conception
• TP en équipes
Conception • Cours IHM maquettes
• TP maquettage
• Vidéo en équipes

Tests • Cours Théories générales pour l’ergo

• Cours Tests utilisateurs utilisateurs • TP évaluation ergo théories avec JADE
• TP test utilisateurs • Cours Éléments d’IHM – guides de style
• TP rapport d’évaluation ergonomique
• Cours Critères d’évaluation généraux
• TP évaluation ergo critères avec JADE
Ergonomie • Cours Critères d’évaluation Web
• TP noté rapport d’évaluation ergo Web
• Cours Critères d’évaluation mobile
• TP évaluation ergo mobile JADE ou classique
• TP évaluation complète JADE Préparation • Cours Critères d’évaluation Handicap
• TP vidéo pédagogique de l’examen • TP noté maquettes et handicap

Examen
+ vraie vie

—2
62
➢ Conception des systèmes informatiques
 Conception d’IHM : caractéristiques
 Processus de conception
 Techniques de recueil d’informations
 Conception inclusive
 Sobriété numérique

—3
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Conception des systèmes informatiques

 Génie Logiciel (vs. La-rache ;-)
 ensemble de méthodes et outils pour produire et maintenir des
logiciels de qualité
 gros logiciels, problèmes complexes
 formalisation, rigueur, modularité, évolutivité
 Approches Génie Logiciel
 modèles en cascade
 modèle en V
 modèle en spirale
 modèle par incréments

—4
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Conception des systèmes informatiques

 Besoin du client / idée du concepteur
 Cahier des charges fonctionnel
 Spécification
 fonctionnelle
 description du logiciel en termes de fonctionnalités (métier)
 scénarios, cas d’utilisation
 technique
 comment réaliser ces fonctionnalités
 architecture
 Méthodes d’analyse et de conception
 pour formaliser ce processus

—5
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Méthodes de conception du génie logiciel

Modèle en cascade (Waterfall model)
 Principe
 planification globale
 on ne passe à l’étape suivante que lorsque que l’étape est satisfaisante
 conception orientée vers l’implantation
Analyse des
 importance des documents besoins
 cahier des charges, spécifications
 signés par les clients Conception

 Rôle des utilisateurs

Codage et tests
 prise en compte limitée
 Limites Intégration et
test du système
 l’évaluation intervient en dernier (!)
 retours en arrière uniquement dans la version avec itérations
 méthode peu pertinente pour la conception d’IHM

—6
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Méthodes de conception du génie logiciel

Modèle en V
 Principe
 détailler l’application jusqu’à sa réalisation
 tester l’application
 association phase de production/phase de validation
 les documents ont un rôle important  
 Rôle des utilisateurs Définition
des besoins
Tests
d’acceptation
 lors de l’analyse des besoins et tests Tests
Spécification systèmes
 mais prise en compte limitée
Conception Tests
 Limites (architecture) d’intégration

Conception Tests
 évaluation en fin : après le codage logicielle unitaires

 portée des retours arrière non précisée Développement

 méthode peu pertinente pour la conception d’IHM

—7
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Méthodes de conception du génie logiciel

Modèle en spirale
 Principe
 versions successives du logiciel de plus en plus complet
 importance de l’évaluation (+ précoce)
 pour chaque cycle
 identification des objectifs, alternatives, contraintes
 analyse des risques et choix de développement
 développement et validation du cycle
 analyse des résultats et planification du cycle suivant
temps
 Rôle des utilisateurs 1 Spécification
 prise en compte limitée
 mais à chaque cycle 4 Analyse 2 Développement

3 Validation
utilisateurs

—8
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Méthodes Agile

 Principe
 méthodes de conception flexibles, itératives et incrémentales
 projet fragmenté en plusieurs sous-parties (livraison continue)
 définition d’objectifs à court terme réajustables (adaptation au changement)
 évaluations précoces
 Rôle des utilisateurs
 client au cœur du processus
 tests auprès d’utilisateurs (rôle encore limité)

—9
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Méthodes de conception du génie logiciel

Bilan
 Avantages
 méthodes structurées
 adaptées aux gros projets
 Limites
 rôle des utilisateurs trop limité
 processus centré sur les
fonctionnalités du logiciel
 IHM définie tardivement
 prévoir l’usage en même temps
que les fonctionnalités !
 évaluation tardive
 méthodes peu adaptées à la
conception d’IHM

10
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Méthodes du génie logiciel : limites

Bilan

11
—
62
✓ Conception des systèmes informatiques
➢ Conception d’IHM : caractéristiques
 Processus de conception
 Techniques de recueil d’informations
 Conception inclusive
 Sobriété numérique

12
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Concevoir les IHM

 IHM point clé d’une application
 souvent facteur d’échec ou de réussite
 bon logiciel + mauvaise IHM = échec
 logiciel correct + très bonne IHM = réussite
 source d’erreurs, de coûts supplémentaires
 IHM = 50% des coûts de dev + 50% des demandes de modif
 Méthodes de conception orientées IHM : caractéristiques
 centrées utilisateur
 pour vraiment prendre en compte les utilisateurs, pas seulement le client
 prototypées
 pour montrer rapidement les idées/projets/résultats
 avec évaluation précoce
 pour prendre en compte les retours des utilisateurs / les erreurs
 progressives : itératives, incrémentales
 pour améliorer les propositions 13
—
62
✓ Conception des systèmes informatiques
➢ Conception d’IHM : caractéristiques
 centrée utilisateur
 prototypée
 évaluation précoce
 progressive
 Processus de conception
 Techniques de recueil d’informations
 Conception inclusive
 Sobriété numérique

14
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Caractéristiques de la conception d’IHM

Centrée utilisateur
 Définition (norme ISO 9241-210)
 prise en compte en amont des utilisateurs, de leurs tâches et de leur
environnement/contexte
 participation active des utilisateurs
 répartition appropriée des fonctions entre utilisateurs et technologie
 itération des solutions jusqu'à satisfaction des besoins
 équipe de conception multidisciplinaire
 Déroulement
 phase d’analyse
 identification des besoins des utilisateurs finaux
 préciser l’utilité du système
 phase de conception
 maquette/prototype/système
 phase d’évaluation
 mesurer l’utilisabilité du système, l’adéquation aux utilisateurs 15
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Prise en compte de l’utilisateur

Méthode de conception centrée utilisateur
 Principe
 étude de l’utilisateur, de sa tâche et de l’interaction
 dès la phase d’analyse
 Adapté
 quand il existe déjà une solution en place
 Rôle des utilisateurs
Envoyer un
 utilisateur observé dans la résolution de sa tâche SMS

 interrogé sur ses attentes Définir le

message
Envoyer le
message
Quitter

 questionné sur le logiciel conçu Définir le corps Définir le

du message destinataire

 Limites Saisir le
numéro
 rôle des utilisateurs encore limité
Sélectionner le
numéro dans
le répertoire

16
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Prise en compte de l’utilisateur

Méthode de conception participative
 Principe
 seuls les utilisateurs connaissent vraiment les tâches
 ils peuvent aussi être à l’origine d’innovations
 Adapté
 aux projets peu définis, novateurs
 aux tâches complexes, difficiles à appréhender
 Rôle des utilisateurs
 utilisateur partenaire de conception à part entière
 participe aux choix de conception
 Limites
 gestion des utilisateurs-concepteurs lourde
 manque de recul, de connaissances en informatique
pour faire les choix
17
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Prise en compte de l’utilisateur

Méthode de conception informative
 Principe
 méthode intermédiaire entre conception
centrée utilisateur et conception participative
 terme ambigu
 Adapté
 aux projets novateurs
 méthode imaginée pour travailler avec des enfants
 Rôles des utilisateurs
 utilisateur dans l’équipe de conception
 sans pour autant être considéré
comme partenaire de conception
 sans participer aux choix finaux
 Limites
 gestion des utilisateurs
18
—
62
✓ Conception des systèmes informatiques
➢ Conception d’IHM : caractéristiques
 centrée utilisateur
 prototypée
 évaluation précoce
 progressive
 Processus de conception
 Techniques de recueil d’informations
 Conception inclusive
 Sobriété numérique

19
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Caractéristiques de la conception d’IHM

Prototypée
 Croquis/maquette/prototype
 Principe
 représentation partielle d'un système en projet (AVANT le développement)
 permettant de tester certains aspects
 avec les clients/ les utilisateurs

➢ Cf. cours maquettes 20

—
62
✓ Conception des systèmes informatiques
➢ Conception d’IHM : caractéristiques
 centrée utilisateur
 prototypée
 évaluation précoce
 persona
 cas d’usage
 scénario

 progressive
 Processus de conception
 Techniques de recueil d’informations
 Conception inclusive
 Sobriété numérique 21
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Caractéristiques de la conception d’IHM

Évaluation précoce
 Pourquoi
 vérifier la pertinence des choix de conception le + tôt possible
 permettre les ajustements tôt
 Comment
 évaluer le prototype
 selon un scénario (ou plusieurs)
 basé sur un persona (utilisateur fictif)
 basé sur un cas d’usage (manière d’utiliser l’application)
 ensemble de tâches que l’utilisateur doit accomplir pour atteindre son but
 Résultat
 succès/échec du scénario
 quantitativement/qualitativement
 nombre d’erreurs, nombres d’étapes nécessaires, temps passé
 commentaires, satisfaction des utilisateurs
22
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Persona
 Principe
 concevoir une représentation des futurs utilisateurs
 un persona représente un segment du public cible
 différents rôles = différents personas (ex : admin/utilisateur final)
 sous forme de personnages fictifs (archétypes d’utilisateurs cible)
 définie finement (pourvus d’une personnalité, de caractéristiques socio-
démographiques et psychologiques)
 utilisée pendant toute les phases de conception/évaluation
 Avantages
 permet aux concepteurs d’adopter le point de vue de l’utilisateur plus
concrètement, d’augmenter leur empathie
 moyen de communication partagé au sein de l’équipe de conception
 outils de création de personas en ligne (MakeMyPersona, Xtensio…)
 Limites
23
 difficile de définir des personas pertinents (attention aux stéréotypes) —
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Persona : exemples
 Sarra a 18 ans, elle est sportive. Elle vient d’arriver à Lyon pour suivre une licence d’info.
 Maxime a 22 ans, il est timide et aime beaucoup lire. Il est en Master de biologie végétale.

24
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Cas d’usage
 Approche
 point de vue de l’utilisateur sur le système / langage de l’utilisateur
 orienté par un but
 Cas d’usage / cas d’utilisation / use case
 différents objectifs de l’utilisateur
 différentes manières d’utiliser l’application
 utilisation d’OPALE pour chercher l’itinéraire vers sa salle de cours
 utilisation d’OPALE pour voir ses dernières notes dans Tomuss
 utilisation d’OPALE pour réserver une salle de travail à la BU

25
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Scénario
 Pour un cas d’usage donné
 chercher l’itinéraire vers sa salle de cours
 Situation actuelle et limites pour chaque personas
 frustration, préoccupation du persona
 Sarra ne sait pas dans quel amphi a lieu son prochain cours
 Maxime connaît l’amphi de son prochain cours, mais ne sait pas où il est situé

 Scénario
 ensemble de tâches que l’utilisateur doit accomplir dans le système
 trame narrative qui décrit les interactions utilisateur - système
 Sarra lance OPALE, elle se connecte au CAS pour avoir son agenda et trouver son
amphi de 8h, elle clique sur l’icône itinéraire et voit le chemin s’afficher
 Maxime lance OPALE, tape « Jussieu » dans le module de recherche, et clique sur
l’icône itinéraire dans les réponses et voit le chemin s’afficher
 Évaluation du déroulement du scénario
 Sarra et Maxime trouvent leur chemin et arrivent à l’heure en cours
26
—
62
✓ Conception des systèmes informatiques
➢ Conception d’IHM : caractéristiques
 centrée utilisateur
 prototypée
 évaluation précoce
 progressive
 itérative
 incrémentale

 Processus de conception
 Techniques de recueil d’informations
 Conception inclusive
 Sobriété numérique
27
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Caractéristiques de la conception d’IHM

Progressive : conception itérative
 Principe
 succession de cycles : analyse, développement, évaluation
 affinements progressifs des spécifications et des solutions proposées
 prise en compte de l’avis des utilisateurs, de nouveaux objectifs
 Adapté
 aux problèmes difficiles à spécifier
 Limites
 peut être difficile à gérer dans le temps « le mieux est l’ennemi du bien »

28
—
Source de l’illustration : [Link] 62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Caractéristiques de la conception d’IHM

Progressive : conception incrémentale
 Principe 4
3
2
 on développe tout d’abord le noyau 1
noyau
 on ajoute petit à petit des fonctions
 Limites
 on risque de rencontrer un problème lors de l’ajout d’un élément
 et remettre en question les éléments précédents, voire le noyau
 IHM définie tardivement
 indépendance entre le noyau fonctionnel et l’interface utilisateur
 dans les logiciels interactifs cette séparation n’est pas si nette

29
—
Source de l’illustration : [Link] 62
✓ Conception des systèmes informatiques
✓ Conception d’IHM : caractéristiques
➢ Processus de conception
 Techniques de recueil d’informations
 Conception inclusive
 Sobriété numérique

30
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Processus de conception  exemple

Résoudre le bon problème
 Demande de développement
 ajout d’un bouton d’aide sur la page d’accueil
 basée sur un symptôme
 les utilisateurs cherchent l’aide
 pas sur le problème réel
 la création de compte est trop complexe
 Solution, mais à portée limitée
 bouton aide mais besoins d’aide importants
 Réfléchir au réel besoin, adopter une vue d’ensemble
 améliorer la création de compte

31
ref : Don Norman, Le design des objets du quotidien —
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Processus de conception
 Processus unifié (GL/UML)
 recueil des besoins, analyse, conception, implémentation, test
 Design thinking (gestion de l’innovation : conception créative)
 empathie, définition, idéation, prototype, test, développement

 processus de conception en double diamant de Don Norman

32
—
ref : Donald Norman, The design of everyday things 62
 Processus de conception
en double diamant
1ère PHASE DE CONCEPTION 2ème PHASE DE CONCEPTION
DÉFINIR LE BON PROBLÈME METTRE EN PLACE LA BONNE SOLUTION

PROBLÈME DÉFI IDENTIFIÉ SOLUTION

INITIAL (vrai problème) PROPOSÉE

IMMERSION DÉFINITION IDÉATION PROTOTYPAGE TEST

explorer la définir le générer définir une
situation problème des idées solution

alternatives
33
—
62
✓ Conception des systèmes informatiques
✓ Conception d’IHM : caractéristiques
✓ Processus de conception
➢ Techniques de recueil d’informations
 brainstorming
 observation, entretien, questionnaire
 focus group
 tri de cartes
 conception en parallèle
 magicien d’Oz
 Conception inclusive
 Sobriété numérique 34
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Brainstorming (remue-méninges)
 Objectif
 générer un grand nombre d'idées créatives pour résoudre un problème
 Moyen
 les participants (équipe de conception) imaginent des solutions
 Procédure
 réunir un petit groupe avec différents rôles et expertises
 limiter le temps (1h)
 décrire un problème de conception spécifique
 phase 1 : générer une grande quantité d'idées
 faire participer tt le monde, enregistrer ttes les idées sans les évaluer
 phase 2 : classer les idées en fonction de leur qualité
 chacun annonce les idées qu'il préfère
 les idées sont classées par nombre de votes
 commencer la conception à partir des idées les mieux classées
 ne pas oublier les idées insolites 35
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Observation, entretien, questionnaire

 3 techniques de recueil d’information auprès des utilisateurs
 pour la conception : comprendre le marché, la tâche, les utilisateurs
 pour l’évaluation (cf. cours tests utilisateurs)
 Principe
 définir une tâche et demander aux utilisateurs de l’effectuer
 observer les utilisateurs pendant la réalisation de la tâche
 interroger les utilisateurs
 entretiens individuels
 questions semi-directives, reformuler les réponses pour clarifier
 analyse qualitative des réponses, pas de conclusions statistiques
 questionnaire + large (également pour demander un avis sur un projet)
 panel représentatif d’utilisateurs
 diffusion/récupération papier, en ligne
 analyse quantitative (automatique) + qualitative (manuelle), résultats chiffrés

36
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Observation
 Procédure
 en laboratoire ou sur le terrain
 choisir au moins 2 utilisateurs qui agiront indépendamment
 décider de ce que l'on veut mesurer
 définir une mission spécifique
 résoudre un problème,
 dérouler un scénario…
 demander aux utilisateurs d'effectuer la tâche
 observation directe simple
 avec explication à haute voix (méthode intrusive)
 à deux pour observer leurs interactions (interrogations, explications)
 enregistrer les interactions, puis les analyser

37
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Entretien critique
 Objectif
 identifier des exemples de problèmes rencontrés concrètement
par les utilisateurs dans la situation actuelle
 Procédure
 interviewer l'utilisateur dans son environnement de travail
 lui demander de se souvenir d'un problème particulier vécu dans un
passé récent
 lui demander de décrire chaque incident en détail
 lui demander ce qui est habituel et ce qui ne l'est pas dans l'incident

38
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Focus group (entretien collectif)

 Objectif
 comprendre le marché, la tâche, les utilisateurs
 Moyen
 réunir des utilisateurs (4-7, max. 10)
représentatifs du public-cible
 post-it, tableaux, papier, crayon
 animateur + séance observée/filmée
 Procédure
 commencer par une activité brise-glace
 échanges dirigés informels sur le sujet étudié, via des activités support
 synthèse des idées exprimées

39
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Tri de cartes
 Objectif
 travailler sur
 l’organisation des fonctionnalités de l’application
 l’architecture de l’information
 Moyen
 réunir des utilisateurs représentatifs du public-cible
 représenter chaque fonctionnalité par une carte
 Procédure
 1 carte = 1 fonctionnalité de l’application ou 1 information
 les utilisateurs regroupent les cartes qui vont ensemble
 puis nomment les groupes (menus)
 Variantes
 tri de cartes ouvert : groupes non contraints
 tri de cartes fermé : les groupes sont déjà définis 40
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Conception en parallèle
 Objectif
 travailler sur les écrans
 avoir des idées de conception, repérer les points forts
 Moyen
 réunir des utilisateurs représentatifs du public-cible
 leur faire créer des interfaces répondant au besoin
 Procédure
 chaque utilisateur (ou binôme…) dessine/crée une interface
 comparaison des interfaces, discussion
 les meilleures idées sont conservées

41
—
ref : Jakob Nielsen, Improving System Usability Through Parallel Design 62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Magicien d’Oz
 Objectif
 simuler les fonctionnalités absentes d’un système
 système ou fonctionnalité inexistants
 technique difficile à mettre en place
 adapté à des systèmes lourds, difficiles à développer
 Principe
 un « compère », le magicien, invisible pour l’utilisateur,
effectue les actions à la place du système
 Procédure
 l'utilisateur a l’impression
d'utiliser un vrai système
 le compère interprète et traite l’utilisateur le compère
les actions/entrées de l'utilisateur
 il supplée aux manques et contrôle le comportement du système
42
—
62
✓ Conception des systèmes informatiques
✓ Conception d’IHM : caractéristiques
✓ Processus de conception
✓ Techniques de recueil d’informations
➢ Conception inclusive
 Sobriété numérique

43
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Conception inclusive
 Définition
 dispositif conçu en tenant compte de tous les utilisateurs potentiels
 pas uniquement du concepteur
 sans aucune omission /discrimination
 Éviter les biais cognitifs dans la conception
 s’appuyer uniquement sur ses propres caractéristiques
 c’est exclure une partie de la population en fonction
 de son genre
 de son origine/sa couleur
 de son âge
 de sa classe sociale
 de sa langue
 de ses connaissances technologiques
 de ses handicaps
 … distributeur de savon raciste 44
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Concevoir pour tous

 Quelle que soit la composition des équipes de conception

 À toutes les étapes du projet

 de la conception à l’évaluation

45
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Risque – algorithme / risque - données

 Risque - algorithme
 concevoir un algorithme/ un dispositif biaisé
 capteur choisi/calibré/programmé par le développeur
 Risque - données
 s’appuyer sur des données non représentatives des utilisateurs
 base de test avec les employés du 3ème étage

46
—
62
✓ Conception des systèmes informatiques
✓ Conception d’IHM : caractéristiques
✓ Processus de conception
✓ Techniques de recueil d’informations
✓ Conception inclusive
 Sobriété numérique

47
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Pourquoi parler de sobriété numérique ?

 Le numérique est une source importante de pollution
 10 % de la consommation électrique française : services numériques
 55 % de la consommation mondiale d’énergie : trafic des données
 4 % des émissions mondiales de gaz à effet de serre (GES) : numérique
Source Rapport de l’ADEME « en route vers la sobriété numérique »
 Green Tech

48
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Sobriété numérique : bonnes pratiques

Côté utilisateurs Quelques chiffres
• 10 min de vidéo HD en streaming sur smartphone
 Former à la sobriété numérique ≈ 5 min de four électrique de 2000 W
• 156 h de visio-conférence
 Éviter le renouvellement des équipements ≈ 12 kg d’équivalent CO₂
• envoi d’un email avec 1 pièce jointe de 1 Mo
 Réduire les déchets électroniques ≈ 25 min d’une ampoule électrique de 60 W
• datacenters
 Limiter la consommation énergétique ≈ transport aérien (source EdTech)
 préférer le Wifi à la 4G
 activer le mode « économie d’énergie »
 éviter géolocalisation et notifications en arrière-plan
 éteindre les appareils plutôt que les laisser en veille

 Optimiser les usages

 stocker les données sur une plateforme unique
 supprimer les données inutiles (photos, vidéos, documents)
 alléger les mails (trier sa messagerie, limiter le nombre de destinataires, limiter le poids
des pièces jointes)
 économiser la bande passante (utilisation du cache – favoris –, limiter le nombre
d’onglets ouverts, supprimer l’historique de navigation et les cookies)
 limiter l’usage de la vidéo (télécharger au lieu de streamer, choisir une résolution
adaptée à l’écran, écouter de la musique sans vidéo, désactiver la lecture automatique) 49
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Sobriété numérique : bonnes pratiques

Côté concepteurs
 Objectif
 réduire la consommation de ressources informatiques et énergétiques
 et la contribution à l’obsolescence des équipements
 des utilisateurs et des réseaux / serveurs
 Moyen
 ensemble de préconisations
 RGESN : Référentiel Général d’Ecoconception de Services Numériques
 outil de mesure de l’impact environnemental : ecoIndex

50
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Référentiel d'écoconception du numérique (1/5)

1. Stratégie
 utilité, public cible, besoins définis
 profil matériel du public cible
 utilisable sur du matériel de + de 5 ans, de différentes tailles d’écran
 technologies standard interopérables
 indicateurs de mesure de l’impact environnemental
2. Spécifications (conception)
 impact environnemental des services tiers, composants externes
3. Architecture (réseau)
 architecture, ressources et composants conçus pour réduire l’impact
 flexible en fonction des besoins
 évolution des protocoles, mises à jour
 protocoles adaptés
51
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Référentiel d'écoconception du numérique (2/5)

4. UX/UI (1/2)
1. utilisable avec une connexion bas débit
2. lecture automatique désactivée (multimédias)
3. pas de défilement infini (Aza Raskin s’est repenti ;-)
4. parcours de navigation optimisé
5. autorisation explicite pour l’activation de services tiers
6. composants natifs (de l’OS, du navigateur, du langage)
7. contenu multimédia porteur d’information (pas pour l’esthétique)
8. texte ou image au lieu de vidéo/audio/animation
9. mise en pause possible des animations, défilement, clignotement
10. polices de caractère du système d’exploitation

52
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Référentiel d'écoconception du numérique (3/5)

4. UX/UI (2/2)
11. peu de requêtes serveur dans les formulaires
12. information sur les formats de saisie
13. vérification sans requête serveur
14. information avant les transferts volumineux
15. contraintes de formats et limites de poids sur le transfert de fichier
16. information sur l’impact écologique
17. notifications uniquement nécessaires
18. contrôle des notifications par l’utilisateur
19. contrôle de l’utilisateur sur son impact environnemental

53
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Référentiel d'écoconception du numérique (4/5)

5. Contenus
 format de fichier, taux de compression adapté au contenu
(image, vidéo, audio, document)
 stratégie d’archivage, suppression auto/manuelle des contenus périmés
6. Frontend (côté client)
 poids, requêtes par écran limités
 mise en cache, compression des données, stockage côté client
 dimension pertinente des éléments graphiques (pour l’objectif)
 chargement progressif, uniquement des composants et contenus utiles
 utilisation ponctuelle des capteurs
 données sur un même serveur

54
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Référentiel d'écoconception du numérique (5/5)

7. Backend (côté serveur)
 cache serveur
 contenus compressés
 définition d’une durée de conservation des contenus, archivage,
suppression
 information sur les traitements en arrière-plan
8. Hébergement (data centers)
 hébergement certifié, à démarche GreenTech, publiant ses indicateurs
 consommation électrique d’origine renouvelable
 localisation en cohérence avec celles des utilisateurs
 hébergement différent pour données « chaudes » et données « froides »
 duplication, redondance des données si nécessaire
 récupération de la chaleur produite

55
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Pensez à la planète…
 Souvent
 sobriété numérique
 accessibilité numérique
 programmation propre
 ergonomie
 même combat
 Choisir ses combats pour commencer
 optimiser du bon code (c’est très bien)
 gain = quelques Ko
 réduire la taille d’une image (c’est facile et efficace)
 gain = quelques Mo
1080 x 719 pixels 250 x 166 pixels
1,05 Mo (1074 Ko) 95 Ko

56
—
62
✓ Conception des systèmes informatiques
✓ méthodes générales pas vraiment adaptées aux IHM
✓ Conception d’IHM : caractéristiques
✓ caractéristiques des méthodes de conception adaptées aux IHM
✓ Processus de conception
✓ étapes pour résoudre le (vrai) problème
✓ Techniques de recueil d’informations
✓ pour obtenir des informations pour la conception
✓ Conception inclusive
✓ pour concevoir pour tous
✓ Sobriété numérique
✓ pour limiter l’impact environnemental
➢ À vous de jouer ! 57
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

TP1 conception d’une application

 Objectif
 concevoir une solution en réponse à un besoin/une question
 Connaissances/compétences
 techniques de conception d’un projet informatique
 choix d’une méthode de conception, de techniques de recueil d’info
 conception d’une application : enchaînement, puis détail des écrans
 travailler en équipe (pendant et après la séance), s’organiser à plusieurs,
respecter les contraintes, besoins, spécificités des autres
 scénariser, tourner, monter une vidéo
 respecter des contraintes données (respecter le délai et la forme des rendus)
 Évaluation
 idées produites à travers leur présentation dans la fiche + la vidéo
 cf. différentes sections de la fiche

58
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

TP1 conception d’une application 1/3

 Fiche d’identité de l’application
 comme dans un « store »
 faire comprendre votre appli d’un coup d’œil
 avec des infos succinctes et pertinentes (voire percutantes)
 Fonctionnalités
 côté utilisateur final principal
 côté administrateur du site
 on doit comprendre ce que votre appli permettra de faire
(pas comment l’utilisateur le fera)
 liste de fonctionnalités (pas description de composants)
 expliquées, pas seulement listées (pour les + intéressantes)
 connexion (un bouton pour se connecter)
 profil de l’utilisateur (détailler en quoi il consiste, ce qu’il permet de faire)

59
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

TP1 conception d’une application 2/3

 Méthode de conception (cf. ce cours)
 quelle méthode de conception adaptée vous choisissez ?
 1 méthode ou combinaison de plusieurs méthodes
 expliquez bien
 quelles caractéristiques doit avoir la méthode de conception adaptée
aux IHM ?
 rôle des utilisateurs, place de l’évaluation…
 Techniques de recueil d’information (cf. ce cours)
 comment obtenir des informations pour la conception ?
 depuis les utilisateurs, les clients, le public-cible…
 Dans un monde idéal
 sans les contraintes de la vraie vie et du TP ;-)

60
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

TP1 conception d’une application 3/3

 Personas + cas d’usage + scénarios (cf. ce cours)
 Enchaînement des écrans utilisateur final admin
 objectif
 donner un aperçu de votre appli
 permettre de dérouler vos scénarios
 pour le rôle utilisateur final
 pour le rôle administrateur
 écrans
 représentés par des rectangles
 titre lisible et explicite (rôle de l’écran)
 dessin sommaire du contenu des écrans
 détails : dans la maquette / la vidéo
 enchaînement entre les écrans
 flèches reliant ces rectangles
 + annotations si besoin 61
—
62
conception – conception d’IHM : caractéristiques – processus de conception – techniques de recueil – inclusion – sobriété

Organisation LifIHM : les premiers TP

Groupes, équipes, binômes

vendredi vendredi vendredi

groupe
V42
TP1 TP2 TP3

lundi lundi

binôme 1
admin
équipe
V42a binôme 2
utilisateurs

62
—
62