Aller au contenu

C20 : Interfaces web et UX

🔎 Observable 1 : Qualité des interfaces graphiques

Les interfaces web du projet ACTION-REACTION ont été conçues afin d’offrir une expérience utilisateur fluide et intuitive. Chaque écran répond à un objectif précis (authentification, gestion du profil, souscription aux services, création et gestion des workflows), permettant à l’utilisateur de comprendre rapidement le fonctionnement de la plateforme.

L’organisation des vues repose sur une hiérarchie visuelle claire, mettant en avant les actions principales et limitant la surcharge d’informations. La navigation a été pensée pour accompagner l’utilisateur tout au long de son parcours, depuis la connexion jusqu’à la configuration complète d’une automatisation, tout en réduisant le nombre d’interactions nécessaires.

  • Capture login / formulaire
Bannière Action-Reaction
Les champs de formulaire sont accompagnés de labels explicites et de messages d’erreur clairs afin de faciliter la compréhension et l’accessibilité.
  • Capture Workflow
Bannière Action-Reaction
L’interface du dashboard workflow privilégie la lisibilité, avec une hiérarchie visuelle claire pour guider l’utilisateur vers les actions principales.
  • Capture création des paramètres
Bannière Action-Reaction
Le parcours de création d’une AREA est découpé en étapes logiques, offrant un cheminement clair et progressif pour l’utilisateur.
Capture d’écran mobile portrait 1 Capture d’écran mobile portrait 2 Capture d’écran mobile portrait 3
Exemples d’écrans sur mobile pour illustrer l’adaptabilité et l’ergonomie sur smartphone.

🔎 Observable 2 : Accessibilité

La conception des interfaces s’appuie sur les Game Accessibility Guidelines pour le web et le mobile, afin de garantir une expérience accessible et inclusive.

Accessibilité exemple large 1 Accessibilité exemple large 2 Accessibilité exemple carré

En s’inspirant de ces recommandations, nous avons ajouté plusieurs fonctionnalités concrètes pour améliorer l’accessibilité de l’application :
- un mode clair et un mode sombre pour s’adapter aux préférences visuelles des utilisateurs,
- une traduction de l’interface en quatre langues : français, anglais, espagnol et italien,
- des formulaires avec des libellés explicites et des messages de retour clairs pour faciliter la compréhension,
- une navigation claire et utilisable sans dépendre exclusivement de la souris.

🔎 Observable 3 : Justification des choix

graph TD
    Connexion --> Dashboard
    Dashboard -->|Barre de navigation| DashboardSection
    Dashboard -->|Barre de navigation| Service
    Dashboard -->|Barre de navigation| Credentials
    Dashboard -->|Barre de navigation| Executions
    Dashboard -->|Barre de navigation| Settings
    DashboardSection[Dashboard]
    Service[Service]
    Credentials[Credentials]
    Executions[Executions]
    Settings[Settings]

Les choix ergonomiques et l’agencement des interfaces ont été pensés pour rendre l’application simple et intuitive, tant sur le web que sur mobile.
Les écrans suivent un parcours logique, avec les actions principales clairement mises en avant, tandis que les informations secondaires restent accessibles sans surcharge visuelle.
La cohérence des boutons, des couleurs et des composants à travers toutes les interfaces renforce la compréhension et facilite la navigation.

Ces décisions ont pour objectif d’offrir une expérience fluide et compréhensible, utilisable sans formation préalable.