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.

====== UI Modernization ======

===== Objectif =====

Transformer l'ensemble des interfaces utilisateur afin de permettre
une utilisation simple, intuitive et efficace d'une plateforme
Enterprise contenant plusieurs centaines de fonctionnalités.

Cette phase ne modifie pas les fonctionnalités existantes.

Elle transforme uniquement la manière dont elles sont présentées
et utilisées.

Objectifs principaux :

* Réduire la complexité perçue
  * Limiter la profondeur des menus
  * Guider l'utilisateur par ses activités
  * Adapter automatiquement l'interface au rôle
  * Réduire le nombre de clics
  * Uniformiser les six interfaces
  * Préparer l'intégration des futurs modules Enterprise

----

===== Principes UX =====

L'ensemble des interfaces devra respecter les principes suivants.

* Interface orientée activités
  * Navigation contextuelle
  * Information progressive
  * Zéro écran vide
  * Maximum trois niveaux de navigation
  * Recherche omniprésente
  * Personnalisation utilisateur
  * Responsive
  * Accessible (WCAG AA)

----

===== Architecture générale =====

Toutes les interfaces devront partager le même Design System.

<code>

Design System

↓

Layout Engine

↓

Navigation Engine

↓

Widgets

↓

Pages

</code>

Le moteur Experience Builder devient le fournisseur
de tous les composants visuels.

----

===== Navigation globale =====

La navigation principale est composée de trois niveaux maximum.

<code>

Workspace

↓

Activité

↓

Vue

</code>

Exemple :

<code>

Commercial

↓

Owners

↓

Fiche propriétaire

</code>

Aucune profondeur supplémentaire ne devra être introduite.

----

===== Espaces de travail =====

Chaque interface est organisée en Workspaces.

Exemple Tenant Console :

<code>

Accueil

Mon activité

Commercial

Patrimoine

Séjours

Finance

Marketing

Configuration

</code>

Chaque Workspace constitue une application métier autonome.

----

===== Tableau de bord =====

Le Dashboard disparaît progressivement au profit d'un Cockpit.

Le Cockpit présente uniquement :

* les tâches prioritaires
  * les indicateurs utiles au rôle connecté
  * les raccourcis métier
  * les alertes

Le Cockpit ne doit jamais présenter l'ensemble
des statistiques de la plateforme.

----

===== Activity Hub =====

Chaque utilisateur dispose d'un espace
"Mon activité".

Celui-ci présente automatiquement :

* Mes tâches
  * Mes validations
  * Mes signatures
  * Mes réservations
  * Mes tickets
  * Mes messages
  * Mes alertes

L'utilisateur travaille depuis cette vue
sans rechercher les menus.

----

===== Navigation contextuelle =====

Toutes les fiches métier deviennent des centres de travail.

Exemple :

Owner

<code>

Informations

Propriétés

Contrats

Documents

Facturation

Historique

Statistiques

Messages

</code>

L'utilisateur ne change plus de menu.

----

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

Les objets principaux disposent d'une vue complète.

Sont concernés :

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

Chaque fiche regroupe :

* informations
  * historique
  * documents
  * activités
  * statistiques
  * communications
  * actions

----

===== Recherche globale =====

Une barre de recherche permanente est disponible
sur toutes les interfaces.

Elle recherche :

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

La recherche ouvre directement
la fiche correspondante.

----

===== Command Palette =====

Une palette de commandes est disponible.

Raccourci :

<code>

CTRL + K

</code>

Elle permet :

* ouvrir un écran
  * rechercher un objet
  * lancer une action
  * accéder à une documentation
  * exécuter une commande

Exemples :

<code>

Créer un owner

Nouvelle réservation

Publier le site

Créer un contrat

Ajouter un bien

</code>

----

===== Quick Actions =====

Chaque écran possède une zone
"Actions rapides".

Exemple :

<code>

+ Nouveau bien

+ Nouvelle réservation

+ Nouveau propriétaire

+ Nouvelle facture

</code>

Les opérations courantes restent accessibles
en permanence.

----

===== Menus intelligents =====

Les menus sont construits dynamiquement.

Ils dépendent :

* du rôle
  * des permissions
  * des modules activés
  * de l'abonnement
  * des préférences utilisateur

Un utilisateur ne voit jamais
les fonctionnalités inutiles.

----

===== Favoris =====

Chaque utilisateur peut :

* épingler des menus
  * épingler des recherches
  * épingler des tableaux
  * épingler des biens
  * épingler des propriétaires

Les favoris apparaissent dans
le Cockpit.

----

===== Vues intelligentes =====

Les listes deviennent des vues métier.

Exemple :

Guests

<code>

Mes Guests

Arrivées aujourd'hui

Départs aujourd'hui

VIP

En attente

Tous

</code>

Les vues mémorisent :

* filtres
  * tris
  * colonnes
  * regroupements

----

===== Navigation par contexte =====

Depuis une réservation,
l'utilisateur peut accéder directement :

<code>

Guest

↓

Property

↓

Owner

↓

Paiement

↓

Facture

↓

Contrat

</code>

sans retourner au menu principal.

----

===== Interface adaptative =====

L'interface s'adapte automatiquement :

* Desktop
  * Laptop
  * Tablette
  * Mobile

Les composants changent
selon la taille d'écran.

----

===== Widgets =====

Toutes les pages sont composées
de widgets indépendants.

Exemples :

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

Chaque widget peut être :

* déplacé
  * masqué
  * redimensionné

selon les droits utilisateur.

----

===== Notifications =====

Toutes les notifications sont centralisées.

Types :

* information
  * rappel
  * validation
  * alerte
  * urgence

L'utilisateur accède à
l'historique complet.

----

===== Fil d'activité =====

Chaque objet métier possède un journal.

Exemple Reservation :

<code>

Créée

Paiement reçu

Contrat signé

Check-in

Message envoyé

Check-out

Avis publié

</code>

----

===== Documentation contextuelle =====

L'aide est intégrée à chaque écran.

Elle comprend :

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

sans quitter l'application.

----

===== Uniformisation =====

Les interfaces suivantes partagent :

* Design System
  * Widgets
  * Layout
  * Navigation
  * Composants
  * Icônes
  * Thèmes

Interfaces concernées :

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

----

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

La transformation UX est terminée lorsque :

✓ tous les menus sont organisés par activités

✓ aucune navigation ne dépasse trois niveaux

✓ toutes les fiches sont des vues 360°

✓ la recherche globale est disponible

✓ la Command Palette est disponible

✓ les Cockpits remplacent les anciens Dashboards

✓ les menus sont personnalisés selon le rôle

✓ les listes disposent de vues intelligentes

✓ toutes les interfaces utilisent le même Design System

✓ les utilisateurs peuvent réaliser leurs tâches principales sans connaître l'arborescence complète de la plateforme.

---

===== Une recommandation d'architecture supplémentaire =====

Jusqu'à présent, le code par est structuré par applications (apps/api, apps/platform-console, etc.).
Désormais, le structurer également par plateformes fonctionnelles.

Par exemple :

apps/
    api/
    platform-console/
    tenant-console/
    experience-app/
    platform-marketing/

packages/
    ui-platform/
    crm-platform/
    pms-platform/
    billing-platform/
    identity-platform/
    integration-platform/
    analytics-platform/

Chaque "platform" regroupera les composants, hooks, services, modèles et contrats d'un domaine transversal. Cela permettra de partager énormément de code entre les six interfaces tout en gardant une séparation claire des responsabilités.

Cette évolution est cohérente avec la taille que prend désormais le produit et préparera beaucoup mieux les futurs développements que la simple multiplication des applications frontales.

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