SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
Pourquoi des cours en IHM ?
Anne-Marie Dery
IHM et supports mobiles
Mêmes usages
Mêmes services
Dispositifs différents
IHM et des supports dédiés
Utilisateurs experts
efficacité sécurité
mobilité
IHM et la diversité des supports
Taille des écrans – multi touch
ou non – utilisateur experts ou
non
Environnement bruyant –
sombre …
Objets connectés : gadgets ?
Exploitation des données…
Contrôle de l’ensemble des objets
Usage
IHM, utilisateurs et usages
Continuité de service
Satisfaction de tous
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)
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
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é
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
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/
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/
Cycle de vie et périmètre du module
Analyse des besoins
Conception
Conception logicielle
Codage
Tests Unitaires
Tests d’intégration
Tests U tilisateurs
Evaluation
ergonomique
Périmètre du projet DEVINT
Périmètre du module IHM
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
ON COMMENCE PAR MAQUETTER
(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
(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é
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
ON ARCHITECTURE
•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 ?
Un problème classique
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
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
ON DÉVELOPPE
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 -
(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, …)
StructureCompor-
tement
PREAMBULE
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
COMMENT PROCEDE-T-ON ?
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
Structure JavaFX
http://mikarber.developpez.com/tutoriels/java/introduction-javafx/
Structure d’une application JavaFx
https://openclassrooms.com/courses/les-applications-web-avec-javafx/presentation-de-l-interface-graphique-en-javafx
Composants « classiques »
https://openclassrooms.com/courses/les-applications-web-avec-javafx/presentation-de-l-interface-graphique-en-javafx
Formes et images
Layouts
Composants spécifiques
Statistiques
Composants spécifiques
Javafx / Android
Animations : transitions
Exemples de WIDGETS
Gestion du tempsFormulaire
Data Time Picker
Spinner
ViewPager
Vues spécialisées
WebView ScrollView MapView
ON GERE LES INTERACTIONS
OBSERVER OBSERVABLE /
LISTENERS
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
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
Structure
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
Méthodes de développement
JavaFx et Android
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
….
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
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

Contenu connexe

Tendances

Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHMAnne-Marie Pinna-Dery
 
Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...Atelier IHM Polytech Nice Sophia
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Use Age
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm ludolmn
 
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Anthony Gelibert
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursAnne-Marie Pinna-Dery
 

Tendances (20)

Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Cours Adaptation des IHM
Cours Adaptation des IHMCours Adaptation des IHM
Cours Adaptation des IHM
 
Plasticité des IHM
Plasticité des IHMPlasticité des IHM
Plasticité des IHM
 
Plasticité2014 part4vf
Plasticité2014 part4vfPlasticité2014 part4vf
Plasticité2014 part4vf
 
Idm et ihm
Idm et ihmIdm et ihm
Idm et ihm
 
Intro conception2015vf bis
Intro conception2015vf bisIntro conception2015vf bis
Intro conception2015vf bis
 
Plasticité2015 intro
Plasticité2015 introPlasticité2015 intro
Plasticité2015 intro
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
 
Plasticitérecherche2017
Plasticitérecherche2017Plasticitérecherche2017
Plasticitérecherche2017
 
Intro conception et évaluation des IHM
Intro conception et évaluation des IHMIntro conception et évaluation des IHM
Intro conception et évaluation des IHM
 
Introduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHMIntroduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHM
 
Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...Composition d'applications multi-modèles dirigée par la composition des inter...
Composition d'applications multi-modèles dirigée par la composition des inter...
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm
 
Modelisation et maquettage 2015
Modelisation et maquettage 2015Modelisation et maquettage 2015
Modelisation et maquettage 2015
 
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
Plateforme Ouverte de Supervision et de Traçabilité pour les Environnements C...
 
Ergonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateursErgonomie et modelisation utilisateurs
Ergonomie et modelisation utilisateurs
 
Introduction à la plasticité
Introduction à la plasticitéIntroduction à la plasticité
Introduction à la plasticité
 

Similaire à Introduction module IHM Polytech Sophia Dept Info SI3

Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiENSET, Université Hassan II Casablanca
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
 
Chapitre 1 - Introcution & cycles de développement - Etudiant.pptx
Chapitre 1 - Introcution & cycles de développement - Etudiant.pptxChapitre 1 - Introcution & cycles de développement - Etudiant.pptx
Chapitre 1 - Introcution & cycles de développement - Etudiant.pptxssuserec8501
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...Sid Ahmed Benkraoua
 
CV_Youssouph_BARRY_DRUPAL
CV_Youssouph_BARRY_DRUPALCV_Youssouph_BARRY_DRUPAL
CV_Youssouph_BARRY_DRUPALYoussouph Barry
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicEmmanuel Hugonnet
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyENSET, Université Hassan II Casablanca
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...ENSET, Université Hassan II Casablanca
 
Présentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptmPrésentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptmAhmed Feki
 
Présentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéPrésentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéSimplicité Software
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationStéphane Traumat
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreStéphane Traumat
 
I3M- Sagem Défense Sécurité- Gilet Félin,
I3M- Sagem Défense Sécurité- Gilet Félin, I3M- Sagem Défense Sécurité- Gilet Félin,
I3M- Sagem Défense Sécurité- Gilet Félin, I3M Aérospace Multimédia
 
Architecture mvc
Architecture mvcArchitecture mvc
Architecture mvcMadridal
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement MicrosoftChristophe HERAL
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiquesJohan Moreau
 
7-Cours de Géniel Logiciel
7-Cours de Géniel Logiciel7-Cours de Géniel Logiciel
7-Cours de Géniel Logiciellauraty3204
 

Similaire à Introduction module IHM Polytech Sophia Dept Info SI3 (20)

Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
Chapitre 1 - Introcution & cycles de développement - Etudiant.pptx
Chapitre 1 - Introcution & cycles de développement - Etudiant.pptxChapitre 1 - Introcution & cycles de développement - Etudiant.pptx
Chapitre 1 - Introcution & cycles de développement - Etudiant.pptx
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...
 
Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 
CV_Youssouph_BARRY_DRUPAL
CV_Youssouph_BARRY_DRUPALCV_Youssouph_BARRY_DRUPAL
CV_Youssouph_BARRY_DRUPAL
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville Public
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Présentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptmPrésentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptm
 
Présentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéPrésentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud Simplicité
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
I3M- Sagem Défense Sécurité- Gilet Félin,
I3M- Sagem Défense Sécurité- Gilet Félin, I3M- Sagem Défense Sécurité- Gilet Félin,
I3M- Sagem Défense Sécurité- Gilet Félin,
 
Architecture mvc
Architecture mvcArchitecture mvc
Architecture mvc
 
Mohamed.marouan
Mohamed.marouanMohamed.marouan
Mohamed.marouan
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiques
 
7-Cours de Géniel Logiciel
7-Cours de Géniel Logiciel7-Cours de Géniel Logiciel
7-Cours de Géniel Logiciel
 

Dernier

DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxMartin M Flynn
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film françaisTxaruka
 
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfbdp12
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Atelier Canopé 37 - Tours
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Gabriel Gay-Para
 
Aux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAmar LAKEL, PhD
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfSylvianeBachy
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film françaisTxaruka
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneTxaruka
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfAtelier Canopé 37 - Tours
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxJCAC
 
Calendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilCalendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilfrizzole
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursStagiaireLearningmat
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24BenotGeorges3
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfAtelier Canopé 37 - Tours
 

Dernier (16)

DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film français
 
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)
 
Aux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècle
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film français
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienne
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
 
Calendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilCalendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avril
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceurs
 
Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
 

Introduction module IHM Polytech Sophia Dept Info SI3

  • 1. Pourquoi des cours en IHM ? Anne-Marie Dery
  • 2. IHM et supports mobiles Mêmes usages Mêmes services Dispositifs différents
  • 3.
  • 4. IHM et des supports dédiés Utilisateurs experts efficacité sécurité mobilité
  • 5. IHM et la diversité des supports Taille des écrans – multi touch ou non – utilisateur experts ou non Environnement bruyant – sombre …
  • 6.
  • 7. Objets connectés : gadgets ? Exploitation des données… Contrôle de l’ensemble des objets Usage
  • 8. IHM, utilisateurs et usages Continuité de service Satisfaction de tous
  • 9.
  • 10. 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)
  • 11. 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
  • 12. 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é
  • 13. 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
  • 14. 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/
  • 15. 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/
  • 16. Cycle de vie et périmètre du module Analyse des besoins Conception Conception logicielle Codage Tests Unitaires Tests d’intégration Tests U tilisateurs Evaluation ergonomique Périmètre du projet DEVINT Périmètre du module IHM
  • 17. 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
  • 18. ON COMMENCE PAR MAQUETTER
  • 19. (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
  • 20. (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é
  • 21. 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
  • 23. •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 ?
  • 25. 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
  • 26. 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
  • 28. 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 -
  • 29. (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, …) StructureCompor- tement
  • 31. 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
  • 33. 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
  • 42.
  • 43. Exemples de WIDGETS Gestion du tempsFormulaire Data Time Picker Spinner
  • 46. ON GERE LES INTERACTIONS OBSERVER OBSERVABLE / LISTENERS
  • 47. 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
  • 48. 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
  • 50. 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
  • 52. 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 ….
  • 53. 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
  • 54. 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