La nouvelle version du Play Store introduit le « Material Design » d'Android L

La nouvelle version du Play Store introduit le « Material Design » d’Android L

Autant s'y habituer, cela ne fait que commencer

Avatar de l'auteur
Vincent Hermann

Publié dans

Société numérique

24/07/2014
37

La nouvelle version du Play Store introduit le « Material Design » d'Android L

Google diffuse actuellement une mise à jour conséquente pour son Play Store. Il s’agit en effet de la première application à recevoir le « Material Design » qui a été présenté le mois dernier, et qui doit marquer une grande évolution visuelle pour Android L.

Premiers éléments concrets du « Material Design » 

Lors de sa grande conférence I/O, Google a dévoilé de très nombreuses nouveautés en cours de travaux pour la prochaine mouture d’Android, baptisée « L » pour l’instant. La firme prépare un important renouvellement de ses interfaces, tant via les règles ergonomiques que par les concepts visuels et les palettes de couleurs. Ode au flat design, « Material Design » fait la part belle aux couleurs pleines, aux grandes surfaces et, dans certains cas, aux contenus très graphiques.

 

La première application à basculer vers cette nouvelle présentation est Play Store, autrement dit celle par laquelle on accède à toutes les autres. Comme on peut le voir plus haut sur la vidéo réalisée par Droid Life, il s’agit surtout de premiers éléments, car ce n’est pas l’application complète qui a été reprise de fond en comble. Cependant, l’essentiel de l’interface a changé et fait la part belle aux contenus.

 

On retrouve de nombreux éléments apportés par Microsoft avec son langage graphique Modern UI. Ce qu’on appelle communément le « chrome », autrement dit ce qui définit le contenant d’une application, s’efface au maximum pour mettre en avant le contenu. Dans une fiche d'application par exemple, les éléments ne sont plus compactés les uns à côté des autres, mais simplement disposés en empilement vertical.

 

google play material design
Crédits : Anandtech

Une lisibilité largement améliorée, au prix d'un espace nécessaire plus grand 

Comme souvent avec ce type d’interface, ce que l’on gagne en lisibilité se perd en surface d’affichage. Car un tel layout prend davantage de place et il faudra faire défiler l’écran pour retrouver les éléments. En contrepartie, les différentes informations sont beaucoup plus lisibles et l’utilisateur aura certainement l’impression de mieux respirer.

 

Cependant, pour éviter qu’une page d’accueil pour une application ou un autre contenu ne soit trop longue, la fiche descriptive est tronquée. Par défaut, on ne trouvera que les derniers éléments ayant changé. Tout le reste, à savoir les nouveautés absentes ou même le résumé de l’éditeur, sont réunis dans une section « Lire la suite », sur laquelle il faudra appuyer pour afficher les informations.

 

google play material design
Crédits : Kirill Grouchnikov

Puisque « Material Design » doit mettre en avant au maximum le contenu, Google a également décidé de mettre en place de larges bannières pour les applications, la musique, les films et tout ce qui peut se récupérer depuis la boutique. Pour autant, ces bannières ne sont encore pas nombreuses car elles demandent une création graphique adaptée. Dans le cas des applications notamment, les éditeurs tiers devront eux-mêmes proposer l’image afin de compléter la fiche descriptive.

 

Lisibilité, iconographie, grandes images, animations : les bases sont posées et les prochains mois verront un nombre croissant d’applications de l’éditeur être renouvelées de la sorte. La question qui reste en suspens est de savoir si les éditeurs tiers suivront le mouvement et travailleront les nouvelles lignes introduites par Google. Si tel est le cas, l’écosystème Android pourrait connaître son plus gros renouvellement graphique depuis ses débuts.

 

En attendant, la nouvelle version de Google Play est graduellement diffusée. Elle porte le numéro de version 4.9.13 et Droid Life en propose le lien direct si vous ne souhaitez pas attendre sa disponibilité.

37

Écrit par Vincent Hermann

Tiens, en parlant de ça :

Sommaire de l'article

Introduction

Premiers éléments concrets du « Material Design » 

Une lisibilité largement améliorée, au prix d'un espace nécessaire plus grand 

next n'a pas de brief le week-end

Le Brief ne travaille pas le week-end.
C'est dur, mais c'est comme ça.
Allez donc dans une forêt lointaine,
Éloignez-vous de ce clavier pour une fois !

Commentaires (37)


Le 24/07/2014 à 09h 29

Flat design … <img data-src=" />


Le 24/07/2014 à 09h 29

Plutôt sympa comme maj. Je l’ai installée sur mon LG g2 ça tourne parfaitement.


Le 24/07/2014 à 09h 30

Je trouve l’évolution plutôt positive. J’aime ce design moins “carré”.


Le 24/07/2014 à 09h 34







Nioniotte a écrit :



Flat design … <img data-src=" />







Flat design <img data-src=" /> <img data-src=" />



Le 24/07/2014 à 09h 36

Windows Phonedroid. <img data-src=" />


Le 24/07/2014 à 09h 37

Ce qui est amusant, c’est que dans les applis métiers, quand on fait un upgrade et que l’ergonomie change, même un peu, les utilisateurs gueulent. Et c’est souvent signe de formations/mises à niveau.

Pour Androïd, heureusement que c’est ludique. C’est beau d’évoluer sans cesse. Quand c’est ludique.


Le 24/07/2014 à 09h 48

Adopté en ce qui me concerne: lisibilité nickel et les INfos principales bien mises en avant AMHA. <img data-src=" />


Jarodd Abonné
Le 24/07/2014 à 09h 53

J’aime bien ce nouveau design. La seule chose que je regrette, c’est la perte du bandeau de couleur sous les boutons Partager/Rechercher/Plus.


Le 24/07/2014 à 09h 58

Impeccable.


Le 24/07/2014 à 09h 58







Jarodd a écrit :



J’aime bien ce nouveau design. La seule chose que je regrette, c’est la perte du bandeau de couleur sous les boutons Partager/Rechercher/Plus.





Pour ma part, je ne vois plus “partager”…



Le 24/07/2014 à 10h 00







kade a écrit :



Pour ma part, je ne vois plus “partager”…





Juste en-dessous des commentaires. <img data-src=" />



Le 24/07/2014 à 10h 05







frikakwa a écrit :



Juste en-dessous des commentaires. <img data-src=" />





Je n’ai jamais vraiment réussi à me remettre du passage de Windows 3.11 vers 95. Désolé.

<img data-src=" />



Le 24/07/2014 à 10h 11







kade a écrit :



Je n’ai jamais vraiment réussi à me remettre du passage de Windows 3.11 vers 95. Désolé.

<img data-src=" />





<img data-src=" /> Tu vas souffrir toi au passage à Android L! <img data-src=" />



Thoscellen Abonné
Le 24/07/2014 à 10h 22







kade a écrit :



Je n’ai jamais vraiment réussi à me remettre du passage de Windows 3.11 vers 95. Désolé.

<img data-src=" />



Mais si ca se trouve, le bureau révolutionnaire que Microsoft nous prépare dans Windows 9, c’est le bureau Windows 3.1 ! <img data-src=" />





Cependant, pour éviter qu’une page d’accueil pour une application ou un autre contenu ne soit trop longue, la fiche descriptive est tronquée.

Notons que c’est déjà le cas, actuelement.



Le 24/07/2014 à 10h 26







Thoscellen a écrit :



Mais si ca se trouve, le bureau révolutionnaire que Microsoft nous prépare dans Windows 9, c’est le bureau Windows 3.1 ! <img data-src=" />





Si c’est le cas, j’ai hâte !

J’ai quand-même un peu peur sur le nombre de disquettes pour l’install ; s’il y en a plus de 10 (ce que j’ai cru comprendre) ça risque d’être chaud (secteurs défectueux, tout ça…)

<img data-src=" />



Thoscellen Abonné
Le 24/07/2014 à 10h 26







Nioniotte a écrit :



Flat design … <img data-src=" />



Curieusement, Google s’en éloigne, justement ! Ils ont évité le skeuomorphisme à la mode chez Apple il y a quelques ans, et se sont inspiré de l’étrange Metro Design de Microsoft, sans pour autant reproduire du Flat Design. J’pense que les Graphiste de Google ne veulent pas se résoudre à faire où du trop “minimaliste”, ou du trop “imitation de la réalité” dans la mesure où ce sont des solutions simplistes qui viennent à l’esprit quand on ne sais pas quoi faire du design d’un produit.

Même si je suis pas fan de ce Material Design (même le nom je le trouve pas adapté), le je préfère déjà à ceux que j’ai déjà présenté. Il me semble évident que Microsoft doit évoluer de son Metro vers un design permettant plus de subtilité dans la représentations des layouts et la mise en évidence des contenus (C’histoire de Chrome)



Autre sujet : Google présente le Matérial Design comme étant mettre les animations au service de l’expérience utilisateur et de ergonomie. Vue la vidéo et les présentations, c’est intelligence, pertinent, cohérent, peut-être même innovant dans sont ensemble, mais ce ne sont pas les premiers a avoir réfléchit la dessus ^^



GruntZ Abonné
Le 24/07/2014 à 10h 30







Nioniotte a écrit :



Flat design … <img data-src=" />









Kamalen a écrit :



Flat design <img data-src=" /> <img data-src=" />





Ah ! Les gouts et les couleurs …



L’esthétique d’un design passe souvent avant son ergonomie, et c’est à mon sens bien dommage.

Après, c’est mieux de pouvoir choisir son papier peint et ses meubles sans avoir à toucher aux murs ou à la vue.



Perso, j’aime pas le flat; mais je suis toujours avec le cube Compiz et Emerald pour mes fenêtres …



Vincent_H Abonné
Le 24/07/2014 à 10h 30







Thoscellen a écrit :



Curieusement, Google s’en éloigne, justement ! Ils ont évité le skeuomorphisme à la mode chez Apple il y a quelques ans, et se sont inspiré de l’étrange Metro Design de Microsoft, sans pour autant reproduire du Flat Design. J’pense que les Graphiste de Google ne veulent pas se résoudre à faire où du trop “minimaliste”, ou du trop “imitation de la réalité” dans la mesure où ce sont des solutions simplistes qui viennent à l’esprit quand on ne sais pas quoi faire du design d’un produit.

Même si je suis pas fan de ce Material Design (même le nom je le trouve pas adapté), le je préfère déjà à ceux que j’ai déjà présenté. Il me semble évident que Microsoft doit évoluer de son Metro vers un design permettant plus de subtilité dans la représentations des layouts et la mise en évidence des contenus (C’histoire de Chrome)



Autre sujet : Google présente le Matérial Design comme étant mettre les animations au service de l’expérience utilisateur et de ergonomie. Vue la vidéo et les présentations, c’est intelligence, pertinent, cohérent, peut-être même innovant dans sont ensemble, mais ce ne sont pas les premiers a avoir réfléchit la dessus ^^







Au contraire, il n’y a pas plus flat design que ce que c’est en train de faire Google. Ce type de design est justement une conception générale, pas un thème graphique.



Le 24/07/2014 à 10h 32



Comme souvent avec ce type d’interface, ce que l’on gagne en lisibilité se perd en surface d’affichage. Car un tel layout prend davantage de place et il faudra faire défiler l’écran pour retrouver les éléments.



C’est pour ça que je ne vais quasiment plus sur le Google Play depuis la 3.10, parceque j’ai autre chose à foutre que de passer mon temps à faire défiler mon écran <img data-src=" />


Le 24/07/2014 à 10h 51

Le “flat design” alors qu’on se dirige résolument vers les écrans 3D <img data-src=" />


Thoscellen Abonné
Le 24/07/2014 à 10h 55







Vincent_H a écrit :



Au contraire, il n’y a pas plus flat design que ce que c’est en train de faire Google. Ce type de design est justement une conception générale, pas un thème graphique.



Ah bah on n’as pas la même vision de ce qu’est le flat design alors ^^

Ce qu’a fait Microsoft avec son environnement métro, a base de contraste coloré, de formes simples et étaler, je trouve que c’est du flat design. Et c’est justement ce qui me déplait : écrase toutes les couches de l’application et l’on sais plus quel élément va au dessus de l’autre, et donc quelques sont les relations qui existent entre ces éléments : Les boutons, les barres d’outils, les menus n’indiquent plus sur quoi ils agissent.



Google garde encore plein d’élément avec du relief : Ca commence par des jeux d’ombres (rappelles-toi la vidéo de présentation du Material Design où l’on vois les petites fiches se faire déplacer une a une par un doigts imaginaire) et ca continue avec des bordures et quelques (rares, certes) dégradés (Dans le PlayStore de la vidéo ou le Play Musique, les barres d’outils et barres d’onglet ont des bordures foncées, donnant un peu de reliefs et donc de logiques).

Ces mêmes lignes sont découpé d’autres formes (disques, surtouts) pour apporter des repères ergonomiques à l’utilisateur, et Google évite certains écueils de Metro.



Apple, même si je ne connais que de visu, a travailler son Flat design sur des contraste de couleurs, des assombrissements et des éclaircissement, et surtout le floue. Cela permet aussi de donner le la hiérarchie au éléments et donc d’aider l’utilisateur a se repérer.



Bon, c’est comme ça que je comprends les choses, ça reste mon point de vue <img data-src=" />



Le 24/07/2014 à 11h 08

@Thoscellen: J’allais dire la même chose :p

définition wikipedia du flat design (pour ce que ça vaut)



Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions (such as drop shadows, gradients, or textures)



Avec Material design, y a encore la notion de profondeur (ou de hauteur), même si ça s’inspire du flat design.


Le 24/07/2014 à 11h 28







Vincent_H a écrit :



Au contraire, il n’y a pas plus flat design que ce que c’est en train de faire Google. Ce type de design est justement une conception générale, pas un thème graphique.







Ah… si seulement les gars qui ont vendue cette idée débile (à nos grands frais) à Pole Emploi l’avait su..!



Le 24/07/2014 à 12h 15







Vincent_H a écrit :



Au contraire, il n’y a pas plus flat design que ce que c’est en train de faire Google. Ce type de design est justement une conception générale, pas un thème graphique.







Heu… je pense pas au contraire, ou alors on a pas les même définitions du material et flat design…

Le material design permet l’utilisation de dégradé, d’ombrage pour donner du relief, de transition multilayer, de superposition d’animation etc. qui ne sont pas du tout la la philosophie du flat design



Le 24/07/2014 à 12h 23







i4004 a écrit :



Le “flat design” alors qu’on se dirige résolument vers les écrans 3D <img data-src=" />





C’est que t’as pas compris le principe du flat design



Mon Nexus 5 en frétille d’avance.


Le 24/07/2014 à 12h 36

Je viens de la télécharger et j’adore.



C’est plutot rare normaleement je déteste les mises à jour graphisme Google.



Le plays store était rendu un gros bordel, difficile de trouver les infos rapidement pour les applications.


Le 24/07/2014 à 12h 37







von-block a écrit :



Je viens de la télécharger et j’adore.



C’est plutot rare normaleement je déteste les mises à jour graphisme Google.



Le plays store était rendu un gros bordel, difficile de trouver les infos rapidement pour les applications.







Tu l’as dl où ?



Le 24/07/2014 à 12h 42







zer a écrit :



Tu l’as dl où ?









En attendant, la nouvelle version de Google Play est graduellement diffusée. Elle porte le numéro de version 4.9.13 et en propose le lien direct si vous ne souhaitez pas attendre sa disponibilité.



http://www.droid-life.com/2014/07/22/download-google-play-4-9-13-rolls-out-featu…



Le 24/07/2014 à 13h 02

Tiens, marrant.. J’ai lu l’article en entier, mais je n’ai pas enregistré cette info.. Sans doute étais-je en train de finir ma lecture au moment où mon boss passait dans le bureau ^^


Vincent_H Abonné
Le 24/07/2014 à 13h 20







jaretlafoudre a écrit :



Heu… je pense pas au contraire, ou alors on a pas les même définitions du material et flat design…

Le material design permet l’utilisation de dégradé, d’ombrage pour donner du relief, de transition multilayer, de superposition d’animation etc. qui ne sont pas du tout la la philosophie du flat design







Non effectivement, my bad, le multilayer coince vraiment. <img data-src=" />



Le 24/07/2014 à 15h 20







i4004 a écrit :



Le “flat design” alors qu’on se dirige résolument vers les écrans 3D <img data-src=" />





Résolument, résolument… ah et puis je te conseille de jeter un coup d’œil aux histoires de z-index dont il est question dans une partie de la documentation décrivant le “Material Design”. Entre ça et l’utilisation d’images ou de vidéos 3D en tant qu’illustration, on devrait se retrouver avec quelque chose qui ressemble beaucoup à l’interface de la 3DS ou du magasin dématérialisé sur celle-ci… sans vraiment avoir à retoucher la description actuelle de ce en quoi consiste cette convention graphique.



Il y aura peut-être des retouches occasionnelles, mais cela m’étonnerait que Google passe à autre chose avant un bon moment.



Le 24/07/2014 à 15h 58

Je tourne depuis une bonne semaine avec Android L sur mon nexus 5. Bon a part quelques bugs (statut beta), le tout est vraiment beau. Les animations sont simples et élégantes, les couleurs sont bien choisies.



Bon boulot Duarte <img data-src=" />


Le 24/07/2014 à 19h 24

Pour info le design de Chrome sur Android a également évolué dans le même style sur la dernière beta. Je suppose que ça préfigure une mise à jour de toutes les applis Google.


Le 24/07/2014 à 21h 08

Il me semble quand meme que cest le minimum que les applis Google suivent les guidelines de Google. La vraie question est plutôt de savoir si les autres suivront aussi et en combien de temps


Bambou64 Abonné
Le 24/07/2014 à 22h 09







darth21 a écrit :



Il me semble quand meme que cest le minimum que les applis Google suivent les guidelines de Google. La vraie question est plutôt de savoir si les autres suivront aussi et en combien de temps









Si au moins c’était le cas…

Pas une appli Google ne gère les guidelines KitKat, avec avec couleur dans la barre d’état, et «plein écran» avec transparence (translucent) pour la navbar (touches virtuelles du bas)…

Liste d’applis qui le gèrent là par exemple.



Donc il serait temps qu’ils donnent l’exemple…



Le 26/07/2014 à 03h 07

Voilà un bel exemple de Flat Design, pas comme sur Windows 8.