Le Lean sur une ligne de production : Formation et mise en application directe
Plasticité des IHM
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 Introduction, présentation des sujets (Anne Marie
Dery)
Crossplatform et responsive design (Christophe Bonnet)
Semaine 2 : Angular 2 et Ionic 2 (Rémi Pourtier)
Classification des technologies (Anne Marie Dery)
Semaine 3 et 4 : Travail personnel avec aide (Christian Brel)
Semaine 5 : IDM et IHM (Anne Marie Dery et Mireille Blay-Fornarino)
Semaine 6 : Rendus et présentations de la partie technologique
Semaine 7 : travail personnel : Analyse d’articles (Anne Marie Dery)
Semaine 8 : Articles de recherche : devoir sur table
4.
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)
9.
10. 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,
geste, vue…
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. Adaptation aux utilisateurs
Une forte évolution ces dernières années
Informatique pour tous
Lyonnaise des eaux
14. 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….
15. 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 ?
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
◦ Ex 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. 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
18. Supports dédiés à une activité
Niveau d’expertise des utilisateurs experts –
Niveau de fiabilité
En mobilité
29. Il faut réutiliser et ne pas TOUT refaire à chaque fois
Pouvoir adapter le contenu
Pouvoir adapter les techniques d’interactions
Pouvoir adapter le layout
Quand et Comment ?
30. Ideentifier le domaine de plasticité à traiter
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
31. 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
32. 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
33. 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
34. 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 ?
35. 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 ?
36. 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”
38. Concevoir un site pour chaque dispositif visé : un site principal, un site pour
smartphones, un site pour tablettes, etc.
Test côté serveur sur le type d'appareil, renvoie vers une adresse web dédiée
Possibilité d'affiner précisément la structure du site et ses contenus.
Possibilité de cibler et de s'adapter à des techniques d’interactions
variées
Duplication du contenu
Maintenance de plusieurs versions de site et de plusieurs adresses web
Détection côté serveur ("UA sniffing") souvent biaisée ou non à jour
38
Alternative en attente d’une refonte
39. Développement spécifique dans chaque langage (IOS, Android, WindowsPhone)
Téléchargement et référencement dans un "Store" (AppStore, Google Play, Windows
store).
Prise en charge facilitée des fonctionnalités natives (touch,
accéléromètre, notifications, GPS, etc.)
Installation simple sur le dispositif
Totale "acclimatation" au périphérique (ergonomie, performances, densité
de pixels)
Présence sur Store avec "raccourci" sur le smartphone de l'utilisateur
Développement spécifique dans plusieurs langages (propres à iOS, Android,
WindowsPhone, etc.)
Coût du développement, des licences, et de la maintenance pour chaque
système d'exploitation
Contenu non indexable par un moteur de recherche web classique
Mise à jour de l'application nécessite une action de l'utilisateur
Nombre de cibles visées petit
39
40. « Solution de facilité" en vertu de son objectif principal : s'adapter à tout type
d'appareil de manière transparente pour l'utilisateur
Coûts et délais inférieurs aux solutions « ad-hoc »
Maintenance facilitée
Mise à jour transparente
Déploiement multi-plateformes
Envisageable en reconception
Sortent en premier dans les résultats Google
Fortes connaissances techniques
Veille technologique constante
Importance des tests ("device labs", simulateurs)
Difficile de contourner les limites ergonomiques et de
performances des navigateurs web
Un moyen parmi d'autres mais pas de « solution magique" à tous les problèmes.
40
41. Le terme de "Responsive Web design" a été introduit par
Ethan Marcotte dans un article publié en 2010.
Conception Web de sites offrant une expérience de lecture et
de navigation optimales pour l'utilisateur quelle que soit sa
gamme d'appareil (téléphones mobiles, tablettes, liseuses,
moniteurs d'ordinateur de bureau).
◦ Une expérience utilisateur "Responsive" réussie implique un
minimum de redimensionnement (zoom), de recadrage, et
de défilements multidirectionnels de pages.
Adaptations côté client (grilles flexibles en pourcentages,
images fluides et CSS3 Mediaqueries)
41
44. Objectifs : Diminuer le coût et le temps de développement
et viser un marché large.
Développer des application pour plusieurs plateformes (iOS,
Android, Windows Mobile, BlackBerry/RIM, etc.) en
maximisant la réutilisation du code tout en conservant des
spécificités de chacune des cibles.
Souvent simples à utiliser : ils sont basés sur des langages
de scripting : CSS, HTML, et JavaScript.
Les principaux défauts viennent des évolutions fréquentes
des système des cibles qui impliquent de réécrire une partie
des générations de code.
44
46. "Les Web Components permettent de
combiner plusieurs éléments pour
créer des widget réutilisables avec
un niveau de richesse et
d'interactivité sans commune mesure
avec ce qui est aujourd'hui possible
en se limitant aux CSS »,explique le
W3C.
46
50. 50
Constituer un groupe de 4
Choisir une techno de chaque famille à traiter
dans le groupe
Choisir une application simple et pertinente /
problématique d’adaptation
Argumenter la pertinence de l’application
Implémenter et écrire le tutoriel pour chaque
techno
Conclure en prenant du recul sur les technos
étudiées via la problématique d’adaptation
ciblée
51. 51
RWD CrossPlatform Web
Components
Bootstrap Ionic React
/ReactNative
Foundation PhoneGap / Cordova Ionic 2
Pure CSS Xamarin Polymer
Web Kit Framework Native Script Angular 2
Vous avez des propositions ?
52. 1. Choisir un bon exemple (tableaux, images,
tabulation, listes…)
2. Montrer l’adaptation et ses limites
3. Livrer un mini tutorial et le code
4. Demo / Vidéo
5. N’oubliez pas les points suivants :
Environnement de développement : lequel
comment et pourquoi.
Déploiement : comment
Compilation et exécution
Tests et expérience utilisateur.
52