Maquetter des interfaces utilisateur web ou web mobile
📚 Références
- REAC (mise à jour du 03/07/2024), pages 17 et 18
- RE (mise à jour du 03/07/2024), page 9
📋 En résumé
Pour cette compétence, tu vas devoir réaliser des maquettes d'interfaces utilisateur.
Mais par maquettage, on ne parle pas de maquette en papier ou en carton, mais bien de maquettes numériques.
Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes d'interfaces utilisateur, au travers des différentes étapes maquettage :
- Analyse du cahier des charges
- Création de l'arborescence du site et de ses pages
- Conception des zonings
- Réalisation des wireframes
- Création de la charte graphique
- Mise en forme des maquettes à partir des wireframes et de la charte graphique
- Mise en place des interactions via un prototype
Alors bien entendu, toutes ces étapes ne sont des étapes "purement" maquettage, mais qui sont utilisées pour réaliser ces maquettes sans se vautrer.
Il s'agit de l'ordre logique allant du tout début jusqu'à la réalisation de maquettes finales et du prototype.
Pas de panique ! Tu n'as pas besoin d'être un webdesigner pour réaliser des maquettes.
Évidemment, si tu as des compétences en design, c'est un plus car en général les développeurs ne sont pas tous réputés pour être de bons designers... 😅
Ce qu'on attend de toi, c'est de respecter les consignes du cahier des charges tout en répondant au besoin du client et en faisant attention à l'expérience utilisateur et l'accessibilité.
Si par ailleurs tu cherches un outil gratuit pour réaliser des maquettes, tu peux te tourner vers Figma qui permet non seulement de créer des maquettes et prototypes, mais aussi de collaborer avec d'autres personnes sur un même projet.
Tiens d'ailleurs, parlons accessibilité !
D'après toi, qu'est-ce que l'accessibilité en matière de développement web ?
Si tu as répondu que c'est le fait de rendre un site accessible à tous, tu as tout bon !
L'accessibilité est un point crucial à prendre en compte lors de la réalisation de maquettes, car tout le monde doit pouvoir accéder à un site web, y compris les personnes en situation de handicap.
Pour améliorer l'accessibilité de ton site, il est recommandé de suivre les recommandations du W3C à propos du WCAG et du RGAA, mais je ne te cache pas c'est un gros morceau et qu'on se perdre en voulant tout respecter à la lettre. Alors voici un condensé des points les plus importants à respecter dans un premier temps :
- Contraste : Assure-toi que le texte est lisible sur n'importe quel fond. Il faut viser un score AA (ratio 4.5:1) au minimum et idéalement AAA (ratio 7:1) sur nos éléments textuels et pour l'iconographie.
- Taille de police : La taille de police doit être suffisamment grande pour être lisible par tout le monde. En général, on recommande une taille de 16px minimum.
- Choix de la police : Utilise des polices lisibles et évite les polices fantaisistes. Si tu cherches une police légère, gratuite et réputée pour être lisible, tu peux te tourner vers la police Luciole ! (c'est d'ailleurs celle qui est utilisée sur cette plateforme)
- Intitulés des liens et boutons : Les liens et boutons doivent être clairs et explicites. Évite les "Cliquez ici" et préfère des phrases plus descriptives. Évite également d'uniquer mettre un pictogramme pour un lien, car cela peut ne pas être compris par tout le monde.
Bien entendu, l'accessibilité ne se limite pas à ces points, mais c'est un bon début pour rendre ton site accessible à tous. J'y reviendrai plus en détail dans la compétence suivante, puisqu'on parlera de l'intégration de ces maquettes 😉
Et pour terminer ! (oui, je sais, je parle beaucoup 😅)
L'éco-conception !
🌍 L'éco-conception
L'éco-conception, c'est l'art de concevoir un site web de manière à réduire son impact environnemental. On évitera par exemple d'intégrer beaucoup d'images et autres médias.
De manière générale : moins il y a de requêtes, moins il y a de données à charger, et donc moins d'énergie consommée.
Même si dans l'ensemble on serait en droit de crier "greenwashing" (et on aurait pas tort), il est important de prendre en compte l'impact environnemental de nos sites web.
Au delà de l'impact environnemental, un site éco-conçu est souvent plus rapide et plus léger, ce qui permet aux sites et applications d'être plus performants tant en termes de vitesse que de consommation de données.
Tu l'auras compris, que tu sois éco-convaicu ou non, c'est un point essentiel pour l'expérience utilisateur ! 🚀
➕ Informations complémentaires
Il est probable que ton client t'impose une charte graphique à respecter et que cette dernière ne soit pas forcément accessible, ergonomique ou éco-conçue.
C'est à toi en tant que développeur d'expliquer à ton client les enjeux que ça représente pour son site web.
Il aura dans tous les cas le dernier mot, mais il est important de l'informer des conséquences de ses choix pour son site.
S'il ne veut pas améliorer prendre en compte ces informations, tu pourras toujours lui proposer de le faire évoluer par la suite, une fois le site en ligne (mais attention, cela peut coûter cher pour rattraper les différents défauts).
🎯 Critères d'évaluation
- Les maquettes sont réalisées conformément au dossier de conception, en langue française ou anglaise (niveau B1 du CECRL pour l'anglais)
- La charte graphique de l'entreprise est respectée
- Les exigences de sécurisation sont respectées
- Les maquettes tiennent compte de l'expérience utilisateur, y compris pour les personnes en situation de handicap et du type d'utilisation, y compris pour les équipements mobiles
- L'enchainement des maquettes est formalisé par un schéma
- La législation en vigueur est respectée, y compris celle relative à l'accessibilité
🤯 Aller plus loin (hors référentiel)
Tu trouves que je n'ai pas assez parlé dans cette compétence ? Déjà, tu m'en vois surpris, mais je vais te donner quelques pistes pour aller plus loin !
Je vais parler un peu plus en détail de l'éco-conception, tant il s'agit d'un sujet très important et souvent négligé.
Le premier réflexe que l'on pourrait avoir en entendu ce terme, c'est accuser du greenwashing et penser qu'on attend de nous de revenir dans les années 90 avec des sites tout moches et tout plats.
Alors... Greenwashing ? Tout dépend de qui en parle, mais la cause elle-même est noble et mérite d'être prise en compte.
Pour le côté "site tout moche", c'est effectivement une possibilité, mais ce n'est pas une fatalité.
Faire une galerie photo avec des images en pleine résolution, c'est bien, mais c'est lourd à charger. Et pourtant, on peut quand même rendre le site d'un photographe beau et éco-conçu, tout en préservant la qualité de son travail !
Ça peut sembler contre-intuitif, mais tout va se jouer dans le code où l'on pourra charger uniquement au besoin et à la demande de l'utilisateur les images dans notre page.
Toujours pas convaincu par l'éco-conception ?
Et si je te disais que l'éco-conception, c'est aussi un argument de vente ?
En effet, un site éco-conçu, c'est un site qui se charge plus vite et qui sera donc plus agréable à utiliser grace à sa fluidité.