Ergonomie [Documentation des solutions applicatives éditées par VERYSWING]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Ergonomie ======

Cette page vous permet d'apprécier les éléments ergonomiques de VSE

===== 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 =====

Ce menu, toujours visible en haut de l'application, se décompose en 6 parties.

==== 1ère partie : Favoris et historique de navigation ====

En haut à droite de l'application, en cliquant sur la bannière, chaque utilisateur peut :

  *__ Se créer une liste de pages favorites.__
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.__
Vous retrouverez ici toutes les pages tagguées favorites.

  *__ 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.

{{ :vse:favoris_historique_navigation.png?200 }}


==== 2ème partie : Modules et menus ====

En haut, sur 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. 

Dans les modules, il existe 4 typologies de menus : 

  *__ Menu de visualisation et de saisie.__
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.__
Vous pourrez gérer ici la validation des éléments renseignés dans les menus de visualisation et de saisie. 

  *__ Menu de rapports.__
Vous trouverez ici un certain nombre de rapports qui sont générés et mis à jour automatiquement avec les données renseignées dans votre environnement. 

  *__ Menu paramétrage.__
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. 

{{:vse:modules_menus.png}}


==== 3ème partie : Zone « rechercher un élément » ====

En haut à droite de l'application, vous trouverez une zone de recherche transverse (symbole en forme de loupe). Elle va vous permettre de retrouver rapidement un élément (utilisateur, client, mission, projet, facture, etc.) en tapant un mot. En savoir plus : [[Zone de recherche transverse]]

==== 4ème partie : Bouton d’ajout rapide ====


En haut à droite de l’application, vous trouverez un bouton d’ajout rapide.
 
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. 


{{ :vse:vse_ajout_rapide.png?200 }}

==== 5ème partie : Bouton d’alerte ====

En haut à droite de l’application, vous trouverez un bouton d’alerte.  
Le pictogramme CLOCHE vous permet d’avoir une vision rapide sur toutes les alertes que vous avez pu recevoir sur l’application. 


==== 6ème partie : Bouton icône personnel  ====


En haut à droite de l’application, vous trouverez une bulle personnalisable avec votre photo si elle a été renseignée dans votre fiche personnelle. 

{{ :vse:icone_perso.png?200 }}

Vous retrouvez dans cette partie les éléments suivants : 

  *__ Mes informations.__
Vous permet de remplir toutes vos informations personnelles en fonction de vos droits d’accès. Menu que vous retrouverez aussi dans le module Ressources Humaines. 

  *__ Mes préférences.__
Vous permet de choisir tous les paramètres esthétiques et de mise en page de votre environnement personnel. 

  *__ 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.__
Vous permet d’accéder à toute la documentation en ligne disponible pour vous accompagner dans votre utilisation quotidienne de VSA. 

  *__ Contacter le support.__
Vous permet de créer des tickets au support en cas de blocage, anomalie ou questionnement sur un sujet précis.   

  *__ A propos de l’application.__
Vous permet d’avoir de la visibilité sur la version de l’application et ses spécifications techniques. 

  *__ Déconnexion.__
Vous permet de déconnecter votre compte de l’application 

mu
===== Fonctionnalités disponibles dans une page =====

Pour la majorité des pages, les fonctionnalités sont similaires. 

**1. Filtre de la page** 
 
{{: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 pouvez appliquer des filtres, les enregistrer ou encore les vider. Ces boutons sont disponibles en haut à l’ouverture de l’outil filtre (Le comportement du filtre est paramétrable dans les paramètres de l'application : statut d'ouverture/fermeture par défaut.)


{{ :vsa:filtre_new01.png }

{{: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_choix_filtrer.png}} Le choix d'un filtre enregistré dans la liste déroulante appliquera le filtre à la page qui sera rafraichie.

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, 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. 

{{:vse: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. 

**2. Les tableaux ou listes**

//Généralités//

VSA présente, dans la plupart de ses écrans, des tableaux d'éléments.

Chaque tableau se compose :

  *__ 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. 
 
{{:vse:action_ajout.png|}}

  * __De boutons d’actions de masse__. Pour voir apparaître ces boutons vous devez cocher à minima une des cases qui sont sur la gauche du tableau. 

Cette fonctionnalité vous permet d’effectuer une action groupée pour tout ou partie des lignes de votre tableau. 
Pour sélectionner/désélectionner toutes les lignes du tableau il suffit de cliquer sur la case la plus haute.
 
Attention : si votre tableau comprend plusieurs pages, la sélection ne se fera que sur la page en cours. 

{{:vse: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 down)
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|}}

  * __D'un bouton d’action qui permet de sélectionner les colonnes à afficher à l’écran et/ou à intégrer dans l'export Excel__

{{:vse:grids_cols_selection.png|}}

  * __D'un bouton d’action qui permet l'exportation vers Excel des données du tableau__ 
{{:vsa:bout_export_excel.png|}}

  *  __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|}}

  *__ D'une barre de navigation__ qui apparaît en haut à droite, et en bas à droite du tableau 

La barre de navigation vous permet :  
D’avoir l’information sur le nombre de lignes affichées dans le tableau
De vous rendre sur la page que vous souhaitez
De choisir le nombre de lignes affichées par page 

{{:vsa:barre_nav_grid.png|}}

  * __D'une zone d’actions à la ligne__. 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. 

{{:vse:action_ligne.png|}}



//Spécificités//

A certains endroits, tableaux ou pages dans VSA, vous retrouverez des fonctionnalités spécifiques :

  * __Bouton d’information sur les légendes__.
Il vous permet d’avoir une vision rapide sur tous les pictogrammes présents dans le tableau.  

{{:vsa:legende_tableau.png|}}


  *__ Bouton d’écrans transverses.__ 
Il vous permet en un click de changer la visualisation d’un tableau. Pour passer d’une vue à l’autre, il vous suffit de cliquer sur le bouton vue alternative : tableau croisé ou vue classique. 

{{:vsa:ecran_transverse_classique.png|}}

{{:vsa:ecran_transverse_classique_2.png|}}


  *__ Bouton liste d’action.__ 
Sur certaines pages vous retrouverez en haut 3 points verticaux qui vous permettront d’effectuer différentes actions. 

{{:vse:bout_list_action.png|}}

**3. Les formulaires**


VSA propose de nombreux formulaires pour gérer les données.

  * __Les champs__

Tous les champs précédés d’un liseré bleu sont à remplir OBLIGATOIREMENT. S’ils ne sont pas remplis, vous 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 listes déroulantes__

Les listes déroulantes dans les formulaires sont pour la plupart paramétrables dans les écrans de paramétrage. 
Si rien ne s’affiche dans ces listes c’est qu’aucun élément n’a été renseigné dans les écrans de paramétrages. 

  *__ Les listes en cascade__

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).

{{:vse:formulaire.png}}



**4. Les informations disponibles au survol de la souris**

Sur chaque action, VSA propose un texte au survol de la souris. Cela permet à l'utilisateur de savoir quel est l'objet de l'action ou du lien.

{{:vse: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.



**5. Les liens de redirection**

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ée, soit pour ouvrir un fichier PDF/WORD. 

{{:vse:lien_redirection.png|}}



**6. Les blocs**

Certains hauts de pages dans VSA affichent des blocs qui vous permettront : 

De réaliser certaines actions (enregistrer/soumettre)
De charger ou d’importer des fichiers
D’avoir de la visibilité sur des graphiques/tableaux de synthèse
D’avoir de la visibilité sur des états de validation 

{{:vse: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é...)