@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/src/Guideline/Guideline.md

@@ -1,848 +0,0 @@
-# La Console HiPay, guide des bonnes pratiques en UX design
-
-## INTRODUCTION
-
-
-## L'ATOMIC DESIGN
-
-
-
-
-## L'AFFORDANCE
-
-
-
-## LA PERSONNALITÉ DE LA CONSOLE HIPAY
-
-
-
-
-## PERSONAS
-
-
-
-# Accessibilité
-
-
-
-
-
-## AIDE ET DOCUMENTATION
-
-
-
-### Identifier les différents utilisateurs
-
-### Utilisez des titres pour organiser vos articles d'aide
-
-#### Les titres principaux
-
-
-#### Les titres secondaires
-
-
-
-#### La hiérarchie des titres
-
-
-
-
-#### Astuces
-
-
-
-
-### Expliquez les différentes tâches
-
-
-
-#### Introduisez le sujet
-
-
-
-#### Numérotez les étapes
-
-
-
-
-
-#### Les tâches doivent êtres inclusives
-
-
-
-
-
-### Captures d'écrans
-
-
-
-
-
-### Structurez les éléments qui font l’objet de conditions
-
-
-
-
-
-### Clarifiez les résultantes des actions
-
-#### Regroupez les résultats et les actions au sein de la même étape
-
-
-
-
-#### Mentionnez à nouveau les étapes précédentes pour renforcer l’ordre des tâches
-
-
-
-
-#### Utilisez les verbes « confirmer » et « assurer » pour les tâches importantes
-
-
-
-
-
-
-
-### Utilisez la voix active
-
-
-
-
-
-
-
-### Améliorez la lisibilité
-
-#### Évitez l’écriture saccadée
-
-
-
-
-
-#### Enrichissez la structure de vos phrases
-
-
-
-
-
-## NIVEAU DE LECTURE
-
-
-
-#### Utilisez des mots simples
-
-
-
-
-
-#### Utilisez des phrases courtes et simples
-
-
-
-
-
-#### Blagues et références culturelles
-
-
-
-
-
-#### L’exagération
-
-
-
-
-
-## TEXTE ALTERNATIF
-
-
-
-#### Texte alternatif derrière une image
-
-
-
-
-
-#### Écrire du texte alternatif
-
-
-#### Prononciation et traduction
-
-
-
-
-
-## NAVIGATION CLAVIER
-
-
-
-
-
-# Visuel
-
-## COULEUR ET CONTRASTE
-
-
-
-### Les couleurs communes
-
-
-
-### Les couleurs utilitaires
-
-
-
-### Lignes dans les tableaux de résultats
-
-
-
-### La palette de couleur des comptes marchands
-
-
-
-
-
-### Le bleu HiPay
-
-
-
-
-### Le contraste
-
-
-
-
-
-## UTILISATION DES COULEURS DANS LA CONSOLE HIPAY
-
-
-
-## POLICE D'ÉCRITURE (FONTE)
-
-
-
-### Classe de la taille des textes
-
-
-
-### Classe des graisses de Roboto
-
-
-
-## ICÔNES
-
-
-
-
-
-## MISE EN PAGE
-
-<!--Work in progress-->
-*WORK IN PROGRESS*
-
-
-
-
-### Les tableaux
-
-
-
-### Comportements des tableaux
-
-
-
-<!--Work in progress-->
-
-
-
-## SIMPLICITÉ ET EFFICACITÉ
-
-<!--Work in progress-->
-
-
-
-
-
-## ANIMATIONS ET MOUVEMENTS
-
-<!--Work in progress-->
-
-
-
-
-
-## UTILISATION DES TRANSITIONS
-
-<!--Work in progress-->
-
-
-
-
-
-# Grammaire et mécanismes
-
-## LES BASES
-
-### La voix active
-
-
-
-
-
-### Le langage courant
-
-
-
-
-
-
-
-
-
-### Les majuscules (capitales)
-
-
-
-
-### Mettre en gras (bold)
-
-
-
-
-### La ponctuation
-
-#### L'esperluette (&)
-
-
-
-
-#### Les deux points (:)
-
-
-
-
-
-#### La virgule (,)
-
-
-
-
-
-#### Les points de suspension (…)
-
-
-
-
-
-#### Le point (.)
-
-
-
-
-
-#### Le point d'exclamation (!)
-
-
-
-
-
-#### Le point d'intérogation (?)
-
-
-
-
-
-#### Les guillemets (« »)
-
-
-
-### Les listes
-
-#### À puces
-
-
-
-
-
-#### Numérotées
-
-
-
-
-
-### Les menus déroulants
-
-#### Les actions
-
-
-
-
-
-#### Les noms
-
-
-
-
-## APPELATION
-
-<!--Work in progress-->
-
-
-
-
-
-## GLOSSAIRE
-
-
-
-
-# Composants
-
-## Grilles
-
-
-### Alignement
-
-
-
-
-
-### Espacement
-
-
-
-
-
-### Proximité des objets
-
-
-
-
-
-### Marges
-
-
-
-## Responsive
-
-
-
-
-
-## Flexbox
-
-
-
-
-
-
-
-## Bordures
-
-
-
-
-
-## Boutons
-
-Voir HiButton sur http://materialui.hipay.dev.local/#hibutton
-
-
-
-## Champs de saisie
-
-
-
-
-
-
-
-
-
-
-
-## Graphiques
-
-
-
-
-
-###
-
-
-
-
-
-
-
-## Indicateurs de chargement
-
-Voir HiLoader sur http://materialui.hipay.dev.local/#hiloader
-
-
-
-## Panneaux et messages
-
-
-
-
-
-## Popover
-
-
-
-
-
-## Glisser et déposer
-
-
-
-
-
-## Répétition
-
-
-
-
-
-## Sélection
-
-Voir HiSelect sur http://materialui.hipay.dev.local/#hiselect
-
-
-
-## Tableau de données
-
-Voir HiTable sur http://materialui.hipay.dev.local/#hitable
-
-
-
-## Tags et label
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Entrée des données
-
-
-
-
-
-## Affichage des données
-
-Voir HiButton sur http://materialui.hipay.dev.local/#hibutton
-
-
-
-## Visualisation des données
-
-
-
-
-
-
-
-
-
-## Navigation
-
-
-
-
-
-## Recherche
-
-
-
-
-
-## Rester sur la page, lien rebond
-
-
-
-
-
-## Prévenir les erreurs
-
-
-
-
-
-## Réactions immédiates
-
-
-
-
-
-## Apprentissage approfondi
-
-
-
-
-
-## Étapes et progression
-
-
-
-
-
-## État d'intéraction
-
-
-
-
-
-## État vide
-
-
-
-
-
-## Règles et filtres
-
-
-
-
-
-## Astuces
-
-
-
-
-
-## Sons
-
-
-
-
-### Messages de réussite
-
-
-
-
-
-### Orienter les actions
-
-
-
-
-
-### Fournir une invitation
-
-
-
-
-
-## Retours
-
-
-
-
-
-
-
-
-
-
-# Formulaires
-
-
-
-
-
-## LE FORMULAIRE DE CRÉATION « Ⓒ »
-
-
-
-
-
-## LE FORMULAIRE DE RECHERCHE « Ⓡ »
-
-
-
-
-## LES BONNES PRATIQUES
-
-
-
-
-### Réduisez la charge cognitive
-
-#### Via les champs
-
-##### Ⓒ Ⓡ Le label
-
-
-
-
-
-##### Ⓒ Ⓡ La taille
-
-
-
-
-##### Ⓒ Ⓡ L'attribut
-
-
-
-
-
-##### Ⓡ Le masque de saisie et les règles
-
-
-
-
-##### Ⓒ Ⓡ Le pré-remplissage
-
-
-
-
-
-##### Ⓒ Ⓡ Préférez la qualité à la quantité
-
-
-
-
-
-##### Ⓒ Ⓡ Le champ optionnel, on l'affiche ?
-
-
-
-
-
-#### Via le formulaire
-
-##### Ⓒ Ⓡ Utilisez une seule colonne
-
-
-
-
-##### Ⓒ Ⓡ Regroupez les informations
-
-
-
-
-
-##### Ⓒ Ⓡ L'ordre des boutons
-
-
-
-
-
-#### Pour l'utilisateur
-
-##### Ⓒ Montrez la progression
-
-
-
-### Empêchez les erreurs
-
-#### Via les champs
-
-##### Ⓒ Ⓡ La validation
-
-
-
-
-
-##### Ⓒ Ⓡ Contenu des listes
-
-
-
-
-##### Ⓒ Ⓡ Affichez une bulle d'aide
-
-
-
-
-
-#### Via le formulaire
-
-##### Ⓒ Ⓡ Différenciez les boutons
-
-
-
-
-##### Ⓒ Ⓡ Rendez vos « call to action » explicites
-
-
-
-
-##### Ⓒ Désactivez par défaut le bouton « call to action »
-
-
-
-
-#### Pour l'utilisateur
-
-##### Ⓒ Ⓡ Auto-correction
-
-
-
-
-
-##### Ⓒ Prévenez du verrouillage des majuscules
-
-
-
-
-
-### Éprouvez de l'empathie
-
-
-
-##### Ⓒ Ⓡ Rendez le formulaire accessible à tous (du mieux possible…)
-
-
-
-
-
-##### Ⓒ Ⓡ Utilisez un langage clair et simple
-
-
-
-
-##### Ⓒ Ⓡ Valorisez le temps que vous consacre l'utilisateur
-
-
-
-
-
-##### Ⓒ Ⓡ Considérez le contexte dans lequel se trouve l'utilisateur
-
-
-
-
-##### Ⓒ Soyez inclusif
-
-
-
-
-##### Ⓒ Les données sensibles
-
-
-# Relation entre La Console et ses utilisateurs
-
-## Voix et ton
-
-### Messages d'erreur
-
-
-
-
-### Messages d'alerte
-
-
-
-
-#### Degré de gravité de l'action