Concevoir une app mobile : Guidelines vs Design System

Si vous concevez une app mobile, plusieurs défis vous attendent. L’un des chantiers structurants sera de répondre à la question suivante : Devez-vous suivre à la lettre les recommandations des guidelines d’Apple et/ou de Google, réinventer les composants et leurs usages ou bien mélanger identité de marque et guidelines ?

Human Interface Guidelines vs Material Design

Dans l’univers de la conception des applications mobiles, l’hégémonie d’Apple et de Google est sans conteste. Plus de 99% des smartphones fonctionnent sur Android (Google), qui détient 87% de part de marché et iOS (Apple), 12%.

Les 2 systèmes d’exploitation proposent des lignes directrices appelées “Guidelines” pour concevoir des applications mobiles Human Interface Guidelines (HIG) pour Apple et Material Design pour Google.

Image for post

À gauche, les guidelines d’Apple. À droite, les guidelines de Google.

Chaque guideline représente le symbole de la marque, avec une philosophie et des règles UX et UI à appliquer. Régulièrement mis à jour, ces préceptes varient en fonction de l’évolution des usages sur mobile et des avancées technologiques (IA, Assistant vocal, VR…).

Pour vous aider, voici un tableau récapitulatif des principales différences entre les guidelines de HIG et de Material Design 👇

Image for post

Image for post

Tableau comparatif HIG vs Material Design

L’application WhatsApp a décidé de conserver les comportements natifs sur chaque OS. La navigation est significativement différente, avec la présence de “Tabs” et le “Floating button” sous Android vs la “Tab Bar” et l’ “Action Button” sous iOS.

Image for post

La version Android et la version iOS de l’application WhatsApp sont très différentes car elles suivent les directives propres à chaque plateforme.

Design System : Design basé sur la marque

Cependant, connaître les règles de conception des applications mobiles pour les systèmes d’exploitation iOS et Android ne signifie pas pour autant les appliquer à la lettre.

Une autre solution, radicalement opposée, existe : il s’agit de créer un Design System, c’est à dire un langage visuel propre à l’entreprise, avec ses codes de création et d’utilisation. Même si Material Theming donne la possibilité de personnaliser systématiquement Material Design afin de mieux refléter la marque de votre produit, de plus en plus d’entreprises créent leur propre Design System.

L’objectif est de conserver une homogénéité de l’image de marque entre tous les produits et les services afin de proposer une cohérence dans les usages, les éléments graphiques et la manière de communiquer sur les différents produits digitaux.

Il s’agit dorénavant de créer une bibliothèque de composants, identique pour chaque plateforme (iOS, Android, Web), avec une identité propre à l’entreprise.

Image for post

Encore, le Design System de Spotify, est présent sur plus de 45 plateformes différentes.

Les différents principes proposés dans les guidelines d’Apple et de Google sont unifiés, modifiés voire gommés pour proposer un design d’interface unique, avec une identité forte, identique sur Android et iOS, quitte à affecter la capacité de l’utilisateur à reconnaître et appliquer des comportements natifs. Une phase d’adaptation est souvent nécessaire pour permettre aux utilisateurs d’intégrer les codes et les usages de l’application, car les règles appliquées sont différentes de celles des OS utilisés.

Image for post

Applications d’Arte, Brut, Duolingo, Deezer et Tiktok (iOS, au 1er plan // Android, en arrière-plan)

Guidelines et identité de marque

Mais rien n’est tout blanc ou tout noir. Il existe de nombreuses applications qui mélangent guidelines iOS/Android et Design System. Le résultat mélange les comportements phares d’iOS et Android, tout en ajoutant une identité graphique commune à iOS et Android. Ou inversement!

L’application d’un Design System peut ne pas aller jusqu’à la personnalisation de tous les composants natifs d’une application.

#Spoiler Alert : Tout vouloir customiser coûte du temps et de l’argent!

L’exemple ci-dessous illustre parfaitement ce propos. À vous de retrouver les différences entre identité de la marque TripAdvisor et guidelines iOS et Android !

Image for post

Application TripAdvisor sur iOS (à gauche) et Android (à droite). La partie FILTRER utilise tantôt les composants et comportements natifs (visuel du back, boutons de contrôle, toggle, page vs modale, …) tantôt des communs à l’identité de TripAdvisor.

Conclusion

Une chose est sûre : la manière dont l’application est développée (appli native vs appli Web vs app hybride vs solution multiplateforme) ainsi que l’identité de marque souhaitée par l’entreprise sont 2 facteurs déterminants, et intrinsèquement liés, dans le choix du design à appliquer. Une analyse profonde des avantages et des inconvénients de chaque option est à réaliser afin de choisir la solution la plus appropriée.

Photo by ROBIN WORRALL on Unsplash