Chapitre 3 : Revue des fonctionnalités existantes et conception des nouvelles

Exemple : un client propose un carrousel à un endroit alors que généralement c'est plutôt une mauvaise idée d'un point de vue technique/performances. Un carrousel prends soit du temps à être développé afin qu'il soit le plus léger possible, soit utilise une librairie externe qui peut plomber les performances.

Les librairies de carrousel sont de manières générales assez volumineuses.
De plus lorsque l'on combine le poids des images, le JavaScript et le CSS ça commence à peser lourd pour une fonctionnalité qui est depuis plusieurs années décrite comme très peu utilisée. Il reste néanmoins quelques cas où l'utilisation d'un carrousel reste justifié comme sur une page de type médiathèque. Un endroit où le but est de voir en grand les images d'une galerie.

Le reste du temps c'est clairement déconseillé, malgré la tendance ces dernières années poussée notamment par le marketing.

Pour plus d'informations je vous renvoie vers différents liens comme "Un carrousel n'est pas bon pour votre marketing web", "Avantages et inconvénients des carrousels" ou encore "Do rotating sliders help ou hurt your website ?"

Nettoyage des fonctionnalités superflus ou inutilisées

Ce site étant un site vitrine assez simple, il n'y a pas beaucoup de fonctionnalités mais on peut en distinguer certaines qui sont globalement inutilisées.

Le sacro-saint formulaire de contact

On peut se le dire, le formulaire de contact est présent sur quasiment tous les sites web des plus fréquentés aux plus anonymes. 
Dans mon cas en 4 années j'ai eu environ 70 soumissions pour ~20 pertinentes. 
Malgré l'ajout et la mise à jour de différents outils pour contrer les bots, certains arrivent toujours à passer. On ne peux pas non plus échapper aux soumissions faites par des humains pour demander d'investir dans des bitcoins/NFTs ou pour tester leur nouveau produit révolutionnaire qui permet de doubler le CA en 2 mois...🙃

Vue le travail que demande un formulaire de contact, même simple comme le mien d'un point de vue développement, intégration, outils anti-spam, création et envoie de l’e-mail, ça ne vaut pas le coût d'avoir cette fonctionnalité quand il s'agit juste d'envoyer un message à une adresse e-mail fixe. De plus mon adresse mail est déjà présente sur la page même si elle n'est pas très visible.

Dans ce genre de cas on peut tout simplement bien mettre en valeur l'adresse mail avec un mailto: et pourquoi pas avoir les redirections vers les réseaux sociaux pour contacter la personne plus facilement.

J'aurai gardé le formulaire si il comportait de vraies règles métier comme on peut le voir sur des sites plus importants. 
Quelques exemples de règles qui auraient nécessitées l'utilisation d'un formulaire HTML :

• Envoyer à des adresses mails différentes en fonction du choix du sujet
• Générer un export csv ou un appel API vers un CRM ou autre à la soumission
• Obliger l'internaute à saisir son SIRET (en B2B), son département ou son secteur d'activité pour pouvoir catégoriser et/ou faire des statistiques afin de retrouver ces informations formatées d'une certaine manière dans le mail envoyé 

❌ Le projet peut se passer du formulaire contact
⚠️ Avoir une attention particulière lors des maquettes pour bien mettre en avant les moyens de contacter la personne

Modifications des réalisations

Une des rubriques de ce site tourne autour des réalisations sur lesquelles j'ai le droit de communiquer, effectuées depuis mes débuts en 2013.
La page de détail est assez pauvre et possède le seul carrousel du site pour la partie galerie d'image. Avec la refonte de la liste des réalisations (voir plus bas) il n'est plus nécessaire d'avoir une page détail. En enlevant des pages je perds un peu en SEO mais vu le contenu je n'ai pas besoin d'avoir du référencement dessus.
En enlevant un type de page je simplifie le site ce qui me permettra d'avoir plus d'attention pour des pages plus utiles.
 

❌ Suppression du détail des pages réalisations
⚠️ Supprimer une fonctionnalité ne doit pas être synonyme de perte d'informations. Prévoir dans les nouvelles maquettes l'affichage de ces informations sur la page liste

Espace commentaire

L'espace commentaire est assez peu utilisé, 5 commentaires en un peu plus de 10 articles.
Dans la même lignée que le formulaire de contact le coût de développement, maintenance, poids de la structure HTML et CSS est assez négatif au vue de son utilisation. J'ai eu plus de retours via les réseaux sociaux pour des explications, corrections que depuis l'espace commentaire.

En l'enlevant ça me permettra d'ajouter de la complexité sur le contenu principal.

❌ Suppression de l'espace commentaire

Suppression du méga menu

Clairement ce point peut faire bondir certains experts SEO ou designers. Je vais supprimer mon méga menu. Vu la simplicité de mon site, 5 ou 6 liens de niveaux 1 suffisent pour avoir accès aux pages importantes.
Comme mentionné dans le chapitre précédent, en éco-conception on doit limiter le poids des pages et nombres de requêtes au maximum.

Je prends le pari de faire un header et footer le plus simple possible afin d'avoir une plus grande marge de manœuvre pour le contenu principal. Celui qui au final, a une vraie valeur ajoutée d'un point de vue référencement. Le header et footer étant présents sur toutes les pages, je ne veux pas me pénaliser en ayant 30 ou 40% du quota balise HTML/CSS/image d'utilisé pour ces deux blocs.
Mine de rien un méga menu en HTML et CSS pour desktop et mobile peut peser un poids non négligeable.
De plus mes niveaux principaux actuels ont tous un picto ainsi que des images dans le méga menu Blog ce qui est intéressant d'un point de vue expérience utilisateur mais qui ne me semble pas pertinent en SEO, performances.

C'est clairement un pari que je tente et je sais qu'en limitant mon menu principal au stricte minimum je vais devoir faire un maillage interne plus évolué qu'actuellement.

❌ Suppression du méga menu
⚠️ Améliorer le maillage interne sur la refonte

Ajout de fonctionnalités pour améliorer l'expérience utilisateur

Le contenu ajouté sur ce site étant en très grande majorité des articles de blog, je vais avoir besoin d'ajouter de nouvelles fonctionnalités surtout en vue de la suppression du méga menu.

Liste des articles de blog

La liste des articles est plutôt correcte mais nécessite des ajouts. Avec les billets qui s'empilent je trouve opportun d'ajouter des filtres à facettes notamment pour choisir la catégorie d'article. 
Pour l'instant les contenus tournent souvent autour de mon cœur de métier qui, en étant réducteur, peut se simplifier en Développeur Drupal. Il est de plus en plus probable, comme pour ce premier tome, d'avoir des articles n'étant ni lié au développement ni à Drupal.
Un choix clair et précis est donc nécessaire pour pouvoir filtrer les sujets en fonction du profil utilisateur.

Il faut également supprimer le chargement infini en bas de page qui apporte une certaine animation à la page mais est plus compliqué et lourd à développer qu'une simple pagination. D'un point de vue référencement cette dernière est largement conseillée comparer au chargement infini.

🆕 Ajout de filtres de recherche
🔁 Modification de la pagination
🔁 Refonte graphique des billets de blog pour avoir une image moins grande et donc moins lourde

Détail d'un article de blog

Comme expliqué en introduction de cette partie, les articles de blog sont le cœur de mon site internet d'un point de vue contenu régulier (🙃🤡). 
Avec le format standard, les quickies et maintenant les tomes j'ai besoin de nouvelles strates de mises en page et certaines fonctionnalités manquantes.
La navigation horizontale doit aussi être améliorée avec la remontée d'autres articles assez haut dans la page.
Une fonctionnalité de type sommaire et résumé de l'article est à mon avis nécessaire. J'aime beaucoup lire et rédiger des articles qui peuvent parfois être denses et longs comme celui-ci, mais beaucoup de personnes n'ont pas le temps ou ne veulent pas lire pendant plus d'une minute ou deux. On est de plus en plus habitué à avoir des textes courts, directs, sans précisions notamment depuis l'arrivé des réseaux sociaux du style twitter où on avait l'obligation à l'époque de faire passer son message en 200 caractères seulement. 
Un encart résumé avec liens d'ancrage vers les parties détaillées me semble pertinent.

🆕 Ajout d'un sommaire
🆕 Ajout d'un champ résumé
🆕 Ajout de nouvelles strates de mises en page pour bien différencier les typologies d'articles
🔁 Modification des navigations horizontales vers les autres articles. Les mettre plus en avant et à porté de souris.

Liste des réalisations

Une des rubriques de ce site tourne autour des réalisations sur lesquelles j'ai le droit de communiquer.
Même s'il n'y aura pas tout de suite des centaines de projets, la page ne possède actuellement aucune pagination. En me mettant à la place d'un client potentiel, je pense que je m'intéresserai aux 4-5 derniers projets grand maximum.

N'ayant plus de page détail il faut afficher sur cette liste le maximum d'informations. Un CTA sera également mis en place pour afficher sous forme de pop-in le carrousel avec toutes les captures d'écran.
Cela évite de charger le JavaScript et CSS du carrousel dans la page initiale qui sera probablement très peu utilisé.

Seule cette action de l'internaute permettra au navigateur de lancer les requêtes pour récupérer le carrousel.
🆕 Ajout d'une pagination
🆕 Ajout des éléments textuels présents dans la page détail
🆕 Ajout d'un CTA pour lancer le carrousel des images en pop-in
 

Conclusion

Voici la liste principale des fonctionnalités que j'ai trouvé sur ce projet. Beaucoup d'éléments d'éco-conception font simplement appel du bon sens mais le travail à faire au niveau des fonctionnalités peut être complexe et demandera dans certains cas, quelques sacrifices ou jus de cerveaux pour trouver une alternative acceptable.

Ce chapitre est donc terminé ce qui marque la fin des réflexions et préparations du projet. L'étape suivante concerne le début de la production pure avec la création des maquettes.