En tant que développeur le design n’a jamais été notre fort. Malheureusement pour nous mais heureusement pour les utilisateurs, Microsoft a décidé d’être très exigeant sur le design des applications Windows Store. Afin de rendre votre application la plus design et ergonomique possible je vais essayer de vous donner quelques astuces et surtout quelques points de vigilance à suivre lors du développement de votre application Windows 8.

Petites astuces

Avant de faire appel à votre designer préféré, il est possible d’améliorer l’ergonomie de votre application simplement. Le premier point est d’ajouter du contraste dans vos écrans. Cela rendra votre contenu beaucoup plus lisible. Pour ce faire, répéter et aligner vos éléments (dans la mesure du possible), utiliser des tailles de police différentes. Augmenter la taille pour le contenu plus important. Servez-vous aussi de graisses différentes (épaisseur de la police : bold, semi-bold, etc. ).

Voici un exemple de ce que cela peut donner avec ces 3 ajouts :

Deuxième astuce, évitez de mettre trop d’éléments dans vos écrans ou vos menus déroulants. Comme l’a théorisé George Miller, un psychologue américain, on ne peut retenir à court terme que 7 éléments (plus ou moins 2). Pour un menu, évitez aussi un langage trop technique afin de ne pas perdre votre utilisateur. Cela dépend tout de même de la destination de l’application : grand public ou application métier.

Comme tout développeur limité niveau design, j’ai un problème avec le choix des couleurs. Quelles couleurs vont bien ensemble ? Quel ton de vert ira le mieux avec la couleur de mon logo ? On pensait que les designers avaient des super pouvoirs, il n’en est rien ! Ils utilisent Kuler, un outil en ligne Adobe qui vous aide pour ces choix-là. Vous avez à votre disposition une palette de couleur vous aidant à choisir vos couleurs ainsi qu’une galerie de thèmes créés par les utilisateurs.

Astuce suivante, utilisez du texte de remplacement. Au début de la création de votre application, par exemple au moment du maquettage ou pendant le design de vos pages XAML vous n’avez pas forcément des données réelles. Pour pallier à ce manque, il vous faut du texte qui soit suffisamment représentatif. C’est là qu’intervient le Lorem Ipsum. C’est du faux latin, ce qui ne va pas vous distraire à la lecture puisque vous ne comprenez rien. De plus le Lorem Ipsum reprend la distribution des lettres de manière comparable avec celle du français ou toute autre langue selon la version choisie. Une version française est disponible ici. Une version Alsacienne, le Schnapsum, a été créée par Alsacréations. A moins d’être alsacien vous ne comprendrez toujours rien au texte généré mais ça sera beaucoup plus drôle !

Exemple de Schnapsum :

Lorem Elsass ipsum pellentesque flammekueche Racing. suspendisse dui purus nullam Strasbourg Spätzle ch’ai picon bière baeckeoffe quam, gewurztraminer wurscht Morbi eleifend schnaps mänele condimentum id, senectus météor salu amet Gal. Chulien leverwurscht morbi sed mollis sagittis semper leo varius s’guelt Yo dû. dignissim vulputate ornare placerat libero, chambon ullamcorper mamsell yeuh. habitant Carola commodo hopla nüdle geïz geht’s Huguette merci vielmols schpeck leo hop sit hopla Oberschaeffolsheim Salut bisamme rhoncus turpis, messti de Bischheim Pfourtz ! bredele non tristique ac Miss Dahlias knepfle libero, Wurschtsalad porta kartoffelsalad eget tellus in, Oberschaeffolsheim Chulia Roberstau und turpis bissame auctor, lotto-owe Kabinetpapier hoplageiss

Comme je vous l’ai dit au début, Microsoft applique une politique stricte pour le design des applications Windows 8. Un des points essentiel est le layout des pages. Pour aider à respecter une disposition cohérente un système de grille a été mis en place. La grille est constituée d’unité de 20 x 20 pixels et de sous-unités de 5×5 pixels. Les grandes lignes pour la disposition de vos pages sont donc exprimées en unités et sous-unités. Par exemple, la base du texte d’en-tête de page doit être à 5 unités du haut de la page et à 6 du nord gauche.

Vous pouvez retrouver d’autres dispositions sur la MSDN. Et plus généralement, toutes les recommandations de Microsoft concernant les applications Windows Store se trouve design.windows.com.

Relation avec votre designer

Parce que malgré ces conseils vous aurez toujours besoin d’un designer, il vous faut penser à comment vous allez travailler avec elle (ou lui). Suivant la façon de travailler, vous allez peut-être recevoir un fichier PSD pour l’intégration. Demander à votre designer de grouper les calques dans des dossiers avec un nommage significatif. Il doit également embarquer toutes les polices non standards qu’il/elle aura pu utiliser. Cela vous évitera de vous retrouver avec une police non voulue. Il faut aussi lui demander de définir et designer tous les états des boutons : l’état normal, l’état survolé (hover), l’état cliqué. Avec tous ces états vous êtes capables de créer les animations. Vous trouverez plus de conseils sur le site Ps Etiquette, ou plus simplement envoyez le lien à votre designer.

Points de vigilance pour les applications Windows 8

Je ne vais évoquer ici que quelques points importants pour lesquels vous devez faire attention dans votre développement, sous peine de voir votre application refusée.

Le splashscreen

Le splashscreen est le premier écran que l’utilisateur va voir de votre application. Il doit donc mettre en avant votre marque. Ce n’est pas nécessairement votre logo. Vous ne devez surtout pas garder l’image par défaut fourni dans le template Visual Studio, vous vous feriez refuser directement lors de la soumission sur le Windows Store. Il est nécessaire que lorsque l’utilisateur arrivera sur votre page d’accueil toutes les données affichées doivent être chargées. Selon le type de votre application et la taille des données à charger il peut être utile d’avoir un écran intermédiaire entre le splashscreen et la page d’accueil. Il s’agit d’une extension du splashscreen. La transition entre ces 3 pages (splashscreen, extension, page d’accueil) doit être douce. Vous pouvez pour cela imaginer une animation sur l’extension indiquant à l’utilisateur qu’il doit patienter.

Scénario offline

Vous devez penser au comportement de votre application en cas de perte de connectivité. Dans tous les cas, votre application ne doit pas crasher lamentablement. Elle doit continuer à fonctionner. Selon l’importance que tient la connectivité, votre application affichera un message différent à l’utilisateur. Si l’application peut continuer à tourner, faite apparaitre doucement un bandeau en haut de page indiquant la perte de connexion. Le message disparait en cliquant dessus. Si l’application nécessite obligatoirement une connexion alors le message sera sous forme de popup invitant l’utilisateur à retrouver une connexion.

Responsive

Votre application a de grandes chances d’être utilisée sur des tablettes, ce qui implique qu’il faut gérer le mode horizontal et un mode portrait. De plus, depuis Windows 8.1, l’application peut utiliser tout ou partie de l’écran avec une largeur minimale de 320 pixels (le minimum est de 500 par défaut). Il vous faut donc prévoir un type d’affichage différent selon le mode. Par exemple, vous pouvez utiliser une grille pour l’affichage en mode horizontal et ensuite utiliser une liste quand vous passez en mode portrait ou en dessous d’une certaine largeur. Pour définir ces modes vous allez rajouter dans votre XAML un VisualStateManager ainsi que les différents contrôles nécessaires (une grille et une liste). Le VisualStateManager indique pour chaque VisualState les contrôles à afficher et masquer. Dans votre code, vous devez vous rattacher à l’événement SizeChanged de votre page pour changer le mode d’affichage.

public GroupedItemsPage()
{
	this.InitializeComponent();
	this.navigationHelper = new NavigationHelper(this);
	this.navigationHelper.LoadState += navigationHelper_LoadState;
	this.SizeChanged += GroupedItemsPage_SizeChanged;
}
/// If the page is resized to less than 500 pixels, use the layout for narrow widths.
/// If the page is resized so that the width is less than the height, use the tall (portrait) layout.
/// Otherwise, use the default layout.
void GroupedItemsPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
	if (e.NewSize.Width < 500)
		{
			VisualStateManager.GoToState(this, "MinimalLayout", true);
		}
		else if (e.NewSize.Width < e.NewSize.Height)
		{
			VisualStateManager.GoToState(this, "PortraitLayout", true);
		}
		else
		{
			VisualStateManager.GoToState(this, "DefaultLayout", true);
		}
	}
}

Feedback Visuel

Tout élément interactif de votre application doit avoir un feedback visuel. Vos boutons doivent changer d’état, de couleur. C’est là que vous devez avoir demandé à votre designer de créer tous les états de vos boutons. Vous pouvez aussi lancer une animation quand une action est en cours.

Gérer la HD

Les applications Windows 8 sont faites pour être lancées sur différents supports avec des résolutions différentes allant de tablettes 10 pouces en 1024×768 à des grands écrans en 2560×1440. Il vous est demandé de fournir un certain nombre d’images pour l’application comme le logo, le splashscreen, une image pour la tuile, etc. Toutes ces images seront adaptées automatiquement par Windows selon l’appareil et sa résolution. Pour cela vous devrez fournir des images à différentes échelles. Windows défini 4 facteurs d’échelles, 80%, 100%, 140% et 180%. Par exemple, un logo carré de 150×150 pixels utilisé pour la tuile aura les tailles suivantes :

Windows mettant automatiquement à l’échelle il vous suffit de suffixer le nom de vos images avec l’échelle. Par ex : tile150150. scale-100. png est l’image utilisée pour la tuile carrée de 150×150 pixels qui sera affichée à l’échelle 100%. Vous pouvez aussi mettre toutes les images avec la même échelle dans un dossier, par ex : /scale-100/tile150150. png. Dans le manifeste de l’application vous ne devez indiquer que le nom de base de votre image. Dans ce cas : tile150150. png. Windows se débrouille pour trouver l’image correspondant à la bonne échelle.

Conclusion

Cette rapide liste d’astuces ne se veut pas exhaustive. Pour en apprendre plus sur les règles à suivre pour vos applications je vous recommande fortement d’aller faire un tour sur la MSDN dans la section dédiée au développement Windows Store. Vous trouverez toutes les informations nécessaires à la bonne réalisation de votre application.

La rédaction de cet article a pu être possible grâce à la conférence organisée chez Microsoft par la communauté des développeurs Windows 8. Je remercie donc les speakers présents : Rudy Huyn, Julie Gri, Michel Rousseau, Loïc Rebours, Manon Ely et Christopher Maneu.