Be Fast and Fluid

Soyez rapide et dynamique. C’est un paradigme général de metro que de privilégier l’information pertinente, dynamique et personnelle. C’est déjà une donnée importante dés la vignette d’accueil de votre application, dans le menu Démarrer. mais cela recouvre également deux autres concepts importants :

Utilisez des interactions directes et pensez “Touch”. En effet, l’interface metro est pensée pour le matériel multipoint (bien que l’expérience utilisateur ne doive pas souffrir de l’usage de contrôleurs classiques, une belle gageüre, convenons-en). Cela implique que les actions que l’on peut déclencher dans une page donnée ou sur un objet particulier doivent être désignées à dessein, en n’oubliant pas les leçons du Tier 1 (Do more with less). Une fois vos interactions ramenées a l’indispensable et au minimum, disposez leurs actionneurs dans la zone privilégiée qui à été conçu spécifiquement pour elles :  La barre d’application, qui peut ordonner des actions pour la page ou pour l’élément sélectionné. Organisez vos interactions de manière que celles-ci soient regroupées de manière cohérente et en rapport avec vos pouces…

Utilisez des animations qui ne soient pas dérangeantes ou perturbantes. Une animation ne devrait être “posée” dans l’interface que pour inciter l’utilisateur à découvrir une partie de l’application, pour le récompenser d’avoir effectué une action spécifique à un contexte, pour le valoriser. Favorisez les animations simples et directes (je clique et j’obtiens une animation), plutôt que les animations temporisées (je clique, je maintiens cliqué durant une seconde pour lancer l’action). Enfin, privilégiez l’animation qui apporte du sens au contenu, plutôt que d’aller à son encontre (par exemple, une animation en rotation qui masque une partie du contenu pour une application boursière…).

 

 

There is a global paradigm with the metro style : always promote dynamic, personnal and relevant information. The dashboard tiles are a fairly good example of those qualities, but, as you will see, there’s also two important concepts here :

Use  direct interactions and think with “touch”in mind. Metro was though to be “touch first”. That means that actions launched by a specific item or from a particular page must be purposely laid, regarding the lessons from the Tier 1 (do more with less). Once your interactions designed to their essential functions, place the controls in the specific part of the metro layout, the Application bar (on the bottom of the screen). This is the best place to organize triggers for actions required by the actual page or by a item,. Try to gather those triggers in a relevant way, regarding the position of your thumbs.

Use direct animations, as well. Animations should not be confusing, nor disturbing, but laid in the layout to inspire confidence and discoverablility, to reward  the user for a specific action in the app, to promote a behaviour. Always prefer simple animations (rather than timed animations). Finally, give to your app the animations it desserves (avoid rotations for a stock exchange app, for example….)