Principes de conception de Microsoft

Article
04/07/2015

Les fondamentaux d’une conception de qualité

Selon nous, les principes de conception de Microsoft peuvent vous aider à créer des applications du Windows Store qui feront votre fierté et la joie de vos utilisateurs. Utilisez ces principes pour planifier votre application et guider vos choix de conception et de développement.

À propos de la conception moderne

Microsoft tient depuis longtemps une place prépondérante dans le secteur informatique, en s’illustrant dans de nombreux domaines et en proposant un nombre impressionnant de produits. Récemment, la société a souhaité accorder une plus grande importance à la conception. À l'origine de cette volonté de changer : une base solide, des idées fortes et exaltantes, des découvertes intéressantes et tout simplement le sentiment que plus rien ne pouvait être comme avant. Les principes de conception de Microsoft étaient nés.

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. Les éléments visuels sont, eux aussi, soignés et parfaitement adaptés.

Fondements de la conception moderne

Notre conception moderne pourrait être assimilée à un « design épuré », mais ce serait ignorer toute sa profondeur, sa personnalité et sa substance. 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. Cerner le noyau dur de votre application est une chose, réussir à réduire ses fonctionnalités à ce noyau en est une autre. Selon Antoine de Saint-Exupéry, la perfection est atteinte quand il n’y a plus rien à retirer. Restez simple et vous joindrez facilement l’utile à l’agréable.
Style typographique international (style suisse) : c’est avant tout grâce à ses caractères en gras, simples et beaux à la fois, que le style suisse influence la conception de Microsoft. 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 permis de définir nos propres principes, que nous suivrons tout au long de notre travail de 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, soit souvent, soit 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 que l’utilisateur ait une idée claire de la hiérarchie visuelle de votre application, 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.


Hiérarchie	Hié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. Par ordre d’importance, les deux premières lignes de chaque message viennent après. La couleur permet de différencier les messages lus des messages non lus, ainsi que par leur nom.

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.
L’utilisation d’applications doit être sûre et fiable.
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 un intérêt 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 des polices, des proportions et des couleurs, le contenu prend forme plus facilement. Dans cet exemple, les noms et les titres sont plus lisibles.


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.
Privilégiez le contenu.
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é

En suivant ce principe, les expériences seront à coup sûr immersives et réactives. Mettez en avant des animations, des transitions et des réponses qui pourront paraître surprenantes mais qui, au final, donneront vie à l’interface, pour le plus grand plaisir des 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 revenir à l'écran.

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.


Iconographique	Infographique

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 cloud 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. Faites en sorte que les applications et les scénarios fonctionnent de la même façon sur n’importe quelle plateforme, comme une seule expérience familière, une seule marque. Les utilisateurs apprécieront, car ils n’ont pas du tout envie de réapprendre à utiliser votre application sur chaque support différent. 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 cloud 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 leçon de style et commencez à réfléchir à comment la mettre en pratique 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.