L’optimisation des ressources lors de l’UI design est un processus qui consiste à concevoir des produits, des systèmes ou des processus en utilisant les ressources disponibles de la manière la plus efficace possible. Cela implique de prendre en compte les contraintes de coûts, de temps et de qualité tout en cherchant à maximiser la performance et l’efficacité. Si vous souhaitez vous faire accompagner, n’hésitez pas à contacter notre agence UX/UI design de Bordeaux.
- 1. Éviter animation Javascript et Css
- 2. Optimiser les images pour améliorer votre UI design
- 3. Préférer les glyphs et les images vectorielles autant que possible
- 4. Utilisation de balises "alt"
- 5. Utilisation de CDN
- 6. Adapter les Vidéos sur un site
- 7. Préférer des polices de caractère standard
- 8. Eviter les scroll infinit et mettre un système de pagination
- 9. Minimiser les pages erreurs
- 10. Optimisation des pdf
1. Éviter animation Javascript et Css
Les animations Javascript et Css alourdissent la page web. En effet, ces animations nécessitent des appels vers le serveur et beaucoup de ressources pour être affichées l’écran de l’utilisateur. Les animations vont donc alourdir votre page, détériorer votre expérience utilisateur et votre impact carbone. C’est pour cela qu’elles doivent être utilisées uniquement si le besoin est justifié et réfléchi.
Limiter les animations
Les animations posent également aussi des problèmes d’accessibilité. En effet, trop d’animations peuvent perturber les utilisateurs, car il y a trop d’information à décrypter et les utilisateurs ne savent plus sur quoi se concentrer. Généralement, elles sont utilisées comme simples décorations, et ne sont pas nécessaires d’un point de vue parcours utilisateur, ni d’un point de vue écologique. Cependant, il existe des animations qui améliorent l’expérience utilisateur comme par exemple, une barre de chargement.
Éviter les GIFs animés et les carrousels
Commençons par une règle d’accessibilité importante : les animations doivent pouvoir être arrêtées par les utilisateurs. Le problème avec les GIFs animés, c’est qu’ils ne peuvent pas être contrôlés. Pour une meilleure expérience utilisateur, mais aussi pour ne pas ajouter du contenu inutile à votre site, il faut éviter d’utiliser les GIFs.
Les carrousels, quant à eux, sont aussi à éviter, car ils alourdissent vos pages et nécessite beaucoup de ressources en UI design. En effet, les carrousels sont composés de très grosses images, affichant seulement une image à chaque fois et demandant beaucoup de code Javascript pour fonctionner. Pour suivre une démarche écoresponsable, il est essentiel d’alléger les pages et de réduire les ressources du site. Donc, plutôt que de mettre des carroussels, il vaut probablement mieux de mettre uniquement des images statiques bien choisies.
2. Optimiser les images pour améliorer votre UI design
Afin d’optimiser les images pour le web et d’adapter les tailles à l’emplacement, vous devez faire attention à conserver une qualité d’image correcte. Une image ne doit pas dépasser 150 Ko pour 1900 px. Il faut retailler les images avant de les afficher sur le navigateur. Les images doivent être adaptées à la taille de votre écran. Pour cela, il faut éviter de redimensionner les images en utilisant les attributs HEIGHT et WIDTH du code HTML. Voici plusieurs conseils pour optimiser vos images :
Préférez une infographie en svg
Le format SVG ne s’appuie pas sur des pixels comme un format matriciel, mais utilise plutôt du texte XML. Résultat : vous pouvez mettre à l’échelle à l’infini les images SVG sans aucune perte de qualité.
Le fichier SVG a pour avantage d’être de petite taille et de pouvoir être mise à l’échelle sans perte pour les illustrations, les formes et le texte simples.
L’utilisation du lazyload ou le chargement progressif
Le chargement progressif d’images signifie charger des images sur votre site de manière asynchrone. En d’autres termes, le chargement d’images et d’autres contenus se charge sur votre page Web au moment où l’utilisateur en a besoin. Le Lazy load peut considérablement améliorer la vitesse de chargement des pages, en particulier lorsque qu’il y a de nombreuses images et articles sur un site web. Le lazy loading mobile offre aux utilisateurs un avantage plus important, car ils ne consommeront de données mobiles pour charger des images qu’ils ne verront pas. C’est une optimisation importante en design UI UX.
Voici comment fonctionne le Lazy Load concrètement :
- Le navigateur construit la structure de la page web sans télécharger les images et les vidéos.
- Il utilise JavaScript pour déterminer les images et vidéos à télécharger en fonction du contenu qui est initialement visible lorsque la page se charge.
- Le téléchargement et l’affichage de vidéos supplémentaires sont retardés jusqu’à ce que l’utilisateur en ai le besoin.
Résultats : Un impact significatif sur les performances des sites qui ont beaucoup d’images, des vidéos intégrées. Retrouvez notre article dédié pour activer le Lazy Load.
Utilisation de sprites
L’utilisation des sprites permet de regrouper les images et de réduire le nombre de requêtes à effectuer. En effet, un grand nombre de requêtes peut compromettre l’expérience de l’utilisateur et, par conséquent, la perception du contenu par les moteurs de recherche. Pour réussir à mettre en place des sprites, il faut avoir les bases du CSS et du HTML.
La technique des sprites CSS consiste à regrouper plusieurs images dans un même fichier. Ce dernier est intégré en guise d’arrière-plan du container voulu. Ensuite, on applique le style background-position pour afficher la partie souhaitée de l’image. Les sprites CSS sont souvent utilisés pour les petites images, les miniatures ou les icônes. En effet, ça permet d’améliorer les performances d’un site puisqu’ils vont réduire le nombre de requêtes au serveur et ainsi les ressources nécessaires.
Utilsation de webm et webp
WebP est un format d’image moderne qui prend en charge la compression sans perte ou avec perte. Il offre une qualité photo similaire à l’originale avec une taille jusqu’à 35 % plus petite. De plus en plus de navigateurs Web utilisent ce format de fichier qui est bien optimisé pour le web. C’est un point essentiel dans l’optimisation des ressources en UX/UI.
Pour compléter l’utilisation du webP, le format vidéo WebM a été développé pour intégrer les vidéos dans les sites web HTML5. C’est une alternative open source aux autres formats vidéo et un format vidéo optimisé pour une utilisation sur le web.
La compression avec perte (Lossy) ou sans perte (Lossless) doit être considérée, car chacune d’entre elles peut réduire la taille d’une image. La compression Lossy offre la meilleure représentation de l’image originale de haute qualité à un poids plus léger alors que la compression Lossless préserve la qualité de l’image. Dans la plupart des utilisations sur le web, il est préférable d’utiliser la compression avec perte, car il est possible de facilement compresser une image bien au-delà de 70% sans perte de qualité. En revanche, si vous souhaitez afficher des photographies ou des œuvres d’art photographiées, la compression sans perte sera la meilleure option. Retrouver plus de détails dans notre article dédié.
3. Préférer les glyphs et les images vectorielles autant que possible
Les images vectorielles sont constituées de formes géométriques tracées à l’ordinateur comme des lignes, des courbes, des points et des couleurs… Leur atout principal permet de facilement les redimensionnées. Elles peuvent être agrandies indéfiniment sans être jamais pixellisées. En effet, elles sont sans perte de données lorsqu’elles sont compressées et rendent un nombre illimité de couleurs sans les modifier. Le format le plus courant pour télécharger une image vectorielle est SVG qui est un format optimisé pour le web pour un fichier vectoriel. Il est facilement éditable et ajustable, un atout pour l’UI design.
Un glyphe est un terme qui désigne la représentation visuelle d’un caractère. Les polices utilisées par un site web contiennent différents ensembles de glyphes qui représentent les caractères de la police.
Les images vectorielles et glyphes doivent être préféré aux images dites “classiques” car ils pèsent moins lourd que les photos. Lorsque les images sont utilisées qu’à titre décoratif, alors il faut privilégier le vectoriel.
4. Utilisation de balises “alt”
Les moteurs de recherche ne sont pas encore capables de comprendre une image, pour cela, il est important d’ajouter du texte “Alt”, un titre et une description. Les balises “alt” pour les images vont permettre d’améliorer l’accessibilité et le référencement. En effet, il permet de décrire une image aux personnes qui ne peuvent pas la voir (robots, personnes malvoyantes, Google…). D’un point de vue référencement naturel, la balise “Alt” est essentielle, puisqu’elle permet à Google d’identifier le contenu de l’affichage.
Voici 3 règles à respecter pour avoir des balises “Alt” de qualité :
- Faire une description précise et concise pour décrire l’image
- Intégrer le mot clé dans la balise “Alt” sans en abuser : cela vous desservira pour le référencement, Google comprend si vous essayez d’abuser de votre mot clé et vous sanctionne
- Utiliser une balise “Alt” pour les Call To Action (CTA)
5. Utilisation de CDN
Un CDN (Content Delivery Network) est un ensemble d’ordinateurs reliés entre eux via Internet. Ils sont, ensuite, mis en réseau et ont pour but de rapprocher et diffuser rapidement le contenu de sites internet à des utilisateurs. Pour cela, le contenu envoyé par le site web reste statique. Ce contenu envoyé doit cependant être rafraîchi très souvent pour que les utilisateurs aient accès à toutes les nouveautés le plus vite possible après leur publication.
Utiliser un CDN permet de réduire les temps de chargement. En effet, les serveurs CDN stockent les fichiers de votre site web en cache, tels que vos pages HTML, images et vidéos, puis les transmettent aux utilisateurs. Cela est important, afin de minimiser la distance entre les utilisateurs et les serveurs d’origine. Un CDN web permet donc une diffusion rapide du contenu web. Vous pouvez en discuter avec votre webdesigner UI afin qu’il vous conseille au mieux par rapport à votre site et votre activité.
Voici quelques avantages d’avoir un CDN :
- Amélioration de la sécurité du site web : la plupart des CDN mettent en place des CAPTCHA ou une authentification multifactorielle pour éviter les attaques.
- Réduction de la consommation de bande passante : c’est donc plus économique énergétiquement.
- Amélioration de SEO : le CDN améliore la vitesse du site et l’expérience de l’utilisateur, ce qui aide à être mieux classé sur Google.
- Meilleure utilisation des médias riches : un CDN facilite l’utilisation de formes de médias riches, comme les images haute définition, les infographies et les vidéos.
La procédure de mise en place d’un CDN n’est pas complexe, notamment si votre hébergeur web propose une intégration CDN par défaut.
6. Adapter les Vidéos sur un site
Afin de garantir une utilisation optimale des vidéos sur un site web, il faut éviter de charger directement une vidéo sans passer par une plateforme. En effet, cela alourdit considérablement le poids de la page et n’offre pas un streaming de qualité. Cela aura un impact négatif sur l’expérience utilisateur et les ressources en UI design. Pour cela, la meilleure solution consiste à héberger les vidéos, en amont, sur une plateforme dédiée comme Youtube ou Vimeo.
Éviter les lancements automatiques
Il est important d’utiliser des images fixes avec bouton d’action (CTA) pour afficher et lancer une vidéo sur un site. En effet, l’utilisateur va apprécier se sentir libre de lire ou non la vidéo. Il faut empêcher au maximum l’utilisateur de se sentir contraint ou forcé, il doit rester maître de ses actions. Pour cela, les plateformes comme Youtube ou Vimeo, propose des boutons de partage qui permettent de récupérer le code à insérer dans l’administration du site. Si vous utilisez WordPress, c’est encore plus simple, il suffit de copier-coller directement le lien de la vidéo dans l’éditeur.
Adapter les vidéos aux contextes de visualisation
Pour adapter au mieux les vidéos, il faut prévoir plusieurs formats avec différentes tailles, compressions audio… selon le contexte de lecture des vidéos. Par exemple, sur ordinateur de bureau, une tablette Wi-Fi, un smartphone… L’idéal, c’est de prévoir 3 tailles différentes x 3 encodages différents, soient 9 versions de la même vidéo. Avec cela, vous pourrez répondre à la plupart des contextes.
Dans le cadre d’un design optimisé, il faut avoir une optimisation complète d’une vidéo sur un site web. Pour cela, il est important de la réalisée en dehors du site web en utilisant des services comme Youtube ou Vimeo. En effet, ils proposent, par défaut, plusieurs formats optimisés (SD, HD, etc.).
7. Préférer des polices de caractère standard
Le choix de la typographie de votre site web est essentiel, car il reflète l’image que vous souhaitez donner. Pour rendre un contenu attirant et agréable à lire, il faut que sa mise en forme soit impeccable. L’efficacité et la lisibilité du message est influencée par la typographie de votre site web, elle va permettre d’harmoniser le fonds et la forme du contenu. Le but est donc de séduire votre public en vous appuyant sur les émotions de vos utilisateurs.
Choisir une police qui vous correspond
Chaque police à une personnalité, son choix est donc important, car il va permettre la lisibilité, mais surtout la façon dont l’utilisateur va percevoir votre contenu, comme un contenu formel, créatif, interactif, décontracté…
Il existe 5 familles génériques de polices :
- Serif : polices à empattement comme Times New Roman et Georgia
- Sans-serif : polices sans empattement comme Arial, Helvetica et Verdana
- Cursive : polices simulant l’écriture à la main comme Lucida Handwriting
- Fantaisie : polices de décoration, souvent utilisées pour les titres comme Impact et Fraktur
- Monospace : polices à largeur fixe comme Courier New et Lucida Console
Afin de mettre en valeur ses idées, il faut que votre contenu soit mis en valeur avec les reliefs, qu’il soit hiérarchisé et formaté grâce à des titres et sous-titres sans dépasser le nombre de polices standards maximum à utiliser qui est de 3.
Favoriser les polices standards
Afin d’économiser de la bande passante et permettre un meilleur affichage de votre site, il est préférable d’opter pour des polices standards puisqu’elles sont déjà présentes sur l’ordinateur de vos visiteurs. Plus votre contenu sera lisible et adapté aux standards de Google, plus votre page sera visible dans les résultats de recherche.
8. Eviter les scroll infinit et mettre un système de pagination
Le scroll infini permet de scroller vers l’infini sur des sites qui contiennent beaucoup de contenu. Concrètement, lorsque la page se rafraîchit, du contenu apparaît automatiquement lorsque vous scroller. C’est le principe même d’Instagram, on peut scroller à l’infini. Le scroll infini permet de garder un utilisateur sur un site plus longtemps et ainsi d’augmenter son engagement. Même si les utilisateurs ne scroll pas longtemps, sur une version mobile, le scroll reste plus intuitif et est préféré aux clics. Bien que le scroll infini ait des points positifs, il y aura un impact sur la vitesse de chargement des pages. Plus il y a de contenu à charger, et plus le temps de chargement sera long.
Dans une démarche d’écoconception et d’expérience utilisateur optimal, il faut préférer la fonctionnalité de pagination au scroll. Le principe est simple : une page a une quantité d’informations maximale. Lorsqu’on arrive à la fin du contenu, on trouve un système de pagination qui permet d’accéder aux autres pages. Comme nous l’avons vu dans l’article Les 6 points UX parcours utilisateur d’un site éco-conçu, vous pouvez mesurer, grâce à Hotjar et aux headmaps. Les zones les plus scrollés qui vont vous permettre d’optimiser la quantité et la répartition de vos informations.
La pagination va permettre d’augmenter la conversion sur votre site web. En effet, elle est efficace lorsque l’utilisateur est à la recherche de quelque chose de précis. Elle permet de se souvenir de l’emplacement d’un élément qu’on a déjà consulté. La pagination donne un effet plus structurer à la page et permet à l’utilisateur de ne pas se perdre.
9. Minimiser les pages erreurs
Votre site web évolue avec le temps, il est inévitable que certaines de vos ressources soient déplacées et supprimées. Chaque fois que votre visiteur clique sur un mauvais lien, il est redirigé vers une page “404 introuvable”. Cette erreur entraîne une perte de confiance du public ainsi que du classement Google. Pour les détecter et les minimiser, vous devez analyser votre site à la recherche de tels liens. Certains outils de test de vitesse peuvent identifier si votre site web contient de requêtes erreur.
Voici quelques outils, ceux-ci vous indiqueront quelles URL doivent être corrigées : GTMetrix ou Pingdom. De même, vous pouvez utiliser Google Search Console pour vérifier les liens rompus. Cet outil identifiera toutes les erreurs d’exploration de votre site que le robot de recherche Google a rencontrées en essayant d’explorer votre site.
Quoi que vous fassiez, il est indispensable de créer en parallèle une page d’erreur 404 personnalisée à l’image de la marque. Elle doit contenir au moins un lien pour ramener l’utilisateur perdu vers une page du site. Il est préférable de rediriger vers la page d’accueil. L’idée est de toujours proposer une solution au problème et de garder le visiteur sur votre site. Dans une démarche d’écoconception et d’après l’UX/UI designer, il est préférable de ne pas inclure d’image sur votre page d’erreur. Si vous devez absolument insérer une image, il faut choisir le format SVG.
10. Optimisation des pdf
Il n’y a rien de plus frustrant qu’un fichier qui prend beaucoup de temps à se télécharger ou à s’ouvrir. C’est souvent à cause des fichiers volumineux. Si votre fichier n’est pas optimisé et qu’il contient des images, il s’alourdit et donc ralentit le processus d’ouverture et de téléchargement. C’est pour cela qu’il est important de réduire votre fichier PDF. Tout comme une page web, votre PDF doit avoir un bon contenu, il doit comporter plus de texte que d’images. Il doit contenir des informations pertinentes qu’on ne trouve pas sur votre site internet.
Avant la mise en ligne de votre PDF, il faut optimiser votre fichier pour le web. Afin d’obtenir un meilleur chargement de votre fichier PDF, il faut réduire sa taille en le compressant avant de l’exporter. Pour plus de précision sur l’optimisation d’un fichier PDF, retrouvez notre article dédié.
Pour aller plus loin :
