HumanTalks Paris : Les dévs et les créas devraient mieux s’entendre !

Le 12 de ce mois, Julien de la team HumanTalks me défia d’aborder un sujet complexe lors du 11ème #HumanTalksParis : « Les dévs et les créas devraient mieux s’entendre ! »

human talks paris

Si vous ne connaissez pas les Human Talks, c’est le moment d’y faire un tour : ambiance décontracte, apéro mensuel, 4 speakers qui vont à  l’essentiel (10 min de pitch + 10 min débat), rencontres et conversations assurées.

Quelques jours avant l’évènement, je transmets à  Julien un petit descriptif de mon intervention sans trop savoir ce que ma présentation allait contenir, en voici l’extrait :

starky hutchEn moins de 10 ans, le métier de web designer a évolué aussi vite que les technologies ce qui implique une remise en question régulière et peut-être même permanente sur cette profession et ses limites d’intervention dans la conception et execution d’un projet. Comme pour les Chasseurs*, il y a le bon designer et le mauvais designer. Cette intervention a pour but de partager mes retours d’expériences via des anecdotes en tant que formatrice en école, webdesigner pour l’annonceur / en agence et aujourd’hui en tant qu’entrepreneuse. (*Référence aux sketch des Inconnus)

MA PRESENTATION EST DISPONIBLE ICI »

Pour ma part, ce fut la première fois que j’assistais à  un HumanTalks. Je connaissais de réputation ces évènements pour leurs sujets très orienté développement mais pourquoi pas ?!

La soirée commence et au fur à  mesure des interventions, je glissais peu à  peu dans mon siège : Les intervenants évoquaient des problématiques très… techniques. Et avec toutes franchises, sur certains points, je ne comprenais rien !
Je crois même que j’ai passé la porte des étoiles au niveau -43 d’Inception.

Arriva ma mon tour… Aie!
Afin de prendre la température de la salle, je me suis permise de sonder le public :

« Combien de développeurs ici présent ? » Sur 45 personnes plus de 95% des mains se levèrent,
« Combien de désigner ? » 3 personnes seulement…
« Ok ! Je suis désolée mais pour ma part il n’y aura pas de ligne de code, de ; ou / dans ma présentation. Seulement des ressenties, des anecdotes et des retours d’expériences. désolée ! »

Je suis passée la dernière et tout se passa très bien ! Ouf ! Mon but était d’aborder les relations designer et développeur avec humour le tout accompagné d’anecdotes. MISSION REUSSIE ! Surtout en voyant les notes du public à  la fin de la soirée (rubrique UX/CREA):
humantalks_note

MA PRESENTATION EST DISPONIBLE ICI »

HumanTalks Paris : Les dévs et les créas devraient mieux s’entendre !

BlendMix : retour sur ma conférence Design Emotionnel

Début octobre, je suis intervenue à  Lyon pour BlendMix. 2 jours intenses de conférences, de rencontres et de partages. J’ai eu la chance d’intervenir le 1er jour juste après la cérémonie d’ouverture réalisée par la Team la Cuisine du Web.

blendmix design emotionnel

design emotionnel presentationEnviron 300 personnes étaient présentes et ont pris le temps de m’écouter malgré quelques « couac » de mon Macbook. J’ai pris plaisir à  partager mon retour d’expérience et mes découvertes.

Ma présentation est disponible sur www.designemotionnel.fr et est régulièrement mise à  jour. Elle évolue selon mes trouvailles et mes coups de coeur.

Pour le moment, vous trouverez dedans plusieurs thématiques comme les Arts Appliqués, l’évolution du design d’objet, les émotions, un langage universel, l’anthropomorphisme et la personnification, le design sonore, l’usage des couleurs, le dialogue homme-machine, sublimer par l’image, la datavisualisation, l’usage de l’animation, l’importance du rédactionnel, le Skeuomorphisme, l’importance du détail, le sens de l’accueil…

plexio blendmix

Le lendemain, mon associé Sylvain Weber est intervenu pour présenter une expérimentation que nous avons réalisé au sein de ma start-up Kontest que nous avons fondé : L’art de Bricoler.

Pendant plusieurs mois, notre équipe d’ingénieurs se sont attelés à  tester de nouvelles technologies afin de réaliser un jeu multi-joueurs et en temps réel sur smartphone: Plexio.

En voici la vidéo réalisée par la team de John’s Graphisme :

BlendMix : retour sur ma conférence Design Emotionnel

Kuler version iPhone : le pantonier de votre vie

kuler app Pour les plus avertis, vous avez sans doute déjà  adopté la nouvelle application Kuler d’Adobe. Depuis sa sortie, je l’ouvre quasiment tous les jours pour découvrir ma vie sous d’autres couleurs.

kuler nuancier

Je trouve que cet outil trouve tout son sens grâce à  la mobilité provoquée par une application iPhone, c’est-à -dire : l’usager trouve l’inspiration dans son quotidien à  travers l’objectif de son smartphone qu’il réduit à  ses couleurs essentielles !

kuler photo nuancier

Grâce à  la génération d’un nuancier qui varient selon les réglages de l’app, de la luminosité du lieu, et bien sûr de sa sensibilité, une situation peut se traduire à  travers une infinie de couleur non perceptible dans l’immédiat.

Vous n’êtes pas obligé d’utiliser l’appareil photo de votre smartphone, vous pouvez aussi récupérer une photo via vos albums, via Flickr ou bien via le web. Le site web reste toute de même très utile pour sauvegarder, synchroniser et partager ses nuanciers avec la communauté (ou pas). Je ne détaillerais pas les détails fonctionnels de cette application car la meilleure expérience est de la tester soi-même ^^

Kuler sur iPhone (gratuit) : lien iTunes

Kuler version iPhone : le pantonier de votre vie

Application Météo iOS 7 : inspiration ?

Avec la sortie de l’iOS7, vous avez sans doute remarqué la nouvelle application Météo de l’iPhone. Bizarrement celle-ci s’inspire énormément de 2 applications bien connues de tous : Solar et Yahoo! Météo :

Solar

Même si je trouve la vidéo de mauvais goût et non représentative de la qualité de cette application, celle-ci vous donnera une idée de son usage :

  • Représentation en temps réel du temps avec des animations cinématographiques en fond d’écran
  • Prise en main facile grâce à  sa navigation en « Swipe »
  • Interface minimaliste (Flat Design)

solar applicationSite officiel : www.thisissolar.com

Haze

[ Petite Aparté ] Dans la même lignée que Solar, mais un peu plus complexe dans ses fonctionnalités, vous avez l’application Haze :

  • Utilisation de l’accéléromètre de l’iPhone pour passer d’une catégorie à  une autre,
  • Présentation centrale et radiale des 3 informations clés : l’ensoleillement, la température et le taux d’humidité,
  • Usage de plusieurs effets sonores qui valident l’action de l’utilisateur en y ajoutant une dimension sensoriel,
  • Application d’un nuancier (dégradé) qui indique les tendances des températures des prochains jours

Site officiel : http://gethaze.com/

Yahoo! Méteo

Publié en avril dernier, Yahoo! a fait très fort avec cette application qui s’inspire des datavisualisations en y intégrant des photos Flickr qui se géolocalise selon le lieu o๠vous êtes.
yahoo meteo app

Site officiel : yahoo.com/weather

iPhone Méteo : inspiration ou coà¯ncidence ?

Je vous laisse juger de vous même et me dire ce que vous en pensez ?

iphone meteo app

Application Météo iOS 7 : inspiration ?

Ergonoquoi ?!

Lors de la soirée d’ouverture du BeMyApp spécial Jeux-vidéo, autour d’une pizza et d’un verre de coca, Sophie Bai (graphiste habituée au hackaton tech^^) m’a fait découvrir ces vidéos que j’ai trouvé très drà´le et que je souhaite partager avec vous :

Les vidéos parlent d’elles-mêmes, j’espère qu’il y en aura d’autres ! A suivre sur la chaine Youtube de Luddotic Ergonomie ou bien sur le site blog.ludo-tic.com.

Vidéo

Le métier du web designer par Mike Monteiro

metier webdesigner

Après le livre du Design Emotionnel de la sympathique collection A Book Apart, je vous présente le dernier livre que je viens tout juste de terminer : « Metier : Web Designer » de Mike Monteiro.

Mike nous partage, sans gêne et sans ménagement, ses différentes expériences professionnelles en tant que salarié, freelance et, aujourd’hui, co-fondateur de l’agence Mule Design.

« Vous voyez ces panneaux d’avertissement qu’on placarde partout, ces pictogrammes de main coincée entre deux engrenages ou de bonhomme foudroyé ? Ce livre est une collection de panneaux d’avertissement. Chaque leçon qu’il contient a été apprise à  mes dépens. »

J’ai trouvé les propos de l’auteur très pertinents, sincères et honnêtes dans son approche du métier de designer. Même si ce livre à  une vision très entrepreneuriale, les fondamentaux et les réfléxions sur le métier de webdesigner y sont abordées :

  • Qu’est-ce qu’un designer ?
  • Trouver des clients
  • Facturer votre travail
  • Présenter un design
  • Gérer le feedback
  • Etc.

« Un designer qui ne présente pas son travail n’est pas un designer. Présenter le travail, expliquer le raisonnement, répondre aux questions et recueillir du feedback, tout cela ce fait partie du métier. Si vous restez planté devant votre ordinateur pendant que quelqu’un d’autre présente le travail au client, vous n’aurez pas le droit de vous plaindre du feedback que vous obtiendrez. Les absents ont toujours tort. »

Que vous soyez salarié, freelance ou chef d’entreprise, je vous invite à  lire ce livre qui vous permettra sans doute de réfléchir sur votre situation, vos projets en cours, vos collaborateurs, vos râlements (car oui, il y a en sûrement, surtout si vous êtes français !).

Ce livre transpire la personnalité de Mike, son humour et sa franchise. A lire !

Disponible chez Eyrolles : « Metier : Web Designer »


Collection A Book Apart - Eyrolles

A lire aussi de la même collection :


Le métier du web designer par Mike Monteiro

Le design émotionnel au sein de vos interfaces

Il y a tout juste une semaine, j’ai acheté le livre « Design émotionnel » de Aaron Walter (designer de Mailchimp). J’aimerai partager avec vous ce livre que j’ai dévoré en moins de deux soirées. Je vous le recommande vivement car il est très inspirant et particulièrement bien écris.

Design Emotionnel Aaron Walter

J’ai trouvé ce manifeste passionnant ! Aaron Walter y aborde toutes les disciplines que touche le webdesign : la psychologie, le marketing, la publicité, le commerce, l’ergonomie, l’expérience utilisateur, l’esthétisme, etc.
Il ne faut pas oublier que notre profession de webdesigner à  un impacte très important sur ces différents secteurs et bien souvent oublié au quotidien.

Ce que j’en ai retenu :

L’effet esthétique-utilisabilité au détriment de l’expérience utilisateur

Aaron Walter commence par évoquer la pyramide des besoin de Maslow en l’adaptant au design d’interface et, bien sûr, en y ajoutant la notion de « l’agréable ».

“le design a une forte influence sur l’engagement émotionnel et l’utilisabilité”

En abordant les fondamentaux, le but de l’auteur est de remettre en question la philosophie de 37 signals qui a beaucoup influencé le webdesign ces dernières années : 37 Signals soutient un design minimaliste et fonctionnel au détriment de l’expérience utilisateur. Walter leur reproche un design qui n’a pas su s’adapté dans le temps et se repose aujourd’hui sur un design, certes efficace, mais non-évolutif et statique.

la pyramide des besoin de Maslow
Un design émotionnel peut être défini sur plusieurs critères :

  • une mascotte,
  • une ligne éditoriale,
  • des fonctionnalités surprenantes,
  • un contenu provocateur,
  • etc.

Le design que vous allez définir peut avoir un impact très important sur votre interface et se doit être équilibré et homogène. Cette harmonie va permettre à  l’utilisateur de prendre du recul sur ce qu’il consulte pour une meilleure mémorisation de votre contenu.

“L’attention d’un utilisateur est une ressources limitée”

Lorsque vous concevez une interface le but n’est pas de tromper ou de manipuler l’internaute mais de le faire réagir et d’améliorer son quotidien. L’usage d’une interface influence beaucoup sa réaction et son humeur. Si cette dernière y est agréable, l’utilisateur aura de la sympathie pour votre marque donc un meilleur engagement en retour.

DEFINIR UN PERSONA POUR SON INTERFACE

Certains designers créent des Personas utilisateurs pour une meilleure conception face à  une cible bien précise. Aaron Walters recommande de créer un Persona de votre interface en même temps. Le but est de créer un portrait émotionnel de votre site ce qui va vous permettre une approche plus émotive et de donner un caractère à  ce dernier.

github octocat

Création d’un persona pour un design d’interface

Pour la création de votre persona, l’auteur vous recommande de répondre à  ces quelques questions ci-dessous :



  • 1. Nom de la marque

  • 2. Aperçu : Qu’est-ce qui rend votre marque unique ?
  • 
3. Image de personnalité : photo d’une vrai personne qui incarne les traits souhaités (personnalité, star..). Si vous possédez une mascotte, décrivez la personnalité de cette dernière.
  • 
4. Traits de la marque : lister 5 traits de la marque qui la caractérise et 5 traits non souhaitez.

  • 5. Carte de la personnalité : définir 2 axes, en abscisse : sympathie vs méchanceté et en ordonnée : soumission vs domination
.
  • 6. Voix : si votre marque parle, quel est le ton utilisé : familier ? fleurie ? stricte ? sobre ? Guindé ?

  • 7. Exemple rédactionnel : exemples de textes susceptibles d’être utilisés (message de bienvenue, message d’erreur, etc.)
  • 
8. Lexique visuel : charte graphique des couleurs, typographies, nuancier, etc.

  • 9. Méthode d’engagements : définir une expérience permettant un engagement au sein de votre interface. Exemples : Doddle de Google qui change selon l’actualité, la blague ou la vidéo du jour proposer par MailChimp, etc.

CONCLUSION

Le design doit être considéré comme un complément à  un système fiable, ergonomique et fonctionnel. Si votre site internet est lent ou instable, votre design dit émotionnel perds de sa valeurs et décridibilisera votre marque. Je vous recommande vivement de lire ce livre qui est aussi un bon moment de détente.

Collection A Book Apart - Eyrolles
– Collection A Book Apart des éditions Eyrolles
– Auteur du livre Aaron Walter
– Extrait fourni par les édition Eyrolles : Chapitre 1 (PDF) Révolution : Un gagné pour un perdu

A lire aussi de la même collection :


Le design émotionnel au sein de vos interfaces