DesignMichel

Un peu de couleurs

ROUSSEAUMichel — Mon, 15 Apr 2013 11:54:25 GMT

En tant que graphiste/designer, je suis souvent interpelé sur la symbolique des couleurs et leur interprétation dans les applications. Voici donc un court voyage dans le monde de l’arc en ciel.

La couleur comme référent culturel

Chez Microsoft, nous avons à cœur de promouvoir des interfaces compréhensibles et appréhendables par le plus grand nombre et, dans la mesure du possible, la moins “chargée” culturellement, tout comme nous nous efforçons de nous en tenir à des codes culturellement neutres. Ceci en conservant comme ambition de pouvoir favoriser l’adoption de nos interfaces par la masse, de réduire le délai d’apprentissage et d’assimilation des contenus et enfin de réduire les conflits d’interprétation. Cependant, vous ne pouvez pas ne pas savoir que les couleurs sont en grande partie inoculées des l’enfance comme autant de marqueurs culturels, en commençant par l’apparence sexualisée de nos vêtements (bleu-garçon/ rose-fille), le drapeau national ou d’autres critères moins évidents, comme l’affectif lié à une couleur évoquant un moment particulièrement pénible (le blanc du dentiste), ou plus agréable (la couleur des cheveux de maman). Bref, en couleur, comme dans tout ce qui fait appel au pathos, il est impossible de nier la dimension affective et culturelle des couleurs et de notre perception. Et, en bonne connaissance de cause, il faudra au graphiste/designer un peu de connaissance pour éviter les écueils les pus grossiers. Dans ce genre de tracas, nous, en tant que graphistes/designers/responsables des crayons de couleurs, devront faire appel à un peu de pédagogie pour expliquer que Jaune caca d’oie, ce n’est pas une couleur mais un jugement de valeur sévère pour un ton proche du jaune foncé (spéciale dédicace). par ailleurs, nulle couleur n’est foncièrement laide. c’est souvent l’association malheureuse de plusieurs tons ou de formes associées à ces couleurs qui les rendent peu agréables.

Un peu de théorie

La couleur, c’est d’abord un contexte. Et il n’en existe que deux. Soit la couleur est soustractive, comme l’impression, la peinture, c’est à dire que l’ajout d’une tonalité à une couleur va faire tendre le résultat vers le noir. Dans ce cas, la représentation typique des couleurs se fait par sa valeur en CMJN (Cyan, Majenta, Jaune, Noir, les 4 primaires en impression), et en pourcentage de chaque primaire. Sinon, c’est de la couleur additive, comme la lumière et les écrans, à savoir que toute valeur ajoutée à une couleur va avoir tendance à éclaircir le résultat. Dans ce mode, les primaires sont le rouge, le vert et le bleu (RGB). Par exemple, la lumière solaire est blanche et se décompose en un ensemble de nuances contenant ses trois primaires. Nous ne descendrons pas ici au valeurs infra(rouge) ou ultra(violet) qui ne sont pas perçues. Cette différence de contexte est juste primordiale, puisque certaines couleurs ne sont accessibles que dans un mode et pas dans l’autre (Fluos), ou disponibles via un rayonnement spécifique (lumière dite noire). De plus, dans le cadre de l’impression, les couleurs finales qui vont sur le papier sont soustractives, mais traitées par des logiciels sur écrans, donc avec de la couleur additive, avec un joli gap d’interprétation à la clef. Pour l’exemple, un rouge pur en additif (RGB=255,0,0) ne sera pas disponible en soustractif et sera interprété en RGB 231,43,0 pour obtenir son équivalent imprimable le plus proche. Ceci est d’autant plus vrai que les couleurs sont étalonnées par des normes très précises et par des gabarits standardisés (Pantone, …).

Pour la suite de cet article, nous ne parlerons plus que de couleurs additives, puisque ce sont celles qui nous intéressent pour le moment, celles des écrans.

Au niveau du codage des couleurs, la norme couramment admise aujourd’hui est le RGB. Chaque canal de couleur est codé sur une valeur comprise entre 0 et 255. Plus la valeur est basse, moins ce canal est présent dans la résultante (le mélange des trois canaux). Dans cet exemple, le gris est obtenu par un mélange identique des trois canaux de couleurs. La combinatoire de ces valeurs autorise donc plus de 16 millions de couleurs, ce qui est suffisant pour que l’œil humain ne discerne pas de ruptures dans les valeurs. Ceci dit, il existe de nombreuses autres méthodes d’encodage et notamment la méthode hexadécimale, ou chaque canal est codé sur deux digits, valant respectivement une valeur comprise entre 00 (équivalent de 0 en hexa) et FF (255). Dans ce schéma, le code #000000 représente le noir et le code #FFFFFF représente le blanc. Vous constaterez qu’il n’est affaire ici que de protocole, puisque le nombre de couleurs adressables demeure le même. Enfin, d’autres méthodes existent mais sont peu employées (HSB, lab).

Enfin, nous disposons également, pour des raisons historiques ou de performances de nuanciers réduits, dont les valeurs ne couvrent pas tout le spectre de la vision humaine. on parle alors de couleurs indexées. Celles-ci peuvent donc se voir réduites à 256 valeurs, ou 128 (voire moins) selon le type de compression que l’on applique. C’est notamment le propre de formats de fichiers comme le .GIF qui n’autorise que 256 tons. Bien entendu, moins une images contient de tons différents, plus léger sera son poids, surtout en cas de compression.

La roue chromatique

la couleur est souvent représentée dans le monde informatique sous forme de tableau à deux entrées, une pour les valeurs dans un intervalle donné et une pour la nuance affectée, mais si l’on considère que le spectre de la lumière visible reboucle entre le rouge et le violet, la représentation la plus proche intuitivement de la réalité est certainement sous forme de roue chromatique. cette représentation, en plus d’être intuitive, offre aussi l’élégance de faire figurer toutes les valeurs sur un seul graphique.

Les associations de couleurs

Depuis longtemps, les couleurs ont été étudiés, disséquées et des ensembles chromatiques se sont dégagés. Ces ensembles proposent généralement des nuances formant une harmonie spécifique en accordant certains tons ou certaines couleurs entre elles. Vous connaissez sans doute les couleurs dites “complémentaires”, puisqu’elles répondent naturellement à un défaut du cerveau, que vous pouvez tester assez facilement : Si vous posez un carton d’un blanc pur sur un mur vert très clair, le carton, par contraste apparaitra légèrement rose. En fait, le cerveau fait un raccourci entre une couleur et son opposée sur la roue chromatique. Ainsi, lorsque l’on parle de couleurs complémentaires, on met pour l’exemple en opposition le vert et le rouge, le orange et le bleu ou le jaune et le violet. ces couleurs présentent l’avantage de disposer d’un très fort taux de contraste entre elles. Ceci dit, mal employées, elles sont souvent dérangeantes car trop en opposition. On parle aussi assez souvent d’ensemble monochromatique lorsque les tons sont tous choisis dans une couleur donnée. Autre type, la triade, qui propose un triolet de valeurs écartées de 120° sur la roue chromatique. Vous pouvez retrouver toutes ces associations dans des applications spécifiques, telles que Kuler (https://kuler.adobe.com/#create/fromacolor). Et bien entendu, on peut expérimenter par soi-même, afin de dégager de nouvelles tendances ou des usages hors-normes.

la psychologie des couleurs

Encore une fois, il est ici assez délicat de tenter de dégager des notions psychologiques qui ne soit pas “clichés” ou qui soit applicables partout et en tout lieux puisque le propre de la psychologie est d’être intrinsèque. Ceci dit, un grand nombre d’expressions populaires démontrent que la couleur dépeint notre état psychologique (une colère noire…). De manière plus technique, des psychologues se sont penchés sur l’impact de la couleur sur notre ressenti, comme notamment Max Lüscher. Ce docteur helvétique pensait que la couleur est une donnée universelle et objective, mais que sa perception est fortement subjective. Cette théorie à pour effet directe que l’interprétation de la perception des couleurs permet de définir une profil psychologique d’une personne. Max Lüscher a donc créer un test, dont le but est de présenter 8 cartons de couleurs différentes (Bleu, Jaune, Vert, Rouge, Violet, Marron, Gris et Noir) à un sujet et à lui demander de les classer par préférence. Ce classement est sensé refléter un état psychologique étudiable du sujet. Bien que ces études restent controversées (effet Barnum), il est toutefois peu étonnant que certaines couleurs soient associées à certains traits psychologiques, à certains critères psychologiques.

le bleu est associé au calme, à la réflexion, au mouvements lents. C’est une couleur agréable pour les environnements de travail, propre à l’atmosphère studieuse. C’est notamment la couleur institutionnelle des produits de la gamme Windows, mais aussi de Dell, de HP, de Facebook, de WordPress, Twitter, Flickr,…. C’est statistiquement la couleur préférée des hommes. C’est aussi la couleur la mieux représentée dans les paquets de M&M’s.

Le jaune est la couleur de l’excentricité, de l’exubérance, de la spontanéité, de l’optimisme et de l’action. C’est souvent la couleur de marques automobiles (Renault, Opel, Subaru). C’est la couleur la plus rapidement décodée par le cerveau humain et aussi celle qui fait le plus pleurer les bébés. C’est la couleur la moins représentée dans les paquets de M&M’s.

Le vert symbolise la défense, la continuité, la fierté, la persistance, la tranquillité et le calme. On retrouve ici des identifiants écologiques, bien sûr, mais également Starbucks. C’est aussi celle du père Noël original, avant que les marques le transforment en bonhomme rouge. Evidemment c’est aussi la couleur du dollars et de nombreuses monnaies de par le monde. C’est la couleur préférée des médecins, puisqu’elle est sensée vous éviter un ulcère.

Le rouge, c’est la couleur de l’agressivité, de l’action, de la compétition, de la volonté, de l’excitation et du désir. C’est bien sûr la couleur de Ferrari, des Rolling Stones, de Virgin et de Oracle. Aux JO de 2004, les athlètes portant du rouge ont significativement reçu plus de distinctions. La statistiques de la proportion des voitures rouges dans les accidents est une légende urbaine que l’on aime bien croire. Surtout ceux qui ont des voitures grises.

Le violet est associé à la sagesse, à l’enchantement, au domaine du surnaturel, du succès et de la richesse, de la royauté, de l’élévation spirituelle. Cette couleur est relativement peu commune en terme de branding, mais on la trouve tout de même dans les logos de Yahoo ou de Scifi. C’est la couleur préférée des rois et reines. C’est l’argon qui est utilisé dans les néon violets.

Le marron et l��orange sont les couleurs du corps de de la vision extérieure. ce sont des couleurs charnelles, sensuelles, confiantes et brillantes. Elles sont portées par des marques aussi célèbres que Fanta, Firefox, UPS, La Fnac… Le orange est la couleur fétiche des Pays-Bas.

Le Gris, est bien sûr la couleur de la prudence, de la concession, de la neutralité, de l’équilibre, de l’institution et du commerce. Hormis pour la couleur des costumes qui illustre bien ce propos, nous retrouvons cette tonalité dans des logos de compagnies internationales, souvent associés à la police de caractère. C’est le cas pour Microsoft, Autodesk, Apple, Wikipédia, EADS ou Mercedes-Benz. Si vous voyez tout gris, c’est que vous êtes daltonien. la bonne nouvelle, c’est que vous voyez plus de nuances de gris que les autres. Et oui, les chiens perçoivent aussi les couleurs (sauf le rouge).

Les couleurs dans l’univers Microsoft.

En dehors de toute notion de branding de marque, Microsoft propose un certain nombre de lignes directrices en ce qui concerne l’usage des couleurs dans les interfaces. Et ceci pour favoriser un aspect enjoué, volontaire et radicalement moderne des interfaces d’aujourd’hui. Ces couleurs, généralement sont assez hautes dans le spectre de la saturation (mais pas au plus haut, un peu de retenue) et globalement dans des tonalités diverses en ce qui concerne les accentuations (les couleurs qui portent le contenu) et neutres (blanc, noir, gris ou gris colorés) pour les fonds. c’est d’autant plus vrai en ce qui concerne la charte Windows Phone qui est décrite par les couleurs de thèmes utilisables pour les utilisateurs (voir ci-dessous). Note à propos des thèmes : Je suis assez favorable, si rien ne vous oblige à faire autrement (charte existante, contradiction flagrante, volonté artistique délibérée), d’utiliser dans les applications la couleur du thème choisie par votre utilisateur, puisque d’une certaine manière, vous ferez vivre votre application dans son univers.

En ce qui concerne Windows 8, le nuancier sera tout aussi coloré et dynamique, mais pourra comporter plus de nuances. Il ressemblera donc à ceci :

Toutefois, il ne s’agit ici que de propositions et encore une fois, le premier critère de sélection des couleurs de votre application doit reposer sur une stratégie volontaire (De qui, de quoi, à qui et pourquoi parle mon application). En plus de la charte graphique, vous saurez maintenant ajuster vos couleurs en fonction des différents modes et des feelings associés aux différentes tonalités. Gageons que ces quelques notions sauront vous inspirer et vous apporter quelques réflexions pour le développement des vos applications !

Une nouvelle ressource pour vos icones :

ROUSSEAUMichel — Wed, 13 Mar 2013 10:04:00 GMT

…disponible sur ce site :

http://iconmonstr.com/

Et les icones sont en SVG, en plus….

A new ressource for your icons…

ROUSSEAUMichel — Wed, 13 Mar 2013 10:02:00 GMT

…is available here : http://iconmonstr.com/

And the icons come in svg format…

Les icônes pour les App bars de Windows 8

ROUSSEAUMichel — Mon, 25 Feb 2013 16:39:00 GMT

Comme vous l’avez peut-être remarqué, vous pouvez personnaliser la barre d’application de votre appli Windows 8 et y insérer vos propres icônes spécialement designées. Super. Vous avez sans doute également remarqué que vous pouvez le faire de deux manières distinctes. Voyons comment cela fonctionne :

L’icone-police de caractère.

Le moyen le plus rapide pour créer votre propre jeu d’icônes consiste à utiliser une…police. Comme ceci, les glyphes restent en vectoriels, notamment parce que la police que vous allez utiliser est de type True Type. Et Microsoft permet aux développeurs d’utiliser la police système nommée Segoe UI symbol qui contient tout un ensemble de glyphes appropriés pour donner à votre application les icones qu’elle mérite. Tout ce que vous avez à faire, à ce niveau, c’est d’appeler le code correspondant au glyphe que vous souhaitez faire apparaitre.

Les icones designées à la main

Mais si vous souhaitez créer des icones singulière, comment faites-vous? Vous les créez dans votre éditeur de pixels favori, puis vous les importez dans votre projet et vous vous rendez compte que cela ne fonctionne pas et que vous obtenez un rendu plus que bizarre. Je suis passé par là et voilà comment j’ai résolu le problème :

Créez un nouveau document dans Photoshop ou dans Paint.Net avec un fond transparent. la taille de ce doc sera de 160pixels de haut par 80 pixels de large. Divisez cet espace en deux lignes de 40 pixels de haut et en quatre colonnes de 40 pixels de large. Vous obtenez donc 8 carrés de 40 pixels de large. N’hésitez pas à encore diviser cette grille pour placer vos éléments avec plus de précision.

La ligne de 40 pixels du haut concernera le thème sombre (avec des icones claires), tandis que la ligne basse regroupera les icones du thème clair (avec des icones noires).

Avant de vous lancer, juste une règle rapide: Ne dessinez pas les cercles d’entourage de vos icones. Ceux-ci seront rendus par le système.

Chaque ligne contient donc 4 colonnes, chacune représentant un état différent. La première colonne est dévolue à l’icône par défaut ou “repos”,”Rest” (le blanc en haut, le noir en bas). La seconde colonne regroupe l’état Survol (hover). Donc, si votre appli ne gère pas cet état (Multi-touch pur, par exemple), vous pouvez simplement dupliquer la première colonne dans la seconde. La troisième colonne est réservée à l’état “Pressé” (Pressed) ou “Actif”. Vous pouvez copier la seconde colonne et la reproduire dans la troisième en l’inversant. Enfin, la quatrième colonne définie l’état “Désactivé” (Disable). Copiez ici une des icones noires, ajustez son niveau jusqu’à obtenir un gris moyen, et dupliquez ce glyphe dans la ligne en dessous.

Vous devriez obtenir une planche de ce genre (Attention! la planche dans cette article est dessinée sur un fond bleu-gris, seulement pour permettre de bien voir les glyphes blancs. Dans la réalité, le fond sera transparent).

Tout ce qu’il vous reste à faire, c’est d’enregistrer ce fichier dans un fichier png, en 24 bits avec transparence et cela devrait donner un look ravageur (et fonctionnel) à votre application ! Amusez-vous bien !

Merci à David Catuhe pour les tests et les bananes.

Icons for an app bar in a Windows 8 application

ROUSSEAUMichel — Mon, 25 Feb 2013 16:10:00 GMT

As you may have noticed before, you can tweak the application bar of your Windows 8 application and put your “specially designed” icons inside that section of the layout. Fine. You may also have noticed that you have two ways to achieve that goal. Let’s see how it works :

The font icon

The fastest way to create your own set of icons is to use …a font. That is quick and efficient. And the icons stays in vector mode, because the font you will be using is a typical TrueType Font. And Microsoft offers for all the developers a dedicated font to get the best icons your application deserves : Here comes the Segoe UI Symbol. All you have to do, so far is to call the right code that represents the fitting glyph.

The designed icons

But what if you want, or need, to create your very special icons set? You probably have created them with your favorite pixel editor, then import the set in your project and get a very weird rendering…. Yes, I’ve been there too, and found the solution. In fact, you need to create a “sprite” board. I’ve done this like that:

Create a new photoshop or Paint.Net document with a transparent background. The size of the document shall be 160px x 80 px. Divide this space in four columns of 40 pixels width, and in two rows of 40 pixels height. If you need to, do not hesitate to refine that basic grid, for more accuracy. Basically, the upper row will be used for the dark theme (white icons), and the lower row will be occupied with the dark glyphs (Light Theme).

Prior to begin, just a quick rule : Do not draw the circle that surrounds the icon. it will be rendered apart by the system.

Each row has four columns, each one representing a particular state. In the first column, you will set the “by default” or “rest” icon (white up, black down). In the second column, you will draw the “hover” state of your icon (Well, duplicate the first column, if your application has no specific hover state). In the third column, set the “Pressed” (or active) state of the icon. Generally, you have to copy the first column, invert it, and place it carefully. Finally, the last column is reserved to the “Disabled” state. In consequence,, copy one of the black glyph,, adjust the brightness (or the white point) to a medium gray, then duplicate that glyph to the upper part of the fourth column.

You should have now a nice sprite board, with that kind of aspect (Note, this icon is drawned with a solid blue-grey background color only for you to see the white glyphs. The real background is set to transparent).

All you have to do now is to save that icon set into a nice 24 bits Png file (with transparency On) and it should looks nasty (and working) inside your application ! Have fun !

The windows Phone 8 design style

ROUSSEAUMichel — Fri, 15 Feb 2013 11:16:03 GMT

I’m not surprised. To tell you the truth, I could have that prediction. Windows phone 8 devices are hitting the market pretty hard, and even if it is a quiet revolution, the first sales forecasts are encouraging. That means that all we’re talking about since the launch of Windows Phone 7 was right, about the new User interface and the brand new experience, about the clean and straightforward design, about the new vision of what is an authentically digital approach. And it finally comes to an upper level with Windows Phone 8. Let’s see precisely how it works:

Windows 8 / Windows Phone 8, same paradigms?

Yes. YES! But, do you use your tablet or your PC the same way you use your phone? Are you the kind of person who take pictures with your tablet? NO, you’re not, because, you have from a long time learned that the experience with an ultra-mobile device is VERY different from the one you could have with a tablet or a PC. For example, most of the time, you only use one finger to control the interface of a phone. One finger. And half of the time you are using the phone outdoor, with a bright sunny sky, or, on the opposite, a rainy or a nightly environment. With high constraints. Do I have to mention that sometimes, you even use your mobile while you are driving your car? Aren’t you? So, you cannot imagine one single second that the guidelines that rule the Windows 8 UI should be the same as the ones that lead the Windows phone experience.

Remember also that, depending on how polite you are, you should use your phone with the sound off, or with no speaker. I also guess that you have cut off the typing sounds, do you? No sound feedback at all. And, on top of that, the device is small. It’s only 5’ wide. Not that much when speaking about complexity…

With all that in mind, and taking into account all those restrictions, yes the Windows 8 paradigms apply here the same way. The interface should be clean, proper, and elegant. It should empathize the fonts, because they are beautiful, the content should lead the navigation, you should leverage the white spaces and think twice before laying the stuff down to simplify, concatenate, reduce or simply delete all the unnecessary things, controls, … Classical design skills in here?

Talking ‘bout fingers

Keep in mind that the user will often use only one finger to interact with its device. And, if the device is a NOKIA, the user may eventually wear gloves while playing with an application. So you have to carefully lay the interactive things down to avoid touch mismatch or gesture error. The minimum size for a touchable item is 7 px, and the minimum recommended size is 9 px. Note: If you want to make a text touchable, always use a transparent grid or border just under the text. This is that plain object the user will interact with.

Two way navigation.

One of the most different behavior between a Windows 8 application and a Windows Phone app is the way you can control the layout. Depending on how you hold the device, you can scroll horizontally AND vertically. In fact, the navigation in itself is mostly organize on the horizontal axis, and the content is laid vertically. Inside this pattern, you have two controls at your disposal. The panorama control lets you scroll smoothly among the sections of your app, in a One-way scroll. Otherwise, you should use a pivot controls which will let you scroll horizontally from one page to another, allowing you to browse throughout your content in a more distinctive way.

Yes, I’m talking about controls. These are technical glitches that let you drive your layout the way you need them to respond. These controls are coded in XAML, a specific and powerful language when it comes to create your own layouts. Of course, you can edit these controls and your layouts with a Wysiwyg editor. It is called Blend for Visual Studio. We will come back to that later.

What are the paradigms?

If you have experienced the Windows 8 design, you should be pretty confident with the “so-called” Modern UI design of Windows Phone 8. But the main thing is that WP 8 is much more flexible (especially because you can scroll in both axis). I mean, you have a lot more significant ways to improve and organize your UX. As for the start screen. You must have noticed that tiles have now three sizes (small square, medium square, big tile). And this is only one little spot of the overall design. The major points of the WP 8 UI are bound to those paradigms:

- It uses the modern signage. Iconic, relevant, and straightforward representation.

- The devices may be used with only one finger…

- …outdoor, indoor, nightly, when the user drives, drinks, eats (not in the same time, obviously…)

- The UX should feel fast, quick and responsive.

- The UX must be app-centric, and must remain focused on the primary target of the application.

- The UI must do more with less, and favor the content (rather than the chrome).

- The UI should leverage the white spaces…

- … As it must leverage a clean and straightforward font (not only readable, it must be clean and beautiful). Segoe WP is the best for the price.

- Full screen is the only scenario.

- The navigation is driven by the content.

- Use an app bar to lay down interactions…

- …but animations bring organization, and discoverability.

- Animations are the trick to add context and usability.

- Transitions bring depth.

- A good grid is the key to success.

- The magic number is 12. For example, the empty space, on the left of the display, is tied in 24 px (2x12). Space between blocks should be equal to 20 px.

- The items must not be placed with an inner space under those 20 pixels.

- UI must be designed for the form factors (landscape/portrait).

- The UI should take into account the theme of the user.

- The UI should be authentically digital.

- UX must be authentic. Don’t try to be what you are not.

- Be YOURSELF. A guy hired you for your specific talent. So go for it, and find your way among all those paradigms

What do I need to create WP8 designs?

Well, first of all, you need to have a brain. Eventually add a pen and a paper to draw onto. That’s pretty much of what you need. To begin sketching, I mean. This is where you try out your first concepts, see if they are relevant, and probably find out if it deserves the trash bin. If you think your projects deserves improvement, eventually you will need some extra tools. Let’s begin with Windows. To develop for Windows Phone 8, you will need to acquire Windows 8 PRO (because you will soon see that the emulator requires virtualization).

Then, you can install the Office suite, and specially PowerPoint. Yes, I saw you laugh. But if you also install Visual Studio 2012 (required later, for Blend for Visual Studio), you will gain access to a cool feature for storyboarding purposes. Give it a try, you will not be disappointed, believe me.

Ok, you have installed Visual Studio on Windows 8 pro, you have PowerPoint to sketch things up. You only have to download the Windows Phone SDK, available here:

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

And, after installation, you should be ready to begin something great. Oh yes, do not forget to anticipate the graphical needs with a good bitmap or vector paths editor (As Photoshop, Illustrator or Expression Design).

The Grid

As I said previously, the grid is just über important when you’re trying to reach a consistent and relevant State of the Art of layouting. And as I mentioned before, the magic number in the Windows Phone universe is 12. But, prior to edit your grid, remember that Windows Phone 8 comes with three resolutions: WVGA (800x480 px), WXGA (1280x768 px), or 720p (1280x720 px).

The right margin, before any content can be added is 24 pixels. The baseline (where stands the name of your app) will be set around 110/120 px from the top (depending on how you respect the 12 px grid). The section line (where the name of the section is laid) should be set to approx. 220/240 px. And finally, the first item name will be disposed at approx. 350 px.

The grid is not a stack of similar squares. In fact, here is the trick to do it right: Place the right and left margins (24 pixels). Cut the resulting space vertically in two equal parts, separate by a column of 20 pixels. 24+24+20 = 68 pixels already used. In a standard 768 pixels wide resolutions, you should have two big spaces of 350 pixels to use. Now, feel free to subdivide those areas, by adding 20 pixels columns.

Remember to leave enough room in the bottom of the layout for the application bar.

Layouting

So, you have drawn sketches on your paper, you have created storyboards with Powerpoint. You are now set to get deeper in the creation process. It’s time to begin a more graphical approach of your UX and add some colors. The best advice I can give you at this point is to take time to set the grid properly. This is the only thing that could lead to a total mess if it is not precisely set. Do not forget the magic number (12px). A lot of “Photoshoping” actions required there.

When you or your customers are fine with the “look and feel”, you can now switch to the layouting part. It is now the time to open Blend for Visual Studio. Once Blend is open, you can choose the type of project you want to design. There are three types of design for Windows Phone 8 app :

A brand new project, with no by default controls at all. Not recommended for newbies, because you do not inherit any behavior with that kind of project.

A Panorama application: It comes with a full panorama support, allowing a nice smooth-scrolling experience. It’s then up to you to modify the existing layout by tweaking the several properties of the different controls, to achieve what you have in mind. But, mostly, the panorama is filled with Panorama items, containing Listbox of items (Note that you can quickly edit the content of those Listbox simply by right clicking on it -> Edit Additional templates-> Edit generated items).

A Pivot applications, coming with a page by page navigation, is the second option to navigate through an app. Open a new project, Pivot Style. But, instead of editing a Panorama item template, you will edit a…Pivot item. Once you have beginning to edit your templates, you can press the F5 key to launch the Emulator (the strange thing that requires the Pro version of Windows 8). Note that you can specify the form factor of the emulated device in the Device tab of the Blend Interface.

Assets

To complete your quest for the perfect app, you will need to create a bunch of assets. They’re required to obtain a good looking app (with a cool splash screen), or to achieve a specific function. Here is a list of the assets you will have to provide:

Splashscreen (Slapshscreenimage.png): (768x1280 px for all resolutions), for WVGA, 480x800, SplashScreenImage.screen-WVGA.png, for 720p SplashScreenImage.screen-720p.png, for WXGA 768x1280 px SplashScreenImage.screen-wxga.png.

Default lock background: If you want your app to be on the first place. DefaultLockScreen.png (768x1280 px for all resolutions)

Panorama background (PanoramaBackground): For all resolutions, 1536x1280 px. For WVGA, 480x800

The application icon (ApplicationIcon.png): For all res, 99x99 px.

Small iconic tile (IconicTileSmall.png: For all resolutions 110x110 px.

Medium iconic tile (IconicTileMedium.png): For all res, 202x202 px.

Small flip or cycle tile (FlipcycleTileSmall.png): For all resolutions 159x159 px.

Medium flip or cycle tile (FlipCycleTileMedium): For all resolutions 336x336 px.

Large flip or cycle tile (FlipCycleTileWide.png): For all res 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 and for 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.

And now, you should be damned ready to go through the creative process of the Windows Phone User Interface. See you soon on the Store!

Le design Windows Phone 8

ROUSSEAUMichel — Fri, 15 Feb 2013 11:04:09 GMT

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”?

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.

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.

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.

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).

- 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.

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 !

Le petit pixel au fond du noir layout

ROUSSEAUMichel — Mon, 03 Dec 2012 13:32:00 GMT

Il était une fois un pauvre petit pixel, incompris, dévalorisé, que tout le monde prétendait connaître sans le cerner vraiment, tout le temps en vue, mais que l’on cherchait à éviter et qui avait subi de plein fouet, par-dessus le marché, la crise de la HD… Pour qu’enfin vous puissiez vous targuer de tout savoir sur lui, voici le conte du petit pixel et quelle est son influence sur les layouts et les interfaces d’aujourd’hui.

La définition à retenir lorsque toute tentative de compréhension a échouée.

Le pixel est une unité propre à l’affichage sur écran. L’impression papier dispose de sa propre unité qui est le point (pratiquement, c’est aujourd’hui la même chose,). Globalement, le pixel est la plus petite quantité d’information que l’on peut envoyer sur l’afficheur. Pour être précis, je devrais dire sur la carte graphique, car après elle, le signal peut être converti en format analogique et envoyé par exemple sur un écran cathodique. Celui-ci, même s’il est calibré pour des résolutions données, ne sait pas, à proprement parler, traiter les pixels. L’abréviation du pixel est px.

Viva la résolution !

Un pixel peut être carré ou rectangulaire (dans ce cas, souvent orienté verticalement).

Un pixel ne peut être qu’en deux dimensions. C’est toute la magie des images de synthèse qui transforment un monde en 3D en espace 2D. À ce propos, ce n’est pas parce qu’un film est en 3D (relief) que les pixels qui le composent sont en relief. Le pixel est toujours en 2 dimensions et à plat, mais on les traite après le rendu sur l’afficheur pour qu’ils paraissent en relief (lunettes, dalles spécifiques).

Un ensemble de pixels forme une résolution. Si l’on forme un ensemble rectangulaire de 640 pixels de long sur 480 de large (soit déjà un beau paquet de plus de 300 000 pixels), nous avons une résolution normée appelée VGA. D’autres résolutions sont ainsi standardisées, comme le sVGA (800x600 px), le XGA (1024x768 px), le SXGA (1280x1024 px), le UXGA (1600x1200 px soit pas loin de 2 millions de pixels).

Le rapport d’un format VGA (rapport hauteur /largeur) vaut 1, 3333. Si on réduit un peu la fraction (plus petit dénominateur commun), on obtient un rapport de 4/3, qui est également une norme de taille d’écran. Cependant, des rapports différents existent, comme le 16/9 (1600x900 px, 1280x720 px), 16/10 (1920x1200px, 1280x800 px).

Les fabricants de télévisions imposent aussi des formats qui sont, pour le numérique et l’Europe, le 720p (1280x720 px) et le 1080p (1920x1080 px) en attendant le 4K (4096×2160 px, soit quasiment 9 millions de pixels, tout de même). Cependant ces normes prennent aussi en compte le taux de rafraichissement de l’écran (ou la fréquence, le nombre de fois en une seconde ou l’écran peut changer l’ensemble des pixels) et d’autres valeurs plus commerciales.

Bien sûr, si l’on affiche une petite résolution (480x340) sur un grand écran, les pixels deviennent perceptibles et le rendu est mauvais. Par contre, on ne peut pas afficher plus de pixels que la matrice de l’écran n’est capable d’en afficher. Voilà pourquoi on parle de résolution efficace ou optimale lorsque la résolution d’une interface est en accord avec la capacité matérielle.

Autre considération plus matérielle, un pixel est affiché via une matrice physique qui peut contenir plus ou moins de densité, plus ou moins de micro led, mais nous ne rentrerons pas dans ces finesses dans cet article.

Dis, combien tu pèses ?

Un pixel, c’est avant tout un point de couleur. Cette couleur est généralement codée selon un modèle multiplicatif (l’impression sur papier est en mode soustractif, pour info) sur trois couleurs primaires : Le rouge, le vert et le bleu. Plus le taux de chaque couleur est élevé dans ces trois canaux, plus la couleur du pixel tend vers le blanc. Chaque canal est codé lui-même sur un ensemble de valeurs qui généralement aujourd’hui va de 0 à 255. Cela équivaut à une palette de plus de 16 millions de tons possibles pour chaque pixel. Bref, suffisamment pour que l’on ne voit pas les transitions entre valeurs lorsque l’on fait des dégradés.

Pour faire simple, chaque valeur pour un canal est codée sur 8 bits (valeur de 0 à 255). Comme nous avons 3 canaux pour chaque couleur, cela nous fait donc 24 bits pour chaque pixel. Si l’on prend une résolution nominale de 1366x768 px (soit celle de la tablette Microsoft Surface RT), nous avons donc un « poids » d’un peu moins de 3 MB. Si l’image est rafraîchie 60 fois par seconde, pour que la fluidité soit parfaite, le total de mémoire nécessaire par seconde d’image vaut 180 MB !

Et pour éviter un éventuel bouchage de la mémoire, on peut compresser le signal, notamment en ne recodant que les pixels qui sont significativement différents d’une image sur l’autre (compression sans perte), ou en diminuant le nombre de couleurs affichables (compression avec dégradation).

Tout ceci serait assez simple si d’autres méthodes de codage ne venaient compliquer un peu la donne. Par exemple, le noir ou le blanc peuvent être codés sur 1 bit. Les pixels en niveau de gris (les valeurs entre le blanc et le noir) peuvent aisément tenir sur 8 bits. Enfin, on peut aussi vouloir jouer avec des pixels transparents. La transparence peut être codée sur 1 bit si l’on se contente de valeurs franches, ou sur 8 bits si l’on veut obtenir des transparences pondérées. Ces valeurs, nous les ajoutons donc à nos informations de couleurs et nous obtenons le format RGBA (red/green/Blue/Alpha) qui sera codé sur 32 bits.

En rendu 3D, pour les puristes qui utilisent DirectX, un pixel à l’écran est le résultat d’un nombre de passes de calculs complexes qui prends en compte un nombre variable de paramètres (diffus, ambiant, réflexion, ombrage, …). Tout ceci étant bien entendu fortement accéléré par des techniques de calculs performantes (pixels shaders), par des APIs intégrées (DirectX) et par du matériel sans cesse plus puissant (carte graphique, notamment).

Voilà en grande partie pourquoi les graphistes disposent d’une multitude de formats qui couvrent l’ensemble de leurs besoins créatifs, tout en permettant, via la compression, d’occuper moins d’espace.

Mais alors bon, c’est quoi le vectoriel ?

Bref, nous venons de voir que disposer des pixels en troupeaux peut vite devenir assez consommateur en place. Sans compter que l’avènement de l’image numérique, notamment dans le domaine du « print », ne date pas d’aujourd’hui, mais d’une période où les disques durs étaient beaucoup plus restreints. Et pour ne rien arranger, la taille des livrables pour l’impression est beaucoup –BEAUCOUP- plus important, notamment pour des raisons de densité. Allez, me direz-vous, qu’elle est encore ce nouveau bazar ? Pour bien comprendre la densité, nous allons reparler un peu de résolutions. Prenez une résolution de 640x480 px et affichez-là sur un écran de 10’ (Pythagore me signale à l’oreillette que cela fait une surface de 7 x 7 pouces, soit 49 pouces carrés ou 324 cm carrés). Vous obtenez alors un rapport du nombre de pixel par cm2. Projetez maintenant la même résolution sur un écran 30’ et vous aurez alors une densité bien moins importante. La densité est donc directement dépendante de la taille de l’afficheur et de sa résolution. On parle de plus en plus de très haute densité, puisque certains devices sont capable d’afficher 2048x1536 px sur seulement des écrans de 10’.

Mais on parlait du Print, là, alors quel rapport, Hector ? La densité est un facteur crucial en impression, puisque en fonction des supports à imprimer, il faudra travailler avec plus ou moins de pixels. Par exemple, lorsque l’on travaille sur une carte de visite, on utilise une densité importante pour que le rendu papier soit parfait (du 300 dpi ou dot per inch, points par pouce), Sur ce document, cela nous fait donc une résolution de 900 px par 500. Imaginez maintenant que je travaille pour une affiche de 4mx3m, à la même densité ! Cela va nous faire un gros pavé de 62000x35000 px… ! Mais en général, on utilise pour les affiches une densité moindre (de l’ordre de 150 dpi).

C’est dans ce cadre qu’a été créé le vectoriel. Ici, plus de notion de pixels. On ne parle plus qu’en courbes mathématiques. Et comme une courbe mathématique est une fonction, on peut assez facilement interpoler un grand nombre de pixel via une fonction qui prend beaucoup moins de place en mémoire que des pixels unitaires. Reste que le résultat est meilleur et plus compressé si le nombre de couleurs est limité, ou que l’image vectorielle dispose de peu de courbes différentes.

Et, en tout état de cause, ce que l’on gagne en mémoire, on ne le perd que marginalement avec Windows 8, puisque le rendu SVG est accéléré par IE 10 et le xaml supporte nativement l’accélération matérielle.

Alors, oui, mais on ne fait pas du print, nous !

Oui, c’est exact, les graphistes venant du monde du print et ceux issus du pur numérique ont toujours eu des visions très différentes du métier de création, même s’ils utilisent les mêmes outils. Nous avons déjà parlé de la différence colorimétrique (additives en RVB ou soustractives en CMJN), mais aussi de la densité. Mais le designer d’interfaces pourra légitimement se poser la question de l’utilité de concepts tels que la densité dans son travail de tous les jours, parce qu’au final, pour son affichage, un pixel reste un pixel et qu’il travaille toujours en résolution donnée… Oui, c’est exact, sauf dans les cas où vous devez faire appel à de la rasterisation d’objets vectoriels. Allons bon, Simenon, voilà autre chose ! Car une interface est un mélange d’objets pixélisés et d’objets vectoriels, notamment les polices. Ces dernières sont souvent envoyées á l’affichage sous forme de vecteurs et pixellisées (rastérisées) à la volée. Voilà qui explique en grande partie les subtiles différences d’affichage qui peuvent exister entre une planche Photoshop et un layout Visual Studio : Une composition faite sous le logiciel d’Adobe est paramétrée par défaut en 72 pixels par pouce, alors qu’un layout sous Blend utilise une densité nominale de 96 pixels par pouce. Du coup, les polices Sous Photoshop devront être légèrement agrandies pour respecter la densité d’un projet Visual Studio, ou sinon, on devra porter attention à la densité nominale du projet Photoshop de manière à rasteriser correctement les polices de caractères.

Autre point d’importance aujourd’hui, c’est que l’on travaille de plus en plus en vectoriel, notamment en WPF. Le Xaml fait en effet la part belle aux tracés qui proposent l’avantage d’être redimensionnables et peu sensibles à la résolution. Si vous utilisez la techno alternative, équivalente sous Windows 8, à savoir le HTML, vous pourrez savourer la gestion du SVG (Scalable Vector Graphics) qui permet l’utilisation d’objets vectos dans votre layout. Toutefois, des contraintes sont à prévoir, tant en terme de performances (un trop grand nombre de tracés entraine un temps de calcul certains, même si le process est accéléré) qu’en terme d’interprétation (les contours spéciaux, notamment en xaml sont assez mal interprétés).

Petit nota en ce qui concerne les polices : celles-ci sont lissées de manière spécifique, par l’utilisation d’un algorithme de rendu sous-pixel nommé Clear Type, sous Windows. Cette technique implique un compromis de la chrominance sur la luminance d’une police.

Bien bien bien. Et mon layout dans tout ceci ?

Le layout peut, en un sens, constituer un exemple d’anti-pixel, puisque c’est le plus haut niveau d’affichage sous Windows 8. Notamment parce que les applications ModernUI sont plein écran.

Le layout est donc l’ensemble des pixels qui compose l’écran. Quel que soit son format ou sa résolution, d’ailleurs. Et c’est là où les choses se complique drastiquement, puisque dans le monde PC, nous avons à notre disposition une panoplie complète d’écrans qu’il faut tous adresser, depuis le 1024x768 jusqu’à la dalle de grande taille (ou de forte densité, vous avez compris…) de 2560x1440.

Je ne reviendrai pas ici sur les moyens inhérents à chaque solution logicielle pour obtenir une interface fluide, mais plutôt sur la manière et sur la philosophie pour bien y parvenir. À haut niveau, on considère que la philosophie d’affichage des layouts est orientée « blocs », quelle que soit la technologie utilisée. En HTML, on viendra par exemple poser des « div » dans lesquelles on viendra disposer notre contenu. D’ailleurs, ces div peuvent aisément être renommés pour être contextualisé (header, etc…). Même chose en XAML, ou la notion de contrôles est basé sur la logique de blocs (grid, Stackpannels, …). Dès lors, il suffit de bien définir les blocs fixes des blocs mobiles (ou adaptatifs) de notre layout pour obtenir assez rapidement un écran fluide.

Pour autant, au niveau du designer, il convient de créer les maquettes et les wireframes des applications dans 3 résolutions significatives minimum et de toujours prévoir deux form factors (paysage et portrait).

Cela permet notamment de se faire une idée précise de la taille relative des polices, qui disposent souvent d’une taille fixe dans des layout adaptatifs, et de la pertinence des éléments à l’écran. Quelle que soit votre méthode ou votre technologie, ce qu’il faut retenir, c’est qu’il vaut toujours mieux ajouter du contenu, à mesure que la résolution (et donc la place disponible) augmente, plutôt que d’agrandir les éléments, bien que ceci reste dépendant du contexte d’utilisation. Dans cette optique, le layout fluide orienté contrôle prend tout son sens puisqu’il permet de redéfinir l’emplacement des éléments en fonction de la place disponible pour les afficher : Ainsi, le menu Démarrer de Windows 8 propose 3 lignes de vignettes en 1366x768, et 5 en 1920x1080. Ajouter du contenu permet aussi de réduire drastiquement le scroll, ce qui n’est pas à négliger.

J’ai un faux-contact.

Le tactile est génial pour l’utilisateur. C’est un fait. Mais il se révèle être le compagnon capricieux des créateurs de pixels. Peu de feedbacks nativement, beaucoup de contraintes et une zone interactive très importante. Oui, la pulpe d’un doigt entraîne une surface interactive 10 fois plus importante que celle d’un pointeur conventionnel. Et la main de l’utilisateur est généralement devant le contenu, bloquant l’affichage de celui-ci et réduisant encore le feedback. Et comme si cela ne suffisait pas, les layouts touch doivent parfois contenir des contrôles du système pouvant phagocyter 50 % de l’écran (clavier virtuel). Un cauchemar qu’il faudra bien intégrer et prévoir pour proposer une interface cohérente.

Le meilleur exemple reste le bouton tactile. Celui-ci devra faire au moins 7x7px et au mieux 10x10 px. Mais nos doigts ne sont pas en pixels, eux. Surtout que comme nous l’avons vu précédemment, la résolution, bref le nombre de pixels, est une donnée floue, puisqu’elle est étroitement liée à la notion de densité et de taille d’écran… Du coup, il conviendrait ici de parler de taille en changeant d’unité et en parlant de millimètres, plutôt que de pixels, unité malheureusement incompatible avec la notion de densité.

Donc, lorsque l’on fait du tactile, on utilise souvent une règle de base pour parer aux situations limites et on joue sur des marges moyennes entre les éléments pour convenir d’un pattern utilisable dans le maximum de configurations possibles. On estime ainsi que 5 px valent en moyenne 4,5 mm. Deux boutons ne doivent pas être disposés à moins de 5 pixels l’un de l’autre. On préconise même de prévoir une zone sensible de 10 px pour le bouton et une marge au moins équivalente afin d’éviter les « faux contacts ».

Pour info, un bouton Modern UI Windows 8 fait 40px de large tandis qu’un bouton Windows Phone 8 fait 84x84px (grosse densité). Bien loin des recommandations minimales, donc, mais c’est en grande partie à cause des fortes densités des écrans d’aujourd’hui.

Et encore, on parle ici de zone de contact physique avec un device. Avec Kinect, donc sans contact physique, la zone de « hit » devra être encore agrandie et temporisée pour offrir tous le feedback nécessaire au le confort de l’utilisateur.

Conclusion

Nous l’avons bien vu, le pixel est un ami incomparable pour bien comprendre comment un layout est organisé. Il est l’élément de base d’un système qui ne se comprend qu’au niveau le plus haut. Le designer et le graphiste sont donc confronté tous les jours à une expérience quasi-quantique, certains éléments étant immuables, tandis que d’autres ne peuvent être définis que par l’effet perçu sur l’ensemble. Pour être pertinents dans un contexte pareil, il faudra souvent en passer par une phase qualitative (recherche graphique et maquettes de validation de concept), puis de tester ces rendus dans vos résolutions cibles, et enfin de prévoir vos layouts dans un maximum de résolutions possibles, en faisant des tests (ou des tirages imprimés de validation) pour vous assurer que la densité ne viennent pas ruiner vos efforts. En effet, une taille de police prévue pour du 1366x768, restera agréable sur un écran full HD (1920x1080) de plus de 80 cm, y compris à 5 mètres, mais sera très inconfortable sur un écran 12 pouces. Pensez toujours usage, et dans tous les cas, essayer de prendre en compte les déficients visuels.

Can you help me adding ads in my app?

ROUSSEAUMichel — Mon, 29 Oct 2012 12:19:15 GMT

More and more often, people come to me and ask me about ads in a Modern UI application. Clearly, as the general availability date was getting closer, people were showing a growing interest on that topic. Of course, all the “big” apps, those which will be on the Store for the D-Day (the 26 th of October) do not have to pay back their presence on the Windows Store, and do not embed a specific advertisement policy. But within all those apps which will come along after the general availability, a big part consist in “services” apps that can be paid back by a specific add usage. And, along with a lot of interesting stuff in the Modern UI of Windows 8, the add are to be used with guidelines and sometimes, forbidden behaviors you have to be aware of. Let’s have a look closer to all those points.

The tile.

Pretty simple here, we will start slowly: No add on your tile. Clear enough? Well now, try to imagine if all the tiles were showing ads… What a mess it would be, and I think the Start menu will soon be reflecting a very negative image. So, the rule is “No ad on the start menu”, even if the tile is animated. Try also to avoid all the critical cases where you could expose some content that can be understood as advertisement throughout dynamic tiles. Try to be smart and relevant here. An example? Imagine that your application is gathering prices from various articles from several sources over the net. If you expose one of the articles, with its price and if that article is not shown on the Hub of the application, it can be considered as an ad. Do not mention the price on the tile, and show that article on the hub, and it magically turns into content. That is smart. And always consider to guide your user to the content (a looooot of things in my app) you’re fighting for, not for a specific item (a single, so single object).

General warning

Your application should not display only…adds. In facts, I shouldn’t say “Should”. I should have say: Your application must not display only ads. Understood? And to push on with the “smart” logic, your app shouldn’t display on first sight an ad. And there, I use the “Should” term.

You have an access to the Microsoft store to provide nice contents, and to prove that your content is the best. So, leverage the MS store and provide functionalities and content beyond ads.

Of course, an app must not display inappropriate ads, as it must not provide inappropriate content. For example, your app must not contain pornographic content (rated pegi 18). Same thing with your advertisement. Do not smile, because if your ads come from a web address, you have to make sure everything runs fine and clean. Remember, Windows 8 applications are designed for a global audience.

And what about ads in controls?

Well, you must not use the swipe from edge interaction to display advertisement. Nor the app or the navigation bar. In fact, the user should not think that the system force him to see ads. And as the top and bottom bar experience is really close to the system’s paradigm, you have to avoid this kind of behaviors. In the same way, you cannot place advertisement in the settings, the share, or the search panel.

Anything left?

Yes. Remember that you application should not be focused on the ads it contains. That means that the main scenario of the app must not be slow down by the ads, neither should the ads disrupt the user experience. But it’s up to you to empower the adds with a specific content that let your add do more than just opening a web page. For instance, you can link a page with a specific content, closely related to the ad. You are in charge here to push the ad to do more than just mimic the common “hyperlink” behavior.

And, for security reasons, do not allow your ad to execute code that does not come from the ad provider. Nothing is more terrible than the suspicion of viral threads. In general, try to avoid external code that you do not have reviewed and validate.

But, after you take all those considerations into account, you should ask yourself: Is my ad cool? Does it take place in the right spot? Does it ruin the look and feel of my design? Is it well integrated? Do the colors of the ad fit the graphical inspiration of the page? I probably hate nothing more than a well-designed and graphically inspired web site filled with a bunch of ads, laid all over with no specific orders nor taste. Once again, try to be smart. First thing to take care of is the feeling: do not accept an ad that goes against what your application is saying. It may be obvious, but if you’re trying to demonstrate the coolness of the green power, you should avoid to lay there an ad on alkaline batteries …

Try to layout the things with rhythm: If you’re using tiles, put the ads in tiles also to keep the overall look and avoid ruining the business with something that does not feel integrated.

And the major concern: get into the shoes of your customers, from time to time, and try to feel as he does when he’s browsing your applications. If you do not have enough imagination, hire testers to provide feedbacks. Or get in touch with your local Microsoft DPE division. Sometimes, ads brings something fresh, often, it is just noisy, and mostly it is not seen. To get the job properly done, you have to emphases the ads and to bring unseen content for your ads.

Bien intégrer de la publicité dans une application Windows 8.

ROUSSEAUMichel — Mon, 29 Oct 2012 12:12:48 GMT

De plus en plus souvent, des clients viennent me voir et me demandent comment bien intégrer de la publicité dans leur application pour Windows 8. Clairement, plus le jour de la sortie de Windows 8 se rapprochait, plus les gens montraient un intérêt grandissant pour ce sujet. Il est évident que toutes ces grandes applications présentes sur le Store le jour du lancement, ne sont pas simplement présentes pour obtenir un substantiel retour sur investissement, mais cherchent plutôt un avantage présentiel ou d’image.

Par contre, les applications qui vont arriver, la plupart du temps servicielles, auront besoin de faire financer le développement pour la plateforme ModernUI en intégrant le SDK de publicité. Et comme dans beaucoup de domaines passionnants de Windows 8, l‘usage de la publicité vient avec un ensemble de lignes de conduite et de règles. Regardons de plus près ce point particulier.

La tuile.

C’est assez simple ici, nous commençons en douceur. Pas de pub sur la tuile du menu Démarrer. Cela a le mérite d’être plutôt clair, non ? Maintenant, tâchez de vous représenter ce nouveau menu Démarrer si toutes les tuiles exposaient de la publicité. Quel…bazar, un véritable enfer commercial. Je pense que le menu Démarrer retournerait vite une image très négative et irrespectueuse. Donc la consigne est de ne pas mettre de pub ni sur la tuile principale, ni sur une éventuelle tuile secondaire, ni si l’une ou l’autre est dynamique. Essayer aussi d’éviter les cas limites, comme par exemple le fait d’exposer du contenu qui pourrait être considéré comme de la publicité. Il faut essayer d’être intelligent et pertinent. Imaginons : le métier de votre application est de rassembler les prix de divers articles provenant de différents sites. Si vous exposez un de ces articles sur votre tuile, avec son prix, cela peut être considéré comme de la publicité. Alors ne mentionnez pas le prix et affichez cet article sur la home page de votre application, et magiquement, cela devient du contenu. Ça, c’est intelligent. Et envisagez toujours de guider votre utilisateur vers la multiplicité de votre offre, et pas vers un article en particulier.

Avertissements d’ordre généraux.

Votre application ne doit pas afficher seulement de la publicité. Cela peut sembler idiot, mas ce n’est pas l’optique de Microsoft de promouvoir un Store qui entretiendrait ce type d’applications. Vous devez avoir un contenu de qualité, ce qui exclut de fait de n’exposer que de la publicité. Et si je devais broder là-dessus, je dirais que l’application ne devrait pas exposer de la publicité en premier, dans l’ordre de visite de l’appli.

Bien entendu, votre appli ne doit jamais exposer de la publicité dont le contenu serait inapproprié (tout comme votre application ne doit pas exposer non plus du contenu inapproprié). Par exemple, la publicité intégrée ne doit pas contenir de pornographie ou du contenu gore, ou encore du contenu estimé PEGI 18. Ne riez pas, car si votre publicité provident d’une régie externe, vous devez rester attentif aux types de messages envoyés par votre provider. Souvenez-vous que Windows 8 est destiné à un public général.

Et en ce qui concerne les contrôles ?

Votre application ne doit pas utiliser les actions des bords de l’écran pour afficher de la publicité. Cela veut dire, pour faire simple, que vous ne pouvez pas utiliser la barre applicative (en bas de l’écran), la barre de navigation (en haut) ou aucune autre barre (barre des réglages, talismans, recherche, partage…) pour afficher de la pub. Il faut ici imaginer, en termes d’expérience utilisateur, ce que cela provoquerait si vous ajoutiez dans ces zones, facilement assimilées à des zones réservées par le système, une publicité. Cela serait perçu comme un « call to action » intrusif et disruptif par rapport au fonctionnement de l’application. À éviter, donc.

Autre chose?

Oui. Ayez toujours à l’esprit que votre application ne doit pas être exclusivement tournée vers les publicités qu’elle embarque. Cela implique que le scénario de base de votre appli ne doit pas ralentir l’utilisateur de ce qu’il vient chercher, à savoir votre contenu, pas plus que cela ne doit interrompre l’expérience utilisateur. Mais libre à vous de valoriser la publicité avec du contenu spécifique qui ajoute du sens, qui fait un peu plus qu’ouvrir une simple page web, par exemple. Une autre possibilité serait d’ouvrir une page supplémentaire avec du contenu proche de la proposition de valeur de la pub, et faire plus que simplement répliquer le comportement d’un hyperlien.

Et pour des raisons de sécurité, ne permettez pas á votre publicité d’exécuter du code qui ne viendrait pas du fournisseur de la pub. Rien n’est plus terrible que la suspicion d’une menace virale. En général, évitez autant que faire se peut, l’exécution de code que vous n’auriez pas vous-même validé.

Mais, après toutes ces considérations, vous devez surtout vous demander ceci : Est-ce-que ma pub est sympa ? Est-elle placée au bon endroit? Ne ruine-t-elle pas mon design? Est-elle bien intégrée? Les couleurs de la pub sont-elles raccord avec le style graphique de l’appli ? En effet, je ne déteste rien tant qu’une page très bien désignée et proprement faite, remplie de tout un tas de publicités, posées en vrac dans un coin. Encore une fois, essayez de faire les choses avec intelligence et avec sensibilité. N’acceptez pas que la pub dise le contraire de votre application. Cela peut paraître évident, mais vous aurez du mal á évoquer combien est cool l’énergie verte si vous placez au beau milieu de votre layout une pub pour des piles alcalines…

Essayez de disposer les choses avec rythme. Si vous utilisez des vignettes, placez votre publicité dans une tuile également de manière à conserver une cohérence graphique et éviter ainsi de ruiner le look and feel avec un élément qui ne semblerait pas intégré.

Et pour finir, notre souci principal : Mettez-vous dans les chaussures de votre utilisateur et essayez de ressentir ses sentiments tout au long de la navigation de votre application. Si vous n’avez pas assez d’imagination, embauchez des testeurs, ou entrez en contact avec la division dpe Microsoft la plus proche de chez vous. Parfois, ajouter de la pub est rafraichissant, souvent c’est juste du bruit, la plupart du temps, la pub n’est même pas vue. Alors pour que le boulot soit fait de manière efficace, c’est à vous de donner de l’emphase à vos pubs et d’ajouter du contenu inédit à vos publicités…