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

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)

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

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

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

…..

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éthodologie

Utiliser des outils

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)

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

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 …

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

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….

Supports dédiés à une activité

Niveau d’expertise des utilisateurs experts – Niveau de fiabilité En mobilité

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

Supports mobiles

Mêmes usages ? Mêmes services

Supports mobiles

Mêmes usages ? Mêmes services

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 ?

Adaptation aux utilisateurs

Une forte évolution ces dernières années

Informatique pour tous

Lyonnaise des eaux

Adaptation aux utilisateurs

Des professionnels aux novices

Essayez votre coiffure, vos lunettes…

De la domotique aux services

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

Pouvoir adapter le contenu

Pouvoir adapter les techniques d’interactions

Pouvoir adapter le layout

Quand et Comment ?

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

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

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 ?

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 ?

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”

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

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