Je ne suis pas surpris. Pour vous dire la vérité, j’aurais même pu prophétiser que Windows Phone 8 allait bien marcher. C’est vrai qu’il sort sur le marché avec des arguments solides et même si c’est une révolution tranquille, les ventes ne cessent de progresser et les partenaires, Nokia en tête, sont contents, à la fois des volumes mais aussi de l’empathie entourant le nouvel OS mobile de Microsoft. C’est dire si ce que nous préconisons depuis la sortie de Windows Phone 7 est d’actualité au sujet des nouvelles interfaces, des nouvelles expériences, à propos du design clair, net et sans concession d’une approche authentiquement numérique. Tout ceci a été en quelque sorte magnifié par Windows Phone 8. Petit rappel des règles du jeu :

 

Windows 8 / Windows Phone 8, même combat ?

Oui. OUI ! Mais utilisez-vous votre tablette ou votre PC de la même manière que votre smartphone? Etes-vous le genre de personne qui prenez vos photos avec une tablette numérique? Non. Vous n’êtes pas ce genre de personnes, parce que vous avez appris depuis longtemps que l’expérience avec un appareil ultra-mobile est TRES différente de celle que vous avez avec un PC ou assimilé. Par exemple, avec votre smartphone, vous n’utilisez la plupart du temps qu’un seul doigt pour contrôler vos interfaces. Et la moitié du temps, vous utilisez ce terminal en extérieur, ou bien la nuit, ou encore en voiture (pas bien)…Alors vous vous imaginez bien que vous ne pouvez décemment pas affirmer que vous pouvez designer une application de la même manière sur Windows Phone 8 et sur Windows 8. Question d’expérience.

Souvenez-vous également, bien que cela dépende de la bonne éducation que vous avez reçue de votre maman, que bien souvent, en public, vous avez le niveau sonore au minimum. Et pas de speaker externe. Pas de feedback sonore, donc. Je vous soupçonne également d’avoir éliminé le son que font vos touches lors de la saisie… De plus, l’écran ne fait que 5 pouces ! Ca fait bien peu lorsque l’on commence à parler de complexité d’interface…

Bref, en gardant en tête toutes ces contraintes, oui, globalement; Windows phone 8 fonctionne de la même manière que Windows 8. L’interface doit être propre et élégante, elle doit mettre en valeur les polices de caractère (parce qu’elle sont simplement belles), le contenu doit justifier et expliciter la navigation, vous devez tirer parti des espaces négatifs et réfléchir à deux fois avant de poser vos contrôles en vrac pour pouvoir simplifier, concaténer et réduire ou encore supprimer tout ce qui n’est pas strictement indispensable dans votre layout. Qui a dit “du boulot classique de designer”?

image

 

Quand on parle des doigts….

Conservez dans un coin de votre esprit que l’utilisateur va souvent utiliser votre interface avec un seul doigt et parfois, s’il dispose d’un des derniers terminaux Nokia, avec des gants ! Aussi devez-vous poser vos contrôles avec soin afin d’éviter les faux contacts ou les erreurs d’ergonomie. La taille minimum d’un élément touch est de 7mm (ou 7 px) et la taille minimum recommandée est de 9 px. Par ailleurs, si vous souhaitez rendre un texte touch, utilisez une grille ou un border transparent et affectez l’évènement touch à cet élément.

 

La navigation bi-scroll.

L’une des choses qui démarque automatiquement une interface Windows Phone 8 de sa grande sœur sur Windows 8 est la possibilité de pouvoir scroller dans deux dimensions, verticalement ET horizontalement. En fait, la navigation est souvent horizontale et le contenu est souvent déployé verticalement. Dans ce schéma, vous pouvez disposer de deux contrôles principaux. Le contrôle Panorama vous permet de scroller de manière fluide dans l’axe horizontal à travers vos différents contenus. Sinon, vous pouvez utiliser un contrôle de type Pivot, qui est plus proche d’une navigation page par page, et qui vous autorise une plus grande segmentation de vos sections.

Oui, je parle de contrôles. Ce sont des artefacts techniques qui vous permettent de disposer votre layout de la manière dont vous souhaitez qu’ils répondent. Ces contrôles sont développés en XAML, un langage descriptif simple mais puissant quand on en vient à créer des interfaces pour Windows Phone 8. Et bien sûr, vous aurez la possibilité de modifier ces contrôles avec un éditeur de type Wysiwyg appelé Blend pour Visual Studio. Mais nous y reviendront.

image

 

Quels sont les paradigmes ?

Si vous avez déjà fait des planches pour Windows 8, vous devriez vous sentir relativement confiants avec les promesses du design pour Windows Phone 8. Mais la chose dont vous devez prendre en compte est l’usage spécifique induit par l’emploi du scroll bidirectionnel. Il y a là matière à organiser drastiquement vos interfaces. Et vous devez par exemple avoir remarqué que les vignettes sur l’écran principal ont dorénavant 3 tailles différentes. Et ceci n’est qu’une petite partie des améliorations de ce grand design. Les points principaux de l’UI Windows Phone 8 tiennent dans ces quelques paradigmes:

- WP 8 utilise une signalétique modern, pertinente, iconique et directe.

- Le matériel peut être utilisé avec seulement un doigt…

- …dans un environnement indoor, ou outdoor, quand l’utilisateur conduit, boit, mange, court…

- L’interface doit être rapide et dynamique.

- L’interface doit être centrée sur l’application et doit rester concentrée sur la réalisation de l’objectif premier de l’appli.

- L’interface doit faire plus avec moins et favoriser le contenu, plutôt que les fioritures graphiques.

- L’interface doit tirer parti des espaces négatifs…

- …comme elle doit mettre en valeur une police élégante, directe, pas simplement lisible, mais également élégante. D’ailleurs, la SegoeWP vaut vraiment le détour.

- Le plein écran est le seul scenario.

- La navigation est induite par le contenu.

- Utilisez une barre d’application pour regrouper contextuellement vos interactions.

- Les animations sont les meilleurs amis de l’organisation et de la « découvrabilité ».

- Les animations apportent du contexte, de la profondeur et de l’utilisabilité.

- Une bonne grille est la clef du succès.

- Le chiffre magique est 12. Par exemple, l’espace vide sur la gauche de votre layout tiens en 24 pixels. Les gouttières valent 20 pixels.

- Un item ne sera pas placé à moins de 20 pixels d’un autre.

- L’interface est prévue pour fonctionner aussi bien en mode portrait qu’en mode paysage.

- L’interface devrait prendre en compte le thème de l’utilisateur.

- L’interface doit être authentiquement numérique.

- L’expérience sera authentique, avec ses propres codes. Et n’essayez pas d’être ce que vous n’êtes pas.

- Donc, soyez vous-même. Quelqu’un vous a embauché pour votre talent. Haut les cœurs et trouvez votre chemin à travers ces paradigmes.

 

image

 

De quoi ai-je besoin pour créer un design Windows Phone 8 ?

En premier lieu, vous allez avoir besoin d’un cerveau. Éventuellement, complétez ce premier prérequis d’un crayon et d’un peu de papier pour poser quelques idées. C’est à peu près tout ce qu’il vous faut. Pour commencer, bien sûr. Avec des sketches, par exemples. C’est ici que vous ferez vos premières ébauches et probablement que vous enverrez pas mal de propositions au panier. Si vous pensez qu’un de vos concepts mérite mieux que la corbeille, vous allez avoir besoin de quelques outils supplémentaires. Commençons par Windows. Pour développer pour Windows Phone 8, vous avez besoin de Windows 8 Pro (nous verrons plus tard que l’émulateur demande d’utiliser un peu de virtualisation que seule cette version peut offrir).

Ensuite, vous pouvez installer la suite Office 2013 et spécifiquement Powerpoint. Je vous ai vu rire, mais sachez que si vous installez conjointement Visual Studio 2012 (dont vous aurez besoin pour Blend), vous allez vous ouvrir l’accès à des fonctions de storyboarding super puissantes dans le générateur de slides de Microsoft. Faites l’essai, vous ne serez pas déçus. Une fois que vous avez installé Visual Studio sur Windows 8 Pro, vous pouvez commencer à utiliser Powerpoint pour sketcher vos interfaces. Ne vous manque plus que le SDK de Windows Phone 8 disponible ici :

http://dev.windowsphone.com/en-us/downloadsdk

Une fois tout ceci proprement installé, vous êtes fin prêt pour commencer à exploiter votre génie. Ah oui, ne négligez pas non plus l’aspect graphique avec des outils de type Photoshop, Illustrator ou Expression Design.

 

La grille

Comme je l’ai signalé précédemment, la grille est juste un concept super important lorsque vous essayez de construire un layout pertinent et consistent. Comme évoqué également plus tôt, le nombre magique est 12 pixels. Mais avant d’éditer votre grille, veuillez-vous rappeler que le matériel Windows Phone 8 vient en trois résolutions distinctes, à savoir le WVGA (800x480 px), le WXGA (1280x768 px) et le 720 p (1280x720).

La marge de gauche est donc définie à 24 pixels du bord, la ligne de base (où vous poserez votre titre) sera posée aux environs du 110eme pixel à partir du haut (selon votre tolérance à la règle des 12 px). La ligne des titres de sections sera posée vers les 220/240 pixels. Rappelez-vous de laisser assez de place, si possible en bas de votre layout pour une éventuelle barre de boutons.

Il ne s’agit en aucun cas d’une grille qui ne serait faite que de carrés de taille identique. En fait vous devez d’abord commencer par poser les marges gauches et droites, de 24 px chacune, puis, poser une gouttière de 20 pixels au centre de l’espace restant. 24+24+20=68. Sur une résolution de 768 px de large, il reste donc deux zones de 350 px. Vous pourrez ensuite subdiviser en conservant cette gouttière intangible de 20 pixels comme séparateur.

image

 

La construction du layout.

Voilà, vous avez dessiné vos sketchs et vos chemins de fer, éventuellement, vous avez défini la succession d’écrans dans Powerpoint. Il est temps de commencer la partie plus graphique du boulot et d’ajouter un peu de couleur. Beaucoup de Photoshopage pour définir l’aspect purement graphique.Lorsque vous ou votre client êtes satisfaits du “look & feel”, vous pouvez basculer sur la mise en page. Il est alors temps d’ouvrir Blend pour Visual Studio. Quand celui-ci est prêt, vous avez le choix du type de projet que vous souhaitez designer. Dans un projet Windows Phone 8, il y a 3 grands types de projets:

-Un nouveau projet, sans aucun contrôle pré-positionné. Pas recommandé pour les débutants, car se sera alors à vous de définir entièrement l’architecture du layout.

- Une application Panorama: Celle-ci vient avec le support complet du contrôle de type Panorama et déjà un exemple d’interface prête à l’emploi, vous autorisant un scrolling horizontal sans accroc. Libre à vous de modifier le dispositif existant et les propriétés des différentes composantes de l’interface pour accomplir ce que vous avez à l’esprit. En ce qui concerne la planche, elle est occupée par un conteneur de type Panorana que vous remplissez de Listboxes. Notez que vous pouvez rapidement éditer ces listes d’objets en faisant un clic droit dessus->Edit additional templates->Edit generated Items).

image

- Une application de type Pivot : la navigation d’une telle application est plutôt de type “page par page”. Au lieu d’éditer un conteneur de type Panorama, vous attaquerez directement un conteneur de type Pivot, avec une logique très similaire à celle vue auparavant.

image

 

image

Une fois commencée la phase de mise en page, vous aurez envie de visualiser le résultat. Vous appuierez alors sur F5 pour lancer l’émulateur de Windows Phone 8, celui qui nécessite d’installer la version Pro de Windows 8. Vous pourrez également spécifier avant la compilation quel terminal (et donc quelle résolution) vous ciblez, dans l’onglet Device, sur la gauche de la fenêtre de Blend.

 

Assets

Afin de finaliser votre quête de l’application parfaite, vous allez avoir besoin de créer tout un ensemble d’assets graphiques. Ils sont indispensables pour obtenir un design unique et pour remplir certaines fonctions. Voici une liste des assets à prévoir:

Splashscreen (Slapshscreenimage.png): (768x1280 px pour toutes les résolutions), pour le WVGA, 480x800, SplashScreenImage.screen-WVGA.png, pour le 720p SplashScreenImage.screen-720p.png, pour leWXGA 768x1280 px SplashScreenImage.screen-wxga.png.

Default lock background: Si vous souhaitez que votre appli soit aux premières loges (sur l’écran d’accueil de votre terminal) LockScreen.png (768x1280 px pour toutes les résolutions)

Panorama background (PanoramaBackground): pour toutes les résolutions, 1536x1280 px. For WVGA, 480x800

The application icon (ApplicationIcon.png): pour toutes les résolutions, 99x99 px.

Small iconic tile (IconicTileSmall.png: pour toutes les résolutions 110x110 px.

Medium iconic tile (IconicTileMedium.png): pour toutes les résolutions, 202x202 px.

Small flip or cycle tile (FlipcycleTileSmall.png): pour toutes les résolutions 159x159 px.

Medium flip or cycle tile (FlipCycleTileMedium): pour toutes les résolutions 336x336 px.

Large flip or cycle tile (FlipCycleTileWide.png): pour toutes les résolutions 691x336.

App bar buttons (Appbar&1.png): 48x48 px for WVGA.

Lens icon: WVGA (Lens.Screen-WVGA.png) 173x173 px. 720 p (Lens.screen-720.png) 259x259 px et pour le WXGA (Lens.Screen-WXGA.png) 277x277 px.

Lock button: (LockIcon.png), 38x38 px.

Small file handler icon (SmallLogo.png): 33x33 px.

Medium file handle icon (MediumLogo.png): 69x69 px.

Large file handler icon (LargeLogo.png): 179x179 px.

Catalogue image (CatalogueImage.png): 300x300 px.

Merchandizing image (MerchandizingImage.png) : 1000x800 px.

Vous voilà maintenant fin prêt pour commencer un projet pour Windows Phone 8. A bientôt sur le Store !