Crealcs Development DokuWiki

Modifiez cette page et cliquez sur « Enregistrer ». Voyez le guide de mise en page pour une aide à propos du formatage. Veuillez ne modifier cette page que si vous pouvez l'améliorer. Si vous souhaitez faire des tests, faites vos premiers pas dans le bac à sable.

====== UX Platform ======

===== Objectif =====

Créer une couche transverse d'expérience utilisateur permettant
à toutes les interfaces de la plateforme de partager la même
navigation, les mêmes composants, les mêmes comportements
et les mêmes mécanismes d'interaction.

Cette couche ne contient aucune logique métier.

Elle orchestre uniquement l'expérience utilisateur.

Elle constitue le socle commun de :

* Platform Console
  * Tenant Console
  * Experience Builder
  * Platform Marketing Website
  * Tenant Marketing Website
  * Owner Portal
  * Guest Portal

----

====== Architecture ======

La UX Platform est composée de plusieurs moteurs indépendants.

<code>

UX Platform

├── Design System
├── Layout Engine
├── Navigation Engine
├── Workspace Engine
├── Search Engine
├── Command Palette Engine
├── Context Engine
├── Activity Engine
├── Notification Center
├── Favorites Engine
├── Help Engine
├── Personalization Engine
├── Widget Engine
├── Dashboard Engine
├── Timeline Engine
├── Document Preview Engine
└── Theme Engine

</code>

Chaque moteur est indépendant.

Tous sont réutilisés par les interfaces.

----

====== Design System ======

Objectif :

Garantir une identité visuelle unique.

Responsabilités :

* couleurs
  * typographies
  * espacements
  * animations
  * composants
  * responsive
  * accessibilité WCAG

Composants :

* boutons
  * formulaires
  * tableaux
  * dialogues
  * cartes
  * timelines
  * calendriers
  * graphiques

----

====== Layout Engine ======

Objectif :

Construire automatiquement les pages.

Layouts disponibles :

* plein écran
  * console
  * cockpit
  * portail
  * site marketing

Le moteur adapte automatiquement
le layout selon :

* interface
  * rôle
  * appareil

----

====== Navigation Engine ======

Objectif :

Construire automatiquement
les menus.

Les menus sont calculés à partir de :

* rôle
  * permissions
  * abonnement
  * modules installés
  * marque
  * préférences utilisateur

Le moteur interdit toute navigation
supérieure à trois niveaux.

----

====== Workspace Engine ======

Objectif :

Organiser les fonctionnalités
par activité métier.

Exemple Tenant Console :

<code>

Accueil

Mon activité

Commercial

Patrimoine

Séjours

Finance

Marketing

Configuration

</code>

Chaque Workspace est totalement indépendant.

----

====== Search Engine ======

Objectif :

Rechercher tous les objets métier.

Recherche :

* tenants
  * users
  * owners
  * guests
  * biens
  * réservations
  * contrats
  * factures
  * documents
  * tickets

La recherche est disponible
sur toutes les interfaces.

----

====== Command Palette Engine ======

Objectif :

Permettre l'accès rapide
aux fonctionnalités.

Raccourci :

<code>

CTRL + K

</code>

Recherche :

* écrans
  * commandes
  * actions
  * objets
  * documentation

Exemples :

<code>

Créer une réservation

Créer un owner

Publier le site

Créer un contrat

Ajouter un bien

</code>

----

====== Context Engine ======

Objectif :

Maintenir le contexte utilisateur.

Depuis une réservation,
le moteur connaît automatiquement :

* guest
  * owner
  * property
  * contrat
  * facture
  * paiements
  * messages

L'utilisateur ne revient jamais
au menu principal.

----

====== Activity Engine ======

Objectif :

Présenter le travail restant.

Le moteur agrège :

* tâches
  * validations
  * workflows
  * signatures
  * messages
  * incidents
  * alertes

Chaque utilisateur dispose
de son Activity Hub.

----

====== Notification Center ======

Objectif :

Centraliser toutes les notifications.

Types :

* information
  * rappel
  * validation
  * alerte
  * urgence

Canaux :

* interface
  * email
  * SMS
  * push
  * webhook

----

====== Favorites Engine ======

Objectif :

Personnaliser l'interface.

Supporte :

* menus favoris
  * recherches
  * tableaux
  * propriétaires
  * biens
  * guests
  * réservations

Les favoris apparaissent
dans le Cockpit.

----

====== Help Engine ======

Objectif :

Afficher l'aide contextuelle.

Supporte :

* aide rapide
  * tutoriels
  * vidéos
  * FAQ
  * documentation
  * onboarding

L'utilisateur ne quitte jamais
l'application.

----

====== Personalization Engine ======

Objectif :

Adapter automatiquement l'interface.

Paramètres :

* langue
  * thème
  * densité
  * taille police
  * raccourcis
  * widgets
  * favoris

Chaque utilisateur dispose
de son propre profil.

----

====== Widget Engine ======

Objectif :

Construire toutes les pages.

Widgets disponibles :

* KPI
  * Tableau
  * Calendrier
  * Carte
  * Timeline
  * Documents
  * Messages
  * Activités
  * Graphiques
  * Formulaires

Chaque widget est :

* déplaçable
  * redimensionnable
  * configurable
  * réutilisable

----

====== Dashboard Engine ======

Objectif :

Construire les Cockpits.

Chaque Cockpit est composé
de widgets.

Le Dashboard classique disparaît.

Chaque rôle dispose
de son Cockpit.

----

====== Timeline Engine ======

Objectif :

Présenter l'historique
des objets métier.

Supporte :

* réservation
  * guest
  * owner
  * property
  * tenant
  * contrat

Chaque événement est horodaté.

----

====== Document Preview Engine ======

Objectif :

Prévisualiser les documents.

Supporte :

* PDF
  * Images
  * Office
  * Contrats
  * Factures

Sans téléchargement.

----

====== Theme Engine ======

Objectif :

Appliquer automatiquement
la charte graphique.

Le thème dépend :

* plateforme
  * tenant
  * marque
  * portail

Le même moteur est utilisé
par toutes les interfaces.

----

====== Fiches 360° ======

Tous les objets principaux disposent
d'une fiche unique.

Sont concernés :

* Tenant
  * User
  * Owner
  * Guest
  * Property
  * Reservation
  * Contract
  * Invoice
  * Ticket

Chaque fiche contient :

* informations
  * activité
  * documents
  * messages
  * statistiques
  * historique
  * actions

----

====== Cockpits ======

Chaque rôle possède
son Cockpit.

Exemples :

Platform Owner

Tenant Manager

Sales

Agent

Billing

Owner

Guest

Le Cockpit présente uniquement
les informations utiles.

----

====== UX API ======

La UX Platform expose
une API interne.

Exemples :

<code>

GET /ui/navigation

GET /ui/workspaces

GET /ui/widgets

GET /ui/dashboard

GET /ui/search

GET /ui/help

GET /ui/context

GET /ui/favorites

GET /ui/activity

GET /ui/theme

</code>

----

====== Architecture technique ======

Le monorepo contient :

<code>

packages/

ui-core/

ui-design-system/

ui-layout/

ui-navigation/

ui-search/

ui-command-palette/

ui-dashboard/

ui-widgets/

ui-context/

ui-notifications/

ui-help/

ui-theme/

ui-timeline/

</code>

Chaque frontend importe uniquement
les moteurs nécessaires.

----

====== Définition de terminé ======

La UX Platform est terminée lorsque :

✓ toutes les interfaces utilisent le même Design System

✓ tous les menus sont générés automatiquement

✓ toutes les fiches sont des vues 360°

✓ la recherche globale est disponible

✓ la Command Palette est disponible

✓ les Cockpits remplacent les anciens Dashboards

✓ les Workspaces remplacent les menus traditionnels

✓ toutes les pages sont composées de widgets

✓ la personnalisation utilisateur est centralisée

✓ l'aide est intégrée partout

✓ les futures fonctionnalités peuvent être ajoutées sans modifier la navigation.

Résumé

Note : En modifiant cette page, vous acceptez que le contenu soit placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International