Table des matières

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 :


Principes UX

L'ensemble des interfaces devra respecter les principes suivants.


Architecture générale

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

Design System

    ↓

Layout Engine

    ↓

Navigation Engine

    ↓

Widgets

    ↓

Pages

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


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

Workspace

    ↓

Activité

    ↓

Vue

Exemple :

Commercial

    ↓

Owners

    ↓

Fiche propriétaire

Aucune profondeur supplémentaire ne devra être introduite.


Espaces de travail

Chaque interface est organisée en Workspaces.

Exemple Tenant Console :

Accueil

Mon activité

Commercial

Patrimoine

Séjours

Finance

Marketing

Configuration

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 :

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 :

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


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

Exemple :

Owner

Informations

Propriétés

Contrats

Documents

Facturation

Historique

Statistiques

Messages

L'utilisateur ne change plus de menu.


Fiches 360°

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

Sont concernés :

Chaque fiche regroupe :


Recherche globale

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

Elle recherche :

La recherche ouvre directement la fiche correspondante.


Command Palette

Une palette de commandes est disponible.

Raccourci :

CTRL + K

Elle permet :

Exemples :

Créer un owner

Nouvelle réservation

Publier le site

Créer un contrat

Ajouter un bien

Quick Actions

Chaque écran possède une zone “Actions rapides”.

Exemple :

+ Nouveau bien

+ Nouvelle réservation

+ Nouveau propriétaire

+ Nouvelle facture

Les opérations courantes restent accessibles en permanence.


Les menus sont construits dynamiquement.

Ils dépendent :

Un utilisateur ne voit jamais les fonctionnalités inutiles.


Favoris

Chaque utilisateur peut :

Les favoris apparaissent dans le Cockpit.


Vues intelligentes

Les listes deviennent des vues métier.

Exemple :

Guests

Mes Guests

Arrivées aujourd'hui

Départs aujourd'hui

VIP

En attente

Tous

Les vues mémorisent :


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

Guest

↓

Property

↓

Owner

↓

Paiement

↓

Facture

↓

Contrat

sans retourner au menu principal.


Interface adaptative

L'interface s'adapte automatiquement :

Les composants changent selon la taille d'écran.


Widgets

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

Exemples :

Chaque widget peut être :

selon les droits utilisateur.


Notifications

Toutes les notifications sont centralisées.

Types :

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


Fil d'activité

Chaque objet métier possède un journal.

Exemple Reservation :

Créée

Paiement reçu

Contrat signé

Check-in

Message envoyé

Check-out

Avis publié

Documentation contextuelle

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

Elle comprend :

sans quitter l'application.


Uniformisation

Les interfaces suivantes partagent :

Interfaces concernées :


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.

DokuWiki Appliance - Powered by TurnKey Linux