@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Utilisez_des_titres/Les_hi/303/251rarchie_des_titres.md

@@ -0,0 +1,10 @@
+Point important, il faut absolument garder la même hiérarchie tout au long du document. Si une partie comporte un titre principal, un titre secondaire et un titre tertiaire, TOUS les facteurs qui composent vos titres (taille, graisse, fonte, couleur, etc.) doivent êtres reconduits dans vos autres parties.<br/>Par exemple, vous débutez avec un titre de niveau H1 (c’est votre titre principal), vous suivez avec un titre de niveau H2 (c’est votre titre secondaire) et vous terminez avec un titre de niveau H3 (c’est votre titre tertiaire). Vous gardez la même structure tout au long de votre document. De même pour les différentes graisses, fontes, couleurs, etc. Et ainsi de suite.
+
+
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Titre principal H1<br/>Titre secondaire H1<br/>Titre tertiaire H1<br/>Titre quaternaire H1 | Titre principal H1<br/>Titre secondaire H2<br/>Titre tertiaire H3<br/>Titre quaternaire H4 |
+| **Titre principal**<br/>**Titre secondaire**<br/>Titre tertiaire<br/>Titre quaternaire | Titre principal<br/>Titre secondaire<br/>Titre tertiaire<br/>Titre quaternaire |
+
+**NB :** Vous pouvez en revanche choisir d’utiliser deux fontes différentes dans le cas où vous souhaitez différencier les titres du texte de labeur.

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Utilisez_des_titres/Les_titres_principaux.md

@@ -0,0 +1 @@
+Les grands titres rendent claires les différentes sections les plus pertinentes en rapport aux tâches en cours de l’utilisateur. C’est aussi un bon moyen de leur fournir une recherche satisfaisante via le sentiment de progrès quand ils passent d’une tâche à l’autre.

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Utilisez_des_titres/Les_titres_secondaires.md

@@ -0,0 +1 @@
+Les petits titres sont généralement moins formels. Vous pouvez les faire un peu plus longs et un peu plus précis.

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Voix_active.md

@@ -0,0 +1,10 @@
+La voix active sonne généralement moins formelle que la voix passive, utilisez-la dès que vous en avez l’occasion. Un exemple bien connu :
+
+- Voix active : « Le chat mange la souris ».
+- Voix passive : « La souris est mangée par le chat ».<br/>
+  NB : Dans le cas où la voix passive parait plus naturelle préférez-la.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Après que les préférences ont été modifiées, le bouton « Sauvegarder » doit être utilisé pour confirmer les changements. | Après avoir modifié les préférences, cliquez sur « Sauvegarder ». |
+|              Nous avons suspendu votre compte.               |                 Votre compte a été suspendu.                 |

package/src/Guideline/Accessibilit/303/251/NAVIGATION_CLAVIER.md

@@ -0,0 +1,11 @@
+![NAVIGATION CLAVIER](public/guideline/img/NAVIGATION.jpg)<br> <br/>
+
+### Raccourcis clavier de La Console HiPay (*Intégration dans une version ultérieure*).
+
+![RACCOURCIS CLAVIER - MODULES](public/guideline/img/RACCOURCIS.jpg)
+
+![RACCOURCIS CLAVIER – FONCTIONNALITÉS PERMANENTES](public/guideline/img/RACCOURCISF.jpg)
+
+![RACCOURCIS CLAVIER – FONCTIONNALITÉS COMMUNES AUX MODULES  TRANSACTION, RAPPORT FINANCIER, BOUTIQUE, ET UTILISATEUR](public/guideline/img/RACCOURCISFS.jpg)
+
+![RACCOURCIS CLAVIER – FONCTIONNALITÉS SPÉCIFIQUES  TABLEAU DE BORD](public/guideline/img/RACCOURCISW.jpg)

package/src/Guideline/Accessibilit/303/251/NIVEAU_DE_LECTURE/Blagues_r/303/251f/303/251rences.md

@@ -0,0 +1,8 @@
+Il faut être prudent avec les blagues et les références culturelles. Ce qui parait être une évidence pour vous ne l’est pas forcément pour votre voisin. Si la référence n’est pas comprise, le message peut être mal assimilé voire mal interprété. En premier lieu, posez-vous les questions suivantes :
+
+- Ma référence est-elle universelle ou seulement locale ?
+- Existe-t-il un moyen plus général pour transmettre mon message ?
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Ne pas utiliser HiPay Sentinel c'est partir en fight pvp, stuffé en leather avec une épée en bois xDD | Utiliser HiPay Sentinel c'est s'assurer d'avoir toutes les armes en main pour combattre la fraude. |

package/src/Guideline/Accessibilit/303/251/NIVEAU_DE_LECTURE/Phrases_courtes.md

@@ -0,0 +1,6 @@
+Même objectif, moins l’utilisateur a de contenu à lire et à absorber moins il est susceptible de se perdre et d’abandonner.<br>On entend par « phrase courte » **15-20 mots maximum**.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Le tableau de bord de la Console HiPay est la page d'accueil de l'outil et est composé d'une multitude de widgets personnalisables qui vous permettent de suivre au quotidien toute votre activité. | Le tableau de bord est la page d’accueil de la Console HiPay. Il se compose de widgets qui vous permettent de suivre toute votre activité. |
+|                          1x32 mots.                          |                      1x12 et 1x13 mots.                      |

package/src/Guideline/Accessibilit/303/251/NIVEAU_DE_LECTURE/Utilisez_mots_simples.md

@@ -0,0 +1,12 @@
+S’il existe un mot plus simple pour expliquer ce que vous voulez dire, utilisez le !<br>Utilisez un langage compréhensible et intuitif pour l'utilisateur (évitez le jargon technique ou interne d'HiPay).
+
+|   MAUVAIS   |     BON     |
+| :---------: | :---------: |
+| Intercepter |   Bloquer   |
+|  Analyser   |  Vérifier   |
+|  Language   |   Langue    |
+| Paramètres  | Préférences |
+| Classement  |    Rang     |
+| Histogramme |  Graphique  |
+
+**NB :** Lorsqu'il s'agit d'un article d'aide en ligne ou d'information, vous pouvez évidemment utiliser des mots plus compliqués dans la mesure où vous les expliciterez.<br>Exemple : « L'évolution des transactions est représentée par un graphique, plus précisément par un histogramme, qui mesure son activité avec pour abscisse l'unité de temps en heure et pour ordonnée le nombre de transactions. ».

package/src/Guideline/Accessibilit/303/251/NIVEAU_DE_LECTURE//303/211xag/303/251ration.md

@@ -0,0 +1,5 @@
+Évitez les hyperboles. Quand c’est possible, soutenez vos propos avec des chiffres et des faits.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Chez HiPay, nous savons que plus d'un quart de la population active est considérée comme handicapée. C'est pourquoi nous avons pour objectif numéro 1 de rendre notre site 100% accessible à tous ! | Avec plus de 24% de la population active, âgée de 15 à 64 ans, étant considérée comme handicapée, HiPay s'engage à rendre son site toujours plus accessible. |

package/src/Guideline/Accessibilit/303/251/TEXTE_ALTERNATIF/Prononciation_traduction.md

@@ -0,0 +1,5 @@
+Voici un document contenant tous les attributs de langage en code HTML : <a href="https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="blank">Langues</a>
+
+|                      MAUVAIS                       |                             BON                              |
+| :------------------------------------------------: | :----------------------------------------------------------: |
+| Ne pas indiquer le langage de la page.<br>`<html>` | Indiquer le langage de la page. Cet exemple est valable pour le français.<br>`<html lang=« fr »>` |

package/src/Guideline/Accessibilit/303/251/TEXTE_ALTERNATIF/TEXTE_ALTERNATIF.md

@@ -0,0 +1,5 @@
+Le texte alternatif aide les utilisateurs avec une **déficience visuelle** à utiliser La Console.<br>Dans la majeure partie des cas, le texte alternatif est utilisé en remplacement d’une image. Le lecteur d’écran annonce le texte alternatif pour expliciter une image. Dans d’autres cas, le texte alternatif est affiché si l’image ne s’est pas chargée pour une quelconque raison (connexion internet instable).<br>Les trois cases à cocher pour faire un bon texte alternatif :
+
+- Aider les utilisateurs à naviguer sur l’outil
+- Fournir une expérience inclusive
+- Être précis et concis au maximum

package/src/Guideline/Accessibilit/303/251/TEXTE_ALTERNATIF/Texte_alternatif_image.md

@@ -0,0 +1,5 @@
+Tous les attributs `<img>` requièrent un texte alternatif, même si ce dernier est vide. Le lecteur d’écran doit savoir quand et quelle image il doit ignorer.<br>Le texte alternatif vide s’écrit en HTML de la manière suivante : `<img alt=«  » />`
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Utiliser du texte alternatif quand l’image n’ajoute pas de clarté à la tâche en cours. Dans ce cas, laissez l’attribut du texte alternatif vide : `alt=« »` | Utiliser du texte alternatif quand l’image véhicule des informations utiles, telle que la possibilité de jouer une vidéo de démonstration. Dans ce cas, vous utiliseriez :<br>`<img alt=« Regardez une vidéo tutoriel sur le fonctionnement de Console. »/>`. |

package/src/Guideline/Accessibilit/303/251/TEXTE_ALTERNATIF//303/211crire_texte_alternatif.md

@@ -0,0 +1,13 @@
+Le **texte alternatif** doit toujours être **écrit en entier**. Toujours dans un **langage simple** (se référer à la partie Niveau de lecture).<br>Un bon moyen de savoir si votre texte fonctionne, c’est de le réciter par vous même, à voix haute ! Si son contenu vous paraît bizarre ou sonne faux, considérez qu’il faut rééditer le texte.<br>Astuces :
+
+- Si vous enlevez un mot, la phrase est-elle toujours compréhensible ? Si oui, enlevez-le.
+- Écrivez à la voix active. N’utilisez la voix passive que si vous souhaitez cacher qui est entrain de faire l’action.
+
+|                  MAUVAIS                   |                            BON                            |
+| :----------------------------------------: | :-------------------------------------------------------: |
+| `<alt=« CA des transactions capturées »>`. | `<alt=« Chiffre d'affaire des transactions capturées »>`. |
+
+Voici une liste de mots alternatifs :
+
+- En français :
+- En anglais : <a href="https://www.plainenglish.co.uk/the-a-z-of-alternative-words.html" target="blank">A-Z Alternative words</a>

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Champs/Attribut.md

@@ -0,0 +1,7 @@
+Utilisez la **sélection native** (native select) afin de **faciliter la complétion du formulaire** sur support tactile (iOS, Android). Les champs utilisent les inputs types (Text, Email, URL, Date, Month, Tel, Number …) dès que possible, ils sont utiles pour 3 raisons :
+
+- Sur mobile, ils **font correspondre le clavier numérique avec le format souhaité** (clavier numérique pour un prix, clavier email pour un email, clavier téléphone pour un téléphone, …).
+- Ils permettent au navigateur de les **remplir automatiquement avec des données précédemment utilisées**.
+- Ils permettent aussi de **prévenir les erreurs** (notamment sur le format de l’email).
+
+![Attribut](public/guideline/img/Keyboard.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Champs/Label.md

@@ -0,0 +1,7 @@
+- **Le** **titre** doit être **aligné** **au dessus à gauche** du champ.
+- **L'icône du champ** (s'il y en a une) doit être **placée à l'intérieur de ce dernier** et **ferrée à gauche**.
+- **La bulle d'aide** (s'il y en a une) doit être **située au dessus à droite** du champ.
+- **Le message d'aide** (s'il y en a un) doit être **affiché en dessous à droite** du champ.
+- **L'icône de suppression** du champ (s'il y en a une) doit être placée à droite de ce dernier.
+
+![Labels](public/guideline/img/Label.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Champs/Masque_r/303/250gles.md

@@ -0,0 +1,3 @@
+Utilisez des [**masques** ](https://doc.pcsoft.fr/?1014014)**de saisie** et des **règles** pour montrer le format spécifique attendu de donnée. Si le format n'est pas bon un message d'erreur s'affiche. L'exemple suivant illustre un format de date.
+
+![Le masque de saisie et les règles](public/guideline/img/Masque.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Champs/Optionnel.md

@@ -0,0 +1,3 @@
+De base, dans un formulaire de création on affichera que les champs obligatoires, sans pour autant mentionner « obligatoire » au dessus.<br>Dans un formulaire de recherche les champs optionnels peuvent êtres ajoutés à la guise de l'utilisateur.
+
+![Le champ optionnel](public/guideline/img/Champ_optionnel.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Champs/Pr/303/251_remplissage.md

@@ -0,0 +1,3 @@
+**Le pré-remplissage** permet de **faciliter grandement la saisie**. Notamment lorsqu'il s'agit d'adresse email ou de lieu.
+
+![Le pré-remplissage](public/guideline/img/Preremplissage.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Champs/Qualit/303/251_quantit/303/251.md

@@ -0,0 +1,6 @@
+Un peu de mathématiques… dans un champ, soit « n » le nombre d'options tel que :
+
+1. Si n ≤ 5, on affiche toute les options directement en dessous du titre.
+2. Si n ≥ 6, on affiche une recherche contextuelle ainsi qu'une liste contenant toutes les options.
+
+![Quantité ou qualité ?](public/guideline/img/Quantité_qualité.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Champs/Taille.md

@@ -0,0 +1,3 @@
+Faites correspondre **la taille des champs** en fonction de la **quantité de donnée estimée** au préalable.
+
+![La taille](public/guideline/img/Quantité_estimée.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Formulaire/Colonne.md

@@ -0,0 +1,7 @@
+L'utilisation d'une seule colonne permet d'éviter de multiplier les erreurs de mise en page. En parallèle, elle fluidifie la lecture de l'information (de haut en bas). Les cases à cocher et les boutons radios doivent aussi être disposés en une seule colonne.<br>Seules exceptions, peuvent être côte-à-côte les champs :
+
+- Nom / Prénom
+- Ville / Code postal
+- Tous les champs accompagnés d’opérateurs booléens (ET, OU, SAUF)
+
+![Utilisez une seule colonne](public/guideline/img/Une_colonne.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Formulaire/Ordre_boutons.md

@@ -0,0 +1,3 @@
+Placez **l'action primaire à droite**. L'action secondaire, à sa gauche.
+
+![L'ordre des boutons](public/guideline/img/Boutons_sequentiels.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Formulaire/Regroupez_informations.md

@@ -0,0 +1,3 @@
+Utilisez des titres pour grouper les informations semblables.
+
+![Regroupez les informations](public/guideline/img/Regrouper_informations.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Charge_cognitive/Utilisateur/Montrez_progression.md

@@ -0,0 +1,3 @@
+Quand le formulaire est long, il est recommandé de montrer la progression de l'utilisateur afin de lui donner un sentiment d'accomplissement. Cela peut être retranscrit par des numéros d'étapes, une barre horizontale, un fil d'Ariane, etc.
+
+![Montrez la progression](public/guideline/img/Etapes.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Champs/Bulle_aide.md

@@ -0,0 +1,3 @@
+Lorsque que vous le pouvez ou que c'est nécessaire, affichez l'icône de la bulle d'aide afin que l'utilisateur puisse s'y référer en cas de problème.
+
+![Bulle d'aide](public/guideline/img/Bulle_aide.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Champs/Contenu_listes.md

@@ -0,0 +1,3 @@
+On laisse les champs vides la majeure partie du temps. Si la réponse est la même 9 fois sur 10, vous pouvez utiliser une valeure intelligente par défaut.
+
+![Contenu des listes](public/guideline/img/Contenu_listes.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Champs/Validation.md

@@ -0,0 +1,7 @@
+**La validation des champs se fait champ par champ**. On ne validera jamais tous les champs d'un coup, comme dans le cas où l'utilisateur vient de compléter le formulaire. De même lorsque ce dernier remplit le premier champ, les autres ne doivent pas se mettre en erreur alors qu'ils sont vides.
+
+![Validation champ par champ](public/guideline/img/Validation.jpg)
+
+
+
+Les champs affichant une erreur s'entourent d'un **liseré rouge** et voient **leur titre prendre cette même couleur**. L'**icône** interactive « **alert** » apparaît en **haut à droite du champ** (16px de margin-right) et permet à l'utilisateur d'ouvrir ou de refermer le message d'erreur. Ce dernier ne fait idéalement pas plus de 20 mots.

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Formulaire/CTA_explicites.md

@@ -0,0 +1,3 @@
+Les boutons dits « call to action » (confirmer, envoyer, supprimer, etc.) doivent indiquer clairement l'intention de l'action.
+
+![Call to action](public/guideline/img/CTA.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Formulaire/Diff/303/251renciez_boutons.md

@@ -0,0 +1,3 @@
+Différenciez les styles entre le bouton principal et le bouton secondaire. Par exemple, vous pouvez utiliser un « Contained button » pour l'action primaire puis un « Text button » pour l'action secondaire.<br>> Voir HiButton
+
+![Styles de bouton](public/guideline/img/Styles_boutons.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Formulaire/D/303/251sactivez_CTA.md

@@ -0,0 +1,3 @@
+Sur La Console HiPay, ne sont affichés dans les formulaires de création que les champs obligatoires. Ce qui signifie qu'ils doivent tous être remplis. Pour éviter le message d'erreur « champ obligatoire », vous pouvez désactiver le bouton de confirmation du formulaire, jusqu'à ce que ce dernier soit entièrement rempli.
+
+![Désactivez par défaut le bouton « call to action »](public/guideline/img/Desactivez_CTA.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Utilisateur/Auto_correction.md

@@ -0,0 +1,6 @@
+Pour éviter certains désagréments l’**auto-correction** doit être désactivée (autocorrect= « off ») dans certains champs :
+
+- email,
+- nom prénom,
+- URL,
+- etc.

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/Emp/303/252chez_erreurs/Utilisateur/Verrouillage_majuscules.md

@@ -0,0 +1,2 @@
+Parfois, on peut accidentellement verrouiller sa touche majuscule. Prévenir l'utilisateur avant qu'il ne rentre son mot de passe peut être un bon moyen d'empêcher l'erreur et la frustration.<br>
+![Verrouillage des majuscules](public/guideline/img/Maj_verrouille.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES/LES_BONNES_PRATIQUES.md

@@ -0,0 +1,10 @@
+**3 points importants** à prendre en compte lors de la conception de vos formulaires :
+
+1. **Réduisez la charge cognitive**
+2. **Empêchez les erreurs**
+3. **Éprouvez de l'empathie** (user-friendly)
+
+Pour la suite, **les parties seront marquées d'un Ⓒ ou d'un Ⓡ, ou des deux**. Ces lettres désignent respectivement **les formulaires de création** et **les formulaires de recherche**.<br>Exemple :
+
+- « **Ⓒ Ⓡ Le label** » signifie que cette partie concerne **les deux types de formulaires**.
+- « **Ⓒ Montrez la progression** » signifie que cette partie concerne **seulement les formulaires de création**.

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES//303/211prouvez_empathie/Consid/303/251rez_contexte.md

@@ -0,0 +1 @@
+**Imaginez l'utilisateur** qui va remplir le formulaire, **mettez vous à sa place**. Pour ce faire vous pouvez vous aider des **personas déjà existants** (Valentine, Agathe, Ziyad, Arianne…). [Fichiers en ligne des personas](https://drive.google.com/drive/folders/1o3cK0WkeQyoVpylQu89wKL_SM-vgZ94q)<br>Voir section La Console HiPay, guide des bonnes pratiques en UX design > LA PERSONNALITÉ DE LA CONSOLE HIPAY

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES//303/211prouvez_empathie/Donn/303/251es_sensibles.md

@@ -0,0 +1,3 @@
+Si **donnée sensible** il y a, **explication** il y a aussi ! Les données sensibles relèvent souvent de l'ordre de la vie privée, de l'idendité de genre, de la famille, du lieu de vie, des revenus, etc. **Évitez les doutes et les questions**, expliquez simplement **pourquoi vous avez besoin d'une telle information**.<br>
+
+![Soyez inclusif](public/guideline/img/Donnee_sensible.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES//303/211prouvez_empathie/Formulaire_accessible.md

@@ -0,0 +1,6 @@
+Voir section Accessibilité,
+
+- TEXTE ALTERNATIF
+- NAVIGATION CLAVIER
+
+![Rendez le formulaire accessible à tous](public/guideline/img/sigmund.jpg)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES//303/211prouvez_empathie/Langage_clair_simple.md

@@ -0,0 +1 @@
+Voir section Accessibilité > NIVEAU DE LECTURE

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES//303/211prouvez_empathie/Soyez_inclusif.md

@@ -0,0 +1,7 @@
+Demander le **genre de l'utilisateur** est quelque chose de **très sensible** de nos jours. On préférera ne pas le demander, d'autant plus que cette information n'apporte rien de plus à l'expérience utilisateur de La Console HiPay.<br>
+
+![Soyez inclusif](public/guideline/img/delia_giandeini.jpg)
+
+
+
+Dans le cas où le savoir est **nécessaire**, **prévoyez une troisième option** (au minimum). On évitera « Autre », qui peut là aussi paraitre offensant. En revanche, il est possible d'implémenter une option « Personnalisé » à la manière de Facebook.<br><br>![Genre personnalisé](public/guideline/img/Facebook_gender.png)

package/src/Guideline/Formulaires/LES_BONNES_PRATIQUES//303/211prouvez_empathie/Valorisez_temps.md

@@ -0,0 +1 @@
+Pas de superflu. Ne mettez que ce qui est nécessaire ou utile. Essayez d'impliquer au mieux l'utilisateur.

package/src/Guideline/Formulaires/LE_FORMULAIRE_DE_CR/303/211ATION.md

@@ -0,0 +1,3 @@
+**Le formulaire de création** est un formulaire **composé uniquement de champs obligatoires**. On le retrouve notamment pendant l'inscription sur le site, durant la création d'une nouvelle opportunité, etc. Il est **la plupart du temps muni d'étapes**.
+
+![Formulaire de création](public/guideline/img/Formulaire_creation.jpg)

package/src/Guideline/Formulaires/LE_FORMULAIRE_DE_RECHERCHE.md

@@ -0,0 +1,3 @@
+**Le formulaire de recherche** est un formulaire modulable **composé de champs optionnels**. On le retrouve à l'occasion d'une recherche rapide, avancée, experte. Il peut prendre une infinité de formes différentes. En revanche la structure est toujours la même. On y intègre une **notion de par défaut, de définition des champs et d'astuces** pour le remplir.
+
+![Formulaire de recherche](public/guideline/img/Formulaire_recherche.jpg)

package/src/Guideline/Grammaire_et_m/303/251canismes/GLOSSAIRE/GLOSSAIRE.md

@@ -0,0 +1 @@
+<a href="https://hipayconsole.zendesk.com/hc/fr-fr/articles/360006721940" target="blank">Voir glossaire en ligne</a>

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Langage_courant.md

@@ -0,0 +1,11 @@
+Utilisez un **langage simple** et **compréhensible** pour tous les utilisateurs de La Console HiPay. Évitez les termes et les acronymes trop techniques.
+
+|                     MAUVAIS                      |                             BON                              |
+| :----------------------------------------------: | :----------------------------------------------------------: |
+| Depuis votre tableau de bord, visionnez vos ICP. | Depuis votre **tableau de bord**, visionnez vos **indicateurs clés de performance**. |
+
+De même, **évitez les anglicismes ou le « franglais »**.
+
+|         MAUVAIS          |              BON              |
+| :----------------------: | :---------------------------: |
+| Cliquez sur la checkbox. | Cliquez sur la case à cocher. |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Listes/Num/303/251rot/303/251es.md

@@ -0,0 +1,5 @@
+Utilisez les **listes numérotées** lorsque **l'ordre des tâches est important**, telles que des instructions.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| • Depuis votre tableau de bord, cliquez<br/>sur le Widget concerné.<br/>• Supprimez-le à l’aide de l’icône <br/>poubelle.<br/>• Confirmez la demande. | 1. Depuis votre tableau de bord, cliquez<br/>sur le Widget concerné.<br/>2. Supprimez-le à l’aide de l’icône <br/>poubelle.<br/>3. Confirmez la demande. |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Listes//303/200_puces.md

@@ -0,0 +1,5 @@
+Utilisez les **listes à puces** lorsque les **items sont liés** mais que **l'ordre ou la priorité n'importe pas**.
+
+| MAUVAIS                                                      | BON                                                          |
+| :----------------------------------------------------------- | :----------------------------------------------------------- |
+| Utiliser La Console HiPay vous permet de :<br>1. Gérer vos transactions de manière simple et efficace.<br>2. Accéder à une multitude d'options.<br>3. Créer une infinité de comptes marchands. | Utiliser La Console HiPay vous permet de :<br/>• Gérer vos transactions de manière simple et efficace.<br/>• Accéder à une multitude d'options.<br/>• Créer une infinité de comptes marchands. |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Majuscules.md

@@ -0,0 +1,10 @@
+<div class="table-data">
+|                                      | RÈGLE                                                        | MAUVAIS                                                      | BON                                                          |
+| ------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| **TITRES**                           | - Majuscule sur la première lettre<br>- Majuscule sur les produits HiPay (et pays, personne, etc.)<br>- Minuscule sur tout le reste | La Console HiPay, Guide Des Bonnes Pratiques En UX Design    | La Console HiPay, guide des bonnes pratiques en UX design    |
+| **LISTES**                           | - Majuscule sur la première lettre                           | • créée <br/>• refusée<br/>• en attente du terminal<br/>• en cours | • Créée <br/>• Refusée<br/>• En attente du terminal<br/>• En cours |
+| **PRODUITS ET SERVICES**             | - Majuscule sur les produits uniques à HiPay                 | hipay intelligence                                           | HiPay Intelligence                                           |
+| **LETTRE SUIVANT UNE BARRE OBLIQUE** | - Pas de majuscule sur la première lettre suivant une barre oblique | Date/Lieu de naissance requis                                | Date/lieu de naissance requis                                |
+| **BOUTONS**                          | - Majuscules sur toutes les lettres                          | Rechercher                                                   | RECHERCHER                                                   |
+</div>
+**NB :** La capitale, dans la typographie, est l'ensemble des caractères, dits majuscules, traditionnellement rangés en haut de la casse (casier en bois). Par opposition, les lettres de petit format sont appelées bas de casse.

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Menus_d/303/251roulants/Actions.md

@@ -0,0 +1,5 @@
+Les listes dans les **menus déroulants** permettent d'**économiser de l'espace** lorsque celui-ci est limité. L'ordre des actions est la plupart du temps basé sur une logique telle que « les actions les plus populaires ».
+
+| MAUVAIS                                                      | BON                                                          |
+| :----------------------------------------------------------- | :----------------------------------------------------------- |
+| Ouvril dans un nouvel onglet<br/>__________________________________________________________________________________<br/>Exclure<br/>__________________________________________________________________________________<br/>Copier<br/>__________________________________________________________________________________<br/>Ouvrir la vue complète<br/>__________________________________________________________________________________<br/>Explorer | Explorer<br>__________________________________________________________________________________<br/>Exclure<br>__________________________________________________________________________________<br/>Copier<br>__________________________________________________________________________________<br/>Ouvrir dans un nouvel onglet<br>__________________________________________________________________________________<br/>Ouvrir la vue complète |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Menus_d/303/251roulants/Noms.md

@@ -0,0 +1,5 @@
+**Les noms** dans un menu **doivent** **êtres concis**. L'ordre des noms est la plupart du temps basé sur une logique telle que « récemments utilisés » ou « les plus populaires ».
+
+| MAUVAIS                                                      | BON                                                          |
+| :----------------------------------------------------------- | :----------------------------------------------------------- |
+| • Phase d'initialisation créée <br>• Phase d'initialisation refusée<br/>• Phase d'initialisation en attente du terminal<br/>• Phase d'initialisation en cours | Phase d'initialisation<br>• Créée <br/>• Refusée<br/>• En attente du terminal<br/>• En cours |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Mettre_gras.md

@@ -0,0 +1,15 @@
+Utilisez le **bold** là où le texte nécéssite une **emphase** (accent d'insistance). Dans une interface vous pouvez mettre en gras les termes fournis par le marchand.
+
+|                           MAUVAIS                            |                             BON                             |
+| :----------------------------------------------------------: | :---------------------------------------------------------: |
+| Nous envoyons un sms de confirmation sur **votre téléphone**. | Nous envoyons un sms de confirmation au **06.12.34.56.78**. |
+
+
+
+N'utilisez pas le bold pour accentuer les noms propres, les titres, ou les titres des cases à cocher.
+
+| MAUVAIS                                                      | BON                                                          |
+| :----------------------------------------------------------- | :----------------------------------------------------------- |
+| Pas encore sur **HiPay** ? Venez nous rejoindre !            | Pas encore sur HiPay ? Venez nous rejoindre !                |
+| **Grammaire et mécanismes**                                  | Grammaire et mécanismes                                      |
+| **Sentinel : résultat de l'analyse**<br>☑️ Autorisée<br>☑️ Refusée | Sentinel : résultat de l'analyse<br/>☑️ Autorisée<br/>☑️ Refusée |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Deux_points.md

@@ -0,0 +1,5 @@
+Évitez d'utiliser les deux points (:) dans une phrase. Si nécessaire, **ne pas mettre de majuscule sur la première lettre** suivant les deux points, sauf noms qui en prennent obligatoirement une.
+
+|                     MAUVAIS                      |                      BON                       |
+| :----------------------------------------------: | :--------------------------------------------: |
+| Protégez vos transactions avec : HiPay Sentinel. | Protégez vos transactions avec HiPay Sentinel. |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Esperluette.md

@@ -0,0 +1,5 @@
+Évitez d'utiliser l'esperluette (&). Elle **attire l'attention** sur la **partie la moins importante** de la phrase.
+
+|    MAUVAIS    |      BON       |
+| :-----------: | :------------: |
+| Date & heures | Date et heures |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Guillemets.md

@@ -0,0 +1,28 @@
+On utilise les guillemets pour :
+
+- Définir un mot (exemple : « Widget »)
+- Citer du texte
+
+Vous devez placer la virgule, le point, le point d'exclamation, le point d'intérogation, et les points de suspension **à l'intérieur des guillemets**.<br>Point important :
+
+- **En français** on utilisera toujours ces guillemets : **« »**.
+- **En anglais** on utilisera toujours ces guillemets : **" "**.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| « Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide ». Confucius. | « Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide. » Confucius. |
+|                     Explorer "Acceptée"                      |                    Explorer « Acceptée »                     |
+|                     Look up « Accepted »                     |                      Look up "Accepted"                      |
+
+**NB :** en français on met une espace entre le contenu et les guillemets « exemple de phrase ».<br>**NB2 :** l'espace en typographie est un nom féminin.
+
+Pour faire les guillemets français :<br>
+Sur mac,
+
+- (alt + è)= «
+- (alt + shift + è)= »
+
+Sous windows,
+
+- (Alt + 0171)= «
+- (Alt + 0187)= »

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Point.md

@@ -0,0 +1,9 @@
+Dans la majeure partie des cas, **n'utilisez pas les points dans une interface** sauf s'il s'agit d'une phrase complète ou d'une description.<br>Quand utiliser les points :
+
+|         MAUVAIS         |                             BON                              |
+| :---------------------: | :----------------------------------------------------------: |
+|         Titres          |   Textes de labeur, descriptions, et petits textes d'aide    |
+|         Boutons         |                   Exemples de placeholders                   |
+|     Bouts de phrase     |                      Phrases complètes                       |
+| Valeurs dans un tableau |                   Valeurs sur une timeline                   |
+|         Widgets         | Listes (quand elles contiennent au moins 2 phrases complètes) |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Point_exclamation.md

@@ -0,0 +1,5 @@
+Il faut éviter d'utiliser le point d'exclamation trop souvent. Lorsqu'il **marque la réussite d'une action exaltante**, vous pouvez l'utiliser.
+
+|                MAUVAIS                 |                      BON                       |
+| :------------------------------------: | :--------------------------------------------: |
+| Vous avez mis à jour vos préférences ! | Vous avez créé votre premier compte marchand ! |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Point_int/303/251rogation.md

@@ -0,0 +1,14 @@
+Dans la majeure partie des cas on préférera **utiliser des phrases affirmatives plutôt que des phrases intérogative**. À quelques exceptions près :<br>
+Utilisez le point d'intérogation **si vous n'avez pas** la réponse à une question :
+
+- « Mot de passe oublié ? »
+- « Pas encore sur HiPay ? »
+
+N'utilisez pas le point d'intérogation (?) si :
+
+- **Il s'agit d'une action unique** : « Changer mot de passe ».
+- **Il s'agit d'une action dite "on/off"** : « Statut de la transaction : Passé/Actuel ».
+
+|        MAUVAIS         |         BON          |
+| :--------------------: | :------------------: |
+| Changer mot de passe ? | Changer mot de passe |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Points_suspension.md

@@ -0,0 +1,8 @@
+Les point de suspension servent à illustrer une **partie de texte manquante** ou une **suite non définie de termes**. Évitez de les utiliser dans un texte de labeur, de même qu'à la suite de « etc ».
+
+| MAUVAIS | BON  |
+| :-----: | :--: |
+|  Etc…   | Etc. |
+|  . . .  |  …   |
+
+**NB :** Utilisez la combinaison de touche « **alt** + **;** » **sur Mac** ou « **Ctrl** + **Maj** +**Alt** + **.** » **sous Windows** et non pas 3 fois un point.

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Ponctuation/Virgule.md

@@ -0,0 +1,21 @@
+Utilisez la virgule (,) lorsque vous introduisez une **liste d'au moins 3 items**.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Utiliser La Console HiPay, c'est gérer ses transactions de manière automatique, et efficace. | Utiliser La Console HiPay, c'est gérer ses transactions de manière automatique, efficace, et intuitive. |
+
+
+
+N'utilisez pas la virgule (,) lorsqu'il s'agit d'une liste à puce ou numérotée.
+
+| MAUVAIS                                                      | BON                                                          |
+| :----------------------------------------------------------- | :----------------------------------------------------------- |
+| Utiliser La Console HiPay c'est gérer ses transactions de manière :<br> • Automatique,<br>• Efficace,<br>• Intuitive. | Utiliser La Console HiPay c'est gérer ses transactions de manière :<br/> • Automatique<br/>• Efficace<br/>• Intuitive |
+
+
+
+Désigne aussi le fait d'effectuer un triple par hasard aux fléchettes.
+
+| MAUVAIS                                   | BON                                    |
+| ----------------------------------------- | -------------------------------------- |
+| « Je visais le triple 19 ! » dit Clément. | « Oh la belle virgule ! » dit Clément. |

package/src/Guideline/Grammaire_et_m/303/251canismes/LES_BASES/Voix_active.md

@@ -0,0 +1 @@
+Voir section Accessibilité > AIDE ET DOCUMENTATION > Utilisez la voix active.