Le projet porte sur la conception d'une interface pour un système de gestion de sommeil, incluant diverses fonctionnalités telles que la durée de sommeil, la position de sommeil et les statistiques. Les principales problématiques abordées sont le respect des normes ISO et le choix des outils et technologies adéquats. L'application, nommée 'Good Sleep', utilise des technologies comme HTML, JavaScript et CSS pour son développement.

1. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
TRAVAUX PRATIQUE
Présentation de Travail pratique de réalisation d’une
interface homme machine pour un système de
gestion de sommeil
Présenté par : Groupe HCI 04
Encadrant : Dr Vu Thi Hong Giang
5 février 2019 1 / 15

2. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
1 Introduction
2 Présentation du Projet
Travail à faire
Problématique
Fonctionnalités
Conception Logo+icons
Conception IHM
3 Conclusion
5 février 2019 2 / 15

3. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Introduction
L’appropriation d’un outil passe généralement par l’interface
d’échange entre cet outil et l’utilisateur de celui-ci. C’est ainsi
que les interface homme machine occupent une place
importante de nos jour dans la réalisation des système.
Figure – Interaction Homme Machine
5 février 2019 3 / 15

4. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Présentation du Projet
Le projet soumis à notre étude est celui de la conception d’une
Interface pour un système de gestion de sommeil.
Pour un fonctionnement normal de notre système, il faut les
composants suivants :
Physique
Écran tac tille + micro + haut parleur : Détachable et
amovible, Un bracelet de réveil, Un capteur de mouvement
ou son
Logiciel
Système de gestion des dispositifs d’enregistrement
L’interaction avec ce système se fait au travers d’une interface
dont nous avons la lourde responsabilité.
5 février 2019 4 / 15

5. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Présentation du Projet
Le sujet soumis à notre étude nous met face à deux grandes
problématiques qui sont :
• La prémière problématique est sans doute d’abord le strict
des principes de la norme ISO 16982 dans le processus du
développement des prototypes d’interfaces et
d’interactions,
• La deuxième problématique porte sur le choix des outils et
technologies adaptés pour notre travail ;
5 février 2019 5 / 15

6. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Équipements
(a) Capteur de
mouvement (b) Écran 10p
(c) Bracelet de
réveil
Figure – Certain dispositifs
5 février 2019 6 / 15

7. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Fonctionnalités
Les fonctionnalités disponible pour notre systeme sont :
Duration : Permet d’accéder aux information liées à la
durée du sommeil
Position : Permet d’accéder aux information liées aux
positions de sommeil de l’utilisateur
Snore : permet de donner les informations sur le
ronflement de la personne
Statistic : Permet de donner toutes les statistiques
(temps de sommeil par jour, ...).
5 février 2019 7 / 15

8. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Logo
Notre application se nomme : GOOD SLEEP
Une personne couchée dans le lit ;
Une succession croissante de z qui indique le ronflement ;
L’horloge qui indique la durée du ronflement ;
Good sleep qui est le nom de l’application ;
Figure – Logo
5 février 2019 8 / 15

9. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Icons
(a) Icon Duration (b) Icon Position
Figure – Icons
5 février 2019 9 / 15

10. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Icons
(a) Icon ronflement (b) Icon Statistiques
Figure – Icons
5 février 2019 10 / 15

11. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Système de navigation de notre application
illustrative du système de navigation.
Figure – Système de navigation
5 février 2019 11 / 15

12. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
IHM
Démarche de développement IHM [Long et Dowell] La méthode
artisanale :
Elle correspond à la méthode de prototypage processif en génie
logiciel
5 février 2019 12 / 15

13. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Outils
HTML : Pour la structuration des différentes pages web
JavaScript : Pour rendre dynamique
CSS : Pour la présentation
Bootstrap : bibliothèque de la manipulation et des effets.
5 février 2019 13 / 15

14. Introduction
Présentation
du Projet
Travail à faire
Problématique
Fonctionnalités
Conception
Logo+icons
Conception IHM
Conclusion
Conclusion
Par venir au terme de notre exposé qui portait sur notre travail
pratique de conception d’une interface homme machine, nous
avons :
Présentés le contexte et l’environnement de notre système
Présentés le logo et les icons des fonctionnalités présentes
dans notre application
Présentés notre IHM ainsi que les outils utilisés pour
réaliser cet interface :
5 février 2019 14 / 15

15. Annexe
For Further Reading
Références
5 février 2019 15 / 15