Disko : social intelligence

Vine, nouveau moyen d’expression, nouveau territoire de communication.

Disko — Mon, 20 May 2013 19:31:44 +0200

A l’origine, de l’ambition et du flair

Jeune entreprise New-Yorkaise, Vine voulait permettre à tout utilisateur de téléphone mobile de réaliser de courtes vidéos destinées à être publiées sur Twitter.

Il n’en fallut pas plus à l’oiseau des réseaux sociaux pour cerner les enjeux et opportunités qu’offrait un tel outil à sa communauté d’abonnés.

L’année 2013 a donc débuté sur l’acquisition et la mise en ligne d’une toute nouvelle application pour Twitter.

Vine, six secondes pour convaincre

Avant d’entrer dans le vif du sujet, il parait essentiel de faire un point sur la fonction première de cette application. Qu’est-ce que Vine ?

Vine, c’est six secondes pour séduire, six secondes pour convaincre.

A l’instar des 140 caractères disponibles pour rédiger un Tweet, Vine propose à sa communauté d’être créative et percutante avec une vidéo de six secondes.

Qu’on se le dise, le terme court-métrage n’a jamais autant été un doux euphémisme.

Actuellement, l’application est uniquement disponible sur iPhone et iPod Touch, mais une version Android ne devrait pas tarder à voir le jour.

Pour la petite histoire, sachez, lecteurs, que Vine a bien failli passer à la trappe. A son lancement, certaines personnes mal attentionnées se sont amusées à publier des vidéos à caractères pornographiques sur Twitter....

Bien que nous soyons en droit de nous demander qu’est-ce que l’on peut faire en six secondes sur le sujet, nous ne nous attarderons pas sur la question.

Aujourd’hui, Vine est réservé aux adultes mais, surtout, tourné vers les marques !

Une marque, une idée et un challenge chronométré

Vine est comparable à un cocktail servi sous shaker.

Prenez une marque, une idée et une contrainte de réalisation.

Quel sera le bon mélange, la bonne recette pour toucher sa communauté ?

Le storytelling

N’importe qui peut raconter une histoire, tout le monde ne peut pas en raconter une bonne en six secondes. S’il est bien amené, le storytelling est un excellent moyen pour exprimer la créativité d’une marque. C’est dans ce contexte que Gap s’est amusé à retracer l’évolution de son jean 1969 à travers le temps.

Le teaser

Incontournable, le format de Vine est un très bon prétexte pour introduire le lancement d’un nouveau produit sur son marché. La marque Taco Bell proposait ainsi de découvrir sa nouvelle saveur de chips avant sa sortie officielle.

Les backstages

Rendre accessible ce qui ne l’est pas. Montrer l’envers du décor. Créer un privilège pour renforcer ses liens avec sa communauté. L’équipe de football Manchester City proposait à ses fans de rentrer dans l’intimité du club, en suivant leurs entrainements via Vine. La marque de Haute couture Oscar de la Renta a quant à elle permis aux passionnés de mode de suivre leur préparation à la Fashion Week de New-York quelques jours avant l’évènement.

L’échange direct

Interpeller sa communauté, la rendre actrice et non plus seulement spectatrice. Comme créer un jeu-concours dans lequel chaque membre d’une communauté de marque essaierait de se distinguer en six secondes. A l’occasion de la Saint-Valentin, l’hôtel londonien the Cavendish a su exploiter l’idée en proposant à son réseau de réaliser une vidéo romantique. L’auteur de la meilleure publication remporta une nuit à l’hôtel.

La communication générique

Une prise de parole peut parfois être un simple réengagement envers sa communauté. Pepsi, avec le soutien de son dernier né, Pepsi Next, a tenu à entretenir la flamme avec ses afficionados.

Vine, ouvert à tous

Parce que la créativité n’est pas seulement une histoire de marque, de nombreuses vidéos fleurissent sur la toile, autour desquelles certains d’entre nous tirent brillamment leur épingle du jeu.

L'acteur Adam Goldberg (Il faut sauver le soldat Ryan, de Spielberg) et sa compagne Roxane ont réalisé une micro-série dans laquelle il met en scène son addiction à l’application Vine.

Si vous êtes amateurs de recettes de cuisine, vous aurez également l’occasion d’en apprendre quelques-unes… de façon express !

Ce qu’il faut retenir…

Vous l’aurez compris, avec Vine, avoir l’esprit de synthèse est primordial.

Si le nouveau bébé de Twitter fait des émules, sachez que la vidéo, d’ici les cinq prochaines années, représentera 66% du flux de données mobiles.

De quoi laisser rêveuses les marques et, songeurs, ceux qui les consomment…

Réussites et échec du crowdfunding

Disko — Mon, 20 May 2013 19:31:44 +0200

Vous en avez forcément entendu parler. Si ce n’est pas par le financement, courant 2012, d’une montre connectée assez incroyable (la Pebble), c’est sûrement beaucoup plus récemment par le lancement réussi de gros projets de films (Veronica Mars, il y a 1 mois, ou le prochain film de Zach Braff il y a quelques jours).

Le crowdfunding - c’est son nom - était déjà sur toutes les lèvres en 2012. Par sa capacité à toucher toutes les sphères de la création, il l’est d’autant plus en 2013.

Salut, c’est Zach Braff, je lève 2M de dollars en 3 jours sur Kickstarter

Dernier exemple en date, celui de l’acteur et réalisateur Zach Braff (bien connu pour son rôle d’interne dans Scrubs et son film Garden State). Via la plateforme Kickstarter, Zach a lancé son projet il y a 1 semaine. Il y explique que malgré le succès public et critique de Garden State, les accords financiers qu’il aurait du passer pour réaliser Wish I Was Here auraient été dommageables pour le film : il souhaitait en effet garder la main sur le final cut (le montage final), le choix des acteurs, etc. (tous les détails sont sur la page du projet)

Il a donc choisi le financement participatif. Il s’était donné 30 jours pour récolter 2 millions de dollars : il les a levés en 3 jours.

Grâce aux internautes qui ont participé, un film indépendant (mais grand public) va donc pouvoir voir le jour, outrepassant ainsi les accords traditionnels des studios hollywoodiens et laissant au réalisateur la main sur son projet. Une belle histoire, mais qui n’étonne pas tant que ça : il y a un mois, c’est le projet de film de Veronica Mars qui vivait la même chose (et qui a d’ailleurs inspiré Zach Braff).

Bien décidés à relancer la série Veronica Mars (culte pour certains), son créateur Rob Thomas et l’actrice principale Kristen Bell lançaient un projet Kickstarter : The Veronica Mars Movie Project. Avec un objectif de 2M de dollars, le projet a rapidement battu tous les records de la plateforme : projet le plus rapide à atteindre les 1M de dollars, puis les 2M de dollars, projet ayant le plus de participants de l’histoire de Kickstarter (91 585), etc. Au final, 5.7M de dollars récoltés.

Le film se tournera probablement cet été.

Mais au fait... le Crowdfunding ?

/ˈkraʊdfʌndɪŋ/

n.m : la pratique de financer un projet en récoltant une somme de petits montants via un grand nombre de gens, majoritairement via Internet.

Plus simplement, appelons ça le financement communautaire et participatif.

Sans rentrer dans les détails, le crowdfunding tient ses sources des actions de charité et s’est diversifié avec l’apparition d’Internet. On peut distinguer aujourd’hui plusieurs grands types de projets (source: wikipédia) :

financement d’entreprises
production communautaire / soutien aux projets
microcrédit solidaire
système de donation

C’est surtout la seconde catégorie qui nous intéresse aujourd’hui, et c’est dans celle-ci (soutien aux projets) que se positionnent les exemples de Zach Braff et Veronica Mars cités plus haut.

Il existe actuellement une tripotée de plateformes de soutien aux projets. Kickstarter, entreprise américaine et plus grosse d’entre elles, a levé 320M€ en 2012. En France, on trouve Ulule ou encore Kisskissbankbank.

A quelques détails près, les modèles sont les mêmes :

le créateur du projet explique le concept en quelques lignes plus ou moins longues
chacun est ensuite invité à participer au projet en effectuant un don, dont les montants sont fixés et définis par le créateur du projet
pour chaque palier de don (10€, 100€, etc.), vous avez le droit à une contrepartie : cela peut aller d’un PDF du script du film, par exemple, à une invitation en avant-première à la projection ou à votre nom dans le générique de fin - tout est possible et laissé à la folie du créateur
si le projet atteint son objectif et est financé, les participants reçoivent leur contrepartie. Sinon, ils sont remboursés.

Les projets présents sur les plateformes sont de tout ordre, allant du film au livre (de recettes, de photographies, etc.), en passant par des albums de musique, des jeux de sociétés, des expositions, des opéras, un compteur Geiger open-source, une combinaison spatiale pour civils, un musée de la pizza... Si vous pensez à quelque chose, il est fort probable que quelqu’un ait déjà tenté de le faire financer de manière participative.

Et les chiffres sont impressionnants : en 2012, Kickstarter annonce avoir aidé au financement de plus de 18 000 projets, pour un total de 2 240 475 participants et de plus de 300M de dollars.

Bref, difficile de ne pas voir dans le crowdfunding un véritable concept gagnant-gagnant - même si l’on est en droit de détester cette expression.

Bjork + Kickstarter + applications mobiles = FAIL

Mais tout n’est pas si rose dans le monde du crowdfunding. Pour un projet financé, combien d’échecs ? Combien de projets ignorés ?

Le dernier échec (retentissant) nous intéresse d’autant plus qu’il concerne un projet web/mobile : il s’agit de celui de Bjork. Inutile de la présenter, vous la connaissez sûrement, au moins de nom ou pour l’un de ses clips (All is full of love).

En 2011 sortait Biophilia, le dernier album de la chanteuse islandaise. Il s’accompagnait à l’époque d’une application iPad expérimentale, offrant 1 module interactif pour chaque titre de l’album (jeu, remix, etc.). Malgré le succès de l’expérience, Bjork se rend vite compte qu’une grande partie des intéressés par l’application (pour des raisons éducatives) sont les étudiants ayant peu de revenus, ou les écoles avec des budgets très faibles. Le moyen envisagé pour répondre à leurs demandes est donc de porter l’application sur Android et Windows 8.

Bjork décide pour cela de lancer une campagne de crowdfunding : Biophilia app for Android & Windows 8. Elle réclame £375,000 (445 000€).

Une dizaine de jours plus tard, la campagne est annulée, avec un financement de 4% du projet seulement. Bjork poste une petite note pour expliquer cette annulation, dans laquelle elle explique en substance que “porter l’application pour Android et Windows 8 s’avère incroyablement compliqué” et qu’il aurait fallu “8 développeurs pendant 5 mois pour la finir.” (6400 heures de travail, un chiffre ahurissant)

Les raisons de l’échec de cette campagne sont encore discutées aujourd’hui (contreparties pas assez intéressantes, gros manque de communication entre Bjork et son public, etc.).

Mais il est une question que l’on ne peut s’empêcher de soulever ici : et si Bjork et son équipe avaient pensé dès le début du projet à la portabilité sur les autres plateformes (Android, Windows 8...) ?

En apparté du crowdfunding, si l’on devait les conseiller aujourd’hui sur la réalisation d’un tel projet, nous serions tentés de leur dire d’éviter de développer sur un support propriétaire tel le SDK d’Apple. La réalisation Explore Touch par Fantasy Interactive est un excellent exemple récent de l’utilisation du HTML5 sur un concept similaire (expérience musicale).

Fi's new IE10/HTML5 Concept Project with Microsoft from Fantasy Interactive on Vimeo. Malgré l’exemple un peu à part de Bjork, le crowdfunding est une belle révolution, confirmée par la multiplicité des plateformes qui continuent de naître, les fonds levés et tous les projets financés jusqu’à aujourd’hui. Une révolution comme seul le web le permet de nos jours.

Le retour en force de la SF

Disko — Mon, 20 May 2013 19:31:44 +0200

Il y a quelques mois, le 31 octobre 2012, Disney agitait la toile en annonçant le rachat de Lucasfilm.Ltd ainsi que la production prochaine de l’épisode 7 de la saga Star Wars. Depuis, les réseaux sociaux fleurissent de photos-montages, vidéos, annonces officielles et autres débats sur le sujet.

On en oublierait presque que la Science Fiction ne se limite pas à ce film. Et pourtant…

Les Biopics en 2012, la SF en 2013 ?

En 2013, pas moins de 10 films de Science Fiction auront vu le jour dans les salles obscures dont les très attendus Star Trek Into Darkness de J.J. Abrams, Pacific Rim de Guillermo del Toro, ou encore After Earth de M. Night Shyamalan qui, à l’instar d’Oblivion de Joseph Kosinski sorti le 10 avril, émet l’hypothèse d’une Terre de laquelle les humains ont été évacués.

D’ailleurs, cette ressemblance de scenarii entre deux films de SF n’est pas un cas isolé cette année. Toutes proportions gardées, Elysium de Neill Blomkamp et Upside Down de Juan Solanas défendent, tous deux, l’idée d’une séparation géographique entre deux mondes : celui des riches et celui des pauvres.

Fin du monde, apocalypses, crises financières et sociales... Cela ne vous rappelle-t-il rien ?

En 2012, c’est sur les biopics que le 7ème art avait jeté sont dévolu. Hoover, Monroe,Tatcher, La Callas, Madoff, Hitchcock, Lincoln ou encore Roosevelt, tous ont eu le droit à leur film biographique.

À croire qu’il fallait absolument faire une sorte de bilan historique avant la fin du monde, supposée le 21 décembre… Par chance, nous avons survécu… ouf !

Cependant, cette conjecture de fin du monde semble malgré tout avoir laissé des traces dans l’inconscient cinématographique qui ne manque pas de nous le faire savoir.

Même s’il est vrai qu’en plus du cinéma, la déferlante SF envahit également le petit écran (avec des séries comme Real Humans ou Defiance), peut-on véritablement parler d’une tendance “Science Fiction” ?

Une tendance qui inspire le monde numérique ?

Il y a quelque années, le film Minority Report faisait un véritable carton au cinéma mais pas seulement… On se souvient tous de cette fameuse scène où Tom Cruise manipule des données sur un écran sans même le toucher.

Peu de temps après, bon nombre de vidéos plus ou moins réalistes d’un dispositif similaire circulaient sur le web jusqu’à la commercialisation de Kinect par Microsoft ou encore plus récemment de la technologie Leap Motion :

Et les exemples où les films de SF ont inspiré les nouvelles technologies sont légions. On pourrait d’ailleurs facilement faire le parallèle entre le casque d'Iron Man et les Google Glass :

Donc, sans forcément parler de tendance, il y a fort à parier que d’ici la fin de l’année cette vague de films de SF fasse parler d’elle et, surtout, ouvre la voie au brand content.

Car, en bon chef de file, ce cinéma de SF aura probablement des répercutions sur le digital et dans la publicité en général.

Surveillons donc de près cette nouvelle brèche qui semble s’ouvrir et attendons nous à voir émerger de nouveau supports de communication ou, du moins, voir se démocratiser des technologies comme le Flexible OLED :

ou le Paper Tab :

Car, comme toujours, de la science fiction à la science, il n’y a qu’un pas !

Améliorer la qualité de son code

Disko — Mon, 20 May 2013 19:31:44 +0200

“De la qualité tu développeras...”

Nous allons vous présenter quelques outils, que vous connaissez peut-être déjà, permettant de s’assurer un code qualitatif qui respecte certains standards. Utiliser ces normes permet à d’autres développeurs travaillant sur un même projet de retrouver rapidement leurs marques et de ne pas être déstabilisés par les syntaxes pouvant différer d’un développeur à l’autre.

Code Sniffer (phpcs)

PHP Code Sniffer permet de vérifier que le code respecte la syntaxe du standard choisi. Il y en a plusieurs, nous pouvons citer notamment PEAR, PSR-1, PSR-2.

Nous avons choisi le standard Symfony2 (https://github.com/opensky/Symfony2-coding-standard) que nous vous conseillons si vous travaillez sur cette techno.

Il est aussi conseillé de configurer votre IDE (PHPStorm :)) pour qu’il utilise lui-même phpcs et qu’il surligne les passages de votre code lorsqu’il comporte des erreurs de syntaxe, c’est quand même bien plus agréable que de l'exécuter par ligne de commande à chaque fois, n’est-ce pas ?

Certes, il faut reconnaitre qu’au début cela peut être agaçant que tout le code soit surligné, mais nous vous assurons que l’on s’y fait rapidement et qu’au final, on y gagne un code bien plus lisible pour les autres, et même pour soi. Indispensable si vous contribuez sur des projets opensource !

PHP-CS-Fixer

PHP-CS-Fixer est un outil permettant de corriger automatiquement votre code selon les standards que vous avez configuré dans PHP Code Sniffer.

Vous pouvez aussi le configurer dans votre IDE pour que la manipulation soit la plus simple et la plus accessible possible. Hop en un clic vos fichiers sont corrigés :) !

PHP-Depend

Php_Depend est un outil d'analyse de code.

Il calcule 4 métriques différentes :

1/ Ca : Le nombre de classes dépendant des classes d'un package. 2/ Ce : Le nombre de classes dont dépendent les classes d'un package. 3/ I : L'instabilité, définie par le ratio Ce / (Ce + Ca). 4/ A : L'abstraction, définie par le ratio entre le nombre de classes abstraites et le nombre total de classes. Ces 4 métriques sont utilisées pour générer un grahique qui permet une lecture rapide du niveau d'instabilité et d'abstraction du code considéré.

PhpCPD - détection redondance de code

Le pire ennemi du développeur a toujours été le copier/coller. C’est un réflexe que malheureusement beaucoup de développeurs ont.

Pensant gagner du temps, cela peut entraîner dans la plupart des cas des conséquences auxquelles on ne s’attend pas forcément :

-> Si le code est buggé, alors on duplique les bugs

-> L’oubli de fixer le bug à tous les endroits où l’on a dupliqué le code

-> Dans bien des cas, il n’est pas adapté à la situation courante

S’installant depuis un channel Pear, PhpCPD permet (même sous Windows) de scanner un répertoire et d’afficher la liste des codes dupliqués. Que souhaiter de plus ?

PHPmd

PHP Mess Detector (PHPMD) est une librairie permettant d'évaluer la qualité de votre code source.

Il détecte les variables et les méthodes non-utilisées, les noms de variables trop courts ou trop longs, les méthodes trop complexes, etc.

Comme les autres librairies évoquées ci-dessus, PHPMD est également configurable dans votre IDE.

Il évalue notamment le “Cyclomatic Complexity”, un metric qui calcule le nombre de if, for, while, etc. dans votre fonction.Plus il y en a, plus votre fonction sera considérée comme complexe.

PHPMD s’installe grâce à PEAR :

pear channel-discover pear.phpmd.org

pear channel-discover pear.pdepend.org

pear install --alldeps phpmd/PHP_PMD

Conclusion

Ces outils, simples d’utilisation, permettent d’augmenter la qualité du code produit, facilitant ainsi sa maintenance, sa réutilisation et sa diffusion.

Il est donc fortement conseillé aux développeurs d’utiliser ces outils pour leur bien, mais aussi celui des autres.

Et enfin, il est très facile de les intégrer à votre IDE qui ne vas pas hésiter à vous rappeler les erreurs que vous commettez : ça vous évitera plus d’un refactoring au moment de commit ;-)

Enjoy now :)

Tendance : le Social Media Marketing

Disko — Mon, 20 May 2013 19:31:44 +0200

Dans un monde qui bouge, qui évolue et croît à une vitesse vertigineuse, il n’est pas étonnant de voir des réseaux sociaux naître et disparaître sans même atteindre une maturité digne de ce nom.

Ceci étant dit, en plus de créer, de gérer et d’affiner sa stratégie sur tel ou tel réseau social, personne n’ignore que le marketing s’est rapproché gentiment du social media ces dernières années. D’où l’apparition cohérente d’une nouvelle impulsion stratégique : le Social Media Marketing

Le Social Media Marketing : décryptage.

Le Social Media Marketing, c’est quoi ? Il s’agit d’un procédé dont le but est de gagner du trafic et/ou de l’attention sur les médias sociaux. Le marketing combiné au social media donne ainsi une nouvelle impulsion stratégique à la manière dont nous communiquons vers nos clients/consommateurs.

Nous savons que le social media nourrit l’audience par la découverte de contenu intéressant, recherche et découverte devenant elles-mêmes des activités à part entière pour l’internaute et utilisateur. Nous n’ignorons pas non plus que le social media se révèle être une aide précieuse pour la création de liens (link building), se transformant ensuite en efforts SEO notables. Aujourd’hui un nombre croissant d’internautes effectue ses recherches sur des sites social media afin de trouver le contenu souhaité.

La combinaison de tous ces éléments a de ce fait créé cette nouvelle tendance indispensable en terme de croissance, que l’on parle d’audience ou de chiffre d’affaires.

La différence avec le Marketing ‘traditionnel’ ?

Rompant avec le marketing ‘traditionnel’, le social media marketing vous permet (et vous force) à reconnaître que vos clients actuels sont vos meilleurs atouts

Prenez par exemple Starbucks, qui met à disposition de ses fans et clients une page spéciale sur leur site web. Les consommateurs peuvent alors exposer leurs idées publiquement et directement, et peuvent ainsi voir leur avis pris en compte par leur marque de cappuccino favorite.

Vous pouvez désormais atteindre plus facilement vos consommateurs existants, ceci dans le but de les faire revenir vers votre marque, et qu’ils en parlent à leurs amis. Le fameux bouche-à-oreille, devenu aujourd’hui digital et largement simplifié (et amplifié) grâce aux nombreux boutons de partage sur les réseaux sociaux, permet à vos messages d’être divulgués à une vitesse incroyable, vers la cible choisie.

Selon Erik Qualman, auteur du best-seller Socialnomics, “avec la confiance grandissante dans le social media, on ne recherche plus l’actualité, les produits ou services que l’on souhaite acheter. Dorénavant, ils nous sont fournis par nos amis, nos connaissances et nos collègues.”

Comment s’assurer des meilleurs pratiques social media marketing ?

Comme toute nouvelle stratégie de communication, commencez par établir un plan comprenant votre audience, vos objectifs, votre stratégie, votre tactique, les outils que vous utiliserez et les chiffres à analyser.

Un plan social media marketing digne de ce nom implique de l’écoute et de la participation. Celles-ci étant tournées vers le fait de donner sans attendre quelque chose en retour. Ce n’est évidemment pas la définition propre d’une vente, mais au final, vous augmenterez définitivement vos ventes.

Prenez le temps de trouver les bonnes ressources. Il est important de planifier le temps nécessaire, les personnes actrices du projet, ce que vous mettrez en place, à quel moment et de quelle manière.

Soyez transparents sur vos intentions et votre identité. Vos objectifs et votre stratégie sont des éléments essentiels et inhérents à toute action, surtout en terme de messages diffusés auprès de votre audience.

Accueillez les bras ouverts les participations, retours, commentaires et co-créations. Développez une relation privilégiée avec votre communauté afin de recueillir une source inestimable d’information concernant directement votre public.

Etablissez des métriques en fonction de vos objectifs, eux-mêmes inhérents aux réseaux que vous aurez choisis.

Le social media marketing ressemble plus à des relations publiques qu’à du marketing direct. Les mesures que vous prendrez en compte doivent s’aligner sur des indicateurs tels que le nombre de fans, de mentions “j’aime”, de commentaires,...

Gardez constamment en tête que le contenu est roi, et doit donc être de qualité à chaque instant. Utilisez judicieusement les visuels, infographies et images professionnelles dont vous pourrez disposer et/ou créer.

Et souvenez-vous: “Une marque n’est plus ce qu’elle représente auprès des consommateurs. C’est ce que le consommateur dit qui fait la marque” (Scott Cook, co-fondateur de Intuit).

Crédit photo : socialquickstarter, e-arthsolutions, theredspark, digitalmarketingagency

Méthodologie de conception : focus sur l'approche centrée utilisateur

Disko — Mon, 20 May 2013 19:31:44 +0200

La façon de penser et de concevoir une interface digitale a radicalement changé en 10 ans. Nous sommes passés d'une conception verticale (Concepteur (Dieu) > Utilisateur) à de nouveaux modes de pensée plus horizontaux où l'utilisateur entre dans la réflexion de l'interface (Utilisateurs = Interface).

Pour pouvoir intégrer ces approches dans une organisation, il est indispensable de modéliser et formaliser ces nouveaux process de conception.

Nous vous proposons de découvrir l'approche "User centrics" à travers une série d’articles. Pour commencer, voici un récapitulatif des phases importantes du process. Nous détaillerons chacune d’entre elles dans nos prochains articles.

Il est bon de préciser, avant toute chose, qu'il n'y pas de recette miracle. Une conception réussie est un subtil mélange d'intelligence comportementale, d''inspiration et d'application de process comme celui que nous allons vous présenter.

Pour mettre en place cette méthodologie de conception, nous dissocions 4 grandes étapes clefs :

1. Découverte

2. Concept

3. Conception

4. Formalisation

1. Découverte :

Qu'est ce que c'est ?

Première étape, la découverte. Cette étape permet de connaître le contexte du projet, son domaine d'activité, l'objectif de son interface et d'étudier le comportement de l'utilisateur auquel il est destiné.

Comment ?

A ce stade, nous devons définir quels sont les usages et les besoins auxquels doit répondre l'interface.

Cette étape peut se mener à travers des ateliers avec le client, avec vos collaborateurs, ou mieux, avec vos cibles utilisateurs.

Utiliser des données Analytics peut vous être d'une grande aide pour étudier le comportement des utilisateurs en fonction des différentes typologies de sites.

Capitaliser sur ces connaissances et se constituer une base de données au fur et mesure est très utile pour affiner vos estimations comportementales et pour vos projets futurs.

Les outils à utiliser pour mettre en place cette étape :

- Interview (entrevue réalisée avec un jeu de questions-réponses)

- Insights (attentes de vos cibles sous forme de citations, idéalement)

- Metrics comportementales (par ex Google Analytics)

- Personas (utilisateur fictif qui représente un groupe cible)

- User Journey (scénario de navigation fictif)

2. Concept et architecture de l'information.

Qu'est ce que c'est ?

La phase de concept a pour objectif de construire un scénario d'usage réaliste autour de vos cibles.

Comment ?

De ces scénarios vont découler des fonctionnalités clefs, ou exigences fonctionnelles.

C'est aussi à cette étape que l'architecture de l'information peut intervenir. Elle va appuyer la phase de concept en définissant les emplacements et interactions des différents contenus.

L'idéal dans cette partie, est de mettre en place des séances de brainstorming. N'oubliez pas : pour être efficaces, ne critiquez pas directement les idées des participants, laissez vous aller et surtout lancez le plus d'idées possible.

Les outils à utiliser :

- Brainstorming

- Storytelling (raconter la navigation par une histoire concrète)

- Arborescences (arbre d’organisation de vos contenus en rubriques et sous-rubriques)

- Esquisses (dessinées à la main)

3. Conception :

Qu'est ce que c'est ?

A l'aide de vos scénarios d'usages, vos fonctionnalités clefs et votre arborescence, vous allez pouvoir définir les différents gabarits à mettre en place sur l'interface. Vous pouvez alors commencer à esquisser des ébauches d'interfaces.

Comment ?

Une veille de design patterns (éléments fonctionnels) est indispensable pour pouvoir identifier des éléments de conception intéressants. Ces éléments doivent impérativement répondre aux besoins fonctionnels exprimés par vos scénarios d'usages. Aussi, vous devez distinguer les patterns innovants des patterns obsolètes qui ne servent plus à vos utilisateurs (nuage de tags).

Il est intéressant de travailler sur un ensemble de planches storyboardées afin de recréer l'ensemble du parcours utilisateur. Cela vous permet également de mettre en place des hypothèses de navigation.

Une fois le concept de navigation établi, vous pouvez commencer la création de vos wireframes (schéma définissant les zones et les détails d'un site web) avec des outils comme Axure, Mockflow, Omnigraffle et autres. Ces outils vont vous permettre de penser et placer aisément vos éléments au propre.

Les outils à utiliser pour mettre en place cette étape :

- Papier

- Crayon

- Axure, Mockflow, Omnigraffle,

http://www.axure.com/

http://www.mockflow.com/

http://www.omnigroup.com/products/omnigraffle/

4. Formalisation :

Qu'est ce que c'est ?

Cette dernière étape va vous permettre de détailler fonctionnellement votre livrable de conception.

Comment ?

Trois objectifs :

1. Aller vers le niveau de détail le plus fin sur les wireframes.

2. Permettre au client final d'avoir toutes les informations de conception et de pouvoir vous valider l'ensemble des travaux.

3. De mettre au propre l'ensemble des spécifications fonctionnelles du site internet. C'est un document de travail sur lequel vos équipes techniques et créatives vont pouvoir se baser pour effectuer leurs travaux.

Vous pouvez effectuer cette étape par bloc fonctionnel. Chaque bloc possédera des spécifications fonctionnelles pour la partie Front et le comportement attendu en Back-office.

Les outils à utiliser :

- Powerpoint

- Axure

- Photoshop / Illustrator

- Screenstep (http://www.bluemangolearning.com/screensteps/)

Conclusion

Cette méthodologie vous permet d'aborder la conception d'une interface en vous concentrant sur les besoins utilisateurs à travers 4 étapes :

- La découverte du projet et de vos utilisateurs,

- La réflexion sur le concept,

- La conception de l’interface,

- La formalisation des livrables.

Il est indispensable de ne pas oublier d'inclure le client à chacune de ces phases de réflexion et de conception.

Nous vous en dirons plus dans nos prochains articles sur le sujet....

“SASS VS LESS” La guerre des PréProcesseurs CSS

Disko — Mon, 20 May 2013 19:31:44 +0200

SASS et LESS sont les préprocesseurs CSS les plus réputés sur la Toile. Ils permettent dans une certaine mesure d’ajouter des méthodes de développement essentielles comme l’utilisation de variables, mais surtout d’éviter la répétition de code.

Le principal intérêt d’utiliser un préprocesseur CSS est de pouvoir avoir des variables dans le CSS. Ils apportent les fonctionnalités suivantes : nested rules, variables, mixins, selector inheritance, et bien d’autres.

LESS

LESS est peut-être le plus connu des deux, rendu célèbre entre autres grâce à Twitter Bootstrap (http://twitter.github.com/bootstrap/), ce qui a propulsé l’utilisation des préprocesseurs CSS pour la plupart des frameworks (Foundation, bootstrap, etc.), mais aussi des différents thèmes que l’on peut maintenant trouver sur le web (ex. https://wrapbootstrap.com/).

Concrètement, il sera possible d’utiliser des variables, des mixins, mais aussi de l’héritage simplement en imbriquant des blocs entre eux.

L’avantage de LESS est de pouvoir garder une syntaxe très proche du CSS, ce qui signifie qu’il est évident de débuter avec celui-ci et qu’il devient très simple de le comprendre mais aussi de reprendre du code (amélioration de la maintenabilité du code).

Nous vous invitons à aller voir le code de Twitter Bootstrap sur Github (https://github.com/twitter/bootstrap/blob/master/less/popovers.less) pour vous faire une idée précise de la structure du code sur un projet de grosse ampleur.

SASS

SASS peut s’écrire de deux façons :

- En utilisant la syntaxe standardisée du CSS - dans ce cas les fichiers porteront l'extension .scss pour “Sassy CSS”.

- Ou alors en utilisant une syntaxe plus ancienne et moins proche du CSS, dans ce cas les fichiers auront l'extension .sass.

Dans l’introduction nous avons parlé des variables, voici un petit exemple d'utilisation de variable en SASS :

<code>

$mainColor: #0982c1; $siteWidth: 1024px; $borderStyle: dotted;

body { color: $mainColor; border: 1px $borderStyle $mainColor; max-width: $siteWidth; }

</code>

Un autre point intéressant des préprocesseurs est ce qu’on appelle “Nesting” qui permet d’écrire plus rapidement des enchainements CSS afin définir de façon plus visible à quel groupement d’éléments HTML on applique la régle CSS :

<code>

section {

margin: 10px;

nav {

height: 25px;

a {

color: #0982C1;

&:hover {

text-decoration: underline;

}

</code>

Installation

Il faut commencer par installer ruby, puis le gem sass. Une fois ces deux opérations menées, il ne reste plus qu’à écrire le fichier SASS, puis le compiler grâce à la commande :

<code>sass --watch style.scss:style.css</code>

Sass surveillera ainsi votre fichier scss et créer les fichier style.css à chaque enregistrement.

Conclusion

Après avoir étudié les deux préprocesseurs CSS, voici une synthèse listant les avantages et les inconvénients de chacun d’entre eux afin que vous puissiez choisir celui qui vous conviendrait le mieux :

SASS

Avantages

- Créé en premier, SASS possède un grand nombre de fonctions et est donc plus mature

- Il est supporté par le framework Foundation (http://foundation.zurb.com/)

Inconvénients

- Nécessité d’installer Ruby pour pouvoir installer la gem Sass

- Compilation en css en ligne de commande

LESS

Avantages

- Utilisé par le framework Bootstrap de Twitter

- Compilation à l’aide d’application (SimpLESS, {Less})

Inconvénients

- Moins complet que SASS

Tenez-nous au courant !

ONE-PAGE DESIGN OU L'ART DU TOUT-EN-UN

Disko — Mon, 20 May 2013 19:31:44 +0200

Les sites one-page sont devenus très populaires ces derniers temps. Au-delà de ses valeurs esthétiques et graphiques qui nécessitent une qualité visuelle impeccable et une intégration sans faille, le One-page design est une nouvelle expérience de navigation tant pour les marques que pour l'utilisateur.

QU’EST CE QUE C’EST ?

Le One-page design consiste à afficher toutes les informations d'un site sur une seule et unique page sans rechargement de page. Les contenus sont disponibles soit en scrollant verticalement ou horizontalement ou les deux avec des mouvements de transition entre les différentes sections de la page. Le HTML5 et CSS3 combinés au javascript permettent une multitude de possibilités pour la navigation. L'effet le plus utilisé dans ce type de site est sans conteste le parallaxe design qui permet une navigation par scroll de molette, touches du clavier, bullet point ou navigation guidée pour découvrir le contenu.

Avec le One-page design, on cherche à bousculer l'utilisateur et ses habitudes de navigation. L'utilisateur n'est plus passif, il devient acteur de ce genre de site. Les internautes adorent qu'on leur raconte des histoires et l'utilisation du scroll permet de mettre en scène ses contenus de façon linéaire et continue. Le scroll est devenu un geste commun. Si le contenu est attractif, à la manière d'un livre où on tourne la page pour lire la suite, ici l'internaute scrollera naturellement pour découvrir le fil de votre histoire.

QUELS USAGES ET BENEFICES POUR LES MARQUES ?

Le choix d'un site one-page doit servir la marque et le message qu'elle veut transmettre. Il doit y avoir une cohérence entre le type de message à délivrer, la vocation du site et le système utilisé.

Le One-page design s'adapte particulièrement bien aux sites proposant un contenu léger qui nécessiterait peu de pages : sites évènementiels, lancement de produit ou démonstration de processus. Pour les marques, il est nécessaire d'innover, de créer la surprise, d'avoir un impact innovant et moderne afin de retenir l'attention de l'utilisateur.

Il est également indispensable de bien accompagner les visiteurs en termes de découvertes de contenus :

proposer une navigation alternative au scroll (une barre de navigation en position fixe dans la partie haute de la page ou sur le côté de l'écran)
avoir une indication de navigation suffisamment claire pour l'utilisateur (une navigation par touche du clavier indiquée directement sur le haut de page)
encourager l'interactivité par des éléments évidents (CTA, liens évidents)
la navigation doit être simple pour l'internaute, c'est le contenu qui vient à lui

QUELQUES EXEMPLES

Voici une sélection de quelques sites one-page qui nous semble intéressants :

http://www.epicdiscovery.com/

http://mypizzaoven.nl/

http://www.evanshalshaw.com/bondcars/index.html

http://www.beatboxacademy.ca

http://dangelicoguitars.com/

http://www.bagigia.com/

http://activatedrinks.com/

http://www.milwaukeepolicenews.com/

LE ONE-PAGE DESIGN EST -IL FAIT POUR VOUS ?

Qu’il soit horizontal ou vertical, un site one-page est un moyen original et ergonomique de mise en page. Si offrir une expérience utilisateur riche à vos internautes est une de vos priorités, si le volume d'informations à mettre en ligne reste modeste, si vous souhaitez une présence sur la Toile de qualité, notamment en termes d'originalité et d'impact visuel, le One-page design est une bonne solution.

Alors prêts à raconter votre histoire ?

Faire du neuf avec du (faux) vieux

Disko — Mon, 20 May 2013 19:31:44 +0200

Nous connaissons tous la marque Polaroid. Les plus chanceux (ou les amoureux de la marque) en ont peut-être un chez eux. Un appareil qui prend la poussière ou qu'ils utilisent grâce à The Impossible Project. (http://shop.the-impossible-project.com/shop/). Pour les autres, il y a Instagram, le réseau social aux filtres vintage qui vous permettent de croire que vous êtes un photographe. Entre ces 2 mondes, pas de lien. A part l'envie de faire des photos différentes, des photos sur l'instant, des photos que l'on partage facilement. Oh mais attendez, en fait… les mêmes envies motivent ces 2 mondes. Et si on les rapprochait ? Antonio Rosa, designer, en a eu l'idée. Il a créé un appareil photo au look Instagram, qui permettrait de diffuser l'instantané sur les réseaux sociaux et de l'imprimer au même moment ! Initialement un prototype 3D, cet appareil a intéressé C&A Marketing qui a convaincu Polaroid de se lancer avec eux. Et voilà ! L'appareil photo Socialmatic est né et devrait être commercialisé en 2014. Une fois dépassé l'attrait de la nouveauté, du gadget rigolo, de l'innovation inutile, qui paiera pour se procurer cette machine ? Est-ce que les presque 100 millions d'utilisateurs d'Instagram vont se laisser séduire ? Est ce que les Printstagram ou autres Stickergram, qui permettent d'imprimer son choix de photos ne suffiront plus ? L'avenir nous le dira. On peut néanmoins noter aujourd'hui l'intelligence d'une marque comme Polaroid. Elle a réussit à renaître de ses cendres et à devenir une marque branchée en se basant sur le même insight qu'à sa création : l'immédiateté du souvenir. Si cette envie était un luxe en 1980, elle est largement installée dans les habitudes de consommation actuelles. Il nous parait normal aujourd'hui de partager ce que l'on vit dans l'instant grâce au digital. Il parait donc logique que Polaroid redevienne une marque emblématique de la génération Y. Comme pour beaucoup de nouveaux réseaux sociaux, la prime à l'innovation ira à la marque qui saura utiliser le Socialmatic de manière pertinente la première. Plusieurs types d'utilisations s'ébauchent déjà : un photocall connecté et imprimable lors d'une soirée, un goodie interactif et personnalisé à emporter chez soi après un contact privilégié avec une marque, une installation créative à base de photos imprimées… Dans tous les cas, les filtres Instagram assureront la "qualité" de l'image de la marque. Si Socialmatic est l'un des premiers appareils photo connectés et proposant une impression instantanée, le marché devrait rapidement suivre pour proposer ces fonctionnalités sur des appareils davantage “grand public”. On trouve d’ores et déjà des boîtiers connectables au WiFi, on devrait bientôt trouver facilement des imprimantes de poche pour partager ses souvenirs sur papier. A tous ceux qui doutent d'un éventuel nouveau succès pour Polaroid, nous rappelons que certains “revival” produits revisités pour la nouvelle génération ont fait parler d'eux : la NewBeetle, la Mini, la 500 ou plus récemment la DS3 ont été des succès d'image, voire des succès commerciaux ! En dehors du secteur automobile, les marques d'habillement aussi lancent des collections vintage à partir d'anciens basics, comme l'ont fait Le Coq Sportif ou encore Nike. Pour réussir, la recette réside dans le bon dosage entre la fidélité à l'origine de la marque et l'adaptation aux modes de consommation des années 2000. Alors, qui sera le premier à poster sur Instagram une photo du Socialmatic ?

Titanium

Disko — Mon, 20 May 2013 19:31:44 +0200

Titanium est un SDK open source permettant de développer des applications mobiles sur les plateformes Android et iOS sans passer par le langage natif (Java et Objective-C).

Le principal avantage de Titanium est qu’il permet d’utiliser les composants natifs des plateformes. La syntaxe JavaScript permet quant à elle de prendre très facilement en main l’outil.

Titanium offre un support des technologies web basé sur les standards : HTML, CSS, Javascript ainsi que PHP, Python et Ruby. Il offre également la possibilité d’utiliser des frameworks JS comme jQuery, YUI, MooTools...

Titanium utilise une API indépendante de la plateforme qui permet d’accéder aux composants UI natifs, dont la géolocalisation, les cartes, les barres de navigations, les boîtes de dialogues, les alertes, mais également aux fonctionnalités natives des appareils notamment le système de fichiers, le son, le réseau et une base de données locale (SQLite & keyvalue-store).

Côté performances, chez Disko nous avions quelques doutes au départ, mais nous avons été agréablement surpris lors des tests sur appareils, notamment par sa fluidité, et nous n’avons pas fait de distinctions entre des applis natives et celles développées par Titanium.

A titre d’information, le JavaScript développé est compilé en bytecode, ce qui permet au framework d’être très performant sur le mobile.

L’un des principaux points négatifs de ce framework était qu’il n’imposait pas de structures MVC embarquée, il était donc facile de se mélanger les pinceaux ! Et surtout de terminer avec du code difficilement maintenable si l’on ne s’imposait pas de structure organisationnelle.

Heureusement la version 3.0 corrige ce point et embarque Alloy.

Créée à l’aide Node.js et disponible sur npm (mais directement intégré sur Titanium Studio 3.0), Alloy est une couche supplémentaire à Titanium et permet de l’enrichir avec une organisation Model-Vue-Controller. Cela permet en somme de développer des applications de meilleure qualité à l’aide de “bonnes pratiques”, avec des composants réutilisables, et donc de diminuer la répétition de code. Alloy étant maintenant releasé, nous vous conseillons de l’utiliser sans équivoque pour votre prochaine application, sans compter qu’il embarque en sus la célèbre librairie Backbone.js ! Et si ça ne suffisait pas à vous convaincre, Titanium est utilisé par de gros comptes tels que eBay ou PayPal, gage de fiabilité ! Bref, vous aurez compris que chez Disko, on adhère ;-)