vsa:ergonomie

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
vsa:ergonomie [17/09/2018 11:28] Caroline BABRONvsa:ergonomie [29/11/2023 16:00] (Version actuelle) Caroline BABRON
Ligne 1: Ligne 1:
 ====== Ergonomie ====== ====== Ergonomie ======
  
-Cette page vous permet d'apprécier les éléments ergonomiques de VSActivity.+Cette page vous permet d'apprécier les éléments ergonomiques de VSA/VSP 
 + 
 +===== Les nouveautés de mai 2023 ===== 
 + 
 +Votre application fait peau neuve pour les beaux jours et vous propose plusieurs évolutions ergonomiques. 
 + 
 +Nous vous dévoilons cela en détail.  
 + 
 +**<color #F08080> Les listes </color>** 
 + 
 +**Visuel amélioré** 
 + 
 +Les listes s’allègent visuellement : 
 +  * Les entêtes de colonnes adoptent une couleur unique 
 +  * Les regroupements de colonnes sont simplifiés  
 + 
 +{{:vsa: ergo_mai23_13.png}} 
 + 
 +  * Il n’y a plus d’alternance de couleurs de fond entre les lignes 
 +  * Le survol à la souris d’une ligne grise la ligne 
 +  * La sélection d’une ligne grise la ligne et coche la case à cocher qui est à gauche de la ligne 
 + 
 +**Actions techniques sur une liste** 
 + 
 +Les actions pour la gestion de l’affichage des colonnes, les exports Excel et PDF (etc.) sont désormais dans un menu unique représenté par une icône. Cette icône comporte toujours le petit tag contenant le nombre de colonnes masquées. 
 + 
 +{{:vsa: ergo_mai23_1.png}} 
 + 
 +**Actions globales** 
 + 
 +Des boutons d’actions ronds avec une icône viennent remplacer les précédents boutons allongés (avec un texte écrit) pour vous permettre d’effectuer les actions globales des écrans. A noter qu’en survol il y a toujours le nom complet de l’action. 
 + 
 +{{:vsa: ergo_mai23_2.png}} 
 + 
 + 
 +**Les cases à cocher** 
 + 
 +Les cases à cocher des lignes qui peuvent être sélectionnées dans les listes adoptent un look plus sobre et moderne. 
 + 
 +{{:vsa: ergo_mai23_3.png}} 
 +   
 +**Actions de masse** 
 + 
 +Une fois que vous avez sélectionné une ou plusieurs lignes, une « bulle » noire s’affiche. 
 +En cliquant dessus, vous retrouverez toutes les actions de masse disponibles.  
 + 
 +Le petit plus : Toutes les actions globales restent affichées pour vous éviter de désélectionner les lignes pour les voir apparaitre. Précédemment, l’affichage des actions de masse venait remplacer les actions globales et il fallait décocher les lignes pour retrouver les actions globales. 
 +  
 +{{:vsa: ergo_mai23_4.png}} 
 + 
 +**<color #F08080> Les formulaires </color>** 
 + 
 +Un design simplifié avec les champs positionnés maintenant sous les intitulés, et les boutons d’action en bas du formulaire, toujours visibles. 
 + 
 +{{:vsa: ergo_mai23_5.png}} 
 + 
 +**<color #F08080> Les écrans avec des boîtes d’informations et/ou d’actions </color>** 
 + 
 +Les boîtes contenant des informations et/ou des actions en haut de page dans des écrans comme « Mes notes de frais », « CRA », etc, sont maintenant sur la même ligne pour un visuel plus compact et structuré. 
 +En réduisant la largeur de l’écran, ces boîtes repasseront automatiquement dans un affichage où il y en aura une par ligne. 
 + 
 +Exemple : Mes notes de frais (vision avec des droits Manager)  
 +{{:vsa: ergo_mai23_6.png}} 
 + 
 + 
 +**<color #F08080> Les nouveautés au fil de l’eau </color>** 
 + 
 +Fini le bandeau d’information en haut de la page, les nouveautés d’un écran seront désormais visible grâce à une icône « ampoule » animée en haut, à droite du titre de l’écran. Un tag indique le nombre de messages à lire. Une fois un message lu, vous pouvez le fermer, et même tous les fermer en une action. Si vous ne les fermez pas, ils pourront être relus ultérieurement. 
 + 
 +{{:vsa: ergo_mai23_7.png}} 
 + 
 +**<color #F08080> Filtre mois/année : navigation rapide </color>** 
 + 
 +Dans beaucoup d’écrans qui possèdent un filtre Mois ou Mois/année, vous n’aurez plus besoin d’ouvrir le formulaire Filtre pour changer aller changer simplement le mois. 
 +Vous pourrez désormais directement naviguer d’un mois à l’autre grâce à des flèches.  
 + 
 +{{:vsa: ergo_mai23_8.png}} 
 + 
 +  
 +**<color #F08080> Paramètres d’application, d’entité et Mes préférences (paramètres de l’utilisateur) </color>** 
 + 
 +Ne vous posez plus la question de savoir si vous avez ou pas enregistré vos modifications. 
 +Le bouton devient violet et animé dès que vous devez enregistrer. 
 +A noter aussi que les champs modifiés sont mis en évidence avec un fond violet clair (parme) et le nombre de paramètres modifiés sont mentionnés sur l’onglet concerné 
 + 
 +{{:vsa: ergo_mai23_9.png}} 
 + 
 +**<color #F08080> Copier un texte dans le presse-papier (Copy To Clipboard) </color>** 
 +  
 +Dans les écrans présentant une personne, une société ou listant des personnes ou des sociétés avec leurs coordonnées (contacts prospects, contacts clients, utilisateurs, comptes clients, etc.), on va retrouver une petite icône à droite des coordonnées (e-mail, téléphone, siret, siren, etc.). 
 + 
 +En cliquant dessus, la valeur texte est copiée dans le presse-papier de votre ordinateur. 
 + 
 +{{:vsa: ergo_mai23_10.png}} 
 + 
 + 
 +//Dans les listes :// 
 + 
 +{{:vsa: ergo_mai23_11.png}} 
 + 
 +//Dans les dossiers : // 
 + 
 +{{:vsa: ergo_mai23_12.png}} 
 + 
 +  
 + 
 + 
 + 
  
 ===== Le haut de l'application : menu fixe ===== ===== Le haut de l'application : menu fixe =====
  
-Ce menu toujours visible en haut de l'application se décompose en 6 parties.+Ce menutoujours visible en haut de l'applicationse décompose en 6 parties.
  
 ==== 1ère partie : Favoris et historique de navigation ==== ==== 1ère partie : Favoris et historique de navigation ====
  
-En haut à gauche de l'application, en cliquant sur les 3 petites barres horizontales, chaque utilisateur peut :+En haut à droite de l'application, en cliquant sur la bannière, chaque utilisateur peut :
  
   *__ Se créer une liste de pages favorites.__   *__ Se créer une liste de pages favorites.__
-Pour se faire, cliquer sur le menu souhaité puis cliquer sur les 3 petites barres et enfin cliquer sur la double étoile pour l’ajouter à votre liste. (Il est possible d’ajouter jusqu'à 12 favoris)+Pour se faire, cliquez sur le menu souhaité puis cliquez sur les 3 petites barres et enfin cliquez sur la double étoile pour l’ajouter à votre liste. (Il est possible d’ajouter jusqu'à 12 favoris).
  
   *__ Consulter sa liste de pages favorites.__   *__ Consulter sa liste de pages favorites.__
-Vous retrouverez ici toutes les pages tagguées favorites+Vous retrouverez ici toutes les pages tagguées favorites.
  
   *__ Consulter son historique de navigation.__    *__ Consulter son historique de navigation.__ 
 Vous trouverez ici tous les derniers menus consultés. Cette liste vous permet de revenir très rapidement sur une page précédemment consultée. Vous trouverez ici tous les derniers menus consultés. Cette liste vous permet de revenir très rapidement sur une page précédemment consultée.
  
-{{:vsa:favoris_historique_navigation.png|}}+{{ :vsa:favoris_historique_navigation.png?200 }}
  
  
 ==== 2ème partie : Modules et menus ==== ==== 2ème partie : Modules et menus ====
  
-En haut sur la partie centrale de l’application, vous retrouvez tous les modules de l’application. Ce sont les points d’entrée principaux pour vous permettre d’accéder à différents menus.  +En hautsur la partie centrale de l’application, vous retrouverez tous les modules de l’application. Ce sont les points d’entrée principaux pour vous permettre d’accéder à différents menus.  
  
 En fonction de vos droits d’accès vous n’aurez pas la visibilité sur tous les modules et menus.  En fonction de vos droits d’accès vous n’aurez pas la visibilité sur tous les modules et menus. 
Ligne 31: Ligne 139:
 Dans les modules, il existe 4 typologies de menus :  Dans les modules, il existe 4 typologies de menus : 
  
-  *__ Menu de visualisation et saisie.__ +  *__ Menu de visualisation et de saisie.__ 
-Pour tous les modules, ce menu se trouve sur la gauche (sans pictogramme pour le délimiter)Vous pourrez ici renseigner des éléments relatifs à votre activité et suivre leur état de validation. +Pour tous les modules, ce menu se trouve sur la gauche. Cette partie sera toujours visible intégralement (selon vos droits) Vous pourrez ici renseigner des éléments relatifs à votre activité et suivre leur état de validation. 
  
   *__ Menus de gestion.__   *__ Menus de gestion.__
-Vous pourrez gérer ici la validation des éléments renseignés dans les menus de visualisation et saisie. +Vous pourrez gérer ici la validation des éléments renseignés dans les menus de visualisation et de saisie. 
  
   *__ Menu de rapports.__   *__ Menu de rapports.__
Ligne 43: Ligne 151:
 Vous retrouverez ici tous les écrans qui vont vous permettre de paramétrer les listes déroulantes de vos formulaires ainsi que les modèles de certains documents.  Vous retrouverez ici tous les écrans qui vont vous permettre de paramétrer les listes déroulantes de vos formulaires ainsi que les modèles de certains documents. 
  
-{{:vsa:modules_menus.png|}}+{{:vsa:modules_menus.png}}
  
  
 ==== 3ème partie : Zone « rechercher un élément » ==== ==== 3ème partie : Zone « rechercher un élément » ====
  
-En haut à droite de l'application, vous retrouvez une zone de recherche transverse. Elle va vous permettre de retrouver rapidement un élément (utilisateursclients, mission, projet, facture, etc.) en tapant un mot. En savoir plus : [[Zone de recherche transverse]]+En haut à droite de l'application, vous trouverez une zone de recherche transverse. Elle va vous permettre de retrouver rapidement un élément (utilisateurclient, mission, projet, facture, etc.) en tapant un mot. En savoir plus : [[Zone de recherche transverse]]
  
 ==== 4ème partie : Bouton d’ajout rapide ==== ==== 4ème partie : Bouton d’ajout rapide ====
Ligne 55: Ligne 163:
 En haut à droite de l’application, vous trouverez un bouton d’ajout rapide. En haut à droite de l’application, vous trouverez un bouton d’ajout rapide.
    
-Le pictogramme PLUS vous permet à tout moment de rajouter rapidement un élément en vous évitant de passer les menus. Cette liste déroulante est figée et non paramétrable. +Le pictogramme PLUS vous permet à tout moment d'ajouter rapidement un élément en vous évitant de passer dans les menus. Cette liste déroulante est figée et non paramétrable. 
  
  
-{{:vsa:ajout_rapide.png|}}+{{ :vsa:ajout_rapide.png?200 }}
  
 ==== 5ème partie : Bouton d’alerte ==== ==== 5ème partie : Bouton d’alerte ====
Ligne 71: Ligne 179:
 En haut à droite de l’application, vous trouverez une bulle personnalisable avec votre photo si elle a été renseignée dans votre fiche personnelle.  En haut à droite de l’application, vous trouverez une bulle personnalisable avec votre photo si elle a été renseignée dans votre fiche personnelle. 
  
-{{:vsa:icone_perso.png|}}+{{ :vsa:icone_perso.png?200 }}
  
 Vous retrouvez dans cette partie les éléments suivants :  Vous retrouvez dans cette partie les éléments suivants : 
Ligne 83: Ligne 191:
   *__ Mot de passe.__   *__ Mot de passe.__
 Vous permet de ré initialiser rapidement votre mot de passe.  Vous permet de ré initialiser rapidement votre mot de passe. 
 +
 +  *__ Authentification sécurisée.__
 +Vous permet d’ajouter une étape supplémentaire de sécurisation lors de votre connexion à l’application. Voir le zoom sur l’authentification sécurisée.
  
   *__ Documentation en ligne.__   *__ Documentation en ligne.__
-Vous permet d’accéder à toute la documention en ligne disponible pour vous accompagner dans votre utilisation quotidienne de VSA. +Vous permet d’accéder à toute la documentation en ligne disponible pour vous accompagner dans votre utilisation quotidienne de VSA. 
  
   *__ Contacter le support.__   *__ Contacter le support.__
Ligne 102: Ligne 213:
 **1. Filtre de la page**  **1. Filtre de la page** 
    
-{{:vsa:filter-metro.png|}}+{{:vsa:filter-metro.png}}
  
 Vous retrouvez cet outil en haut à gauche lors de l’ouverture toutes les pages fonctionnalité (si celle-ci peut être filtrée). Cela vous permet d'accéder aux options de filtrage de la page. Vous retrouvez cet outil en haut à gauche lors de l’ouverture toutes les pages fonctionnalité (si celle-ci peut être filtrée). Cela vous permet d'accéder aux options de filtrage de la page.
Ligne 108: Ligne 219:
  
  
-{{:vsa:filtrer.png}} Action “Appliquer les filtres ” : elle applique le filtre que vous avez modifié et rafraichit la page.+{{ :vsa:filtre_new01.png }
  
-{{:vsa:filtrer_vider.png}} Action “Vider ” : elle réinitialise le filtre à ses valeurs par défaut et rafraichit la page.+{{:vsa:filtrer01.png}} Action “Appliquer les filtres ” : elle applique le filtre que vous avez modifié et rafraîchit la page. 
 + 
 +{{:vsa:filtrer_vider.png}} Action “Réinitialiser ” : elle réinitialise le filtre à ses valeurs par défaut et rafraîchit la page.
  
 {{:vsa:filtrer_enregistrer.png}} Action “Enregistrer” : elle vous ouvre une petite fenêtre vous demandant un nom pour le filtre actuel. Saisissez un nom et validez. Ce nouveau filtre est ensuite disponible dans la liste déroulante. {{:vsa:filtrer_enregistrer.png}} Action “Enregistrer” : elle vous ouvre une petite fenêtre vous demandant un nom pour le filtre actuel. Saisissez un nom et validez. Ce nouveau filtre est ensuite disponible dans la liste déroulante.
Ligne 118: Ligne 231:
 Si un filtre enregistré est choisi dans la liste, l'action “Poubelle” vous permet de supprimer ce filtre. La suppression est directe ; elle ne demande pas de confirmation de suppression. Si un filtre enregistré est choisi dans la liste, l'action “Poubelle” vous permet de supprimer ce filtre. La suppression est directe ; elle ne demande pas de confirmation de suppression.
  
-Afin de savoir quels filtres sont appliqués sur votre requête, une liste de bulles s’affichent à droite de l’outil filtre. Ces bulles peuvent être fermées à tout moment si elles comportent des croix en haut à droite.  +Afin de savoir quels filtres sont appliqués sur votre requête, des bulles correspondant aux filtres s’affichent à droite de l’outil filtre. Ces bulles peuvent être fermées à tout moment si elles comportent des croix à leur droite.  
-{{:vsa:filtrer_liste.png|}}+ 
 +{{:vsa:filtrer_liste.png}}
  
 ASTUCE : pensez à vider les filtres appliqués pour vous éviter de vous retrouver avec un écran blanc lors de votre prochaine connexion.  ASTUCE : pensez à vider les filtres appliqués pour vous éviter de vous retrouver avec un écran blanc lors de votre prochaine connexion. 
Ligne 127: Ligne 241:
 //Généralités// //Généralités//
  
-VSA présente dans la plupart de ses écrans des tableaux d'éléments.+VSA présentedans la plupart de ses écransdes tableaux d'éléments.
  
 Chaque tableau se compose : Chaque tableau se compose :
  
-  *__ D'un titre__ qui vous rappelle le module et le menu dans lequel vous vous trouverez+  *__ D'un titre__ qui vous rappelle le module et le menu dans lequel vous vous trouvez
  
   * __D’un ou plusieurs boutons d’ajout ou de téléchargement__ . Ces boutons vont généralement ouvrir un formulaire ou vous permettre d’afficher des fichiers au format PDF.    * __D’un ou plusieurs boutons d’ajout ou de téléchargement__ . Ces boutons vont généralement ouvrir un formulaire ou vous permettre d’afficher des fichiers au format PDF. 
Ligne 146: Ligne 260:
 {{:vsa:action_masse.png|}} {{:vsa:action_masse.png|}}
  
-  * __D'une ligne d'entête de colonnes de couleur grise__. La ligne d'entête est toujours visible en haut de page même si vous descendez dans l'écran (scroll) +  * __D'une ligne d'entête de colonnes de couleur grise__. La ligne d'entête est toujours visible en haut de page même si vous descendez dans l'écran (scroll down
-Dans les intitulés des colonnes, il vous est possible d’effectuer un tri en cliquant sur le pictogramme flèches hautes/basses +Dans les intitulés des colonnes, il vous est possible d’effectuer un tri en cliquant sur les intitulés des colonnes. Si le clic n'est pas possible, c'est que la colonne n'est pas triable.
  
 {{:vsa:col_title.png|}} {{:vsa:col_title.png|}}
  
-  * __D'un bouton d’action qui permet de sélectionner les colonnes à afficher à l’écran et/ou à intégrer à l'export excel__+  * __D'un bouton d’action qui permet de sélectionner les colonnes à afficher à l’écran et/ou à intégrer dans l'export Excel__
  
 {{:vsa:grids_cols_selection.png|}} {{:vsa:grids_cols_selection.png|}}
  
-  * __D'un bouton d’action qui permet l'exportation vers Excel des données du tableau__ +  * __D'un bouton d’action qui permet l'exportation vers Excel des données du tableau__ 
 {{:vsa:bout_export_excel.png|}} {{:vsa:bout_export_excel.png|}}
  
-  * Liste à puce__D'un bouton d’action qui permet l'exportation en PDF des données du tableau__+  *  __D'un bouton d’action qui permet l'exportation vers Excel des données du tableau avec rupture__ 
 + 
 +{{:vsa: export_excel_rupture.png|}} 
 + 
 +  * __D'un bouton d’action qui permet l'exportation en PDF des données du tableau__
  
 {{:vsa:bout_export_PDF.png|}} {{:vsa:bout_export_PDF.png|}}
Ligne 167: Ligne 283:
  
 La barre de navigation vous permet :   La barre de navigation vous permet :  
-D’avoir l’information le nombre de lignes affichées dans le tableau+D’avoir l’information sur le nombre de lignes affichées dans le tableau
 De vous rendre sur la page que vous souhaitez De vous rendre sur la page que vous souhaitez
 De choisir le nombre de lignes affichées par page  De choisir le nombre de lignes affichées par page 
Ligne 173: Ligne 289:
 {{:vsa:barre_nav_grid.png|}} {{:vsa:barre_nav_grid.png|}}
  
-  * __D'une zone d’actions diverses__. Par défaut l’application affiche de 1 à 4 typologies d’actions en fonction du nombre de colonne du tableau. Pour avoir accès à toutes les actions proposées il suffit de cliquer sur les trois points verticaux. +  * __D'une zone d’actions diverses__. Par défaut l’application affiche de 1 à 4 typologies d’actions en fonction du nombre de colonne du tableau. Pour avoir accès à toutes les actions proposéesil suffit de cliquer sur les trois points verticaux. 
  
 {{:vsa:action_ligne.png|}} {{:vsa:action_ligne.png|}}
Ligne 181: Ligne 297:
 //Spécificités// //Spécificités//
  
-A certains endroits, tableaux/pages dans VSA vous retrouverez des fonctionnalités spécifiques :+A certains endroits, tableaux ou pages dans VSAvous retrouverez des fonctionnalités spécifiques :
  
   * __Bouton d’information sur les légendes__.   * __Bouton d’information sur les légendes__.
Ligne 190: Ligne 306:
  
   *__ Bouton d’écrans transverses.__    *__ Bouton d’écrans transverses.__ 
-Il vous permet en un click de changer la visualisation d’un tableau. Pour switcher d’une vue à l’autre il vous suffit de cliquer sur le bouton vue alternative : tableau croisé ou vue classique. +Il vous permet en un click de changer la visualisation d’un tableau. Pour passer d’une vue à l’autreil vous suffit de cliquer sur le bouton vue alternative : tableau croisé ou vue classique. 
  
 {{:vsa:ecran_transverse_classique.png|}} {{:vsa:ecran_transverse_classique.png|}}
Ligne 209: Ligne 325:
   * __Les champs__   * __Les champs__
  
-Tous les champs précédés d’une barre bleue sont à remplir OBLIGATOIREMENT. S’ils ne sont pas remplis vous ne pourrez pas enregistrer le formulaire. +Tous les champs précédés d’un liseré bleu sont à remplir OBLIGATOIREMENT. S’ils ne sont pas remplisvous ne pourrez pas enregistrer le formulaire. 
 Les autres champs sont facultatifs et n’empêchent pas l’enregistrement du formulaire s’ils sont vides.  Les autres champs sont facultatifs et n’empêchent pas l’enregistrement du formulaire s’ils sont vides. 
  
Ligne 219: Ligne 335:
   *__ Les listes en cascade__   *__ Les listes en cascade__
  
-Des listes en cascade sont également possibles (entourage bleu ci-contre). La seconde liste, décalée par une flèche grise, verra son contenu conditionné par le choix fait dans la liste précédente (liste mère).+Des listes en cascade sont également possibles. La seconde liste, décalée par une flèche grise, verra son contenu conditionné par le choix fait dans la liste précédente (liste mère).
  
 {{:vsa:formulaire.png}} {{:vsa:formulaire.png}}
Ligne 231: Ligne 347:
 {{:vsa:grid_informations.png|}} {{:vsa:grid_informations.png|}}
  
-Parfois ces informations sont enrichies pour contenir bien plus. Ci-dessus, le survol du numéro d'une facture en préparation donne le contenu de la facture en mode texte.+Parfoisces informations sont enrichies pour contenir bien plus. Ci-dessus, le survol du numéro d'une facture en préparation donne le contenu de la facture en mode texte.
  
  
Ligne 237: Ligne 353:
 **5. Les liens de redirection** **5. Les liens de redirection**
  
-Dans tous les écrans VSA vous aurez la possibilité, dès qu’un mot ou une phrase est souligné, de pouvoir cliquer dessus afin d’être redirigé soit sur la page concernée ou soit d’ouvrir un fichier PDF/WORD. +Dans tous les écrans VSA, dès qu’un mot ou une phrase est souligné, vous aurez la possibilité de cliquer dessus soit afin d’être redirigé sur la page concernéesoit pour ouvrir un fichier PDF/WORD. 
  
 {{:vsa:lien_redirection.png|}} {{:vsa:lien_redirection.png|}}
Ligne 254: Ligne 370:
 {{:vsa:blocs.png|}} {{:vsa:blocs.png|}}
  
 +==== Affichage ====
  
- +Afin d'améliorer votre utilisation de l'application au quotidien, un affichage dynamique du contenu des onglets a été mise en place dans certains écrans (Tableau de bord, Dossier client, Dossier d'un salarié...)
  • vsa/ergonomie.1537176523.txt.gz
  • Dernière modification : 17/09/2018 11:28
  • de Caroline BABRON