Rapport – STIC I Exercice 6

Le dispositif développé pour cet exercice est accessible au lien suivant :

• Présentation interactive Reveal.js : « Comprendre la LAMal »

Ce dispositif est un support pédagogique interactif conçu pour les ateliers d'introduction à la vie à Genève.

Contexte : Le système d'assurance maladie suisse (LAMal) est complexe et souvent difficile à appréhender pour les nouveaux résidents arrivant de l'étranger (étudiants, expatriés, etc.). La distinction entre les coûts fixes (primes) et les coûts variables (franchise, quote-part) est une source fréquente de confusion et d'erreurs budgétaires.

Objectifs pédagogiques : Le dispositif vise à rendre ces mécanismes financiers transparents à travers une approche visuelle et interactive. À l’issue de l’utilisation, l’utilisateur doit être capable de :

• Comprendre le principe du remplissage de la franchise à l’aide d’une métaphore visuelle.
• Calculer son reste à charge réel sur une facture médicale grâce à un simulateur interactif.
• Identifier certains risques financiers liés aux choix d’assurance (par exemple le refus de médicaments génériques).

Design pédagogique : Le dispositif repose sur une structure narrative progressive (storytelling). Après une phase d’introduction des concepts, un personnage fictif (« Jean ») est introduit afin d’ancrer la théorie dans une situation concrète (un épisode de grippe). Le parcours se termine par une simulation active favorisant un apprentissage par l’exploration.

Design d’interface : L’interface utilise la bibliothèque Reveal.js pour proposer une navigation fluide par diapositives. Un code couleur constant (bleu = franchise, orange = quote-part, vert = assurance) est utilisé afin de réduire la charge cognitive et de faciliter la compréhension des mécanismes financiers.

Sobriété numérique : Le dispositif s’appuie exclusivement sur des technologies web légères (HTML, CSS et JavaScript) et évite l’usage de contenus lourds tels que des vidéos ou des animations complexes. Le nombre de bibliothèques externes est volontairement limité afin d’optimiser les temps de chargement et de minimiser l’impact environnemental.

Le dispositif combine HTML5, CSS3 et deux bibliothèques JavaScript :

• Reveal.js : structure de la présentation et navigation par diapositives.
• Chart.js : génération du graphique interactif utilisé dans le simulateur de coûts.

Le principal défi a concerné la mise en place de la logique JavaScript permettant de calculer correctement les coûts, notamment l’intégration du plafond légal de la quote-part (700 CHF). Des ajustements ont également été nécessaires pour gérer les interactions entre le redimensionnement automatique des diapositives Reveal.js et l’affichage du graphique Chart.js.

Le dispositif est fonctionnel et apporte une réelle plus-value interactive par rapport à un document explicatif statique.

Difficultés rencontrées :

Le graphique interactif avait tendance à disparaître ou à se déformer lors de l’affichage. Ce problème a été résolu en désactivant le maintien du ratio d’aspect (maintainAspectRatio: false) dans Chart.js et en définissant des dimensions fixes pour le conteneur via CSS.

Limites pédagogiques :

Le dispositif suppose une familiarité minimale avec les notions financières de base. Pour des utilisateurs totalement novices ou peu à l’aise avec les chiffres, un accompagnement humain ou une introduction guidée pourrait être nécessaire afin d’éviter une surcharge cognitive.

Pistes d’amélioration :

• Ajouter un mode de comparaison permettant d’afficher deux modèles d’assurance côte à côte.
• Optimiser l’ergonomie et l’affichage pour les écrans de smartphones.

• Office fédéral de la santé publique (OFSP). (s.d.). L’assurance-maladie en Suisse (LAMal). Site officiel de la Confédération suisse. https://www.admin.ch
• Priminfo. (s.d.). Informations sur l’assurance-maladie obligatoire. https://www.priminfo.ch
• Reveal.js. (s.d.). Reveal.js documentation. https://revealjs.com
• Chart.js. (s.d.). Chart.js documentation. https://www.chartjs.org

• Bibliothèques JavaScript : Reveal.js et Chart.js (licences MIT).
• Images : Images d’illustration provenant de Pexels (libres de droits).
• Assistant IA : ChatGPT (OpenAI, modèle GPT-4) a été utilisé ponctuellement pour l’aide à la reformulation académique, la clarification de concepts techniques et l’amélioration de la lisibilité du rapport.