Concevoir des Principes de Navigation
Chez OpenClassrooms, nous nous sommes confrontés à la lourde tâche d’opérer la refonte de la navigation de nos interfaces en établissant des principes de navigation.
L’envergure de notre produit nous a amené à repenser notre système de navigation. Nous manquions d’une structure rationnelle et d’homogénéité entre nos interfaces. De plus, l’augmentation des effectifs du pôle design rendait plus difficile l’alignement de nos pratiques. La conception de principes de navigation était devenue une nécessité pour la viabilité de l’expérience utilisateur.
L’idée est belle sur le papier, son application beaucoup moins évidente sur notamment les aspects suivants : tout d’abord comment avoir une représentation globale de la navigation ? Ensuite, comment trouver la bonne structure et mise en forme des principes pour faciliter leurs usages par l’équipe Product Design et l’implémentation par les développeurs ?
À travers le cas d’OpenClassrooms nous verrons comment nous avons procédé, comment nous avons surmonté les difficultés rencontrées et comment nous sommes passés d’un UI Kit pour spécifier notre navigation à des principes de navigation.
Pour vous spoiler, nous avons cartographié l’existant, utilisé les principes de l’Object-Oriented UX et ceux de l’Atomic Design.
L’utilisateur au centre de la méthodologie
Nous avons décidé d’appliquer une méthodologie UX standard pour concevoir les principes :
Nous avons démarré par le recueil d’informations, suivi de la structuration des contenus, puis le prototypage d’hypothèse et enfin validation à travers des tests utilisateurs. Si l’hypothèse est validée, nous consolidons le prototype en principe de navigation et dans le cas inverse nous revenons sur certaines phases du processus.
Recueil et état des lieux des pratiques de navigation
Sur les dernières années, notre plateforme a beaucoup évolué : le passage du Site du Zéro à OpenClassrooms, la mutation vers une école en ligne reconnue par l’État, l’intégration du modèle d’alternance, le lancement d’applications…. L’envergure prise sur les dernières années a fait naître plusieurs problèmes pour les utilisateurs :
- Écrans trop chargés
- Navigation complexe
- Manque de cohérence entre nos plateformes et formats
Nous voulions préparer l’arrivée de nouveaux supports et de nouvelles fonctionnalités avec une navigation capable d’absorber notre rythme de production.
Les premières étapes du projet :
- Analyse de la trace : analyse des pages les plus consultées par type d’utilisateur et les enchaînements d’écrans les plus courants.
- L’état de l’art : approfondir les bonnes pratiques, les normes d’accessibilité et les guidelines. (W3C, Guidelines, recherches utilisateurs,…)
- Benchmark : la spécificité de notre recherche était d’observer comment les services aux périmètres fonctionnels larges comme Airbnb, Uber, YouTube,… organisent la navigation au sein de leurs écosystèmes de plateforme. Voici quelques-unes des questions venues pendant le benchmark: “Une application par type d’utilisateur du service ou une application pour plusieurs types ? Homogénéité avec les systèmes d’exploitation ou cohérence de tous les supports : iOS/Android/Web ? Même périmètre fonctionnel sur tous les appareils ? etc”
Jusqu’ici tout va bien, les choses se compliquent ensuite avec la structuration du service.
Cartographier et structurer un système complexe
En creusant, nous nous sommes rendu compte de la largeur du périmètre de la navigation qui comprend :
- L’architecture de l’information
- Les fonctionnalités
- La gestion des différents types d’utilisateurs
- Les comportements entre les plateformes et les formats
Pour aborder cette complexité, nous avons fait le choix de cartographier notre écosystème à travers un workshop fait maison.
Voici les étapes que nous avons suivies :
- Lister et organiser les plateformes et points de rupture que nous possédons.
2. Lister et organiser les types d’utilisateurs.
3. Situer les fonctionnalités et contenus selon les deux axes précédents.
Nous avons pu tirer plusieurs leçons de cette cartographie et ainsi trancher, en voici les principales :
- Nous avons 7 types d’utilisateurs aux besoins distincts qui composeront des rôles.
- Nous avons deux fonctionnalités centrales à tous les utilisateurs et sur tous les formats.
- Très peu d’utilisateurs mélangent plusieurs rôles
- Nos applications mobiles couvrent nos deux types d’utilisateurs principaux
- Les besoins fonctionnels et de contenu par type d’utilisateur sont identiques sur tous les formats
Ces leçons nous ont permis de trancher sur certaines questions que nous nous posions lors du recueil.
La conception des principes de navigation
Comme pour la construction d’un Design System, la conception des principes de navigation s’est faite de manière itérative en passant par la méthodologie de conception représentée ci-dessus.
Cette démarche est coûteuse en temps, mais indispensable pour l’établissement de PRINCIPES à long terme.
Le résultat actuel est imparfait… Et nous le savons !
Ce qu’il faut savoir pour concevoir des règles génériques
Comment avons-nous réussi à sortir de ce cycle qui peut être interminable sur un périmètre aussi large ?
Cela tient en deux mots : priorisation et itération.
Priorisation : La réalisation de tests utilisateurs sur un périmètre aussi large avec de nombreux profils peut prendre une ampleur démesurée. Nous avons décidé de cibler les utilisateurs principaux et de concentrer nos efforts sur un seul profil parmi une dizaine. Nous avons fait en sorte que ce profil soit le plus représentatif possible des usages, mais aussi des enjeux stratégiques de notre service.
Itération : nous avons itéré à plusieurs niveaux, avec plusieurs sessions de test et de nombreux échanges avec les développeurs et les designers. Mais surtout ce qui fait que les principes de navigation ne sont pas encore finis et ne le seront jamais est que le résultat actuel est imparfait… Et nous le savons ! Les principes de navigation vont continuer d’évoluer avec les nouveaux retours utilisateurs, les nouveaux patterns de design, les nouveaux besoins fonctionnels…. Le rôle des principes est de permettre l’évolution de notre navigation de manière structurée et rationnelle.
Mise en forme des principes
Deux théories sont à la base de la mise en forme de nos principes de navigation :
Atomic Design de Brad Frost pour matérialiser nos principes. Nous avons travaillé sur deux composants : les templates et les organismes qui sont venus compléter notre Design System.
Object-Oriented UX de Sophia V Prater. L’OOUX nous a permis de rationaliser notre structure avec une approche orientée objet de contenu et ainsi définir seulement 6 templates de page et 8 organismes de navigation avec leurs périmètres associés.
Les templates de page pour l’ensemble de nos interfaces:
- Presentation page : page statique de présentation
- Dashboard : regroupement des contenus, fonctionnalités et accès pour un rôle (ex : tableau de bord étudiant)
- Object list : liste d’éléments de même nature (ex : liste des cours)
- Object : le détail d’un élément (ex : un cours)
- Sub-object : des sous-éléments (ex : un chapitre)
- Formulaire (ex : inscription)
Les organismes de navigation :
- Top navigation : fonctionnalités centrales et génériques à tous les rôles
- Inter Environment : changement de rôle
- Intra Environment : navigation principale au sein d’un rôle
- Profile : gérer ses informations personnelles
- Contextual : navigation spécifique à un contexte
- Object elements : navigation sous-jacente à un objet parent
- Table of contents
Nous avons réalisé une matrice par format d’écran et par template de page. À chaque template sont associés des organismes ,obligatoires ou non, qui vont composer la navigation.
En plus des organismes, des règles générales détaillent certains comportements comme :
- Les relations des différents templates
- Les animations entre les pages
- Les dynamiques de page (nouvel onglet, pop-in, pop-up, dialog)
- L’usage du fil d’Ariane
- Les comportements au scroll
- …
Pour chaque format et chaque template sont décrits les organismes de navigation obligatoires et facultatifs.
Cette documentation nous permet aujourd’hui d’homogénéiser la navigation sur l’ensemble de nos plateformes, de structurer nos contenus et de ne plus re-concevoir encore et encore les mêmes éléments.
Déclinaison de la navigation
Pour nos applications IOS où le périmètre fonctionnel est plus restreint, nous nous adressons uniquement aux apprenants de notre plateforme. Nous avons créé une version “Light” de la navigation permettant de répondre de manière plus appropriée au contexte d’apprentissage en mobilité.
Cette version “light” reprend tout de même les fondamentaux de nos principes de navigation permettant de garder l’homogénéité entre nos plateformes et permettant les évolutions si besoin.
Et l’implémentation ?
Afin d’implémenter ce travail transversal dans une production Agile, nous utilisons aujourd’hui les nouveaux principes pour toutes les nouvelles fonctionnalités que nous délivrons.
Nous utilisons une stratégie “bottom up” en commençant par mettre à jour la nouvelle navigation dans les pages les plus basses de l’architecture de l’information et en remontant les niveaux un par un.
Lors de la conception, nous avons fait attention avec les développeurs à ne pas créer trop d’interdépendance entre les éléments, facilitant ainsi une production morcelée.
À retenir :
- Utilisez une démarche centrée utilisateur pour asseoir la pérennité des principes (même si le processus est long).
- Cartographiez vos fonctionnalités/contenus en fonction des formats et des utilisateurs pour avoir une vue d’ensemble de votre écosystème et prendre les décisions.
- Les principes de navigation permettent de structurer la navigation et faciliter son évolution.
- Ne visez pas la perfection, cela viendra à force d’itération et d’usage.
- Simplifiez et rationalisez au maximum la mise en forme pour faciliter l’usage par les designers.
