introduction module ihm polytech sophia dept info si3
TRANSCRIPT
![Page 1: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/1.jpg)
Pourquoi des cours en IHM ?
Anne-Marie Dery
![Page 2: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/2.jpg)
IHM et supports mobiles
Mêmes usages
Mêmes services
Dispositifs différents
![Page 3: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/3.jpg)
![Page 4: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/4.jpg)
IHM et des supports dédiés
Utilisateurs experts
efficacité sécurité
mobilité
![Page 5: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/5.jpg)
IHM et la diversité des supports
Taille des écrans – multi touch
ou non – utilisateur experts ou
non
Environnement bruyant –
sombre …
![Page 6: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/6.jpg)
![Page 7: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/7.jpg)
Objets connectés : gadgets ?
Exploitation des données…
Contrôle de l’ensemble des objets
Usage
![Page 8: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/8.jpg)
IHM, utilisateurs et usages
Continuité de service
Satisfaction de tous
![Page 9: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/9.jpg)
![Page 10: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/10.jpg)
Que dit-on de l’IHM ?
- 10 -
Pour les utilisateurs (Socio ergo)
• "Le produit c’est l’IHM" (J. Raskin)
Pour ceux qui développent les produits (AL)
• "80% du code des systèmes interactifs est consacré à l'interface utilisateur" (L. Nigay)
Pour ceux qui financent les produits (Marketing)
• "63% des gros projets informatiques connaissent des dépassements de coûts" (S. Greenberg)
![Page 11: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/11.jpg)
Les défauts des informaticiens
- 11 -
Focus sur les fonctions du système
Traitement de l’interface en dernier
IHM = coté "cosmétique" du produit
Hypothèse que tous les utilisateurs leur ressemblent
Pas de communication avec des utilisateurs
![Page 12: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/12.jpg)
Risques
- 12 -
Rejet pur et simple par les utilisateurs
Coût d'apprentissage/formation
Perte de productivité (hésitations, coup d’oeil à la doc)
Utilisation incomplète
Coût de maintenance (évolutivité de l’IHM)
Perte de crédibilité (réputation % satisfaction des clients)
Perte de parts de marché
![Page 13: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/13.jpg)
Utile et utilisable
Réaliser des logiciels utiles et utilisables
• Adéquation entre les fonctionnalités proposées et les besoins des utilisateurs : capacité fonctionnelle pour l’utilisateur d'atteindre ses buts de haut niveau
• Adéquation entre l’interface et les utilisateurs : facilité d’apprentissage et d’utilisation
l'utilité potentielle vs l'utilité réelle
•
![Page 14: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/14.jpg)
Comment ? Cette année…
Plan et orientation pédagogique du module
•IHM en JavaFx - initiation au savoir faire
En // accent sur l’usage – application DEVINT
•IHM pour applications mobile : initiation
à Android
TP fil rouge
Intervenants et fonctionnement
Cours : Am Dery
Suivis projets et TP : C. Camilieri, C. Duffau et S. Roumajon
Mode d’évaluation :
1 devoir sur table sur le cours, des démonstrations
argumentées
http://atelierihm.unice.fr/enseignements/ih
msi3/
![Page 15: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/15.jpg)
Pour bien démarrer
Rejoindre Piazza : http://piazza.com/unice.fr/spring2017/eiin625
Pour les instructions préalable au cours du vendredi :
Télécharger et installer Java 8 et SceneBuilder ainsi que Intellij ou Eclipse
(suivant les préférences).
Liens utiles :
JDK8 : http://www.oracle.com/technetwork/java/javase/downloads/jdk8-
downloads-2133151.html
SceneBuilder (Gluon) : http://gluonhq.com/labs/scene-builder/
![Page 16: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/16.jpg)
Cycle de vie et périmètre du module
A n a l y s e d e s b e s o i n s
C o n c e p t i o n
C o n c e p t i o n l o g i c i e l l e
C o d a g e
T e s t s U n i t a i r e s
T e s t s d ’ i n t é g r a t i o n
T e s t s U t i l i s a t e u r s Evaluation
ergonomique
Périmètre du projet DEVINT
Périmètre du module IHM
![Page 17: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/17.jpg)
Compétences et périmètre du module
- 17 -
Des interfaces flexibles
• Sensibilisation à la conception d’IHM, considérations architecturales, développement modulaire d’IHM
Des interfaces utilisables
• Conception centrée utilisateurs avec prise en compte des usages, mise en place de protocoles d’évaluations
Des interfaces adaptées au support visé
• Acquisition de connaissances à la pointe de la technologie
Des interfaces "stylées"
Module POO/IHM en SI3
Module Conception & évaluation des IHM
en SI5
Autres modules du
parcours IHM en SI5
Design non enseigné à l’école : Designers & informaticiens
collaborent
![Page 18: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/18.jpg)
ON COMMENCE PAR MAQUETTER
![Page 19: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/19.jpg)
(c) 2015, Occello Audrey, POO/IHM
- 19 -
Widgets génériques pour le maquettage
http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
![Page 20: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/20.jpg)
(c) 2015, Occello Audrey, POO/IHM
- 20 -
Widgets génériques pour le maquettage
http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
Les outils "dédiés" aux maquettes permettent de concevoir une IHM
indépendamment de toute toolkit du marché
![Page 21: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/21.jpg)
Ne pas confondre les SceneBuilder ou AndroidStudio
Avec des plateformes de prototypage
https://www.canvasflip.com/balsamiq-and-canvasflip-utility-tool.php
http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools
![Page 22: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/22.jpg)
ON ARCHITECTURE
![Page 23: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/23.jpg)
•Organiser le code (rangement) Simplifier (diviser pour régner) •Organiser le travail Modifier (une partie) •Ré-utiliser Notion : modularité, évolutivité, flexibilité
Séparation possible –Code pour IHM –Code «Métier» •Exemple –IHM différente pour une Gestion d’un stock de chaussures ou de bibelots ? –Linux sous gnome ou kde, le système change-t-il ? •Objectif : éviter de tout modifier si on change la partie fonctionnelle ou la partie IHM
Architecture Logicielle et IHM : Pourquoi ?
![Page 24: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/24.jpg)
Un problème classique
![Page 25: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/25.jpg)
Des architectures logicielles http://tel.archives-ouvertes.fr/docs/00/04/82/79/HTML/2_2modelesinterface_referen.html
Tous les modèles partent du principe :
un système interactif comporte une partie ``interface'' et une partie ``application pure''
Cette dernière est souvent appelée noyau fonctionnel.
Le noyau fonctionnel est considéré comme préexistant, et les modèles de systèmes
interactifs décrivent essentiellement la partie interface, ainsi que ses relations avec les
objets du domaine.
La plupart des modèles identifient au moins trois types d'éléments :
un ``coté utilisateur'‘ (présentations),
un ``côté noyau fonctionnel'‘ (interfaces du noyau fonctionnel, abstractions,
modèles),
et des éléments articulatoires (contrôleurs, adaptateurs).
Système interactif
utilisateur
![Page 26: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/26.jpg)
Zoom : Architecture MVC •Smalltalk[Goldberg et Robson1979-1983]
–Model : modélisation (données et comportement)
–View: représentation manipulable de l'objet
–Control : interprétation des entrées
Séparer dans le code
–les données (le Modèle),
–La ou les Vues,
–Le Contrôle
•V s’abonne à M
•C s’abonne à V
•C modifie M
![Page 27: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/27.jpg)
ON DÉVELOPPE
![Page 28: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/28.jpg)
Une IHM c’est quoi ? La structure
Le comportement
La structure sert à disposer l’information
C’est la partie "visible" de l’IHM (elle inclut la possibilité d’interagir)
Le comportement sert à déclencher des réactions face aux actions de l’utilisateur
Les actions de l’utilisateurs sont traduites en des stimuli que l’on appelle événements
- 28 -
![Page 29: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/29.jpg)
(c) 2015, Occello Audrey, POO/IHM
- 29 -
Des éléments graphiques simples prêts à l’emploi (widgets)
• Définition d’un élément graphique avec une dimension, une position
• et un type de contrôle associé permettant de saisir ou d’afficher de l’information et d’activer des fonctionnalités
Des éléments graphiques composés (conteneurs) :
• Définition d’un regroupement - éléments graphiques qui contiennent d’autres éléments graphiques
Du formattage :
• Définition de l’organisation (placement des éléments les unes par rapport aux autres) - En ligne, en tableau, avec des contraintes, etc
Des bouts d’écran :
• Définition de l’affichage à l’écran (dessiner les éléments graphiques) et gestion du redimensionnement
Des événements pour écouter les actions de l’utilisateur (appuie sur des touches clavier /souris, mouvement de la souris/Wiimote, …)
Str
uctu
re
Com
por-
tem
ent
![Page 30: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/30.jpg)
PREAMBULE
![Page 31: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/31.jpg)
Ce que vous allez utiliser de Java et de ces concepts
• L’API java
• L’héritage
• Les exceptions
• Les threads
• Les inner classes
Quelques flashback ou look forward
avant de commencer le vif du sujet
![Page 32: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/32.jpg)
COMMENT PROCEDE-T-ON ?
![Page 33: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/33.jpg)
Des éléments graphiques : Component Définition d’un élément graphique avec une dimension, une position Des Coordonnées (Origine coin supérieur gauche, x (width) vers la droite et y (height) vers le bas)
Des morceaux d’écrans : Graphics Contexte graphique Permet de dessiner –Changer de crayon : couleur, formes géométriques, images, chaînes de caractères - Automatiquement redimensionnés, réaffichés
ON S’INTERESSE A LA STRUCTURE
Des éléments graphiques
Contenant Container :
qui contiennent d’autres éléments
graphiques organisés
Du Formattage : LayoutManager
Définition de l’organisation
En ligne, en tableau, avec des
contraintes,etc
![Page 34: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/34.jpg)
Structure JavaFX
http://mikarber.developpez.com/tutoriels/java/introduction-javafx/
![Page 35: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/35.jpg)
Structure d’une application JavaFx
![Page 36: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/36.jpg)
https://openclassrooms.com/courses/les-applications-web-avec-javafx/presentation-de-l-interface-graphique-en-javafx
Composants « classiques »
![Page 37: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/37.jpg)
https://openclassrooms.com/courses/les-applications-web-avec-javafx/presentation-de-l-interface-graphique-en-javafx
Formes et images
![Page 38: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/38.jpg)
Layouts
![Page 39: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/39.jpg)
Composants spécifiques
Statistiques
![Page 40: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/40.jpg)
Composants spécifiques
Javafx / Android
![Page 41: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/41.jpg)
Animations : transitions
![Page 42: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/42.jpg)
![Page 43: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/43.jpg)
Exemples de WIDGETS
Gestion du temps Formulaire
Data Time Picker
Spinner
![Page 44: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/44.jpg)
ViewPager
![Page 45: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/45.jpg)
Vues spécialisées
WebView ScrollView MapView
![Page 46: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/46.jpg)
ON GERE LES INTERACTIONS OBSERVER OBSERVABLE / LISTENERS
![Page 47: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/47.jpg)
Moyen
Définir une dépendance de “1” à “n” entre des objets telle que
lorsque l’état d’un objet change,
tous ses dépendants sont informés et mis à jour automatiquement
![Page 48: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/48.jpg)
Besoin d’événements
• Le pattern “Observer” décrit – comment établir les relations entre les objets dépendants.
• Les objets-clés sont – la source
• Peut avoir n’importe quel nombre d’observateurs dépendants
• Tous les observateurs sont informés lorsque l’état de la source change
– l’observateur. • Chaque observateur demande à la source son état afin de se synchroniser
![Page 49: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/49.jpg)
Structure
![Page 50: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/50.jpg)
Implémentations Java du pattern
Une classe et une interface : class Observable {... } et
interface Observer
Un objet Observable doit être une instance de la classe qui dérive de la classe Observable
Un objet observer doit être instance d’une classe qui implémente l’interface Observer
void update(Observable o, Object arg);
Des listeners : ajouter des listerners, notifier les listeners avec des évenements, réagir aux événements
![Page 51: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/51.jpg)
Méthodes de développement JavaFx et Android
![Page 52: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/52.jpg)
JavaFx
Créer un projet JavaFX
Utiliser Scene Builder pour concevoir l’interface utilisateur
Structurer votre application avec le pattern Model-View-Controller (MVC)
Choisir vos composants d’IHM et les connecter au Modele avec des événements
Utiliser des ObservableLists pour automatiquement mettre à jour l’interface…
Styler votre application JavaFX avec CSS
Si besoin sauvegarder des données en XML
….
![Page 53: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/53.jpg)
https://openclassrooms.com/courses/developpez-une-application-pour-android
Utiliser Android Studio et l'émulateur
Découpez l’application : activités et permissions
Implémentez une activité et reliez-la à une interface
Utilisez les fragments pour découper votre application
Partagez et recevez du contenu avec les intents
Comprenez et utilisez si nécessaire le cycle de vie des activités
Adaptez l’interface en fonction de la configuration du smartphone
Android
![Page 54: Introduction module IHM Polytech Sophia Dept Info SI3](https://reader034.vdocuments.pub/reader034/viewer/2022050614/589bf3331a28ab40348b5b4b/html5/thumbnails/54.jpg)
Conclusion
Les bibliothèques d’IHM ne s’apprennent pas vraiment en cours
Elles s’explorent et se pratiquent
Ce qui s’enseigne c’est plutôt :
l’architecture d’un système interactif
les bonnes méthodes selon les dispositifs visées et les outils
Les protocoles de communication avec les utilisateurs
Choisir les bons outils
Choisir les bons usages