Material Design, l’avenir de nos interfaces ?

Depuis quelques jours vous devez entendre de-ci de-là l’apparition du Material Design lancé, il y a peu, par Google. Cela n’est pas une tendance comme le Flat Design mais bien un langage qui va sans doute devenir l’interface responsive universelle d’Android et de Chrome OS. Selon Google, le Material Design met l’accent sur la création d’un langage visuel qui synthétise les principes classiques d’une bonne conception produit alliant innovation, technologie et science.

Comme la documentation est très dense, en voici un bref aperçu :

Unifier les interfaces cross-platform

material_design_cross_plateform
Un design unique et homogène pour l’ensemble des services de Google et des applications tierces.

2014 est bien l’année du changement pour Google. La firme souhaite unifier les interfaces de tous ses produits pour obtenir la meilleure expérience sans transition perceptible par l’usager d’un canal à l’autre. Que cela soit sur smartphone, tablette, desktop ou autre objet connecté, le confort de l’utilisateur doit rester identique et la transition fluide. Pour cela Google lance un nouveau langage dit visuel qui va standardiser l’apparence des applications sur l’ensemble de tous les terminaux :

Les principes du Material Design

En quelques points, voici les fondamentaux du Material Design :

materialdesign-principles-layersquaresMétaphore ou affordance
La lumière, la surface ou le mouvement sont les clés de la perception d’un objet existant dans l’espace par rapport à un individu. En ergonomie, cela pourrait se traduire par l’affordance qui est l’ensemble des caractéristiques d’un objet utilisé par un individu lors d’une action. Cette notion de perspective ou de profondeur doit être accentué pour donner une nouvelle perception de l’interface à l’usager.


materialdesign-principles-circleplus
Audacieux, graphique et intentionnelle
Le choix des typographies, des couleurs, des échelles, des visuels, des icônes… sont fondamentaux lors de la conception d’un produit. Selon leurs utilisations, ils créent une hiérarchie, donne du sens et mettent l’accent sur ​​les actions de l’utilisateur pour une meilleure utilisabilité.

Ressources sur le site Google.com/design :


materialdesign-principles-flyingsquare
Mouvement créateur de sens
L’intéractivité ou les retours utilisateurs sont souvent retranscrit par l’animation d’un élément. Le Material Design intensifie cette notion en fournissant des animations types reliées à chaque action. Elles vont permettre de rassurer l’usager et de valider son choix. Toute action se déroule dans un environnement qui va se moduler pour réorganiser l’information avec des transitions fluides mais cohérentes pour l’usager selon le device.

Ressources sur le site Google.com/design :


Objectif : Standardisation d’un langage

Google souhaite simplifier la conception des apps pour les développeurs avec des Guidelines spécifiant des règles d’ergonomie, de transitions animées, d’effets visuels et des gestuelles tactiles pour homogénéiser les interfaces quel que soit le support. Par ce biais, Android deviendra peut-être un système d’exploitation universel tout comme le Material Design ? Cet enjeu est tout à fait possible vue l’énergie déployée par Google et les outils mis à disposition. Le framework Polymer pour les développeurs va les aider à appliquer ces normes dans la réalisation d’applications responsives. Des outils comme Google Web Designer/ seront quant à eux dédiés à la profession du même nom. A voir leurs évolutions dans les prochains mois…

Ressources

Google met à disposition un site web avec différentes ressources qui seront mises à jour régulièrement permettant d’enrichir les principes et les spécificités du Material Design : Google.com/design.

Matias Duarte Google
« Unified us in our thinking; it’s absolutely a constraint. Design is all about finding solutions within constraints »

Matias Duarte, VP Design chez Google

Material Design, l’avenir de nos interfaces ?

Rendez-vous à Erepday

erepdaySi je vous donne rendez-vous en Alsace le 19 juin prochain, c’est pour que nous puissions échanger sur nos différents parcours lors de cet évènement dédié à l’E-Réputation et au Community Management qui réunit plus de 300 professionnels chaque année.

PSSTTT… Je vous en parle également car j’y serai intervenante ;-)

Depuis plus de 1 an, je veille, je cherche et partage mes retours d’expériences sur la thématique du : Design Emotionnel, du design universel au design humain.

Après plusieurs conférences chez Microsoft Bizspark, BNP Paribas et Bee Numérique, cette fois-ci, j’interviens à Mulhouse : Nouveau challenge qui devra durer 45 min maximum au lieu de 2h habituellement (la bavarde que je suis devra se canaliser)

Vous trouverez l’ensemble des intervenants ainsi que le programme sur www.erepday.fr

erepday public

erepday statistiques

Rendez-vous à Erepday

Quelles sont les habitudes des internautes lors de leur achat ?

Petit rappel sur les dernières statistiques concernant les habitudes et les comportements des internautes au moment d’un achat en ligne.
Grâce à cette infographie de Vouchercloud, nous retenons principalement :

  • 92,6% des usagers disent que le design et les visuels sont les facteurs principaux de l’action d’achat
  • 1 client sur 2 a plus confiance dans un produit après avoir visionné une vidéo
  • 31% des usagers ont achetés après avoir été influencé par la vidéo
  • 67% des consommateurs lisent 6 commentaires avant de se sentir en confiance

Cette infographie me rappelle l’article de Frenchweb : « Twitter, 1 milliard de personnes l’auraient essayé, les 3/4 abandonné ». Je vous invite à le lire et à méditer sur l’importance du design, du rédactionnel, des tutos explicatifs après inscription des usagers.

A lire aussi : L’intimité du client, un véritable moteur de croissance pour le business »

infographie statistiques 2014 ecommerce et e-acheteur

Quelles sont les habitudes des internautes lors de leur achat ?

Spark : filmer n’a jamais été si simple

Cela fait plusieurs semaines que je souhaite vous partager mon retour d’expérience sur cette application mobile, je profite de ce weekend de détente pour le faire ;)

icon spark appSpark est sans doute une des application mobile les plus fluide et instinctive du moment.

Comme Vine, en 1 « touch » vous pouvez capturer vos moments les plus intimes sans pour autant être obligé de les partager au monde entier. Spark n’est pas un réseau social mais un outil ayant une ergonomie simplissime qui permet à tous de faire du montage vidéo rapidement.

Less is more

Si je devais illustrer cette fameuse doctrine « Less is more » par une application mobile, j’hésiterais entre Spark et Mr Mood.

Mr Mood est un outil d’aide à la décision et Spark, un utilitaire. Même si ces 2 applications sont différentes dans leur usage et objectif, j’opterai tout de même pour l’exécution et l’utilisabilité de Spark. J’ai testé plusieurs applications de montage vidéo disponible sur l’iPhone, et Spark les détrône haut la main dans sa simplicité d’usage.

Une interface fluide

spark enregistrement

Pour filmer, rien de bien compliqué :

  • Je pose mon doigt sur l’écran = je filme
  • Je retire mon doigt de l’écran = j’arrête de filmer
  • Je repose mon doigt = je reprends l’action de filmer au moment où je me suis arrêtée
  • Je retire mon doigt = j’arrête de filmer
  • Etc.

J’avais une appréhension en regardant les photos de l’application sur le positionnement du doigt, mais enfin de compte, cela est assez proche de Vine et même plus agréable : toute la surface du Smartphone correspond au champ visuel de l’utilisateur mais également du point d’entré pour activer l’enregistrement.

spark séquence vidéo

L’ingéniosité de cette app provient également du repère temporel qu’elle offre à son utilisateur : Chaque séquence vidéo est représentée via un segment et une couleur qui sont directement superposés sur le viseur de la caméra. Ce cadrant est une « ProgressBar », ou une « Timeline », qui devient un indice pour l’utilisateur lorsqu’il compose sa vidéo.

spark camera filtre

Comme la mode est toujours à « Instagram », Spark vous propose d’ajouter des filtres qui vont vous faire « voyager »… du moins une impression. Chaque filtre comporte le nom d’une ville ou d’une zone géographique comme Paris, Barcelone, Tokyo ou encore la Zone51^^. Vous pouvez aussi sonoriser votre vidéo à partir de de votre bibliothèque musicale afin d’offrir une atmosphère proche de vos goûts et de vos émotions.

Un accompagnement optimisé

Comme toute interface nouvelle et qui ne ressemble à aucune autre, le designer doit penser à guider l’usager dans sa découverte. Pour sa première vidéo, chaque fonctionnalité est accompagné de « Tips » ayant des schémas très explicites. En un coup d’oeil, l’utilisateur comprend ce qu’il doit faire – Je regrette seulement de ne pas pouvoir les retrouver après leurs fermetures et la traduction en français qui comporte quelques lacunes.

spark tuto

Tip pour expliquer le montage vidéo des séquences filmées

Avec le montage vidéo, l’utilisateur a accès à l’essentiel des fonctionnalités pour réaliser une vidéo HD de qualité :

  • « Drag and drop » des séquences vidéos pour les changer de place,
  • Possibilité d’ajouter des filtres pour un effet visuel atypique,
  • Durée de la vidéo : 30 secondes maximum – par défaut l’utilisateur est conditionné pour optimiser ses prises de vues = saisir les moments clés,
  • Sonorisation de la vidéo via sa bibliothèque personnelle,
  • Pas d’effet de transition, de fondu de début / de fin, de découpage précis, etc.
  • Partage possible sur Instagram, Twitter, Facebook, iMessage et AirDrop

Spark offre une interface minimaliste, dépouillée et rudimentaire. Si vous souhaitez découvrir une application qui répond à sa promesse, je vous invite à télécharger Spark Camera.

Spark : filmer n’a jamais été si simple

Infographie : tendance et optimisation de son site web au mobile

Chaque fin d’année, plusieurs sites publient des infographies sur les dernières statistiques des usages des internautes. En voici une sur le mobile et l’importance d’optimiser son site web au mobile.

Pour compléter cette infographie, à la fin de ce billet, vous avez l’introduction donner lors du dernier Social Drink-Up dont le thème était : R.O.I du marketing mobile.

Bonne lecture !

web-mobile optimisation infographie

Image