Introduction module IHM Polytech Sophia Dept Info SI3

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

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

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, …)

Str

uctu

re

Com

por-

tem

ent

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 temps Formulaire

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