Principes de conception de Microsoft

Applies to Windows and Windows Phone

La source d’une bonne conception

Nous pensons que les principes de conception de Microsoft peuvent vous aider à créer des applications du Windows Store qui enchanteront vos utilisateurs, et dont vous pourrez être fiers. Tenez-en compte quand vous allez planifier votre application, et laissez ces principes guider vos choix de conception et de développement.

À propos de la conception moderne

Microsoft est depuis longtemps l’un des chefs de file dans de nombreux domaines technologiques et dans une vaste gamme de produits. Récemment, un changement a été opéré pour accorder une importance plus grande à la conception. Ce changement s’est caractérisé par des bases solides, de grandes idées enthousiasmantes, de belles explorations et le sentiment que toute autre façon de procéder serait simplement obsolète. Les bases de ce changement sont devenues les principes de conception de Microsoft.

La philosophie de conception de Microsoft se traduit par des écrans d’application clairs et épurés qui fonctionnent rapidement, minimisent l’utilisation du clavier et avertissent automatiquement l’utilisateur en cas de nouvelles informations ou de mises à jour. L’utilisateur interagit avec le contenu, et non avec des commandes qui représentent le contenu. En outre, les éléments visuels sont agréables et soignés.

Fondements de la conception moderne

L’expression « flat design » (ou design épuré) ne suffit pas à exprimer la profondeur, le caractère et le contexte de notre conception moderne. Notre langage de conception repose sur trois piliers.

  • Le Bauhaus : à partir de 1919, cette école de design emblématique commença à promouvoir une philosophie de conception percutante : éliminer tout ce qui est superflu. Il est important de comprendre les fonctions de base de votre application, mais réduire farouchement ses fonctionnalités à ce noyau demande de la discipline. Selon Antoine de Saint-Exupéry, la perfection est atteinte quand il n’y a plus rien à retirer. La simplicité conduit à la beauté, mais également à la facilité d’utilisation.

  • Style typographique international (style suisse) : le style suisse influence la vision de la conception par Microsoft d’abord et avant tout par sa belle police, claire et en gras. Ce style se caractérise par sa lisibilité, sa netteté et son objectivité. À l’image de ce style, nous avons décidé d’utiliser une grille, à la fois typographique et visuelle, ainsi que des dispositions asymétriques, afin de conférer un beau visuel.

  • Design d’animation : le mouvement est synonyme de vie et donne un sentiment d’élégance. Nous nous sommes inspirés de pionniers comme Saul Bass, qui utilisait l’animation, la typographie et le design pour créer des génériques de films de toute beauté. Un design d’animation de qualité n’est pas seulement attrayant, il permet également d’expliquer à l’utilisateur comment effectuer une tâche.

Pour plus d’informations sur ces piliers de la conception, voir Conception moderne chez Microsoft.

Ces inspirations ont défini nos propres principes, qui nous guident dans l’ensemble de notre conception. Bien que nous les ayons choisis, ils sont en quelque sorte omniprésents dans toute conception et nous espérons qu’ils vous aideront à promouvoir votre marque sur notre plateforme. Voici les principes de conception de Microsoft :

  • Affichez votre savoir-faire
  • Faites-en plus avec moins
  • Pensez rapidité et fluidité
  • Assumez le 100 % numérique
  • Travaillez en équipe

Affichez votre savoir-faire

Ce principe est le premier pour une raison bien précise. Au cours de l’histoire, les créateurs, bâtisseurs et artisans se sont toujours distingués par leur sens du professionnalisme et leur fierté pour leur travail. Ce principe implique le sens du détail, à savoir consacrer du temps, de l’énergie et de la passion aux plus petits détails, qui sont vus souvent ou par de nombreuses personnes. Il s’agit de créer une expérience complète et aboutie à chaque étape, des pixels alignés parfaitement sur une grille aux couleurs et à la typographie d’un écran d’application. Mettez-vous à l’épreuve pour ressentir une certaine fierté de votre savoir-faire durant chaque phase du développement.

Exploiter la grille

Dans le domaine de la conception graphique, la grille typographique moderne est l’armature qui assure la cohésion de votre contenu. Une disposition proportionnelle des éléments implique des avantages à la fois esthétiques et pratiques. L’utilisateur peut absorber la page rapidement et facilement.

La grille typographique moderne est l’armature qui assure la cohésion de votre contenu

Hiérarchie et équilibre

Pour rendre claire la hiérarchie visuelle de votre application pour l’utilisateur, affichez différents types d’information avec des propriétés distinctes. Vous pouvez utiliser la taille et la couleur de police, ainsi que le positionnement et l’espacement pour différencier les niveaux de la hiérarchie. Si vous équilibrez l’utilisation de ces différentes valeurs de propriété de manière cohérente, l’utilisateur adoptera le rythme de votre application et chaque niveau de la hiérarchie sera distinct et immédiatement identifiable.

Rendre claire la hiérarchie visuelle de votre application pour l’utilisateurRendre claire la hiérarchie visuelle de votre application pour l’utilisateur
HiérarchieHiérarchie insuffisante

 

Texte de grande taille, contraste élevé. Dans l’exemple précédent, « conversations » est l’en-tête de l’élément pivot sélectionné. Il établit le contexte du contenu qui apparaît en dessous. L’en-tête a un contraste élevé (blanc sur noir), ce qui nous indique qu’il s’agit de l’élément sélectionné sur la page. L’en-tête de l’autre élément a un contraste plus faible (gris sur noir), ce qui le rend moins important.

Texte de grande taille suivant. Le détail le plus important dans la liste des conversations est le nom de la personne avec laquelle vous conversez.

Texte le plus petit. En matière d’importance, les deux premières lignes de chaque message viennent ensuite. La couleur différencie les messages lus par rapport aux messages non lus. Elle distingue également le message du nom de son auteur.

Espacement et alignement. Utilisez plus d’espace entre les conversations (et moins d’espace dans une conversation) pour rendre la hiérarchie plus visible. L’alignement à droite précis de la date et l’heure du message permet de faire ressortir ce dernier.

Hiérarchie insuffisante. Sans hiérarchie, la page perd son sens et sa lisibilité. L’esthétique est perdue, mais plus important encore, l’utilité est perdue également.

Qui êtes-vous ?

Trouvez la typographie qui reflète le mieux la personnalité de votre application. Voici quelques exemples de typographie qui complètent et contribuent à définir l’application.

La police traditionnelle témoigne du sérieux de cette source d’actualités

Application du New York Times. La police traditionnelle témoigne du sérieux de cette source d’actualités.

Les polices de cette application sont contemporaines et élégantes

Camera360. Les polices de cette application sont contemporaines et élégantes.

Récapitulatif et liste de vérification

  • Soignez les détails.
  • Rendez sûre et fiable l’utilisation d’applications.
  • Mettez en avant les concepts suivants : équilibre, symétrie et hiérarchie.
  • Alignez la disposition de votre application à la grille, qui est la nouvelle disposition des applications.
  • Faites en sorte que votre application soit accessible au plus grand nombre d’utilisateurs possible, y compris les personnes souffrant d’invalidités et de handicaps. Consultez les recommandations de conception en matière d’accessibilité.

Faites-en plus avec moins

Ce principe limite strictement votre application à ses fonctions de base. Pensez contenu, sans superflu. Le contenu prend de nombreuses formes : photos, e-mails, articles de presse, etc. Éliminez le superflu pour ne laisser à l’écran que ce qui est le plus pertinent. Créez les éléments de navigation à partir du contenu lui-même aussi souvent que possible. Les expériences immersives et claires doivent être la règle. Chaque élément à l’écran doit avoir une valeur et un objectif précis.

Ce principe ne signifie pas que vous devez sacrifier l’intuition. Une conception est réussie quand les éléments de navigation guident l’utilisateur dans son interaction avec l’application. Une conception réussie est un savant mélange d’intuition et de minimalisme, ce qui donne lieu à un produit final simple et efficace.

Contenu sans superflu

Laissez l’utilisateur interagir directement avec le contenu. En éliminant le superflu et en tirant parti de la police, de l’échelle et des couleurs, vous faites apparaître le contenu plus facilement. Dans cet exemple, les noms et les titres sont plus lisibles.

Laisser l’utilisateur interagir directement avec le contenuLaisser l’utilisateur interagir directement avec le contenu
Contenu cibléSuperflu gênant

 

Donner vie à votre contenu

Les commandes et les fonctionnalités appropriées sont claires et faciles à comprendre et à utiliser.

Les commandes et les fonctionnalités appropriées sont claires et faciles à comprendre et à utiliser

Récapitulatif et liste de vérification

  • Soyez excellent dans un domaine plutôt que médiocre dans de nombreux domaines.
  • Faites passer le contenu avant le chrome.
  • Créez un visuel ciblé et direct. Laissez les utilisateurs s’immerger dans ce qu’ils aiment : ils exploreront le reste.
  • Inspirez confiance aux utilisateurs.
  • Réduisez la redondance dans votre interface utilisateur.

Pensez rapidité et fluidité

Ce principe garantit que les expériences sont immersives et réactives. Il met en avant des types d’animation, de transition et de réponse attrayants et parfois inattendus, mais qui donnent vie à l’interface et ravissent les utilisateurs. Ce principe place les personnes et les tâches avant la technologie.

Si votre application est destinée à une tablette ou un téléphone, rappelez-vous qu’une bonne application pour les personnes « itinérantes » est axée sur des scénarios simples et d’utilisation rapide. Dans ce genre de situation, faites en sorte de donner exactement ce que les utilisateurs attendent, avec rapidité et détermination. Il en découlera obligatoirement une conception réussie.

Dynamisme

Les vignettes dynamiques sont réactives, évolutives et engageantes. En outre, elles sont au service de votre imagination, qu’il s’agisse de notifier un nouvel e-mail ou d’envoyer des offres spéciales de votre magasin favori.

Les vignettes dynamiques sont réactives, évolutives et engageantes

Mouvement

Créez un sentiment de continuité et laissez votre application raconter son histoire en utilisant le mouvement de façon éclairée. Le mouvement peut inviter un utilisateur à entreprendre une action ou à distinguer différents types d’action. L’écran de verrouillage rebondit quand vous appuyez dessus pour vous indiquer que vous pouvez le faire glisser vers le haut. La transition de sortie d’un élément indique comment le faire glisser à nouveau dans la vue.

Faire usage du mouvement en lui donnant tout son sens

Récapitulatif et liste de vérification

  • Soyez réactif à l’interaction utilisateur et toujours prêt pour la suivante.
  • Concevez une interaction tactile et directe.
  • Enchantez vos utilisateurs avec du mouvement.
  • Effectuez des transitions fluides vers le contenu en amont et en aval.

Assumez le 100 % numérique

Ce principe englobe la capacité d’innovation illimitée rendue possible par le numérique. Le skeuomorphisme prend en compte les règles et les propriétés du monde réel pour façonner ses métaphores de conception. Toutefois, nous embrassons la puissance, le langage et les possibilités uniques de notre support.

Tout comme l’école Bauhaus a enseigné la suppression des éléments de design superflus, ce principe encourage l’élimination des analogies numériques, tels que les effets de texture ou de cuir, les coutures, les ombres et les reflets. Embrassez un langage de conception plus puissant et plus évolutif. Le principe du « 100 % numérique » repose sur ce constat.

Les infos ont la cote

Soyez infographique, pas seulement iconographique. La communication d’informations est l’objectif principal. Elle ne doit pas être perdue dans des détails inutiles. L’adoption de l’approche infographique implique un contenu plus épuré, des informations exploitables et pas de distraction.

Soyez infographique, pas seulement iconographiqueSoyez infographique, pas seulement iconographique
IconographiqueInfographique

 

Récapitulatif et liste de vérification

  • Soyez dynamique et animé par la communication.
  • Magnifiez la typographie.
  • Utilisez des couleurs vives et éclatantes.
  • Connectez-vous au nuage pour permettre à vos utilisateurs de rester connectés les uns avec les autres.

Travaillez en équipe

Ce principe consiste à unifier votre propre travail, à l’aligner avec l’écosystème commun quand cela est possible et à innover si nécessaire. Envisagez votre travail afin que les applications et les scénarios d’utilisation sur différentes plateformes fonctionnent ensemble comme une seule expérience familière, une seule marque. Pour les utilisateurs, la familiarisation est synonyme d’autonomie. Ils ne veulent pas réapprendre à interagir avec chaque support. Appuyez-vous donc sur la plateforme commune des logiciels et services Microsoft. Faites reposer vos expériences sur des commandes, des mouvements, des modèles d’interaction et des animations établis et familiers, et même sur des services nuage d’authentification et de stockage courants.

En d’autres termes, évitez de réinventer la roue. Innover est important, mais pas au détriment de l’expérience utilisateur. Chaque application transmet également un certain ton, une voix personnelle qui fait écho chez les utilisateurs. Découvrez notre approche sur la voix et commencez à réfléchir à son utilisation dans votre application. Déterminez ce qui fonctionne pour votre application et n’hésitez pas à imiter ce qui s’est avéré efficace.

Pensez plateforme

Voyez comment votre application peut fonctionner dans l’écosystème des appareils et facteurs de forme Microsoft. Demandez-vous quelle est la meilleure utilisation pour cet appareil et optimisez l’expérience en fonction de ces atouts uniques. Des scénarios impossibles sur une seule plateforme deviennent possibles grâce à l’utilisation de plusieurs plateformes.

Voyez comment votre application peut fonctionner dans l’écosystème des appareils et facteurs de forme

Récapitulatif et liste de vérification

  • Utilisez le modèle d’interface utilisateur.
  • Travaillez avec d’autres applications pour mener à bien des scénarios en participant à des contrats d’applications.
  • Utilisez nos outils et modèles pour montrer de la cohérence.

Les principes d’une bonne conception s’appliquent, quelle que soit la présentation visuelle de votre marque. Une conception soumise à des principes génère des expériences qui plaisent aux utilisateurs et leur inspirent confiance.

Rubriques associées

Planification d’applications du Windows Store
Conception de la navigation pour les applications du Windows Store
Conception des commandes des applications du Windows Store
Conception de l’interaction tactile
Recommandations en matière d’expérience utilisateur pour les applications du Windows Store
Création d’applications du Windows Store réussies
Accessibilité pour les applications du Windows Store

 

 

Afficher:
© 2014 Microsoft