SAP Fiori Design Guidelines

Les guidelines décrivent l'aspect, le comportement et la communication attendus des applications SAP Fiori. Les principaux domaines sont :

• Principes — les cinq idées qui sous-tendent chaque décision de design.
• Fondements visuels — couleurs, typographie, iconographie, espacements, thèmes et formulation.
• Éléments d'interface — des recommandations par contrôle : quand l'utiliser, quand l'éviter et comment il doit se comporter.
• Floorplans — des structures de page complètes pour des tâches récurrentes, comme le list report, l'object page et l'overview page.
• Patterns — des comportements transverses comme la messagerie, la gestion des drafts et la navigation.
• UI kits — des fichiers de design qui permettent aux designers de maquetter des écrans avec les mêmes composants que ceux des développeurs.

Il existe des éditions distinctes pour le web, iOS et Android, car les applications mobiles natives suivent les conventions de leur plateforme tout en conservant le langage de design SAP Fiori. Depuis 2025, les guidelines font partie du portail SAP Design System, plus large, sur sap.com. Les SAP Fiori Design Guidelines sont donc un design system complet, pas une simple feuille de style.

SAP définit cinq principes pour l'expérience utilisateur SAP Fiori :

Le cinquième principe demande une expérience qui crée un lien émotionnel avec les utilisateurs et leur facilite le travail. Les principes sont volontairement abstraits. Ils deviennent concrets dans les floorplans et les recommandations sur les éléments d'interface, auxquels les revues de design se réfèrent généralement. Les cinq principes de design SAP Fiori sont l'étalon ; le reste des guidelines montre comment l'atteindre.

Les guidelines décrivent le résultat visé ; les technologies le produisent.

• SAPUI5 fournit des contrôles qui suivent déjà visuellement les guidelines, mais un développeur peut toujours les combiner en un écran qui enfreint le comportement prévu.
• SAP Fiori elements implémente certains floorplans sous forme de templates pilotés par les métadonnées. Les recommandations de SAP aux développeurs citent la conformité SAP Fiori automatique parmi ses avantages, car la mise en page et le comportement proviennent du framework de SAP.
• Les applications SAPUI5 freestyle n'atteignent la conformité que par un travail de design délibéré, puisque chaque décision de mise en page est spécifique.
• Les UI5 Web Components apportent le même langage visuel à d'autres frameworks web.

C'est pourquoi de nombreuses équipes choisissent d'abord le floorplan, puis la technologie : si un floorplan convient, SAP Fiori elements le livre avec moins d'effort. Les SAP Fiori Design Guidelines répondent à « que doit être cette application ? », tandis que SAPUI5 et SAP Fiori elements répondent à « comment est-elle construite ? ».

Le design visuel de SAP Fiori a évolué à plusieurs reprises depuis les premières applications centrées sur les tâches, avec des familles de thèmes comme Belize et Quartz, suivies de l'actuelle famille de thèmes SAP Horizon. Chaque étape a conservé les principes, mais a changé le langage visuel, l'expérience du launchpad et les patterns disponibles. Dans SAPUI5, SAP Horizon se présente sous forme de thèmes comme Morning Horizon et Evening Horizon.

Deux conséquences pratiques en découlent :

1. Les recommandations dépendent de la version. Les guidelines web sont versionnées en fonction des versions de SAPUI5, et SAP ne met à jour que la dernière version des guidelines ; une équipe sur un ancien front-end server on-premise doit donc vérifier quelles recommandations correspondent à sa version.
2. L'emplacement a changé. Les guidelines se trouvent désormais dans le portail SAP Design System, et les anciens favoris y sont redirigés.

Lire les SAP Fiori Design Guidelines d'une mauvaise version peut transformer une revue de design en débat sur des fonctionnalités dont le système ne dispose pas.

Les guidelines sont les plus utiles aux moments où les décisions de design se figent :

• Expression des besoins : décrire une application spécifique comme « un list report avec une object page » donne aux métiers et à l'IT un vocabulaire commun avant que quiconque n'écrive du code.
• Choix de la technologie : si un floorplan standard couvre le besoin, SAP Fiori elements est généralement la voie la moins coûteuse ; sinon, le développement freestyle est justifié.
• Revues de design : les relecteurs peuvent s'appuyer sur une recommandation précise au lieu de débattre de goûts.
• Recette : les recommandations sur la formulation, la gestion des messages et l'accessibilité fournissent aux testeurs des critères concrets.

Exemple : Alder Manufacturing veut un écran permettant aux acheteurs d'examiner les confirmations fournisseur de Cedar Office Supply. Vérifier d'abord les floorplans montre qu'un list report avec une object page convient, ce qui tranche à la fois le design et l'approche de construction. Les SAP Fiori Design Guidelines sont les plus rentables lorsqu'on les consulte avant la première maquette, pas après la première réclamation.

1. Traiter les guidelines comme une documentation pour développeurs. Elles décrivent l'expérience ; les détails d'implémentation se trouvent dans le SDK SAPUI5.
2. Concevoir une mise en page spécifique alors qu'un floorplan convient. Les mises en page spécifiques coûtent plus cher à construire et à maintenir, et s'éloignent des applications de SAP.
3. Lire l'édition web pour une application mobile native. iOS et Android ont leurs propres éditions.
4. Négliger la formulation et les messages. Les libellés, les états vides et les textes d'erreur font partie des guidelines, et les praticiens rapportent souvent que ce sont les premiers points relevés par les relecteurs.
5. Confondre conformité et adéquation à la tâche. Une application peut respecter toutes les guidelines et pourtant modéliser les mauvaises étapes. L'adéquation au processus doit être vérifiée séparément.

Les SAP Fiori Design Guidelines sont un standard partagé, et elles fonctionnent le mieux lorsque toute l'équipe, pas seulement les designers, les utilise.