Dans le cours : Découvrir le Material Design

Avoir le souci du détail

Dans le cours : Découvrir le Material Design

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Avoir le souci du détail

“

Une fois que nous avons compris comment les animations et en particulier les transitions doivent être gérées dans le cadre de normes précises et avec une cohérence, il va falloir que nous attachions une attention toute particulière au souci du détail. Il va s'agir en quelque sorte de la cerise sur le gâteau de notre expérience utilisateur. Ce souci du détail dans la navigation va conduire à animer des boutons et des icônes. Ces animations auront pour but d'informer, d'alerter ou de renseigner l'utilisateur. Elles devront également agrémenter son parcours. Nous avons ici un premier exemple où le traditionnel Burger Menu, que vous voyez en haut à gauche, va se transformer en flèche de retour une fois que l'on aura changé de page. Nous avons bien entendu différentes possibilités qui nous sont suggérées dans le cahier des normes de Google, dans ses guidelines, mais Google ne nous donne pas les codes pour réaliser ces icônes animées. Pourquoi ? Tout simplement, parce que cela va dépendre du système dans lequel vous allez fonctionner, de l'environnement technique. Ces icônes peuvent être tout à fait réalisées avec une technologie spécifique, HTLM, CSS ou Javascript, voire d'autres technologies comme nous allons le voir un petit peu plus loin. Voyons un exemple réel : sur ce site qui présente différentes technologies, lorsque vous allez arriver sur une page vous verrez apparaître en bas à droite une icône. Le fait que cette icône apparaisse de façon animée nous a alertés sur sa présence et nous a renseignés sur le fait que si nous voulons fermer la page, et bien c'est ici qu'il faudra aller. Et lorsque nous allons passer sur cette icône, il va y avoir une confirmation de son interactivité par le fait qu'elle change de taille et qu'il y a une petite translation avec une rotation de l'icône. Évidemment ce système est cohérent, on le retrouvera sur toutes les pages. Ici, en bas à droite, l'icône apparaît et elle réagit lorsque l'on passe dessus. Évidemment lorsque l'on ferme vous voyez qu'elle disparaît. Répétons que pour réaliser ces icônes animées, ces boutons animés, il faudra d'une part respecter les normes qui vont garantir leur cohérence, et puis ensuite les réaliser dans la technologie sur laquelle on travaille. Nous avons ici un exemple avec Angular qui va nous permettre de voir comment fonctionnent les boutons . Vous voyez que lorsque je clique ici, le bouton a un changement radial de couleur. En cliquant ici, j'aurai accès au code source sur les CSS, le JavaScript et le HTML. Nous avons, également, la possibilité d'accéder à des sites qui ont été réalisés par des professionnels et qui déconstruisent des icônes animées. Alors il peut y avoir différentes méthodes pour le faire, ici nous sommes dans une méthode qui est une méthode Javascript. Vous allez pouvoir lire l'article, alors évidemment il est en anglais mais le code lui est international, et comprendre comment ces icônes ont été réalisées. Vous pouvez également accéder à d'autres systèmes. Nous avons ici, sur le site d'Alex Miller, l'explication de non seulement comment fonctionnent ces icônes mais une déconstruction avec deux exemples : un exemple à vitesse normale et un exemple à vitesse ralentie. De la même façon, vous allez pouvoir accéder au HTML et au CSS. Vous remarquez qu'ici il n'y a pas de Javascript. Enfin il peut y avoir des publications sur des sites consacrés au code, comme ici sur Dribbble où Andreas Storm a mis à disposition le code pour réaliser ce bouton. Les développeurs sont habitués également à travailler sur, par exemple, CodePen et lorsque dans le module précédent nous avons parlé de continuité avec un exemple de carré qui apparaissait successivement en partant de la gauche, vous vous êtes certainement demandé mais comment vais-je faire ? Et bien ici , sur CodePen, nous avons l'explication du fonctionnement du système, encore une fois avec le HTML, le CSS et le Javascript. Avec ce souci du détail et l'utilisation de ces animations sur les boutons et sur les icônes, nous allons donc encadrer notre utilisateur avec une interface de navigation qui sera, certes, moins présente qu'avec les anciens systèmes mais beaucoup plus réactive et quelque part qui se signalera beaucoup mieux. N'hésitez donc pas à travailler avec des développeurs qui sont particulièrement au fait de ces nouvelles technologies : encore une fois CSS, JavaScript puis des librairies telles que jQuerry, Angular etc.

Table des matières