Guide UI

Ce guide UI comprend les ressources nécessaires pour créer des interfaces utilisateur cohérentes pour le site informationnel de la Ville de Laval, qui inclut les microsites. Il s’adresse à toutes les personnes qui contribuent à enrichir le site de la ville, qu’elles soient employées de la Ville, pigistes ou collaboratrices d’une agence partenaire. Il est complémentaire au guide de marque et au guide de rédaction UX.

Comme tout outil de création, ce guide sera actualisé pour refléter l’évolution des bonnes pratiques numériques afin d’offrir une expérience en ligne conviviale, fluide, fiable et cohérente centrée sur les besoins des citoyennes et des citoyens.

Les outils

Les designers devraient obtenir une licence pour Figma, notre principal outil de kit de conception. Pour la retouche de photos, nous recommandons Photoshop. Pour la création ou modification d’illustrations, Illustrator.

Figma pour le UI

Refonte UI

Figma pour le UX

</aside>

<aside> 🌳 Écoconception

Prendre conscience de l’impact du numérique

Le secteur du numérique a un impact environnemental très élevé : En 2020, il représentait 2,1% à 3,9% des émissions mondiales de gaz à effet de serre mondiales (Explications sur l'empreinte environnementale du numérique). Si on fait le parallèle avec le secteur des transports, l'empreinte du numérique se situe entre celles de tous les avions du monde (environ 2%) et de tous les camions du monde (environ 4%) (The Shift Project).

Guide des bonnes pratiques à destination des concepteurs

Le guide d’écoconception de services numériques

</aside>

<aside> 👁️ Accessibilité

Prendre conscience de l’impact du numérique

L'accessibilité numérique est l’une des clés pour créer un site internet où tout le monde, sans exception, peut naviguer et interagir librement. C'est la garantie que tout le monde, y compris les personnes atteintes de handicaps physiques, visuels, auditifs ou cognitifs, peut utiliser facilement votre site vitrine ou e-commerce et voir ses contenus. Elle joue un rôle crucial dans la création d'un environnement numérique inclusif, permettant à tous d'accéder aux informations et services en ligne de manière équitable. L’accessibilité numérique doit respecter plusieurs principes pour être universel.

Le W3C

Selon le W3C (World Wide Web Consortium), quatre principes essentiels guident l'accessibilité numérique et doivent être pris en compte lors de la création de votre interface web :

Perceptible : Le contenu numérique doit être visible à tous. Par exemple, l'usage du texte alternatif pour les images, les sous-titres pour les vidéos et une transcription pour le contenu audio permet de rendre le contenu accessible.

Utilisable : Les utilisateurs doivent pouvoir interagir avec le contenu numérique. Cela implique une navigation au clavier et des éléments interactifs conçus pour fonctionner sur tous les écrans : pc, mobile, tablette … Rendez chaque contenu web accessible !

Compréhensible : Le contenu et la navigation doivent être compréhensibles pour tous les utilisateurs. Un texte clair, une page bien structurée, des couleurs adaptées et la prévention des erreurs courantes de saisies peuvent y contribuer.

Robuste : Le contenu doit être capable de fonctionner sur une variété de plateformes, d’applications et de technologies d'assistance. Cela implique de suivre les standards web corrects et de s'assurer que les contenus restent accessibles au fur et à mesure des mises à jour et évolutions technologiques.

Documentation officielle WCAG

Règles pour l’accessibilité des contenus Web (WCAG) 2.1

<aside> 💡

Outil en ligne pour tester la validité des contrastes (AA doit être valide). Stark : plugin Figma pour tester la validité des contrastes (AA doit être valide).

</aside>