La documentation de GitLab fait peau neuve

La documentation de GitLab arbore désormais une toute nouvelle apparence. Ce qui a commencé comme une demande de corrections de design ciblées s'est transformé en une refonte complète avec cinq améliorations majeures :

Un mode sombre : la fonctionnalité la plus demandée est enfin disponible. Alternez entre thème clair et thème sombre en cliquant dans le coin supérieur droit pour améliorer la lisibilité et réduire la fatigue oculaire.

Un alignement de la marque : notre documentation reflète désormais les couleurs et le design de notre site web et de notre interface utilisateur afin de garantir une expérience cohérente à travers toutes les propriétés de GitLab.

Des retours simplifiés : les utilisateurs peuvent désormais donner leur avis (positif ou négatif) et laisser des commentaires sur n'importe quelle page de la documentation.

Une navigation repensée : nous avons déplacé la navigation principale vers le haut et restructuré notre barre latérale gauche pour rendre nos plus de 2 300 pages moins intimidantes et plus faciles à parcourir.

Une dette technique résolue : des dizaines de corrections mineures ont été apportées à la typographie, à l'espacement, aux blocs de code et aux incohérences visuelles qui s'étaient accumulées au fil des ans.

Pourquoi maintenant ?

Au début de l'année, sous la direction de Sarah German, notre équipe d'ingénierie chargée de la documentation a mené à bien un projet crucial de refonte de la plateforme, migrant de Nanoc vers Hugo. Bien que largement invisible pour les utilisateurs, ce changement a permis d’améliorer considérablement les performances (avec des compilations locales 130 fois plus rapides et des compilations complètes 30 fois plus rapides ) et a fourni la base technique solide nécessaire à ces améliorations.

Cette refonte était une étape essentielle qui nous a permis de nous concentrer sur l’amélioration de l'expérience utilisateur. Examinons de plus près ces changements.

Mode sombre

Probablement la plus grande nouveauté parmi ces améliorations : le mode sombre est maintenant disponible sur l'ensemble de la documentation. Il vous suffit de modifier le paramètre dans le coin supérieur droit, et le site se souviendra de votre préférence. Pour de nombreux utilisateurs, le mode sombre rend le contenu plus lisible et réduit la fatigue oculaire.

Alignement de la marque avec le site web

Le nouveau design crée une harmonie visuelle entre notre documentation et l'expérience GitLab au sens large. Nous avons intégré la palette de couleurs et les éléments de design modernes de GitLab tout en conservant l'aspect épuré et fonctionnel que les utilisateurs attendent d’une documentation technique.

La page d'accueil mise à jour se concentre sur nos principaux domaines de documentation, y compris les tutoriels et les guides de démarrage qui aident les nouveaux utilisateurs à se familiariser avec GitLab.

Mécanisme de retours simplifié

Nous avons simplifié le processus des retours. Au lieu d'obliger les utilisateurs à quitter la documentation et à créer des tickets GitLab, ils peuvent désormais laisser des commentaires et rédiger des avis sans quitter le site. Faites défiler n'importe quelle page de la documentation vers le bas pour voir cette nouvelle fonctionnalité en action.

Refonte de la navigation

L'un de nos plus grands défis consistait à organiser plus de 2 300 pages de manière à ne pas submerger les utilisateurs. Notre ancienne navigation à gauche, bien que complète, était plutôt intimidante :

Dans cette refonte, la navigation principale a été déplacée vers le haut. Les sections de table des matières sont plus courtes, plus faciles à gérer et plus simples à parcourir :

Cette structure reflète mieux les relations entre les fonctionnalités et rend les sections individuelles plus digestes.

Mises à jour stylistiques et dette technique

Au fil des ans, de petites incohérences de style s'étaient accumulées : remplissage irrégulier dans les listes, espacement supplémentaire autour des alertes et divers problèmes de typographie. Bien qu'elles puissent sembler mineures, ces incohérences créaient une expérience légèrement dérangeante pour les utilisateurs quotidiens.

Nous nous sommes tout particulièrement penchés sur nos onglets et blocs de code au cours du processus de refonte afin de mieux les définir.

Auparavant, les onglets contenant du code ressemblaient à ceci :

Maintenant, avec quelques petits ajustements, ils ressemblent à ceci :

Ces corrections « mineures » peuvent sembler insignifiantes individuellement, mais collectivement, elles créent une expérience beaucoup plus soignée et professionnelle.

Et maintenant ?

Cette refonte représente la façon dont nous itérons chez GitLab : nous apportons des améliorations significatives et construisons un avenir encore meilleur. Nous prévoyons de continuer à affiner la structure et à ajouter des fonctionnalités qui aideront les utilisateurs à trouver plus facilement ce dont ils ont besoin.

Les retours des utilisateurs guideront nos prochaines itérations, et avec notre nouveau mécanisme de retour simplifié, nous sommes mieux placés que jamais pour répondre directement aux attentes des utilisateurs de notre documentation.

L'équipe

Cette transformation a été le fruit d’un véritable travail d’équipe. Félicitations à UX Papercuts et Julia Miocene pour avoir transformé ce qui n'était au départ qu'une simple demande en une vision complète. Merci aux ingénieurs de l’équipe Technical Writing : Sarah German, Pearl Latteier, et Hiru Fernando, qui ont donné vie à ces améliorations.

Le nouveau design trouve le juste équilibre entre densité des informations et clarté visuelle, modernise notre site tout en conservant les normes d'utilisabilité et d'accessibilité et représente une étape importante en matière d'expérience utilisateur et de design visuel.