Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Plasticité des IHM

1,036 views

Published on

Adaptation des IHM aux contextes d'usage : introductin au cours Polytech Nice Sophia Spécialité Informatique Parcours IHM

Published in: Education
  • Be the first to comment

  • Be the first to like this

Plasticité des IHM

  1. 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. 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. 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. 4. 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
  5. 5. 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 …..
  6. 6. 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
  7. 7. 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)
  8. 8.  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
  9. 9. 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 …
  10. 10.  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
  11. 11.  Adaptation aux utilisateurs  Une forte évolution ces dernières années Informatique pour tous Lyonnaise des eaux
  12. 12.  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….
  13. 13.  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 ?
  14. 14.  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
  15. 15.  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
  16. 16. Supports dédiés à une activité Niveau d’expertise des utilisateurs experts – Niveau de fiabilité En mobilité
  17. 17.  Supports mobiles Mêmes usages ? Mêmes services
  18. 18.  Supports mobiles Mêmes usages ? Mêmes services
  19. 19.  Adaptation aux utilisateurs  Des professionnels aux novices Essayez votre coiffure, vos lunettes…
  20. 20. De la domotique aux services
  21. 21.  Création d’environnements interactifs  Les musées  Les bâtiments intelligents  Les véhicules connectés  La eSanté
  22. 22.  Continuité de services  Patients – médecins, conducteurs – garagistes…
  23. 23.  Applications contextuelles  Positionnement GPS beacons  Marketing de mobilité et de proximité, surveillance…
  24. 24.  Création d’environnements interactifs https://www.youtube.com/watch?v=yJZho904jk8&feature=channel https://www.guggenheim-bilbao.es/fr/informations- pratiques/zero-espazioa/ http://parismusees.paris.fr/fr/une-table-multitouch-pour- parcourir-en-images-le-paris-de-la-liberation http://www.legrand.fr/ http://www.w3c.fr/category/voiture-connectee-2/ http://blog.domadoo.fr/49496-enblink-transforme-nimporte- appareil-android-box-domotique-z-wave/ http://www.club-innovation-culture.fr/avec-le-ibeacon-le- cleveland-museum-of-art-ameliore-son-application-mobile- artlens/ http://mylittlesante.com/application-mobile-de-sante-dispositif- medical/ http://www.pourquoidocteur.fr/Articles/Question-d-actu/10978- Les-applications-mobiles-de-plus-en-plus-telechargees-par-les- malades-chroniques
  25. 25.  Création d’environnements interactifs / http://www.club-innovation-culture.fr/avec-le-ibeacon-le- cleveland-museum-of-art-ameliore-son-application-mobile- artlens/ http://www.qbus.be/fr/a_propos_de_nous/pourquoi_choisir_qbus/e conomie_d_energie http://www.sodemo.com/fr/16/dashboard.html http://blog.tamento.com/le-marketing-de-mobilite-et-de- proximite-avec-le-beacon.html https://www.umbel.com/blog/mobile/15-companies-using- beacon-technology/ http://www.walesonline.co.uk/news/wales-news/world-first- mobile-link-national-slate-6999461
  26. 26. 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 ?
  27. 27.  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
  28. 28. 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
  29. 29.  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
  30. 30.  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
  31. 31. 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 ?
  32. 32.  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 ?
  33. 33. 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”
  34. 34. 37
  35. 35. 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
  36. 36. 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
  37. 37. « 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
  38. 38.  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
  39. 39. 42
  40. 40.  http://setandbma.wordpress.com/2012/03/ 19/mobile-game-development-tool- comparison/ 43
  41. 41. 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
  42. 42. 45 NativeScript
  43. 43. "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
  44. 44. 47
  45. 45. 48
  46. 46. 49
  47. 47. 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
  48. 48. 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 ?
  49. 49. 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

×