background preloader

Marketing interactif, experience utilisateur, conception multimedia et gestion de projets

Marketing interactif, experience utilisateur, conception multimedia et gestion de projets
Il y a 1 semaine environ, la célèbre marque horlogère TAG Heuer (groupe LVMH) a mis en ligne en collaboration avec l’agence Nurun ;-) 2 opérations stratégiques dans le cadre de son 150ème anniversaire : Pour avoir eu la chance de travailler sur ces 2 projets (et parce que cela me fait tout simplement plaisir d’en parler ;-) je vais vous présenter ces 2 opérations. A l’occasion de ses 150 ans, TAG Heuer se lance, en partenariat avec Tesla Motors, dans un tour du monde 100% électrique ("The 1st World Tour in a 100% Electric Car"). L’aventure, "The Odyssey of Pioneers", se déroule à travers 15 villes et 37 000 km, et, à chaque étape du parcours, une exposition itinérante dévoile des pièces historiques de la marque mais aussi des montres de demain. Légende : l'ADN de TAG Heuer puise ses origines, entre autres, dans les sports mécaniques. A travers cette opération unique, TAG Heuer et Tesla Motors démontrent leur esprit pionnier en terme d'avant-garde et d'innovation.

Spur - A fun and easy way to critique a webpage. Turning up the contrast on a page increases makes heavy areas stand out more than lighter areas, does the design still hold together? Here are some examples: Although the visual design in the ESPN header is very busy, the contrast on the title of the lead story is still very visible. 16 Design Tools for Prototyping and Wireframing [Design Practice 8. Balsamiq Mockups Balsamiq Mockups (price:$US79, demo available) is an interesting product running on Adobe AIR. Its representation of the interface elements has a refreshing hand-drawn, sketch-like quality to them. Balsamiq Mockups also introduces BMML (a flavor of XML), which enables you to export your wireframes. However rather than a prototyping tool, it’s more targeted at communicating the concepts of a proposed interface via wireframing and the like. 9. Lucid Spec (price: from $US499, demo available) from Elegance Technologies is a windows-based .NET application that’s almost a clone of Axure. The one aspect that Lucid Spec lacks is allowance for those between state, Ajax-like interactions. 10. ConceptDraw Pro (price: from $US249, demo available) promotes itself as an alternative to OmniGraffle and Visio, aiming at the business and technical diagramming market. I’m pleased to say it does live up to these claims with various functions that are comparable to its competitors. 12. 13.

Planning stratégique au service du marketing, de la communicatio Pour les publicitaires, le brand content était encore récemment un contenu publicitaire comme les autres. Potentiellement d'une durée plus longue, il pouvait permettre une véritable expérience immersive dans l’univers de la marque et donc une meilleure mémorisation de ses valeurs et messages. L'exemple typique de brand content publicitaire était L'odyssée de Cartier en 2012. Et si un contenu de marque devait avant tout avoir une qualité éditoriale et que celle ci prime sur la transmission immédiate des messages pour lui permettre de construire son audience ? Mais la limite du brand content éditorial a tout de suite été évidente : une stratégie éditoriale doit être soutenue par une stratégie media pour engager les audiences potentielles du contenus. J'avais seléctionné Le BRANDED ENTERTAINMENT comme thème du dernier PARIS 2.0 en mars: "60 campagnes de BRANDED ENTERTAINMENT .

Google’s new search page design: highly redundant, needlessly stark and sometimes useful Yesterday, Google began rolling out a brand new Search page design in the US — coincidentally right as the Presidential Election reached its climax. The timing may or may not have been intentional, but either way you’ll be forgiven if you’re only just noticing the new design now as the political fog settles. At first look, your first impression of Google’s new (currently US-only) Search page may be positive. But then, as the new car smell wears off (on the Internet, that takes about 10 minutes), strange design decisions start to blemish an otherwise successful step in the evolution of Search. Redundancy In simplifying an already simple design, Google has made its navigation more redundant than ever before. Something strange is happening in the above screenshot; Google is using duplicate names for navigational elements which yield different results. How can this become a problem? After a performing a Web search, there are now two aligned links for News. Knowledge Graph and holy white space

47+ Excellent Ajax CSS Forms Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms. Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data. Let’s take a look, hopefully you’ll find new ideas you can develop further on your own. You might be interested to check some of the designs that was mentioned in the posts below: Styling Forms 1) Uni Form – an attempt to standardize form markup (xhtml) and css, "modularize" it, to get nice looking, well structured, highly customizable, semantic, accessible and usable forms. 2) CSS-Only, Table-less Forms – A great example of a well designed form using modern css techniques. Demo Styling Form Elements Demo : Form Usability and Accessibility Demo:

Improving Hiring for User Experience I had a recent engagement in the heartland of the United States which involved a room full clients who labeled themselves user experience professionals. One of the UX pros was a darling lady with cats on her sweatshirt whose sole responsibility was emailing basic summative data on a system’s users count once a month. She indicated that she was on the verge of ending her career to continue developing her poultry farm. This, in contrast to another attendee with the same title, who’s position involved conducting regular qualitative feedback sessions with users, authoring functional requirements for new features, sketching interaction elements for design teams to iterate, and finally providing project management and quality assurance for any development efforts. LinkedIn shows that the number of self-identified UX Designers has grown 12% in the past year. The Applicant The first advice is I give you, oh lonely applicant, is this: Don’t apply to the job, apply to the person. Resume Portfolio

30 concepts-clés de l'utilisabilité - Référencement, Design Dans un article intitulé "30 Usability Issues To Be Aware Of", Smashing Magazine recense 30 concepts et définitions que toute personne s'intéressant à l'ergonomie et à l'utilisabilité devrait connaître. Ce billet en est une adaptation en français : Le principe des 7±2 éléments Le cerveau humain étant limité dans sa capacité à traiter l'information, celui-ci aborde la complexité en traitant l'information par blocs. La règle des 2 secondes En vertu de ce principe, un utilisateur ne devrait pas avoir à attendre plus de 2 secondes certaines réponses du système, comme le passage d'une application à une autre, ou le lancement d'un programme. La règle des 3 clics Selon cette régle, les utilisateurs tendent à abandonner un site lorsqu'ils ne sont pas capables d'accéder à l'information ou au service en l'espace de 3 clics. Le chiffre de 3 clics n'est cependant pas critique : le plus important est que l'utilisateur sache où il en est, et qu'il n'ait pas l'impression de perdre le contrôle.

PERSONAS: définition et démarche Quelques éléments de définition… Un PERSONA, c’est un utilisateur-type (le fameux archétype), une représentation fictive des utilisateurs cibles, qu’on peut utiliser pour fixer des priorités et guider nos décisions de conception d’interface. La méthode des PERSONAS est une technique de conception centrée Utilisateurs, initiée par Alan Cooper en 1999. Cette méthode permet d’offrir une vision commune et partagée des utilisateurs d’un service ou d’un produit, en insistant sur leurs buts, leurs attentes et leurs freins potentiels, et en proposant un format des plus engageants. La démarche … Du collaboratif AVANT TOUT… avec quelques ateliers de travail, pas mal d’entretiens, et l’épluchage de diverses sources, pour recueillir l’ensemble de faits nécessaires à la construction des PERSONAS. Une démarche en 3 temps:PREPARER – CONSTRUIRE – COMMUNIQUER ET UTILISER… 1 Préparer Le démarrage dont tout va dépendre. 2 Construire La phase la plus délicate. 3 Communiquer et Utiliser Quelques liens:

Création de wireframes (article 3/3) : utiliser Axure RP Pro Ce billet est le troisième de la série dont l’objet est la création de wireframes. Pour ceux qui ont raté les épisodes précédents, j’avais parlé des avantages / inconvénients de PowerPoint et Visio à travers 2 billets : Aujourd’hui, je vais vous présenter Axure RP Pro, qui permet de créer des wireframes, des diagrammes de flux, des prototypes... et qui facilite énormément la rédaction des spécifications (oui oui, vous avez bien lu… ;-) L’interface n’est pas très complexe et sa prise en main est très facile si on connaît un peu Visio. Axure possède nativement les bibliothèques d’éléments HTML (bouton, éléments de formulaire, tableaux, image...) On peut utiliser des "masters" pour tous les éléments persistants (navigation, boutons récurrents…) Les propriétés attribuées aux masters sont répercutés sur toutes les pages sur lesquelles le master est placé. La conception de wireframes est avant tout conçue pour une utilisation sur écran : 1- La gestion des interactions

Jetstrap, créateur d'interfaces Bootstrap en ligne Vous avez besoin de créer un prototype de site web fonctionnel en quelques minutes ? Jetstrap peux vous sauver la mise en proposant un service en ligne plutôt bien pensé… Jetstrap est un outil en ligne qui vous permet de créer gratuitement une interface web basée sur le Bootstrap Twitter. (Vous ne savez pas ce qu’est le Bootstrap Twitter ? Rappelez vous nous en parlions en détails sur le blog il y a quelques mois. Destiné aux designers, développeurs et chefs de projets web, Jetstrap se compose d’une interface 100% web avec des fonctionnalités de création rapide de mise en page. Pour gagner en productivité le fonctionnement en drag and drop vous permet de placer les éléments de la page en quelques secondes. Gros plus non négligeable, Jetstrap vous permet de créer un prototype avec une mise en page adaptative. Pour conclure : Jetstrap se présente comme un outil vraiment rapide et facile d’utilisation pour créer rapidement un prototype de site web. jetstrap.com

Opquast - Bonnes pratiques qualité pour les services en ligne La matrice Swot un outil précieux Qui n’est pas resté songeur face à une problématique car il ne savait pas par quoi commercer ? Aujourd’hui, je vais vous parler d’un outil précieux, la matrice SWOT, qui ne va pas résoudre le problème mais permettre de le poser et d’analyser les différents environnements. L’intérêt de cette méthode est qu’on peut l’appliquer pour un bon nombre de sujets… Dans un premier temps, je vais définir la matrice SWOT, puis aborder comment se construit une matrice SWOT pour finir par les stratégies associées. La matrice SWOT La matrice SWOT est un outil d’analyse stratégique née en 1960 par Albert S. S pour Strenght : forces W pour Weakness : faiblesses O pour Opportunities : opportunités T pour Threats : menaces Comment réussir sa matrice SWOT ? Pour réaliser la matrice, il est recommandé de réunir les différentes personnes concernées par le projet, pour qu’aucun point ne soit oublié dans les 4 facteurs. La première étape Elle consiste à lister l’ensemble des points en les regroupant ainsi :

Related: