Bibliothèque de mouvements · 06 / 10

Chiffres, étapes et données

Faire comprendre où en est un dossier d'un seul regard : compteurs, jauges, courbes, étapes et calendriers, toujours avec des valeurs d'exemple et jamais une promesse de résultat.

151

Compteur « registre »

Bandeau de repères sous le hero de la page JurisViva Créance, à la place des chiffres statiques.

Exemple · dossier fictif

Votre dossier, en trois repères

  • 0
    1
    2
    3
    4
    5
    6
    7
    8
    9    0
    1
    2
    3
    4
    5
    6
    7
    8
    9    pièces déposées
  • 0
    1
    2
    3
    4
    5
    6
    7
    8
    9    sur 4    étapes franchies
  • 0
    1
    2
    3
    4
    5
    6
    7
    8
    9    0
    1
    2
    3
    4
    5
    6
    7
    8
    9    jours d'un calendrier d'exemple
CSSimage BFLvue
152

Chiffre-éclat prolongé

Cartes « preuve » de l'accueil : le compte monte, puis l'éclat doré du site se pose sur le chiffre.

Exemple

24 pages numérisées
dans un dossier fictif

JS + CSSvue
153

Rouleau de chiffres

Compteur de pièces jointes du formulaire de dépôt d'un dossier de cession.

Exemple · pièces sélectionnées

12 pièces sélectionnées

Seuls les chiffres qui changent se déplacent.

Web Animationsclic
154

Simulateur à curseurs

Simulateur de la page JurisViva Créance : le résultat glisse, se colore et s'éclaire à mesure que les curseurs bougent.

Exemple de calcul · sans valeur contractuelle

Combien de pièces réunir pour votre dossier ?

Pièces à réunir

15 pièces à réunir, dossier d'exemple léger.

JS + CSSsaisie
155

Jauge demi-lune

Espace client Locatif : avancement du dossier d'un local, rubrique par rubrique.

Exemple3 sur 4rubriques du dossier renseignées
SVG + CSSvue
156

Anneaux concentriques

Tableau de bord du portail client, quand un même client a un dossier dans chacun des trois pôles.

  • JurisViva Créance4 rubriques sur 5
  • JurisViva Cession3 rubriques sur 5
  • JurisViva Locatif2 rubriques sur 5
Exemple · dossiers fictifs
SVG + CSSvue
157

Barres qui montent

Fiche d'une annonce de cession : inventaire des documents déjà réunis par le cédant.

ExempleDocuments par rubrique d'un dossier fictif
  1. 2Bail
  2. 3Bilans
  3. 1Statuts
  4. 5Matériel
  5. 2Plans
CSSvue
158

Courbe tracée, point éclaireur

Portail client : historique d'un dossier, avec lecture de chaque point au survol ou au clavier.

Exemple · calendrier fictif

Pièces déposées, semaine après semaine

  • Pièces déposées (cumul)
  • Dossier complet : 9 pièces
SVG + JSvuesurvol des points
159

Suivi d'étapes « 2 sur 4 »

Étapes du recouvrement sur la page JurisViva Créance et en tête du formulaire de dépôt.

Étape 2 sur 4Analyse des pièces

  1. Dépôt
  2. Analyse
  3. Relance
  4. Suite
CSS + JSclic
160

Fil vertical du dossier

Portail client : état d'un dossier d'impayé, chaque jalon s'allume puis tire le trait vers le suivant.

  1. Dossier reçuJour 1 · calendrier d'exemple
  2. Pièces vérifiéesJour 2
  3. Relance amiable envoyéeJour 4
  4. En attente de réponseÉtape en cours
CSSvue
161

Avant / après à poignée dorée

Annonces de cession : comparer la photo reçue du cédant et la photo retenue pour l'annonce.

Devanture d'un commerce, image d'illustration Photo reçuePhoto d'annonce
clip-pathimage BFLsaisie
162

Calendrier, jours qui s'allument

Page d'attente Locatif et espace bailleur : les échéances du mois se posent une à une.

Mois d'exempleCalendrier fictif

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  • Échéances d'exemple
  • Rendez-vous d'exemple
CSSvue
163

Créneaux horaires, pouce glissant

Page « Prendre rendez-vous » : choix du jour puis du créneau, les créneaux pris restent visibles.

Semaine d'exemple

Choisissez un créneau d'exemple.

CSS + Web Animationsclic
164

Carte de France pointillée

Section « Partout en France » de l'accueil : la carte s'éclaire par vague, puis quelques points dorés respirent.

Carte stylisée · sans donnée réelle

Partout en France, le même suivi de dossier

Point d'illustration

canvas 2Dvueboucle douce
165

Anneau de dépôt

Dépôt de pièces : un cran par fichier, l'anneau se ferme et la coche dorée se dessine.

Aucune pièce déposée.

SVG + JSclic
166

Tableau dont les lignes arrivent

Portail cédant : liste des pièces d'un dossier de cession, ligne après ligne, l'état en dernier.

Exemple · dossier fictif
PièceReçueÉtat
Bail commercialJour 1Vérifiée
Trois derniers bilansJour 2Vérifiée
Inventaire du matérielJour 4En cours
Diagnostics du local—Attendue
CSSvue
167

Légende animée

Tout graphique du portail : pointer une entrée de légende isole sa série et estompe les autres.

ExempleRépartition des pièces d'un dossier locatif fictif
CSS + JSsurvolclavier
168

Barre segmentée « 3 sur 4 »

En-tête des formulaires Locatif en plusieurs écrans : les segments se remplissent l'un après l'autre.

Étape 3 sur 4État des lieux

CSSvue
169

Étapes pilotées au défilement

Section « Comment ça se passe » de JurisViva Créance : le chiffre roule et le rail se dore au fil de la lecture.

Exemple de parcours

Vous déposez vos pièces

Nous vérifions le dossier

Nous relançons votre débiteur

Nous faisons le point avec vous

Faites défiler

défilement interneimage BFL
170

Point « en cours » qui respire

Portail client : seule l'étape ouverte porte le halo doré du bouton « Être rappelé », en plus petit.

Dossier d'exemple

Relance amiableEn cours

Le point respire tant que l'étape est ouverte.

CSSboucle 2,6 s
171

Comparatif en deux colonnes

Pages des trois pôles : « ce que vous déposez » face à « ce que nous préparons », de part et d'autre d'un axe.

Exemple de répartition

Vous déposez

  • Vos factures impayées
  • Les bons de commande
  • Vos échanges avec le débiteur

Nous préparons

  • La vérification du dossier
  • La relance écrite
  • Le point d'étape avec vous
CSSvue
172

Histogramme qui se reclasse

Fiche d'un dossier de cession : trier les rubriques, chaque ligne glisse jusqu'à sa nouvelle place.

Exemple · documents par rubrique

  1. Bail2
  2. Bilans3
  3. Statuts1
  4. Matériel5
  5. Diagnostics4
FLIP · Web Animationsclic
173

Échéancier à curseur

Simulateur Locatif : parcourir les douze mois d'un bail, le repère doré saute de cran en cran.

Bail d'exemple · 12 mois
CSS + JSsaisie
174

Gaufre de proportion

Annonces de cession : dire une part sans camembert, case par case, la dernière en or.

Exemple36 cases sur 100Proportion d'illustration, sans donnée réelle.
CSS + JSvue
175

Tuile à courbe discrète

Pavés du tableau de bord : le survol du site (levée, liseré doré) dessine en plus la tendance.

CSSsurvolclavier
176

Échéancier photo en parallaxe

Page JurisViva Locatif, quand elle sera republiée : une année de bail racontée en quatre temps devant la devanture.

Devanture d'un local commercial, image d'illustration
Une année de bail d'exemple

État des lieux d'entrée

Appel de loyer

Régularisation des charges

Bilan de l'année

Faites défiler

défilement interneimage BFLclip-path
177

Le dossier se constitue

Confirmation après dépôt d'un dossier de cession : les pièces rejoignent la pile, le compte suit, la lumière passe.

Exemple · dossier fictif

Dossier d'exemple complet

CSS + JSvue
178

Pastille d'état qui tourne

Listes de dossiers du portail : l'état change sans saut, le mot roule et le point change de teinte.

État d'un dossier d'exemple

En cours

CSS + JSclic
179

Chiffre habité par la photo

Ouverture de la section « étapes » de JurisViva Cession : le nombre d'étapes devient la fenêtre sur la devanture.

Exemple de mise en page

Quatre étapes, un même dossier

Chiffre d'illustration : il se remplace par le nombre d'étapes réel de votre parcours.

background-clipimage BFLvue
180

Récépissé qui s'imprime

Fin du dépôt de pièces Locatif : le récapitulatif sort de la fente, ligne à ligne, total en or.

Récépissé d'exempleDossier locatif fictif

  • Bail commercial1
  • États des lieux2
  • Quittances6

Total9 pièces