Règles de conception
Balises principales :
- On n'écrit pas de CSS;
- On utilise des composants qui existent dans les librairies des développeurs;
- On veut quand même arriver avec un visuel qui semble au système de design du gouvernement.
Pour y arriver, pendent la conception des maquettes, on se serve concrètement des composants Bootstrap et Kendo UI (dans cet ordre) sauf si le composant de Quebec.ca n'est pas trop lois de ces composants.
On attente le moment où on peut juger l'utilisation de certains composants certain et stable, pour affiner le thème, si ces composants ne semblent pas assez au système de design.
Technologie UI générale
- Framework : Kendo UI for MVC (pas de SPA); On crée un thème pour Kendo UI/Bootstrap, et on crée qu'un minimum de CSS.
- Hyperliens pour une section du formulaire ou une question, et pour la page de connexion
- Navigation historique entre vues marche (bouton retour plutôt que reset)
- La session est suffisamment longue (20h idéalement; 1h min.)
- HTML 5 (CSS 4, 5), l’interaction peut être différent dépendent des capacités du navigateur (progressive enhancement)
- Enregistrement des sections sans remplir tout le champs obligatoires et sans soumettre la demande
- Confirmation de navigation s'il y a des changements non-enregistrés
- HTTPS partout
- Validation des formats des champs et obligatoires au moins par JavaScript, sur blur (inline)
- Soumission implicite sur touche Entrée dans les champs
- Les formats d'affichage doivent toujours être accepté comme format d'entrée, particulièrement sans et avec espaces, pour permettre copier-coller
- Limites des charactères généreux ou sans limite pour permettre des espaces ou des cas extrêmes (Consultation)
- Performance comparable à AJAX (Turbolinks/SPA) souhaitable
- Aperçu des fichiers souhaitable, avant le téléversement encore mieux
a11y
- HTML sémantique
- Tests avec clavier
- Tests avec un lecteur d'écran
- SGQRI 008 2.0
Textes
- Si un article de la loi est mentionné, mettre un lien vers l'article chez legisquebec.ca
- Les abréviations sont expliqués (premier occurrence avec parenthèses)
- Pas des formulations négatives
- Les signes de ponctuation, si nécessaire, sont séparé par un espace fine, ou au moins avec un espace insécable
Déjà utile
- Kendo UI (Telerik for APS.NET MVC)
- Stratégie de transformation numérique gouvernementale 2019-2023
- Dix principes de conception
- Sondage 5 minutes pour contribuer à la transformation numérique gouvernementale
- Implementing a citizen-centric approach to delivering government services
- WCAG Quick reference
- SGQRI 008 2.0
- PIV gouvernement:gouv@piv
- Systeme de design Quebec.ca
- Accordéons
- Retour en haut de page
- Notes et exemple mobile
- À consulter aussi
- Champs texte
- Champs obligatoires
- Fil d’Ariane
- Images
- Tuiles (en développement)
- Menu déroulant (en développement)
- Infobulles (en développement)
