Des polices qui ont du caractère !

Bodoni, Cooper Black, Helvetica, Gotham, Times, Comic Sans… tous ces noms vous parlent mais connaissez-vous leurs histoires ?

Découvert grâce à  un tweet de l’ami Chakal Creative, France Culture et Thomas Sipp nous proposent une web série sur les origines des plus célèbres typographies. Ces 12 films d’animation sont frais, divertissant et surtout très instructif sur la création et les usages de chacune des ces polices dans notre quotidien.

La suite sur le site officiel de France Culture »

L’actualité de cette web série sur la page Fan Facebook « Sacré caractères » »

Des polices qui ont du caractère !

Astuce graphique pour les Daltoniens

En testant Poptile le nouveau jeu de 1button, j’ai découvert dans les paramètres la possibilité d’adapter le jeu aux personnes atteintes de Daltonisme et cette astuce visuelle a retenu toute mon attention.

Poptile est un casual game simple mais addictif : le joueur doit faire disparaître des blocs de couleur. Chaque action créée une nouvelle ligne se rapprochant progressivement d’un axe éliminatoire.

Par défaut chaque bloc comporte des couleurs différentes : rose, blanc, cyan… Pour aider les personnes daltoniennes, un symbole se superpose selon la couleur qui lui est associé.

Cette astuce graphique est tellement astucieuse à  mon goût qu’elle est devenue le mode visuel par défaut sur l’ensemble de leurs jeux le proposant. La couleur n’est plus le seul objectif a supprimé dans le jeu. Un nouveau repère visuel vient compléter l’action. Cette association d’élément se fait naturellement et permet de gagner en rapidité dans les actions à  accomplir.

manette sonyJe ne sais pas si les symboles sont un clin d’oeil à  Sony mais ils correspondent bien l’univers du jeu.

poptile daltonismepoptile daltonisme

L’astuce de 1Button me rappel également celle présente sur le service de Trello pour appliquer des labels sur les tickets :

trello daltonisme

Outils disponibles

En 2008 et 2009, 2 articles ont déjà  été postés sur ce sujet sur Ergophile, mais que nous reste-il aujourd’hui comme outils pour aider les designers dans la conception de leur interface ?

  • Color Oracle toujours présent
  • Sim Daltonisme, un simulateur sous Macintosh qui permet de filtrer en temps réel une zone entourant le pointeur de la souris.
  • Fonctionnalités incluses dans Photoshop :
  • photoshop daltonisme

Et dernièrement, un jeune étudiant de New Dehli est en train de développer un algorithme qui permettra d’adapter l’affichage des contenus web à  la perception des daltoniens – Plus de détails sur Presse-citron.net

Si vous avez d’autres exemples, je suis preneuse 🙂

Astuce graphique pour les Daltoniens

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

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