L’importance du design system dans vos projets

Vous avez sans doute déjà entendu parler de design system. Mais concrètement, qu’est-ce que cela pourrait vous apporter ? Il est certain qu’un bon design system est une source viable et fiable pour toute société qui souhaite faire évoluer et pérenniser son identité. Nous allons déchiffrer pour vous ce concept et vous donner les bonnes pratiques et les avantages à utiliser cet outil. Qui sait, peut-être arriverons nous à vous convaincre de vous lancer et de développer avec vous votre design system ?

 

 

Design system : qu’est-ce que c’est ?

Une explication s’impose avant de débuter. Par définition, un design system est une librairie de composants accompagnée de règles et de bonnes pratiques et mise à disposition des designers et des développeurs. C’est à partir d’une charte graphique, existante ou non, que l’on vient créer et décliner un écosystème unique et modulaire en accord avec l’image de la marque sur l’ensemble des produits. Ces derniers seront ainsi développés de façon cohérente et homogène entre eux.

 

 

Quel intérêt d’un design system ?

Un bon design system va vous permettre de faire évoluer et de pérenniser de façon sereine l’identité de votre société. Si vous souhaitez développer une nouvelle solution ou si vous avez plusieurs produits tels que des sites, applications, plateformes etc… Il est important de poser un cadre et des règles à respecter afin d’unifier l’identité visuelle de ces derniers. C’est ici qu’un design system peut vous être utile.

Sans plus tarder, on vous donne 3 bonnes raisons pour se lancer !

  • Un gain de temps et une économie du design considérable : en effet, on va favoriser ici la réutilisation de composants sans chercher à réinventer la roue, ce qui va permettre des évolutions moins complexes, moins fastidieuses et plus rapides à mettre en place.
  • Une évolution maintenue : comme tout, les tendances et les technologies évoluent et votre site va peut-être devoir lui aussi se mettre au goût du jour par rapport à vos concurrents qui ont déjà peut-être une longueur d’avance. Étant donné que les composants sont constamment maintenus et mis à jour, les équipes de conception auront toujours à disposition des ressources dans l’ère du temps pour créer de la valeur ajoutée.
  • Une expérience client optimale : n’oublions pas que l’utilisateur est roi, et qu’il doit être au cœur de votre processus. Nous nous devons ainsi de lui offrir la meilleure expérience possible. L’expérience est réussie dès lors qu’il n’y aura pas de confusion lorsqu’il naviguera sur les différentes plateformes de votre site et qu’il comprendra être toujours sous la même marque.

 

 

Les étapes clefs pour un design system réussi

Nous y voilà ! La mise en place d’un design system peut sembler fastidieuse au démarrage. Il est donc nécessaire dès le départ de mettre les choses à plat et d’avoir une bonne organisation. Nous vous citons les 4 étapes qui semblent pour nous nécessaires au bon démarrage d’un design system :

 

1 – Un état des lieux de votre stratégie

En général, la création d’un design system commence par un audit de l’existant; cela peut être les composants visuels du produit, les outils ou encore les bibliothèques utilisées. À travers cet audit, on va pouvoir identifier et corriger si besoin les incohérences de toutes les conceptions. Il va également permettre d’analyser le besoin de votre projet pour définir l’objectif et l’orientation de votre design system.

2 – De bons outils pour le construire

Choisir le ou les bons outils seront un des éléments essentiels à la réalisation de votre design system afin de mettre en place des règles cohérentes et transverses à toutes les interfaces digitales. Il existe de nombreuses solutions, comme Figma, Sketch ou Adobe XD côté design, qui vont vous permettre de définir les éléments visuels de votre design system (couleurs, typographies, espacements, etc.).

Puis côté développeur nous pouvons ajouter Style Dictionary ou Storybook, qui permettent de faciliter la création et son utilisation. Ces outils passent également par une documentation solide afin d’éviter d’être submergé par des questions récurrentes ou une mauvaise compréhension des composants mis à disposition.

3 – Des feedbacks réguliers

On ne le dit pas assez mais la communication est importante, c’est pourquoi il faudra envisager plusieurs points ou feedbacks réguliers avec les utilisateurs de la bibliothèque et ainsi opter pour un canal de discussion dédié via votre outil de discussion interne qui vous permettra une communication efficace et immédiate en cas de besoin.

4 – Faire vivre votre design system

Une fois votre design system déployé et bien intégré, il va falloir le faire vivre ! En effet, il y aura sans doute des évolutions, des changements, de nouveaux produits… et pour cela, les équipes de designers et développeurs devront être préparées aux potentielles problématiques et questions, et ainsi juger de la nécessité de la création ou de la modification d’une règle ou d’un composant.

 

Vous avez maintenant toutes les cartes en main pour vous plonger dans cet univers ! Chez Polux on vous accompagne au démarrage de votre projet sous forme d’ateliers, d’audit, etc… afin de créer pour vous votre librairie de composants.

 

Notre partenaire artwaï, expert en web performance ou webperf, vous accompagne dans l’optimisation technique des composants de votre design system.

Au mois de mai dernier, nous allions à Paris pour faire une interview dans les locaux du Figaro. L’occasion de parler de Polux, et plus particulièrement de l’UX design.

 

Nous avons abordé plusieurs thématiques :

  • Qu’est-ce que l’UX design ?
  • Quelle est la valeur ajoutée pour une entreprise de mettre en place des stratégies d’UX design ?
  • Quelle est notre vision, notre méthodologie ?
  • L’UX design est-il plus lié à un domaine d’activité ?
  • Quels sont les projets à venir ?

 

Tous les réponses dans l’interview

 

 

 

Retour d’expérience

C’était une première pour Polux ☺️.

La possibilité de s’exprimer sur un métier en plein essor qui est souvent pas compris de la même manière par tous. 

 

 

L’article sur BFM Business

Polux : les experts de l’UX design

Vous êtes en train de créer, de refondre votre site internet ? De créer une application innovante qui va changer les habitudes ?

Ce sont des des situations où l’on peut avoir besoin de prendre de la distance par rapport au projet, de se mettre d’accord, ou encore d’impliquer l’utilisateur final pour bien prendre en compte ses besoins. Pour toutes ces questions aussi délicates que cruciales, l’efficacité de l’atelier UX n’est plus à prouver.

 

 

Un atelier UX design, c’est quoi ?

Les ateliers UX, c’est l’un des outils clefs de l’UX design qui va permettre de construire un projet solidement orienté vers l’utilisateur final. L’idée en est plutôt simple : c’est un moment d’échange dédié et structuré autour d’une problématique à résoudre. Comment devrait se structurer l’arborescence de mon site ? Comment rendre mon concept compréhensible ? Quelles fonctionnalités sont essentielles ?

 

Cet échange a lieu entre l’équipe du projet (vous !) et des professionnels de l’UX (nous !). Selon les besoins et l’objectif de l’atelier, des personnes extérieures peuvent aussi intervenir, ce qui permet d’avoir la vision de clients ou utilisateurs potentiels. L’objectif est de croiser tous ces regards dans une démarche de co-conception. Dans le cas d’un site web, cela signifie qu’il est pensé avec les utilisateurs, pour les utilisateurs. Tout cela permet d’avoir les bases de travail précises pour concevoir un site qui convient à la fois à votre vision du projet et à vos utilisateurs.

 

 

Concrètement, comment ça marche ?

Un atelier UX se déroule généralement sur une période d’une demi-journée. L’idée est d’être efficace sur une problématique clef, pour ne pas trop s’éparpiller. Il s’agit de rassembler un petit groupe, de 6 à 8 personnes maximum.
Objectif : profiter d’une soupe neuronale riche en créativité sans se perdre dans un trop grand groupe !

 

À chaque étape, à chaque projet son atelier. Il n’y a pas d’atelier « parfait » qui fonctionnerait dans tous les cas, puisque chaque projet a ses spécificités. Généralement, l’atelier consiste tout de même à se rassembler autour d’une table, ou même à distance, pour réfléchir grâce à une activité. Cela peut être des post-it à écrire, à trier, de la hiérarchisation d’idées, des cartes mentales… Il est même possible de concevoir des ateliers ludiques sur-mesure pour un projet.

 

 

 

 

 

Atelier UX : quel intérêt pour moi ?

Concrètement, à quoi sert un atelier UX ? À s’adapter à l’utilisateur, oui. Mais encore ? Les bonnes raisons de se prêter à l’exercice ne manquent pas.

 

  • Recevoir un regard extérieur : il est plus facile de perdre de vue des aspects essentiels de son projet lorsqu’on passe son temps le nez dedans. Un avis extérieur et expert peut alors s’avérer crucial pour créer un projet cohérent. L’atelier UX permet d’apporter ce moment d’échange pour prendre un pas de recul.
  • Décloisonner les idées : un atelier UX design, c’est aussi un moment d’échange privilégié… Entre vous. Ce moment est conçu pour décloisonner la parole, pour que tous les domaines puissent s’exprimer et apporter leur vision sur un projet, pour aboutir à un ensemble qui a une vraie cohérence interdisciplinaire.
  • Gagner du temps : cela paraît souvent contre-intuitif. Un atelier UX, ça prend un peu de temps, il faut rassembler une équipe, trouver une date… Mais cette phase permet de savoir ensuite exactement où l’on va et ce que l’on veut. En définitive, elle permet donc un gain de temps énorme sur le calendrier du projet.
  • Favoriser une expérience fluide : l’expérience utilisateur, encore et toujours… C’est évidemment le cœur de l’atelier… Pour de bonnes raisons ! Optimiser un projet au niveau de son expérience utilisateur, c’est s’assurer que ce dernier va apprécier une expérience fluide. Et ça, cela vous permet tout simplement de mieux atteindre vos objectifs, qu’il s’agisse de diffuser un savoir, vendre un produit, susciter une interaction…
  • Avoir un résultat qui vous convient à coup sûr : les ateliers de co-conception sont un moyen de construire votre projet en étroite collaboration avec notre équipe d’experts. Cela vous permet de suivre pas à pas tous ses aspects. Lors de nos ateliers, et même au-delà, nous gardons un lien constant avec nos clients. Cela nous permet de nous adapter en permanence à leurs besoins, tout en nous assurant de maintenir une cohérence globale.

 

 

Quelques exemples de nos ateliers UX

Crazy Eight

Durée : 30 minutes
Objectif : Générer un grand nombre d’idées rapidement

 

Le cerveau a parfois besoin de structure pour exprimer toute sa créativité. En limitant l’espace de travail disponible et le temps à disposition, cet atelier aidera les participants à trouver rapidement plusieurs idées pour répondre à un problème donné.

 

 

Comment pourrait-on…

Durée : 1h
Objectif : Transformer un problème en une question facile à résoudre

 

Reformuler un problème sous la forme interrogative “Comment pourrait-on…” est un très bon moyen de le rendre moins complexe et plus facile à résoudre.

 

 

Continuer, Ajouter, Supprimer

Durée : 1h
Objectif : Obtenez des commentaires utiles d’un groupe sur un sujet ou un projet

 

Cet atelier est utile pour encourager un groupe à optimiser et à améliorer une situation avec des actions claires.

 

 

Et bien d’autres 🙂

En ce beau mois de juillet 2021, les membres de l’équipe de Polux ont passé la certification “maîtrise de la qualité en projet web”, délivrée par l’organisme Opquast. On vous explique à quoi sert cette formation dédiée à la qualité web, et pourquoi nous avons décidé de passer par les bancs de cette école virtuelle !

 

 

Qualité web : qu’est-ce que la certification Opquast ?

Pour reprendre les mots de ses créateurs, la certification Maîtrise de la qualité en projet web a pour but de “rendre le web meilleur”. Rien que ça ! Plus concrètement, cette certification consiste en une formation de 14 heures, 200 pages de contenu et un examen final noté sur 1000. Elle cherche à donner une meilleure appréhension globale de ce qui fait la qualité d’un site web à travers des critères concrets, vérifiables, construits et approuvés par une large communauté d’experts du web.

 

 

C’est quoi, un site web de qualité ?

Vaste programme, donc, que celui de cette formation, qui amène une question plutôt épineuse : comment définit-on ce qu’est un site web de qualité ? Cette interrogation, l’Opquast cherche à y répondre depuis sa création en 1999. Même s’il n’y a pas de réponse absolue, ces experts du domaine ont choisi de prendre en compte 5 grands piliers dans l’approche de la qualité web. Il s’agit du modèle VPTCS.  Créé par Elie Sloïm et Eric Gateau en 2001, il couvre la totalité d’un parcours utilisateur sur un site web.

 

V comme visibilité : le site web doit pouvoir être trouvé facilement
P comme perception : le site web doit pouvoir être utilisé de façon fluide
T comme technique : le site web doit bien fonctionner
C comme contenus : le site web doit proposer des contenus de qualité
S comme services : le site web doit permettre d’assurer un service fiable suite au passage du visiteur

 

Des critères indicateurs de la qualité d’un site ont été compilés par l’Opquast. Ils sont actuellement au nombre de 240, qui peuvent donc être répartis entre les différentes étapes couvertes par le modèle VPTCS. De fait, ces critères concernent donc aussi un grand nombre de corps de métier. Il s’agit de règles vérifiables et concrètes. Par exemple : les métadonnées sont-elles présentes dans le code source de chaque page ? Le site web utilise-t-il un protocole https ? Ou encore : les conditions de vente ou d’utilisation sont-elles bien indiquées ? L’idée de la formation est donc d’apprendre à connaître ces bonnes pratiques pour améliorer les sites et mieux prendre en compte l’utilisateur, mais pas seulement.

 

 

La certification qualité web, quel intérêt ?

  • Une expérience utilisateur améliorée : en prenant en compte des impératifs de qualité basés sur un parcours utilisateur, celui-ci est remis au centre du processus de création du site web. On obtient donc des sites plus fluides et plus simples d’utilisation.
  • Une meilleure “culture du web” : cette certification propose une approche globale, qui vise à mieux comprendre les enjeux des corps de métier. En fait, il s’agit tout simplement d’apprendre à parler la même langue ! Mieux se comprendre entre UX designer, graphiste, commercial, rédacteur, gestionnaire de projet et tutti quanti, cela permet de garantir un processus de création plus efficace.
  • La prise en compte de l’accessibilité web  : enfin, cette formation permet de réfléchir à l’utilisateur dans sa diversité : âge, langue, compétence, aptitudes physiques ou mentales, accès à la technologie… Elle permet donc de travailler pour une meilleure accessibilité des sites web.
  • Une sécurité web renforcée : la qualité d’un site passe aussi, bien évidemment, par sa sécurité. Une piqûre de rappel sur les critères phares de sécurité n’est donc jamais à négliger.

 

 

Et pour vous, la qualité web, ça change quoi ?

Forcément, tout cela, ça donne en finalité des sites web de meilleure qualité. Être rigoureux sur des critères de qualité étalons nous permet de créer des sites plus efficaces, plus agréables à utiliser, en respectant un processus de création plus fluide, mais aussi de diminuer les risques liés à la sécurité… Ces sites web ont également de bonnes chances d’être plus écologiques, puisque de nombreux critères rejoignent ceux de l’éco-conception web.

 

Le contrôle qualité appliqué sur les sites que nous créons est aussi plus précis, puisque nous utilisons la checklist Opquast de bonnes pratiques qui regroupe les fameux critères de qualité. Elle nous permet de vérifier point par point que nous ne sommes pas passés à côté d’un détail d’importance. D’ailleurs, si vous avez aussi envie de tester vos compétences sur le sujet de la qualité web avec une version abrégée de l’examen, il existe un test court en 10 questions pour vous exercer…

Vous êtes-vous déjà demandé à quel point votre site web polluait ? La question peut sembler étonnante au premier abord. Derrière l’image d’un monde du web immatériel se cache un impact écologique qui n’est pas toujours bien connu. Pourtant, quelques chiffres suffisent à souligner une réalité qui n’est pas très “verte”.

  • Le secteur du numérique est responsable de 4% des émissions de gaz à effet de serre, et ce pourcentage devrait doubler d’ici 2025
  • La  consommation électrique annuelle d’un centre de données “moyen” ¹ est égale à celle d’une ville de 10.000 habitants
  • Le trafic dans les centres de données est en hausse de 35% par an

 

La question de la pollution numérique est complexe, car elle touche à de nombreux domaines. La production d’équipements informatiques en elle-même consomme des ressources minières rares, de l’électricité, produit du CO²… L’utilisation du web suppose le recours à un réseau, qui consomme des ressources, à des centres de données, qui consomment de l’électricité, doivent être refroidis… En France, l’électricité étant principalement de source nucléaire, beaucoup d’eau est aussi consommée pour le refroidissement des réacteurs. Pas si immatériel que cela, le web, donc !

 

Et l’impact de cette pollution numérique est chaque année plus important : la production de matériel informatique va en augmentant, ainsi que la quantité de données stockées. Pour lutter contre cette tendance, il est possible de concevoir des sites web éco-responsables.

 

 

Pourquoi l’allègement des sites web est éco-responsable ?

Il y a quelques années, le mouvement “green IT” a pris son essor en Europe. Il a posé les bases des bonnes pratiques à appliquer pour rendre les sites internet plus “efficients”, c’est-à-dire qui présentent un bon ratio entre performance et consommation de ressources. Depuis 1995, le poids des pages web a été multiplié par plus de 115 ! Rendre un site internet éco-responsable, c’est avant tout le rendre plus “léger”, et ce pour plusieurs raisons :

  • les terminaux n’ont plus besoin d’être aussi performants : cela permet aux internautes de remplacer moins souvent leurs appareils
  • les serveurs sont moins surchargés : on réduit donc le matériel et les ressources énergétiques nécessaires au bon fonctionnement du site
  • le site est plus fluide : l’internaute y passe moins de temps, ce qui réduit d’autant sa consommation énergétique

L’idée de fond est de réduire la puissance nécessaire des deux côtés du réseau, le temps passé sur le réseau, et la quantité de données à traiter.

 

 

Les bonnes pratiques de l’éco-conception web

Pour atteindre cet objectif de sobriété numérique, de nombreuses bonnes pratiques peuvent être mises en place. Frédéric Bordage, cofondateur de l’Alliance Green IT, en a détaillé 115 dans son ouvrage “Éco-conception web : les 115 bonnes pratiques”. Le principe fondamental de ces recommandations : se débarrasser du “gras numérique”, à toutes les étapes de la création du site.

  • La conception : les étapes qui précèdent le développement sont les plus importantes pour réduire l’impact. Il ne sert à rien d’optimiser le code d’une fonctionnalité qui n’est pas utilisée ! Or 45% des fonctionnalités demandées ne sont jamais utilisées, et 70% ne sont pas essentielles. Il s’agit donc de faire le tri
  • Le code : il s’agit d’épurer l’intégration du site et le code client et serveur pour réduire le temps de traitement des données, n’appeler que les fonctions nécessaires, éviter les animations trop gourmandes…
  • L’hébergement : le choix d’un hébergeur engagé dans une démarche écologique est important. Il s’agit aussi de réduire au minimum la taille des données transférées, par exemple en optimisant la mise en cache à tous les niveaux
  • Le contenu : environ 80% de la bande passante internet sert à transférer des contenus multimédias. Il est donc nécessaire d’optimiser les contenus vidéo, images, documents afin d’adapter leur taille à la nécessité d’usage

 

Outre l’ouvrage qui les détaille, l’ensemble des conseils correspondants à ces grands axes sont disponibles sur le site du collectif Green IT.

Pour illustrer cet impératif de légèreté, on peut par exemple comparer les pages des moteurs de recherches Yahoo et Google. En effet, Yahoo a choisi de regrouper toutes ses fonctionnalités sur sa page d’accueil, alors que Google a choisi de scinder ses différentes fonctionnalités en plusieurs écrans. Le résultat est sans appel : une recherche via Yahoo  est cinq fois plus lourde que via Google, et son interface graphique est aussi deux fois plus lourde à télécharger.

 

 

Le principe fondamental de ces recommandations : se débarrasser du “gras numérique”, à toutes les étapes de la création du site

 

 

 

Évaluer la performance environnementale de son site web

Et vous, quel est l’impact environnemental de votre site web ? Pour le savoir, des outils se mettent en place peu à peu. Le site ecoindex.fr permet d’auditer les sites internet pour évaluer leur performance environnementale, de même que l’extension Green-IT analysis. De quoi soupeser un peu notre “gras numérique” !

 

Sur le site Polux, selon Green-IT analysis, la page d’accueil obtient la note assez honorable de B ! Pas parfait, nous direz-vous : ça tombe bien, nous sommes en train de travailler sur la refonte du site et l’objectif est déjà atteint selon nos derniers tests. Nous sommes passés à la note A. L’extension propose une liste de pistes d’amélioration, avec des suggestions très concrètes. Elles sont parfois très simples à mettre en place : optimisation des images, utilisation de polices de caractère standards…

 

Appliquer ces règles d’éco-conception web peut faire varier significativement le “rang” d’un site web : les sites de Paygreen et de Stripe en sont de bons exemples. Les pages d’accueil des deux sites, qui proposent des services de paiement en ligne, semblent plutôt semblables de prime abord. Pourtant, alors que Paygreen obtient le score de 69/100, classé B, Stripe se classe dans les D, avec une note de 47/100. Or, les bonnes pratiques d’éco-conception sont certes bonnes pour l’environnement, mais pas seulement.

 

 

Des sites web éco-responsables… mais pas seulement !

Avoir un site éco-responsable, c’est aussi vous assurer un meilleur référencement naturel. Lorsque Google procède au référencement des sites et les classe par ordre de priorité, il prend en compte la rapidité de chargement du site, sa “légèreté”, ainsi qu’un grand nombre de critères qui collent bien souvent avec les principes d’éco-conception. D’ailleurs, si on reprend notre exemple précédent, on remarque que sur Ubersuggest, qui évalue le score de SEO (référencement naturel) des sites, Paygreen obtient une note de 84/100 alors que Stripe n’obtient que 47/100, bien qu’il soit plus fréquenté que le précédent.

 

Enfin, il faut noter que les interfaces allégées sont aussi, mécaniquement, plus simples d’utilisation. Ces sites apportent donc une expérience utilisateur améliorée, et permettent tout simplement de mieux satisfaire l’internaute. Ils sont également moins coûteux. Les infrastructures nécessaires pour le maintenir sont moins lourdes, de même que l’entretien régulier du code.

 

 

Donner un coup de pouce à la nature grâce à l’infrastructure !

Avec notre hébergeur Cognix Systems, nous participons au reboisement des forêts françaises par la plantation de nouveaux arbres aux essences variées et développons la biodiversité grâce à CLO2.

 

CLO2 s’engage à protéger la planète tout en favorisant le développement des infrastructures informatiques toujours plus innovantes d’OVHcloud. Le principe est simple : nous utilisons un serveur, CLO2 plante des arbres à hauteur de notre consommation énergétique. Nous avons 3 jeunes arbres en France (1 Mélèze, 1 Douglas et 1 Châtaignier) qui captent les émissions carbone de notre VMHA.

 

Estimation de notre balance carbone : 6 kg de CO2 absorbé

 

 

La web performance, un levier pour l’éco-conception !

L’un ne va pas sans l’autre ! Un site éco-conçu a de grandes chances d’être performant, et la web performance est un levier de l’éco-conception.

Optimiser ses fichiers, son code, ses images… tant de bonnes pratiques pour moins solliciter les serveurs.

Notre partenaire artwaï, expert en web performance ou webperf, nous accompagne dans la mise en place de ces bonnes pratiques.

 

1 Dans le Référentiel Environnemental du Numérique, les impacts du data center sont calculés pour un site « moyen » caractérisé par sa superficie en m² et la capacité en puissance totale de ses installations en MW (1000 m2, 1 MW, PUE de 2).

Vous avez déjà entendu parler d’accessibilité numérique ou de sites web accessibles… Mais concrètement,

 

Qu’est-ce que l’accessibilité web, et comment l’intégrer ?

Tout le monde s’accorde facilement sur le fait qu’il serait une bonne chose que le web soit accessible pour les handicapés. Mais lorsqu’il s’agit de concrétiser cette idée pour son propre site ou pour le site de son entreprise, on se heurte généralement à de nombreux préjugés bloquants : C’est trop cher, trop compliqué, le besoin est marginal, non prioritaire, ce n’est pas encore le moment, cela ne m’intéresse pas, nous ne sommes pas concernés par le RGAA, et ainsi de suite… Les arguments sont hélas nombreux.

 

Il est très probable que ces freins soient liés à des incompréhensions; et aussi à un certain flou sur ce que sont concrètement les techniques qui permettent de rendre un site web accessible.

De plus, il me semble que les enjeux sur la mise en place de l’accessibilité web ne sont pas toujours bien compris. Je reviendrai également sur ce point.

 

Je vous propose donc à travers une suite d’articles à paraître sur ce blog, une mise au point afin de démystifier ce sujet crucial qu’est l’accessibilité des sites web. Je vous proposerai également quelques idées à mettre en place pour accompagner les équipes sur ce chantier.

 

Voici déjà un premier article au cours duquel nous allons déconstruire quelques idées reçues…

 

 

Idées reçues sur l’accessibilité des sites web

L’intégration d’une page web accessible se fait uniquement avec du code html

Faux ! Ce n’est pas juste du code html « statique ». Il y a également une partie des problèmes qui doit être gérée avec du code css d’une part (pour les styles de couleurs et contrastes, taille du texte, etc.) et aussi une partie “dynamique”, avec du javascript (pour le changement dynamique d’états des attributs et classes de certains éléments).

 

Un code html bien structuré (avec une structure sémantique adaptée au contenu et des titres hx bien ordonnés) est une base essentielle pour mettre en place l’accessibilité web, mais cela ne suffit pas toujours.

 

On peut en conclure que certains éléments sont très simples à rendre accessibles et d’autres moins (comme les formulaires par exemple).

 

 

L’accessibilité web est une surcouche qui doit être traitée après le webdesign et l’intégration html / css

Faux ! La mise en place doit se faire dès la conception. On parle déjà de « mobile-first » (qui signifie que l’on pense en premier l’affichage sur petit écran avant l’affichage sur écrans plus grands, tablette ou écran de bureau) on pourrait également ajouter « accessi-first » : Ainsi on pense les applications avec un souci primordial d’accessibilité depuis la conception visuelle (lisibilité, contrastes, logique du processus pour le vocal, etc…) jusqu’à l’intégration et le développement (partir d’une bonne base de code avant de commencer).

 

Si on envisage l’accessibilité web comme une « surcouche » à mettre en place à posteriori, on risque vite d’être confronté à un problème de budget. En effet, les retours de correction risquent d’être très nombreux. Il faut bien comprendre que “rendre un site web accessible” signifie en gros “refondre en grande partie son site internet”.

 

 

L’accessibilité web sert uniquement aux aveugles

Faux ! Rendre son site accessible permet non seulement aux non-voyants d’écouter le contenu grâce à des logiciels de vocalisation, mais aussi aux malvoyants (qui ont du mal à lire, à divers degrés, ou encore aux daltoniens et dyslexiques) de pouvoir lire et interpréter plus facilement les informations. À cela s’ajoute également la possibilité pour les personnes qui ont du mal à utiliser la souris de pouvoir naviguer au clavier (gestion du “focus” visible, logique des parcours, etc), ou encore, pour les personnes qui ont du mal à comprendre (difficulté avec la langue, handicap mental) la facilitation de certaines actions.

 

Rappelons que le handicap peut toucher tout le monde; nous pouvons également nous trouver momentanément handicapé si par exemple, nous avons un bras dans le plâtre…

 

Quelle chance alors de vivre dans ce monde où tout est fait pour que nous puissions continuer normalement nos activités !

 

Ceci étant dit… Non, nous ne faisons pas cela pour M. Martin qui a un bras dans le plâtre, ni pour Simone qui trouve que c’est bien pratique de naviguer au clavier. Ce n’est pas que nous n’aimons pas M. Martin ou Simone, mais nous le faisons pour les personnes qui ont de “vraies” difficultés, et pour qui l’accessibilité est essentielle pour pouvoir être simplement autonome dans la vie de tous les jours.

 

 

L’accessibilité se traite point par point sur chaque élément

Pas toujours ! L’accessibilité ne concerne pas systématiquement un problème sur tel ou tel élément précis. C’est aussi un problème de fonctionnement au niveau de « l’organisme » d’une page.

Là encore, il faut rappeler qu’une bonne structure html est la base de l’accessibilité : Il faut que les pages soient structurées avec des titres h1, h2, h3, etc, dans l’ordre et sans rupture de continuité. Il faut également vous renseigner sur les éléments html5 à utiliser à bon escient (header, footer, main, aside, nav, etc…). Une bonne structure sémantique html de page permet de bien appréhender le contenu pour les lecteurs vocaux.

 

Il faut également vérifier en permanence la bonne gestion du focus (l’endroit où doit se trouver le pointeur, par exemple, a la suite d’une action, ou au rafraîchissement d’une partie de la page, lors d’une requête Ajax). Si vous ne vous préoccupez pas du focus, celui-ci va généralement se retrouver n’importe où dans la page, selon l’humeur de votre navigateur ! Le gestion du focus est un bel exemple de l’usage de Javascript pour l’accessibilité. C’est en effet avec javascript et sa fonction “element.focus()” que nous pourrons placer le pointeur de l’utilisateur au bon endroit.

 

Il faudra aussi gérer l’affichage des messages d’erreurs sur les champs d’un formulaire, et le bon positionnement du focus. Il y a beaucoup à dire sur les formulaires; je n’irai pas plus loin ici; mais n’hésitez pas à rechercher des informations au sujet des formulaires web accessibles.

 

 

L’accessibilité web est très chère à mettre en place

Plus ou moins faux. Plus exactement, c’est la courbe d’apprentissage des intervenants qui coûte cher. L’accessibilité doit être vue comme une autre façon de coder (ou de penser une application). Une fois que les réflexes sont acquis par les techniciens et les concepteurs, le coût ne devrait pas être beaucoup plus élevé qu’auparavant.

 

L’agence Polux, spécialisée dans l’UX et l’UI design, participe au programme de mise en place de l’accessibilité sur les applications web du groupe Arkéa.

 

Ne manquez pas notre prochain article à venir : “Comment mettre en place l’accessibilité de votre site web ?”

Une approche centrée sur l’humain et l’innovation

L’intérêt principal du design thinking est la créativité, pour découvrir des problématiques (et donc des solutions) auxquelles les utilisateurs eux-mêmes n’avaient pas pensé.

La première étape de la démarche d’un designer sera donc de définir quel est ce problème et pour cela développer de l’empathie pour l’utilisateur. C’est ainsi que GE Healthcare a pu aider les enfants à avoir moins peur de passer un scanner en découvrant que le bruit les dérangeait. Ils ont par conséquent pu mettre en place des solutions de détournement de l’attention (pour en savoir plus sur ce beau projet, on vous conseille de lire cet article en anglais).

 

C’est seulement après cette phase d’observation que le designer pourra définir les problèmes à résoudre.

Après avoir défini le problème, il est temps de trouver une idée de solution : c’est la phase d’idéation. Bien que reposant sur la créativité, le design thinking a un objectif pratique. La solution doit être technologiquement faisable et économiquement viable.

 

Une fois la solution et le choix de la technologie adoptée, il sera temps de passer à la phase de prototypage, puis de test.

 

 

L’intérêt principal du design thinking est la créativité, pour découvrir des problématiques (et donc des solutions) auxquelles les utilisateurs eux-mêmes n’avaient pas pensé.

 

 

Des pratiques différentes aux objectifs similaires

Dans la pratique, les étapes et leur nombre peuvent varier. Les différents acteurs vus précédemment ont chacun développé leur process mais les grandes étapes se ressemblent.

 

Par exemple, le designer Rolf Faste propose sept étapes :

  1. définir : repérer et identifier problème et problématique ;
  2. rechercher : réunir l’équipe et réfléchir aux solutions ;
  3. brainstorming : réflexion avec le client ;
  4. prototyper : croiser et affiner les idées, envoi des premiers schémas aux clients ;
  5. sélectionner : choisir l’idée la plus novatrice et réalisable ;
  6. implémenter : rédiger un plan d’action, définir des rôles et des responsabilités pour la mise en place du projet ;
  7. apprendre : recevoir les retours du client et identifier les axes d’amélioration.

 

Tim Brown de chez IDEO en réalise trois :

  1. inspiration : trouver la problématique et définir le problème ;
  2. imagination : on développe différentes idées autour de la problématique ;
  3. implémentation : mise en pratique.

 

 

Une approche itérative

On constate ainsi que le système de réflexion du design thinking fonctionne par des phases d’itération. Les différentes étapes sont donc amenées à se répéter en fonction des remarques effectuées par les utilisateurs lors des tests. Tout ce processus a pour but de créer une expérience optimale.

 

 

Une approche au centre de l’esprit Polux

Chez Polux, nous avons à coeur d’utiliser le design thinking afin de créer des sites à l’expérience utilisateur optimale. Grâce à nos deux designers Alexandre et Baptiste l’esprit du design thinking est insufflé dans l’ensemble des projets Polux.

Qu’est-ce qu’un thème WordPress ?

Un thème (ou template) WordPress se compose de fichiers ayant pour fonction de modifier et de personnaliser l’apparence et la disposition des contenus du site. Il est indépendant du contenu tels que les pages et les articles. On peut donc changer de thème sans avoir d’impact sur les contenus.

Les thèmes peuvent être gratuits tels que par exemple ceux fournis à l’installation de WordPress. D’autres thèmes appelés premium sont payants et fournissent davantage de fonctionnalités ainsi que du support technique. Enfin, et c’est le sujet de cet article, vous pouvez réaliser ou faire réaliser un thème sur mesure.

 

 

Les 4 principaux avantages à investir dans un thème WordPress sur mesure

 

Un site adapté à vos besoins

Il arrive souvent que nos besoins et envies spécifiques ne soient pas couverts par des thèmes préconçus. Dans ce cas, il sera souvent plus simple et moins onéreux de faire développer directement le thème sur-mesure plutôt que d’essayer d’un adapter un à nos besoins.

 

Un design unique

Quand un projet est unique, il serait dommage que son identité soit noyée sous un thème vu et revu un peu partout. Le sur mesure vous évite ce genre de déconvenues.

 

Un site plus léger

Afin de répondre aux différents besoins de ses utilisateurs, un thème préfabriqué se doit d’embarquer avec lui énormément de fichiers (css, js, polices). Cela implique des sites beaucoup plus lourds et plus lents. Certains thèmes premiums impliquent même d’ajouter un certain nombre de plugins ce qui peut poser des problèmes de compatibilité. Dans le cadre du sur mesure, chaque ligne de code est utile et conçue pour répondre à un besoin. Comme le disait l’architecte allemand Mies Van der Rohe, “less is more”.

 

 

Il sera souvent plus simple et moins onéreux de faire faire développer directement le thème sur-mesure plutôt que d’essayer d’un adapter un à vos besoins.

 

 

Un budget plus maîtrisé

Même si un thème sur mesure coûte bien entendu plus cher à concevoir qu’un thème préfabriqué, il faut bien faire attention à prendre en compte toutes les modifications à faire réaliser. En effet, un choix peu judicieux de thème WordPress peut à la fin coûter plus cher qu’un thème sur mesure.

Comme on a pu le voir, la réalisation d’un thème WordPress sur mesure a des avantages indéniables. Bien entendu, cela ne conviendra pas à tous les types de projets et à tous les budgets. Nous vous recommandons de prendre le temps de la réflexion. Et si d’aventure, vous avez envie d’avoir un site qui vous ressemble avec un thème confectionné sur mesure, pensez à Polux !