Personnalisation de votre application

Observons certaines des nombreuses possibilités de création dont peuvent s’inspirer les concepteurs et développeurs d’applications pour personnaliser leurs applications du Windows Store.

Pour quelle raison personnaliser votre application avec votre marque ?

La marque d’une entreprise définit les qualités pour lesquelles elle souhaite être reconnue. Lors de la conception d’applications du Windows Store, vous devez prendre des décisions réfléchies afin de vous assurer que ces applications intègrent ce qui fait l’essence de votre marque. Son expression à travers votre application du Windows Store permettra de distinguer cette dernière des autres applications, à la manière dont votre marque définit ce que représente votre entreprise. Prenons un exemple.

Application du Windows Store avant personnalisation :

L’exemple de Contoso Bakery illustre ce à quoi pourrait ressembler l’application d’une boulangerie-pâtisserie respectant les principes de conception Microsoft. Il constitue un bon exemple de positionnement du contenu au premier plan et au centre mais il ne permet pas de véhiculer de manière efficace la marque de la boulangerie-pâtisserie.

 

Même application après personnalisation :

Certains changements évidents apportés au sein de cette version de l’application de Contoso Bakery sauront plus capter l’intérêt des utilisateurs. Une plus grande intégration de ce qui fait la marque permet de présenter le contenu de l’application de façon plus convaincante et d’évoquer ce qui constitue l’essence d’une boulangerie-pâtisserie.

 

Comment intégrer votre marque

Votre marque s’exprime à travers un ensemble d’éléments visuels. Par exemple, une palette de couleurs, des graphismes, une disposition et un style photographique spécifiques contribuent, ensemble, à créer une marque reconnaissable pouvant se répéter sur toute une variété de supports (diffusion, impression, Web, applications du Windows Store, etc.).

Ces éléments visuels sont les outils qui vous permettent de créer une application du Windows Store à l’aspect unique via votre code.

Élément visuel	Description
Couleurs	La couleur est un attribut clé dans l’expression d’une marque. Appliquez la couleur primaire associée à votre marque de telle façon qu’elle rappelle aux utilisateurs que l’application provient de votre entreprise.
Graphismes	Utilisez des graphismes pour renforcer votre marque en ajoutant du caractère à la présentation du contenu. Toutefois, un nombre excessif de graphismes peut interférer avec votre flux de contenu et s’apparenter à de la décoration ou de la distraction pure.
Images	Les illustrations et les photographies devraient aussi refléter votre marque. Réutilisez les images et le style des autres communications et sites web de votre société.
Grille	Le système de grille de l’application du Windows Store permet d’unifier les éléments visuels de la présentation de votre application. L’interface utilisateur de votre application personnalisée s’aligne alors avec le reste de Windows.
Disposition	La disposition des éléments visuels de toutes les pages doit être adaptée à votre marque. Vous devez rechercher la cohérence entre les pages et les types de contenu.
Logo	Utilisez votre logo pour aider les utilisateurs à identifier rapidement votre application et à reconnaître votre marque.
Typographie	Les polices des applications du Windows Store sont essentielles. L’impact de leur caractère approprié sur votre marque peut être aussi important que celui d’une couleur, d’un logo ou d’une disposition : veillez donc à choisir minutieusement la typographie utilisée.

 

Exemple d’application métier

La personnalisation de vos applications métier est importante, du point de vue commercial comme de celui de l’entreprise. Cet exemple illustre la personnalisation d’une application commerciale et d’entreprise, via la marque d’une société de services express.

Éléments de la marque de la société

Fabrikam Worldwide Logistics propose trois niveaux de services express au niveau international. Les clients cibles sont les propriétaires de petites entreprises qui veulent organiser et gérer aisément des chargements. Un transport fiable à l’échelle mondiale et des transactions harmonieuses sont les principaux messages adressés aux clients.

Élément de la marque	Description
	La marque principale communique la passion de fournir des services fiables à l’échelle mondiale en utilisant les éléments graphiques, par exemple la carte et la bande.
	À la suite de la marque principale, le logo de chaque service indique les trois niveaux de services.
	Les éléments de la marque, tels que les pointillés et la carte, sur les packages sont réutilisés dans la conception de l’application pour créer une histoire de la marque cohésive.

 

Organisation d’un chargement

Un client d’une petite entreprise se connecte à son compte pour renouveler un chargement.

La couleur, le graphique et le logo se retrouvent sur l’en-tête et les pages en tant qu’éléments de la marque.

 

Sur la page du compte, la couleur, les graphiques (la bande et les pointillés) et la police indiquent la marque principale. L’identité du client est associée à la marque dans l’en-tête.

L’association du client à la marque s’inspire des polices de la marque principale et utilise les polices serif font Constantia pour le titre et sans-serif font Corbel partout ailleurs dans l’application.

 

La page des transactions utilise un modèle de navigation plat. Un utilisateur peut effectuer un panoramique de chaque section pour examiner et modifier les informations.

Un utilisateur peut rapidement accéder au zoom sémantique à partir de la page des transactions pour afficher l’historique de toutes les transactions avec un résumé des informations.

Les éléments de la marque, tels que la couleur, les graphiques, les logos des services et les polices, sont utilisés de façon cohérente pour rappeler l’objet de l’entreprise.

 

Un utilisateur accède aux autres catégories à l’aide de la barre de navigation.

Remise d’un chargement

Un chauffeur utilise l’application pour remettre les chargements aux clients. En utilisant la conception sur deux colonnes qui affiche l’inventaire sur la gauche et le contenu sur la droite, un chauffeur peut aisément parcourir les informations détaillées relatives à un chargement. Les éléments de la marque, tels que la bande et les contrôles courants, sont utilisés de façon cohérente dans toute l’application.

Lorsque le chauffeur arrive, la colonne de droite affiche les détails dans une liste à défilement vertical. La liste d’inventaire et le contenu détaillé défilent tous deux dans le même sens.

Le graphique d’information qui aide le chauffeur à localiser le chargement dans le camion bénéficie des mêmes couleurs de la marque que les autres parties de l’application.

 

Lorsque le chauffeur demande la signature du client, l’application affiche la page de signature en mode portrait et expose la barre de navigation personnalisée. Il est plus facile pour le chauffeur de donner l’appareil au client en mode portrait.

La demande d’une signature est un moment important pour la promotion de la marque. L’utilisateur est en contact avec l’application et la marque de l’entreprise.

 

Une fois que le chauffeur obtient la signature, l’application affiche les graphiques et éléments restants de l’avancement.

Partenariat avec votre application

Une relation entre plusieurs marques est appelée partenariat. Gardez à l’esprit les questions suivantes lorsque vous concevez une application qui doit s’adapter à plusieurs marques :

• Quelle marque dirige la communication ?
• Quel rôle joue la marque associée dans la communication ?

Une application du Windows Store qui n’arrive pas à répondre à ces questions court le risque d’embrouiller les clients et d’affaiblir la marque.

L’exemple Fabrikam traite le partenariat en renforçant sa marque par le biais d’une implémentation cohérente des éléments visuels. Par exemple, la couleur de la marque Fabrikam, les graphiques, la disposition et la police s’affichent dans toute l’application et se conforment à un ensemble limité de variations de styles. Chaque page de l’application indique clairement que cette dernière provient de Fabrikam.

Pour indiquer que la marque Coho Craftsman est secondaire à la marque principale, le logo Coho Craftsman, la police et l’image s’intègrent à la disposition Fabrikam. Vous pouvez imaginer, par exemple, comment un autre partenaire de petite entreprise de Fabrikam pourrait s’adapter à la zone actuellement occupée par Coho Craftsman.

D’autres marques apparaissent également dans cet exemple. Les sociétés de cartes de crédit du côté gauche de la page apparaissent en tant que marques de niveau inférieur en partie en raison de leur petite taille, du placement du contenu spécifique et de leurs couleurs limitées. Du côté droit de la page, les marques du fabricant des produits d’habillement apparaissent dans un logo d’une seule couleur qui est réduit en taille et sont conformes aux styles de conception de la marque principale. Dans tous les cas, les éléments visuels ont été modifiés de façon à ce que les marques associées soient claires, mais pas aussi importantes que la marque principale.

Exemples évoquant des marques uniques

Voici quelques exemples illustrant comment les divers éléments visuels permettent d’évoquer différentes émotions et sentiments. La description associée à chaque élément visuel fournit des détails spécifiques sur la création de la disposition et dans quelle mesure elle importe.

Contoso Downtown Café

La marque Contoso Downtown Café est connue pour son authenticité. Elle propose des plats principaux et des boissons spécifiques faits maison. Dans cet exemple, les éléments visuels essentiellement utilisés pour évoquer la marque sont les suivants : couleur, grille, disposition et typographie.

 

	Couleurs   La palette de couleurs gris foncé, blanc cassé et cuivre apporte chaleur et richesse à cette conception. Elle évoque certaines couleurs que l’on retrouve dans le pain, les soupes ou les pâtisseries faits maison.
	Grille   Dans cet exemple, le contenu « rompt » intentionnellement la grille. Le contenu du menu étant essentiel pour cette marque, la marge du haut est réduite de façon à ce qu’un espace plus grand soit consacré au menu. La marge de gauche est modifiée afin que le nom du restaurant, le texte d’introduction et les informations de localisation semblent plus centrées, donnant ainsi l’impression d’un contenu plus aéré. Tous ces ajustements ont été apportés de façon cohérente et se retrouvent sur l’ensemble des autres pages de l’application.
	Disposition   La conception de l’application est destinée à évoquer un menu car il s’agit bien là de la raison pour laquelle les clients reviennent dans cet établissement. Que ce soit pour les sandwiches ou les autres éléments du menu, la disposition est destinée à évoquer l’artisanat, le « fait maison ». L’arrière-plan blanc cassé rappelle le papier, le ton est engageant et le contenu structuré, avec des règles de séparation verticales et un fort alignement à gauche du texte.
	Typographie   Copperplate Gothic Bold est la police principale utilisée au sein de la conception. Elle permet de fournir au nom du restaurant une apparence unique, semblable aux panneaux en bois sculptés à la main. Les polices Script MT Bold et Segoe UI constituent les polices d’accompagnement. La police de script est utilisée avec modération au niveau de l’en-tête du menu et évoque une écriture à la main. La police Segoe UI est utilisée pour le corps du texte afin d’accroître la lisibilité des plats proposés.

 

Marque Contoso French Bakery

La marque Contoso French Bakery est connue pour ses pâtisseries fines. Pour de nombreux clients, il s’agit là du repère des gourmands. Dans cet exemple, les éléments visuels utilisés pour évoquer la marque sont les suivants : couleurs, disposition et images.

 

	Couleurs   Une palette uniquement constituée de deux couleurs, le marron et le rose, suffit pour évoquer aux clients une boulangerie-pâtisserie. Le marron, couleur principale, rappelle le chocolat et le rose, couleur de thème, le glaçage recouvrant les biscuits et les gâteaux. Ces deux couleurs sont également pertinentes vis-à-vis de la marque. Le marron est une couleur d’arrière-plan riche assez neutre pour faire ressortir la photographie en couleurs, et le rose une couleur assez vive pour mettre en relief certains éléments spécifiques du contenu.
	Images   La photographie est au cœur de cette conception. Il ne fait aucun doute que du temps et une certaine expertise ont été consacrés afin de s’assurer que chaque image donne littéralement envie de la manger. Les photos de pâtisseries sont ainsi très évocatrices de ce que la marque représente. Elles servent également à définir les catégories de contenu.
	Disposition   L’apparence de cet exemple diffère des conceptions d’application du Windows Store standard. Sa différence la plus marquante réside dans l’absence de vignettes carrées. Bien que les vignettes et la grille soient toujours présentes, les images ont été stylées de façon à imiter les articles susceptibles de se trouver dans une boulangerie-pâtisserie (par exemple, les formes circulaires et cannelées d’un moule à petits gâteaux).

 

Marque Contoso Sandwich Truck

La marque Contoso Sandwich Truck est connue pour son caractère urbain et social et la pertinence de sa localisation géographique. Forte de son équipe d’excellents chefs et de son parc de camionnettes de restauration, elle s’adresse aux personnes actives. Dans cet exemple, les éléments visuels utilisés pour évoquer la marque sont les suivants : graphismes, grille et logo.

 

	Graphismes   L’accent reste sur les choix proposés dans le menu, sans usage excessif de graphismes. Ces derniers jouent toutefois un rôle dans l’établissement de la marque. Par exemple, les « étoiles » suggèrent un système de notation par les clients, la couleur et les formes rappellent la signalisation des rues dans les villes américaines et les informations géographiques sont placées sur fond de zone noire au sein de laquelle est incorporé un graphisme de trace de roue sur l’asphalte d’une chaussée.
	Grille   Tous les aspects de cette conception sont ancrés dans la grille standard, imitant une structure semblable à ce que l’on voit lorsque l’on regarde le plan d’une ville de dessus. Du contenu et des graphismes à fond perdu se chevauchant apportent une touche contrastant avec cette présentation ordonnée et donnent à cet exemple toute sa particularité. La présentation générale assurée et directe du contenu est destinée à capter l’intérêt des personnes actives devant prendre des décisions rapidement.
	Logo   Dans cet exemple, aucun logo d’entreprise n’est utilisé. Le nom de l’entreprise apparaît dans le texte, et là où le logo Pour la première fois, le nom de l’entreprise est intégré dans la composition globale. Le logo ou nom n’est plus simplement aligné en haut à gauche.
	Couleurs   Le noir et le jaune sont utilisés comme couleurs de thème. D’un point de vue personnalité, le noir et le jaune sont des couleurs qui figurent dans les environnements urbains, tels que les panneaux et le marquage des routes aux États-Unis.

 

Exemple consolidant la marque dans les pages de l’application

Le fait de personnaliser votre application avec votre marque dans des pages secondaires riches en contenu est aussi important que de personnaliser la page d’accueil. Cet exemple utilise l’application d’une équipe sportive fictive pour vous montrer comment intégrer la marque dans plusieurs pages de l’application.

Fabrikam FC, équipe de football professionnel

Les supporters de l’équipe de football professionnel Fabrikam FC veulent avoir un œil sur les coulisses de leur équipe favorite, connaître les moindres secrets de leurs joueurs préférés et bénéficier des dernières informations où qu’ils se trouvent. La conception de la page d’accueil reflète le caractère audacieux et dynamique de la marque.

La couleur, la typographie et les graphismes mettent en évidence le caractère audacieux et dynamique de la marque.

 

Cette application utilise un modèle de navigation plat. Un utilisateur effectue un balayage dans la barre de navigation pour accéder à d’autres vues de l’application.

La couleur et le logo se retrouvent dans l’ensemble de la barre de navigation de l’application en tant qu’éléments de la marque. Les couleurs électriques de l’équipe sur un fond noir créent un contraste saisissant qui évoque la personnalité conquérante de l’équipe tandis que le jaune est employé partout dans l’application pour signaler le côté interactif.

 

À l’aide de la barre de navigation, l’utilisateur peut afficher les joueurs de l’équipe.

Les polices sont homogènes dans les différentes vues de l’application. La police de caractères sans serif complète le caractère ultra dynamique et audacieux de l’équipe. L’usage de majuscules partout comme style de police donne une apparence d’élément graphique à certaines étiquettes de texte.

 

Pour accéder rapidement à un joueur donné, effectuez un zoom arrière dans la vue du zoom sémantique de cette page.

Les photos d’action des joueurs ressortent mieux et créent une présentation dynamique débordante d’énergie. Elles sont utilisées dans la page de l’équipe et la page d’accueil.

 

L’emploi d’icônes et de graphismes simples rend le contenu plus amusant et plus accessible et il encourage l’interactivité avec l’application et la volonté de la découvrir.

 

Rubriques associées

Découvrir les applications du Windows Store

Recommandations en matière d’expérience utilisateur

Modèles de commandes

Modèles de navigation

Disposition d’une page d’application

Recommandations en matière de tailles de fenêtre et de mise à l’échelle à la taille des écrans

Recommandations en matière de polices

Comment personnaliser un contrôle ListView

Galerie