Conseils de conception pour la conception des matériaux

introduction

Au cours des derniers mois, Material Design s’est développé dans un grand mouvement de design. Différents composants de la conception matérielle, tels que les cartes de contenu et l’utilisation améliorée de l’animation, peuvent être trouvés dans de nombreuses applications que nous utilisons aujourd’hui.

Comme de nombreux articles de blog l’ont couvert, d’un côté, c’est une bonne évolution car il devient plus facile que jamais de créer un design solide. D’autre part, il y a des voix qui réfutent le manque d’originalité car tout le monde utilise un style similaire. De plus, avoir accès à un bon langage de conception ne signifie pas qu’il est correctement appliqué.

Dans ce didacticiel, nous expliquerons comment vous pouvez prendre des concepts de conception de matériaux et les améliorer pour créer de meilleures interfaces qui sont en même temps plus distinctes dans leur style visuel. Nous examinerons également quelques conseils généraux avant de commencer la conception en utilisant Material Design comme point de départ.

La conception matérielle comme fondement

Tout d’abord, de la conception des matériaux à la conception des interfaces ne doit pas être désapprouvé. Pas du tout. Moi, en fait, cela aide à jeter les bases sur lesquelles les utilisateurs d’Android sont costumés.

Lorsqu’il s’agit de créer une bonne expérience utilisateur, il est souvent déconseillé de réinventer la roue.

L’utilisation de normes est un bon début pour vous assurer que vous construisez quelque chose qui fonctionne. Il a été prouvé que la structure de l’interface et ses interactions fonctionnent. Cela dit, cela ne signifie pas qu’il n’y a pas de place pour l’erreur ou pour l’amélioration.

Utilisation de cartes dans la conception

Un exemple de conception de carte
Un exemple de conception de carte

Le cœur de la conception matérielle revient à l’utilisation des cartes de contenu. Désormais, les cartes sont définitivement un composant applicable dans de nombreuses situations, ce qui en fait des modèles de conception très utiles. Simultanément, cela peut être un bon défi de conception pour vous de penser s’il pourrait y avoir des alternatives de conception plus intéressantes. Comme nous voyons de plus en plus de conceptions basées sur des cartes, il est bon de réfléchir à la manière de concevoir quelque chose meilleur.

Prenons le calendrier comme exemple. Au lieu d’une liste par jour avec une carte pour chaque rendez-vous, remarquez comment Sunrise a une vue combinée dans laquelle vous voyez à la fois la vue mensuelle et la vue quotidienne.

La vue combinée dans Sunrise
À gauche: un concept de calendrier de conception matérielle; Droite: Sunrise

Les jeux sont une autre grande source d’inspiration si vous essayez de trouver des interfaces uniques comme forme d’inspiration. Consultez des sites Web inspirants tels que UIMovement pour voir de nouveaux types d’interfaces comme source d’inspiration.

Lorsque vous construisez une interface, les cartes de contenu seraient-elles la solution la plus optimale ou pourrait-il y avoir d’autres façons intéressantes d’afficher du contenu qui pourraient être une meilleure solution?

Chaque application tente de résoudre un problème à sa manière. Avec cette réflexion, il peut être logique que votre solution nécessite un type d’interface différent.

Eh bien, comment procédez-vous? Tout commence par le contenu et la navigation, dont je parlerai plus en détail ci-dessous.

Méfiez-vous du bouton d’action flottant

Le bouton d'action flottant
Exemple de bouton d’action flottant dans la boîte de réception de Google

Un autre modèle de conception introduit par Material Design est le bouton d’action flottant. Un bouton d’action flottant est un excellent moyen de mettre en évidence une action dans une interface. En même temps, cela peut être l’un des pires mécanismes de conception possibles. Il existe de nombreuses façons d’utiliser un bouton d’action flottant dans le mauvais sens:

  • le placer sur un écran comportant plusieurs actions utilisateur principales au lieu d’une seule
  • masquage d’un menu dans un bouton d’action flottant
  • obstruer des éléments de conception importants

Personnellement, je vois quelques cas où un bouton d’action flottant est un excellent ajout au produit, principalement dans les applications qui ont une interaction de base pour l’utilisateur. Une application de messagerie est un excellent exemple. Le bouton d’action flottant permet à l’utilisateur de composer un nouveau message. Uber serait un autre excellent exemple où cela a du sens. L’interaction principale du produit est de héler une voiture.

En relation :  Les meilleurs modèles de calendrier Microsoft Office gratuits pour rester organisé

L’astuce est d’être prudent et de voir si cela a du sens dans le contexte de votre produit. Ce n’est pas parce que c’est un élément d’interface standard qu’il pourrait convenir à votre application. Pour les produits plus complexes, où un utilisateur effectue fréquemment plusieurs actions, un bouton d’action flottant est rarement un bon choix.

Stratégies de conversion et de rétention des utilisateurs

Avec une direction de conception forte pour commencer, Material Design, il est parfois assez facile d’oublier une base stratégique avant de commencer à concevoir. Comment décidez-vous de ce que vous pouvez utiliser de Material Design et de ce que vous pouvez améliorer?

Certains choix de conception, comme l’utilisation de cartes de contenu par exemple, peuvent limite vous au début.

Vous trouverez ci-dessous une brève liste de contrôle de certains éléments de votre application qui doivent être définis bien avant de prendre ce type de décisions de conception.

Poser les bonnes questions vous permet de mieux comprendre ce que vous essayez de construire et sur cette base, vous pouvez créer des interfaces qui fonctionnent mieux.

La navigation

  • Quelle est l’action utilisateur la plus importante dans mon produit?
  • Sur quel (s) écran (s) cela se produit-il?
  • À quoi ressemble un organigramme de mon produit?

Pour conclure, il y a deux règles simples que j’ai tendance à garder à l’esprit lors de la structuration de la navigation d’un produit.

Règle 1: 80/20

Appliquez la règle des 80/20. 80% de mes utilisateurs n’utiliseront que 20% de mes fonctionnalités. Comment puis-je m’assurer que ces 20% de mes fonctionnalités sont les plus faciles d’accès dans mon produit?

Règle 2: cohérence

S’il existe plusieurs façons d’accéder à un écran dans un produit, assurez-vous que cela se produit de manière très cohérente. Par exemple, le passage d’un écran de vue d’ensemble à un écran de détails doit se faire de la même manière.

Sur la base de ce qui précède, vous pouvez décider de ce qui serait le plus optimal pour les utilisateurs de naviguer dans un produit. Si vous avez un produit compliqué avec de nombreuses options, un tiroir est le bon choix. Produit simple? Travailler avec des onglets est généralement votre réponse. Pour plus d’informations sur la navigation et la conception des matériaux, je recommande parcourir les directives de conception de matériaux.

Contenu

Concept d'application de musique
Ce concept d’application de musique trouvé sur Dribbble est un exemple de gestion de plusieurs types de contenu.

Chaque application a du contenu. Les questions suivantes devraient vous aider à décider comment structurer et afficher le contenu du point de vue de la conception:

  • Quels types de contenu ai-je?
  • Combien de niveau (s) de contenu ai-je (par exemple, un écran de présentation, suivi d’un écran de détail et enfin d’un écran d’action)?
  • Quelle est la longueur typique de chaque type de contenu?
  • Quelle serait la manière la plus optimale d’afficher ce contenu? Est-ce une liste? Est-ce un diaporama? Est-ce quelque chose de plus unique?

Une fois votre contenu défini, il sera beaucoup plus facile de prendre des décisions de conception. C’est le moment où vous pouvez définir si l’utilisation de cartes a du sens ou s’il existe des alternatives meilleures ou plus intéressantes à utiliser pour votre interface.

Donner la priorité aux différents types d’utilisateurs

Le plus grand défi de conception auquel vous pouvez faire face est le suivant:

Comment puis-je m’assurer que mon application est tout aussi gratifiante pour les nouveaux utilisateurs que pour les utilisateurs qui reviennent? Comment cela affecterait-il mon contenu et ma navigation?

C’est un défi difficile et se résume souvent à une intégration efficace et à la garantie que l’écran principal de votre produit est l’écran où la plus grande valeur est pour vos utilisateurs. Avez-vous besoin d’exemples? Jetez un œil aux produits suivants. Quel est leur écran principal et quelle valeur cela donne-t-il? Comment abordent-ils l’intégration des utilisateurs?

  • Instagram
  • Facebook
  • Espresso par The Economist
En relation :  Une introduction au transfert

Les produits ci-dessus devraient vous donner une certaine inspiration. Ne vous découragez pas si cela vous semble intimidant au début. Il a fallu plusieurs itérations aux produits ci-dessus pour arriver là où ils en sont aujourd’hui.

L’intégration est un sujet en soi. Je vous recommande de consulter certaines ressources qui vous donnent des informations précieuses, telles que Utilisateur à bord.

Améliorations de l’interface

Maintenant que nous avons une bonne idée du fonctionnement de votre produit et des éléments que vous pouvez utiliser de Material Design, il est temps de pimenter un peu les choses. Il existe plusieurs façons d’améliorer l’esthétique de votre application, dont certaines sont répertoriées ci-dessous.

Typographie

Votre sélection de polices contribue énormément à l’aspect et à la convivialité de votre produit. Choisir une police personnalisée peut fortement aider à créer un design plus diversifié et à appliquer une apparence et une sensation uniques à votre produit sans faire de gros changements. Trouver les bonnes polices peut être difficile et une grande partie dépend également du goût du design. Ma ressource préférée personnelle est Machine à écrire.

Iconographie

Iconographie de Dropbox
Dropbox est un excellent exemple d’application d’icônes et d’illustrations personnalisées sur leurs produits.

L’ajout d’icônes personnalisées est un autre moyen d’intégrer votre propre apparence et convivialité dans une application. L’utilisation de l’iconographie personnalisée est délicate car Material Design a créé un excellent standard. Pour les icônes, cela signifie que certaines actions, navigations et autres éléments ont la même icône.

Si vous décidez de commencer à travailler avec votre propre ensemble d’icônes, vous devez vous rappeler deux aspects importants:

  • Reconnaissabilité: Assurez-vous que les gens comprennent ce que chaque icône implique.
  • Cohérence: En règle générale, il est évité de combiner plusieurs ensembles d’icônes.

Ressources visuelles

Timehop
Timehop ​​est un excellent exemple d’utilisation d’illustrations personnalisées pour créer une apparence et une sensation distinctes.

La façon dont vous affichez le contenu photographique ou l’utilisation d’illustrations peut facilement ajouter du caractère à votre application. Sois créatif.

Animations et interactions uniques

Interactions d'animations uniques
Ceci est un exemple d’animation unique et d’interaction correspondante. La source.

Les animations et interactions personnalisées nécessitent le plus d’efforts, mais c’est un travail gratifiant de voir prendre vie dans un produit. Des animations uniques construites sur des interfaces uniques travaille juste font partie des travaux de conception les plus gratifiants que vous puissiez trouver en ligne.

Schémas de couleurs uniques

Concept de conception d'applications de stocks
Cette conception utilise des concepts de conception de matériaux avec des couleurs inattendues. La source.

La conception matérielle fournit un grand choix de couleurs vous pouvez choisir. Cela ne signifie pas que vous ne pouvez pas être très créatif avec votre utilisation de la couleur pour créer quelque chose de vraiment unique.

Un mot d’avertissement

Il y a une raison pour laquelle la plupart des interfaces que nous connaissons au quotidien sont des conceptions assez simples, elles ont fait leurs preuves et c’est quelque chose que les utilisateurs se sentent familier lorsqu’ils l’utilisent.

La conception expérimentale peut nuire à votre application.

Cela dit, avec quelques ajustements mineurs, par exemple, en vous concentrant uniquement sur la typographie et la couleur, vous pouvez faire un long chemin pour concevoir quelque chose d’unique pour votre application.

Conclusion

Material Design a créé une solution de repli confortable lorsque vous êtes coincé sur un problème de conception. Jusque-là, vous avez toute la liberté créative pour repenser le fonctionnement d’une interface. Snapchat a construit un produit axé sur les gestes, Facebook Paper (iOS) a repensé la hiérarchie et l’animation, et Medium a effectivement réduit une interface pour se concentrer uniquement sur la lecture (et l’écriture).

Dans cet esprit, allez-y et concevez. Des commentaires ou des questions? Laissez-les dans les commentaires ou contactez-moi sur Twitter.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.