Cours Introduction : Module Adaptation des IHM - Parcours IHM Polytech Nice Sophia

1. IHM et
Différents supports
Différents utilisateurs
Différents environnements
Problématique - Aperçu des solutions industrielles et recherche
Anne-Marie Déry pinna@polytech.unice.fr

2.  Un peu d’histoire …
◦ Introduction du terme à Interact’99
◦ Définitions du Larousse :
 Qualité de ce qui est plastique, malléable : Plasticité de l'argile.
 Qualité de ce qui est souple, modifiable : Plasticité du caractère de l'enfant.
 Qualité sculpturale d'une œuvre d'art.
 Propriété d'un solide dans le domaine des déformations permanentes.
 Théorie dont l'objet est d'expliquer et de prévoir le comportement du solide dans cet état
de déformation.
◦ Définition donnée par Joelle Coutaz
 Capacité d’une interface à s’adapter à son contexte d’usage dans le respect de son
utilisabilité
◦ Contexte d’usage
 Plateforme
 Environnement
 Utilisateur (2001)

3. Adresse web : http://atelierihm.unice.fr/enseignements/plasticite-des-
interfaces/
 Semaine 1 : Cours Overview et présentation des sujets (Anne Marie
Dery)
Semaine 2 : Crossplatform et responsive design (Christophe Bonnet)
 Semaine 3 et 4 : Travail personnel avec aide (Christian Brel) + 2h
Présentation de MovingPlayer
 semaine 5 : Rendus et présentations de la partie technologique
 Semaine 6 : IDM et IHM (Anne Marie Dery et Mireille Blay-Fornarino)
 Semaine 7 : travail personnel (Anne Marie Dery)
 Semaine 8 : rendu et soutenances – articles de recherche + devoir sur
table

5. De quoi est constituée
une IHM ?
A quoi sert une IHM
 Un contenu
 Une structure
 Une présentation
 Des techniques
d’interactions
 …..
 Présenter des
informations
 Récupérer des
informations
 Faire le lien entre un
utilisateur et une
application

6. Des utilisateurs Des supports
 Des informaticiens
 Des professionnels
 Des enfants
 Des personnes
âgées
…..
 Des stations
 Des téléphones
 Des tablettes
 Des tables
 Des murs
…
Des environnements
 Au travail
 Au domicile
 Dans les
transports
 Dans la rue
…..

7. Des technologies
(HTML5, CSS, Android, IOS,
Java, C#)
Des frameworks / autres
(Bootstrap, Phonegap, ….)
Outils de tests graphiques
Architectures MVC, PAC…
Démarche centrée
utilisateurs
Démarche Agile …
Avoir une méthodologieUtiliser des outils

8. Une migration est le passage d'un état existant d'un d’une application vers
une nouvelle cible définie. La migration de données est généralement
réalisée par programmation pour parvenir à un traitement automatisé.
Le portage informatique consiste à porter, mettre en œuvre un logiciel,
une fonctionnalité, dans un autre environnement que celui d'origine qu’il
soit logiciel, soit matériel.
La migration / portage d’une application implique la migration /
portage de son IHM
 On migre soit la totalité soit une sous partie
◦ En IHM on parle de tâches pour les sous parties
 On migre statiquement (à la conception ou dynamiquement à
l’exécution)

10. Exemples de besoins :
 Changements provoqués directement ou indirectement par
l’utilisateur
◦ changement de matériel (achat, panne, changement en fonction du
lieu)
◦ changement d’environnement (situation de mobilité, bruit, nuit/jour…)
◦ Changement des capacités de l’utilisateur : mains occupées,
acquisition d’expertise…
 Changements stratégiques de l’entreprise
◦ Cibler plusieurs types d’utilisateur
◦ Cibler plusieurs supports
◦ Faciliter la migration et le portage
◦ Rester compétitifs et attractifs

11. Nouvelles capacités d’interaction : tactile, tangible.
bornes - tables – vitrines – murs interactifs
Différence de taille des écrans – multi touch ou non –
utilisateur experts ou non
Environnement bruyant – sombre …

12.  Prendre en compte les environnements
 Une forte évolution ces dernières années
 A la maison
 Au travail
 Dans les transports en commun
 Dans la rue
 Dans les bâtiments publics ou privés

13.  Entre supports tactiles : de la table au mur, du
téléphone au PC ?
◦ Différences de taille d’écran, différence de système,
différences des capacités tactiles (multi touch ou pas)
 Entre un support non tactile et un support
tactile :
◦ quand changer l’interaction ? Pourquoi ?
◦ Impact sur la présentation ?
◦ Impact sur l’enchaînement des tâches
Différences de technique d’interaction, d’usage….

14. Supports dédiés à une activité
Niveau d’expertise des utilisateurs experts –
Niveau de fiabilité
En mobilité

16.  Changement de matériel
◦ Ex pour avoir de nouvelles fonctionnalités : changement de
voiture, sortie d’une nouvelle montre de plongée
◦ Ex pour accomplir la tâche adaptée : opérations sur le site
de dépannage ou sur le site professionnel : exemple du
fontainier, du réparateur d’électroménager
◦ Ec pour permettre à de nouveaux utilisateurs d’accéder à la
fonctionnalité – cas de déficients visuels…
Choix de l’utilisateur ou de son environnement professionnel
ou du niveau d’expertise
Reconsidérer le contenu – le layout – la technique
d’interaction

17.  Supports mobiles
Mêmes usages ?
Mêmes services

18.  Supports mobiles
Mêmes usages ?
Mêmes services

19.  Passage en mobilité
◦ En déplacement
◦ Dans les transports en commun
Changement de matériel
Nouvelles technologies
Nouveaux services
Quid de l’usage ? Quid du développeur ?

20.  Adaptation aux utilisateurs
 Une forte évolution ces dernières années
Informatique pour tous
Lyonnaise des eaux

21.  Adaptation aux utilisateurs
 Des professionnels aux novices
Essayez votre coiffure, vos
lunettes…

22. De la domotique aux services

23.  Au domicile
 Des utilisateurs différents du même service
 Des supports différents selon les pièces et l’activité
 A l’extérieur – dans la rue
 Un environnement interagissant
Les sollicitations commerciales, culturelles, de déplacement
 Des supports privés (mobiles) ou des supports publics (bornes
interactives,….)
 Des contraintes environnementales (bruit, lumière, mains
occupées…)
 Dans l’univers professionnel
 Supports privés et supports professionnels : taches fixées
 D’un lieu à un autre
 Continuité de services

24.  Pouvoir adapter le contenu
 Pouvoir adapter les techniques d’interactions
 Pouvoir adapter le layout
Quand et Comment ?

25.  Domaine de plasticité
Env ironneme nt
Pl ate-forme
Ut ilisate ur
Seuil de plasticité
Domaine de plasticité
C2
Contexte non couvert
C1 Contexte couvert par l’IHM

26. 2 cas
A la conception – faciliter la vie du développeur
Réutiliser un maximum pour chaque nouvelle cible
Diminuer le coût de développement
Prendre en compte l’usage (exemple Jeux vidéos -Shiva)
A l’exécution – faciliter la vie de l’utilisateur final
Faire migrer une application d’un support à un autre
Faire migrer des taches d’un support à un autre
Conserver les facilités l’usage et les habitudes tout en
profitant des spécificités des supports

27. XML
XSL
HTML
VoiceML
WML Au centre une
description
XMLisée
basées sur des Traducteurs
Un langage commun
Une génération de code
Des techniques de compilation
Limites et
Avantages ?

28.  Problème traité : Migration totale
◦ Exemple
 SI la batterie du PC faiblit ALORS passer sur PDA
SI condition ALORS action
Action  Réaction
Ecrire une machine à états
Limites et Avantages ?

29. Capture du
contexte
Identification
Des solutions
candidates
Selection d’une
solution
candidate
Détection de
changement de
contexte
Identification du
changement de
contexte
Exécution du
prologue
Execution de la
reaction
Execution de
L’épilogue
Cadre de référence : phase “exécution”

30.  Identifier le problème = Quel est le besoin en
plasticité
◦ Conception et/ou exécution ?
◦ Quels dispositifs visés ?
◦ Quel(s) environnent(s) ?
◦ Quel(s) utilisateur(s) ?
 Etudier l’existant
◦ Quelles sont les technologies adaptées ?
◦ De quels travaux de recherche peut-on s’inspirer ?
 Proposer une solution
◦ Solution partielle ou complète
◦ Solution ad-hoc ou modèle

31.  Des solutions partielles industrielles
Pour des types d’application (Site Web)
Pour des types de supports (téléphones mobiles)
 Des projets – en recherche
De la réutilisation pour la composition d’applications
existantes
De la migration dirigée par l’utilisateur
Points communs : niveau de description des interfaces
plus ou moins abstraits : Langages à balises et IHM