Guide de votre premier projet de conception mobile

Présentation de la source

ci-dessous vous trouverez la traduction d’un article présentant une liste des attendus d’expériences en fonction des devices Android et iOS. L’auteur nous rappelle quelques fondamentaux et c’est bien.

 A GUIDE TO YOUR FIRST MOBILE DESIGN PROJECT
 by Marina Jukic on September 20, 2017
 https://www.invisionapp.com/blog/guide-mobile-design-project/

Le guide

Voici quelques conseils sur ce qu’il faut garder à l’esprit lors de l’ajustement de votre design mobile pour les deux plates-formes, Android et IOS.

Réfléchissez une seconde aux applications de votre premier smartphone en 2009. Icônes skeuomorphes, boutons dégradés et textures d’arrière-plan? Rappelez-vous les fonds sombres et la typographie dynamique sur les téléphones Android?

Je suis sûr que vous pouvez faire la différence entre la conception de l’application mobile en 2009 et 2015. Mais pouvez-vous vraiment souligner une énorme différence entre iOS et Android conception de l’interface utilisateur aujourd’hui? Bien que de nos jours les interfaces mobiles soient claires et conviviales, une approche « flat design » a fait ressembler tous les styles de plates-formes mobiles.

L’objectif général d’une conception mobile multiplateforme est d’assurer à la fois la cohérence de la marque et l’alignement avec les conventions spécifiques à la plate-forme. Cependant, la seule façon d’assurer réellement la cohérence du style et de la mise en page sur les différentes versions de plate-forme, fabricants, tailles d’écran et densités consiste à utiliser des composants d’interface utilisateur personnalisés. En faisant du sur mesure, vous risquez toujours de créer quelque chose dans lequel l’utilisateur ne sent pas « chez lui ».

Donc, voici une brève comparaison des plates-formes qui vous aidera à décider entre un design de composant standard et personnalisé.

La Philosophie du style

La conception « Google material design » est plus orientée vers des interfaces personnalisables et fluides, et iOS a toujours été plus orienté vers des interfaces claires et intuitives. Dans leur philosophie de base, vous pouvez facilement trouver la base de leurs caractéristiques de style spécifiques.

La profondeur de l’écran

Le sens de la profondeur est essentiel lors de l’utilisation d’une application. L’utilisateur doit se concentrer sur les éléments de l’écran tels que les boutons, les champs de saisie et les barres de navigation importants pour l’exécution des tâches. La conception « Google material design » utilise différents styles d’ombre pour les couches d’interface utilisateur. La valeur de l’ombre dépend de l’axe Z, qui marque l’importance d’un élément d’interface particulier. La conception iOS utilise des dégradés, un flou d’arrière-plan et des superpositions de couleurs semi-transparentes pour atteindre la même hiérarchie.

Les Couleurs

La palette « Google material design » est plus proche du modèle CMJN que du RVB. Elle comprend diverses nuances plus foncées ou plus claires de la couleur de base. La couleur de base est principalement utilisée pour les accents de l’interface utilisateur tels que les actions, les titres des éléments, les icônes, etc. Les nuances de la même couleur sont utilisées dans les barres d’onglets, les tiroirs et autres éléments de navigation. Au contraire, la palette iOS est simple et dynamique. Les éléments d’interface courants tels que les éléments de liste, les barres, les arrière-plans, etc. sont généralement présentés dans des tons de gris, noir ou blanc, tandis que les couleurs vives sont utilisées pour les icônes, boutons, liens et autres éléments à mettre en saillance.

Typographie

Il y a une différence dans la hiérarchie typographique d’iOS et d’Android. Le dramatique contraste  entre la taille des polices d’affichage et le corps du texte rend le contenu plus vivant et ludique sur les deux plates-formes. Sur un écran Android typique, le contraste est obtenu en utilisant des tailles plus grandes et des polices plus minces. Dans iOS 11, le contraste est plus visible via la hiérarchie des poids avec de gros en-têtes gras et légendes minuscules.

Il est important de garder à l’esprit que dans la conception « Google material design », les titres et les textes sont pour la plupart alignés à gauche sur l’écran, surtout en ce qui concerne les éléments de navigation. Lorsque vous concevez pour iOS, vous devez centrer les boutons d’action et les légendes plus petites, tandis que les titres, les sous-titres et le corps du texte peuvent être alignés à gauche.

Style d’icône

le « Google material design » encourage l’utilisation d’icônes « flat design », tandis que la conception iOS préfère les icônes filaires de 1px ou 2px. Il s’agit d’un détail de style important qui doit être pris en compte lors de l’ajustement de l’application pour une autre plate-forme mobile. Si votre application possède un style d’icône spécifique, vous n’êtes pas obligé de suivre cette règle. En regardant le nouvel écran de verrouillage dans iOS 11, il semble qu’ils s’éloignent de l’utilisation exclusive des icônes filaires.

Les bords

Une simple trait de 1 pixel peut sembler bien sur les appareils Android haute résolution, mais n’oubliez pas que la conception Android doit être efficace sur la plupart des résolution d’écran. Dans ces situations, le développeur doit repenser l’élément de conception et tenir compte des différents cas dans le code de l’application.

La marque

L’utilisation des couleurs de la marque et de leurs nuances est plus dominante dans le « material design », tandis que les directives iOS suggèrent une approche plus subtile de l’image de marque. Dans iOS, elle ne doit être visible que dans les éléments de l’interface utilisateur tels que les icônes, les graphiques d’affichage, les boutons ou les liens.

App icon ou Icônes d’application

Les nouvelles icônes d’applications Android sont adaptatives, ce qui signifie qu’elles sont conçues pour s’adapter à différentes formes de masque sur différents appareils (cercle, rectangle arrondi, etc.). Les icônes d’application iOS sont toujours limitées à une forme de rectangle arrondi.

Animations et transitions

Les animations de l’interface utilisateur ne doivent être utilisées que si elles sont pertinentes pour le comportement de l’utilisateur, et elles doivent être discrètes. Le style d’animation « Google material design » est le résultat d’une philosophie de superposition de papier, et le style de mouvement contient beaucoup d’effets d’entraînement et d’expansions de formes, tandis que les animations iOS sont plus subtiles et naturelles.

iOS rend les transitions beaucoup plus faciles. Qu’il s’agisse d’un fondu enchaîné, d’un glissement ou d’un éclatement, vous pouvez être certain qu’il aura l’air bien et constant sur tous les appareils iOS. Sur Android, différents frameworks vous donnent beaucoup plus de liberté dans la conception de transitions et d’animations, mais le problème est que vous ne savez pas ce qui va fonctionner sur différents appareils.

La navigation

Une navigation claire et naturelle garantit une architecture d’information saine. Outre les différences de style, il est essentiel de comprendre les caractéristiques de base des systèmes de navigation.

Le « drawer » ou volet

Le « Google material design » fournit beaucoup de composants pour cacher le contenu, ce qui permet à l’utilisateur de trouver les fonctionnalités les plus pertinentes. Par exemple, vous pouvez toujours utiliser le « drawer » si vous avez beaucoup de contenu. Affichez les principales caractéristiques à l’extérieur (première lecture) et conservez les éléments les moins importants dans le volet. Il existe de nombreuses applications iOS qui l’utilisent. Cependant, il n’existe pas de composant natif ou de directive de conception pour ce volet sous  iOS car la solution recommandée pour la navigation est la barre d’onglets native (Tab bar).

Tab bar

Dans une application Android, la barre de navigation du bas de l’écran d’accueil est visible uniquement dans la navigation de haut niveau, donc n’allez pas trop loin de la racine de navigation. La philosophie de conception iOS met toujours le contenu en premier et cache rarement quelque chose. La barre d’onglets native permet à l’utilisateur de basculer facilement entre le contenu principal et encourage l’utilisateur à explorer l’application. La barre d’onglets est toujours présente, et il est facile de basculer entre les niveaux les plus élevés et les plus profonds de la navigation.

Le Bouton Retour

Les applications Android ont à la fois le bouton haut (intégré dans l’application) et le bouton arrière (composant natif). Le bouton haut vous ramène à la racine de navigation. Le bouton de retour vous ramène généralement au même écran que le bouton haut, sauf si vous avez déjà changé d’une application à l’autre. Dans ce cas, le bouton de retour vous ramènera à l’application précédente. Dans une application iOS, même si vous pouvez basculer entre les onglets de la barre d’onglets, chaque écran du niveau inférieur de la navigation doit avoir un bouton de retour, car c’est la seule façon évidente de remonter la racine de navigation.

les Actions

Le « Google material design » permet également de masquer l’action. Vous pouvez utiliser les menus déroulants pour masquer les actions de l’élément de liste, ou vous pouvez utiliser le bouton d’action flottante pour masquer un groupe d’actions importantes ou connexes.

iOS a une approche différente. Chaque fois que possible, toutes les actions doivent être visibles. S’il y a trop d’actions liées, alors elles peuvent être trouvées sous l’élément de liste, détectables en balayant, ou placées derrière l’option « plus » qui révèle une feuille d’action contenant toutes les actions.

Liste d’items

Les listes semblent assez similaires sur les deux plates-formes. La seule différence importante est que l’élément de liste iOS qui conduit l’utilisateur à un niveau plus profond de la navigation devrait contenir un indicateur de flèche. C’est un petit détail important qui influence le comportement de l’utilisateur.

Cards

Si vous concevez un composant avec toutes sortes de données et d’actions, utilisez des cartes. Les cartes sont essentiellement un aperçu des données dans un niveau de navigation plus profond. Les cartes matérielles ressemblent plus à des cartes physiques, avec des ombres et des coins arrondis. Les cartes iOS sont essentiellement des éléments de liste de vue de table, elles sont pleine largeur et souvent divisées par un séparateur 1px.

Bien que chaque plate-forme ait son aspect et son toucher caractéristiques, les concepteurs mobiles ont beaucoup d’espace créatif dans ces contraintes. Il est conseillé d’utiliser des modèles communs autant que possible, mais si un concepteur décide d’enfreindre les règles, ce ne sera une bonne décision que s’il y a un raisonnement solide derrière. Rappelez-vous, il n’est pas nécessaire de changer un composant commun. Si vous voulez que l’utilisateur découvre l’application dans un court laps de temps, il est toujours préférable de suivre la logique de la plate-forme et les modèles communs.

Publié dans Billets d'humeur