Au sommaire :

• Les goûts et les couleurs : la formation sur la symbolique des couleurs
• Tester l’ergonomie de son site même sans budget : les best practices
• Petite arithmétique de l’UX design : choisir, renoncer, construire étapes par étapes
• API et formulaires en HTML5
• Un bug à la fois : les problématiques d’un navigateur, Opera
• Les lighting Talks : 40 min, 10 intervenants, 10 speechs à mourir de rire !

Bonne lecture !

Les goûts et les couleurs

Une formation intéressante sur la symbolique des couleurs appliquée au web. La palette de couleurs est extrêmement importante pour l’expérience utilisateur, notamment sur les sites e-commerce où elle peut fortement favoriser l’acte d’achat. En fonction de leur spectre, les couleurs entrainent des réactions acquises et physiques différentes. Dans le premier cas, ces réactions dépendent de notre éducation et de notre culture. La réaction physique quant à elle entraine une accélération ou une réduction de notre métabolisme. C’est pour cela qu’il est communément admis que le rouge excite alors que le bleu apaise. La symbolique de chaque couleur en occident s’en est suivie, ainsi que des exemples de sites internet correspondants.

Quelques conseils en matière de sélection de couleurs ont été proposés : une couleur de base + une nuance correspondante + la couleur complémentaire correspondante. Et des outils pour faciliter cette tâche ont également été proposés tel que Kuler et Mypant.

Une question se pose ici finalement : peut-on stigmatiser chaque couleur à des sensations physiques même en ne restant que dans la symbolique des codes occidentaux ? Ne serait-ce pas comme l’a précisé un membre de l’assistance durant la session de questions/réponses : « un peu bullshit » ?

Tester l’ergonomie de son site même sans budget

Formation sur les best practices pour faire tester son site par des utilisateurs lambda sans avoir à passer par une agence spécialisée, car cela peut rapidement coûter très cher. « Do it yourself » ! Aussi bien durant la phase de maquettage ou de développement, car comme vous allez le voir, cela peut être « facile » avec de la méthode !

Tout d’abord, sélectionnez un panel d’utilisateurs pioché dans vos proches :

• La famille / des amis : pas vraiment optimal, car ces membres risquent d’être trop positifs dans leurs réponses pour vous faire plaisir.
• Des collègues : attention ici à ceux qui risqueraient de répondre sans vis-à-vis de leur propre intérêt. Un collègue intégrateur ayant tout intérêt à ne pas être négatif pour éviter toute modification de travail !
• Des étudiants : pratique, car toujours à la recherche d’argent !

Un lieu clos doit être choisi, ainsi qu’un logiciel d’enregistrement de la session tel que Camstudio. Sélectionnez ensuite un observateur : il aidera les utilisateurs si des problèmes techniques arrivent, pour répondre à ses questions, incitez celui-ci à parler à voix haute tout en lui proposant étapes par étapes le scénario. Il doit être présenté comme détaché du projet pour éviter de biaiser les réponses de l’utilisateur. Attention également à ne pas donner d’indices sur une fonctionnalité à l’utilisateur, exemple : « recherchez des billets de train »

Un scénario d’accompagnement de l’utilisateur doit être préparé en amont pour l’aider dans les tâches qu’il devra réaliser. Une tâche c’est un contexte et un objectif. Un scénario pour contextualiser un achat, une inscription par exemple. Et un objectif correspondant que l’utilisateur peut lui-même valider : « j’ai réussi à commander cette paire de chaussures » quitte à ce que cela soit faux ! Un bon démarrage peut être tout simplement la description de ce que voit l’utilisateur : type de site, fonctionnalité présente sur la page, etc. Prenez des notes après chaque session pour optimiser le debrief avec le chef de projet effectué en fin de la journée de test.

Finalement, le seul coût de l’opération est la rémunération de l’utilisateur, 40 euros semblent être une bonne moyenne, que cela soit en bon d’achat ou en cash suite avec une note de frais (tout dépend de votre comptabilité !). Pensez aussi que les lieux publics tels que le bon vieux Starbucks coffee et les tests utilisateurs à distance sont des options tout à fait envisageables ! On notera sur ce point des sites utiles tels que Appili en français (25^e par utilisateur) ou Youeye en anglais qui possédera bientôt une fonction de EyeTracking pour utiliser à distance la webcam de l’utilisateur.

Bref, faîtes des tests, que cela soit fait par vos soins, ou ceux d’une agence, cela vous évitera de toute façon des coûts bien plus importants par la suite et les éternels V3,V4,V5 !

Petite arithmétique de l’UX : choisir, renoncer, construire

Restons « User Centric » avec cette formation très intéressante pour « épurer » efficacement et avec pertinence votre site internet durant sa création ou sa refonte. On démontrera ici l’utilité de la méthode S.H.E pour « Shrink » (réduire) Hide (cacher) et Embody (personnifier).

Tout d’abord, il va falloir choisir le nombre de fonctionnalités pour éviter d’avoir des multi-tools « qui en jettent » et peu utiles au final pour l’utilisateur. Plus facile à dire qu’à faire, car dans cette étape de réduction on se confronte :

• À nous-mêmes, créateurs de site internet.
• À l’utilisateur, attaché par habitude à des fonctionnalités.
• À la concurrence : si elle fait beaucoup de choses, je ne peux pas en faire moins !

Comment faire alors ? Lister une fonctionnalité et comparer sa valeur à son coût en « Journée Homme ». Vous verrez dans le mapping ci-dessous le résultat du comparatif de chaque fonctionnalité : certaines auront beaucoup de valeur, mais seront très compliquées à mettre en œuvre (coût élevé), d’autres auront une valeur limitée et un cout élevé (poubelle), d’autres encore auront beaucoup de valeurs et seront très simples à mettre en place (the best ones !).

Pour réduire sa sélection on peut : prioriser, raconter une histoire, penser « mobile first » tout en gardant dans l’esprit que l’instinct ne doit pas être brimé dans cette démarche !

• Cacher permet de faciliter le travail d’attention sélective, certaines fonctionnalités sont évidentes dans cette démarche : menus déroulants, apparition d’éléments uniquement au survol.
• Personnalisez, simplifiez avec des icônes et en pensant à l’opposition entre l’agencement dans l’espace (un écran, x rubriques) VS l’empilage dans le temps (x écrans, 1 rubrique) dans le but d’optimiser l’expérience utilisateur.

Petite note de fin, « l’usabilité » d’un site est une affaire d’ergonomie alors que la simplification est une affaire d’UX design (User eXperience design).

HTML5

Deux formations distinctes ont été proposées : une sur les API HTML5 et une autre sur les nouvelles possibilités des formulaires.

Du coté des formulaires, l’intervenant a démarré sa session avec un parti-pris très clair sur les webkits qui sont des bibliothèques logicielles permettant aux développeurs d’intégrer facilement un moteur de rendu de pages Web dans leurs logiciels. En trois mots : « C’est à prohiber ! ». S’en est suivi un listing d’attributs pour améliorer l’expérience utilisateur dans un formulaire tel que :

• @autofocus : pour donner le focus d’un élément
• @placeholdfer : pour afficher un texte donnant un indice sur le contenu à rentrer (input et texte area)

Du coté des APIs on listera :

• Les Websockets : pour avoir une communication bidirectionnelle entre le serveur et le client.
• File API : possibilité de lire directement côté client le contenu des fichiers sans avoir à passer par le serveur
• vidéos API : avec les formats H264 (bourrés de brevets) et WebM (open source). La vidéo se comporte comme un élément HTML, libre à vous de lui donner toutes les compétences CSS ou SVG que vous souhaitez ! À noter un media framework pour synchroniser à une vidéo avec tout type de marqueurs : http://popcornjs.org/
• History API : pour gérer l’historique plus efficacement qu’en Ajax avec la méthode pushState.
• Le format JSON : pour transférer à peu près n’importe quel objet JavaScript valide en chaîne de caractère et de faire la transformation inverse.
• La technologie Apcash pour permettre l’utilisation du site lorsque l’on est hors ligne.
• Les incontournables Canvas : tueront-ils la technologie Flash dans le futur ?
• pdf.js : pour garantir l’intégration de format PDF sans l’utilisation de plug-in.
• La technologie WebGL : pour des rendus 3D plus que bluffants (ex : http://bodybrowser.googlelabs.com/ pour regarder le corps humain sous tous les niveaux. Toujours, en bêta test malheureusement…)

Le vrai défi du HTML5 a clairement été soulevé en fin de formation : une utilisation globale, répandue et stable. Bref, il faut le démocratiser !

Un bug à la fois

Un intervenant a sensibilisé l’assistance sur le problème de l’XML parsing du point de vue du navigateur Opera. Avec un message fort pour les intégrateurs : créer des hacks est une mauvaise politique et l’utilisation de librairy « funky » présente plus de risques que d’avantages ! Opera comme tout navigateur est confronté à un insight récurrent de la part des internautes : « si cela ne marche pas c’est la faute de mon navigateur, pas celle du site internet ! »

Les lighting Talks

Une très bonne surprise pour ma part, 10 intervenants présentent durant 4 min top chrono un point de vue, un fait en rapport au web.
@Karlpro remporte la compétition à l’applaudimètre avec son étonnante démonstration : comment faire un sac de laptop avec un jean !

Suivi par deux ex-aequo proposant pour l’un un fait absurde : Pas De Liens Sans Autorisation, ou comment informer que de nombreux sites obligent, selon leurs mentions légales, les internautes à les informer avant de poster un lien hypertexte ! Tel que Facebook, Google, Twitter… Le second ex-aequo nous propose le concept hilarant du G.A.O : les best practices de la Glande Assisté par Ordinateur. 25 min de travail, 5 min de pause !

Voilà pour le long debrief de cette première journée de formations à ParisWeb, deuxième session ce matin que vous pouvez suivre en live ici !

Mais qu’en est-il réellement et quelles sont les limites de cette utilisation ?

Cette technologie utilise les fonctions Javascript pushState() et replaceState(), utilisables uniquement sur le moteur web Gecko 2. Et oui ! C’est uniquement compatible Chrome (min v5), Firefox (min v4), Opéra (min v11.5) et Safari (min v5). Internet Explorer n’est pas dans la liste, ni-même sa version 10 et encore moins la 9 !

Après cette petite introduction, donnons tout de suite un exemple simple d’utilisation. Suivez bien :

Je suis sur une page A.html. J’ai un lien dans cette page qui me mène vers la page B.html, comme cela pourrait être le cas dans un menu de navigation. Je désire charger en Ajax le contenu de B.html afin de fluidifier un peu tout ça. Je vais donc récupérer en Ajax la page B.html, avec la méthode .load() de JQuery par exemple.

Jusque-là, rien d’innovant. L’un des problèmes de ce type de navigation est que si je fais « précédent » avec mon navigateur, je ne retomberai pas sur le contenu précédent, c’est à dire A.html. Pourquoi ? Etant donné qu’en appelant en Ajax le contenu de B.html, je n’ai pas bougé de ma page A.html. Donc le bouton précédent ne fera que me ramener sur la page où je me trouvais avant A.html. Vous comprenez facilement la limite de cette exemple au niveau ergonomique.

C’est là qu’intervient la fonction de manipulation de l’historique du navigateur. Quand je charge ma page A.html, j’exécute la fonction history.replaceState() en lui donnant en paramètre l’URL de la page, c’est-à-dire A.html. Au moment d’appeler B.html en Ajax, je fais un history.pushState() en lui plaçant en paramètre l’URL que je demande, B.html. Je crée ainsi une nouvelle entrée dans l’historique de navigation de mon navigateur. Tout le monde a suivi ?

Pour activer la navigation par le navigateur avec le bouton « précédent » et « suivant », je fais la fonction suivante :

$(window).bind(‘popstate’, function(event) {

var state = event.originalEvent.state;

if (state) {
$(« #ma_div_ou_je_charge_mon_ajax »).load(state.path);
}
});

J’ai donc placé un écouteur sur les évènements du navigateur afin d’afficher ce qui est demandé.

Niveau SEO :

Au niveau du SEO, c’est parfait ! J’ai uniquement appelé le contenu qui m’intéresse de B.html. J’ai bien deux pages distinctes A.html et B.html dans mon arborescence et les robots indexeront bien les deux pages. Si je désactive le Javascript, j’ai un lien classique de A vers B qui affichera la page demandée avec un rechargement du navigateur comme dans une navigation classique.

Inconvénients :

C’est assez difficile à mettre en place. Les navigateurs ne réagissent pas tous pareils à cette manipulation. En effet, il existe un problème sur Chrome. Je suis sur A.html, j’appelle la page B.html, puis ensuite tape une URL à la main vers un site externe. Si arrivé sur cette nouvelle page je fais précédent avec le navigateur, je retombe sur la page B.html en entière et non plus A.html avec l’importation du contenu de B. Il existe donc une méthode pour remédier à ce problème, mais on n’entrera pas dans les détails ici et elle est assez lourde.

Conclusion :

Grâce à cette technique, on peut créer une navigation très fluide en Ajax, tout en conservant la navigation par les actions du navigateur. Cette technologie se rapproche de ce qu’offre Flash au niveau de la fluidité. Comme toutes les bonnes choses, c’est à consommer avec modération. Nous avons bien vu dans les inconvénients, que cette méthode est encore au stade expérimental. Voici une application concrète de cette méthode sur le site Github. Regardez le chargement du contenu lorsque l’on clique sur un fichier dans le tableau. Testez la navigation par vous-même. Ceci dit, nous repoussons sans cesse les limites de nos navigateurs afin d’en tirer le meilleur. C’est ce genre de pratique qui pousse les concepteurs de navigateurs à améliorer leurs applications et repousse un peu plus la technologie web.

Cela vous est sans doute déjà arrivé : un beau matin, en vous connectant à l’un de vos sites favoris, vous vous apercevez que ce n’est plus comme avant et vous vous sentez troublé. Vous tâtonnez pour retrouver ce pour quoi vous êtes venus, et même pire, au-delà des problèmes liés à l’ergonomie, vous trouvez le tout vraiment très laid. Et oui… enterrer vos utilisateurs les plus fidèles est un des plus gros risques d’un redesign de votre site internet.

Bien entendu, plus un site comporte de fonctionnalités et de pages plus les risques sont importants. Mais même un site de plus petite envergure, peut se faire descendre par la critique s’il ne tient pas compte des attentes de ses visiteurs. C’est pourquoi nous vous proposons un billet inspiré de ce très bon article du site webdesignerdepot.

La question mérite d’être posée : pourquoi, quand et comment bien redesigner ?

Le guide suivant devrait vous aiguiller sur le droit chemin pour recréer et repenser votre site tout en satisfaisant vos utilisateurs. Et si jamais vous êtes actuellement dans le cas d’une refonte échouée, il n’est pas trop tard ! On pourra tout de même vous donner un coup de pouce.

Faire du neuf avec du vieux, le problème de la refonte

Quand vous décidez qu’une refonte est nécessaire pour votre site internet, il y a énormément de paramètres à prendre en compte, au-delà des simples aspects techniques.

Souvenez-vous que votre site est déjà régulièrement visité, et a sans doute des utilisateurs réguliers. Ces derniers ont des attentes particulières lorsqu’ils visitent votre site. Vous avez besoin d’avoir de bonnes raisons pour changer tel ou tel process/fonction/élément graphique. Vous devez en tenir compte aussi bien au début que tout le long du processus.

Communiquez avec vos utilisateurs actuels
Contrairement à une création ex-nihilo, un redesign de site possède déjà une base utilisateurs.  Faire participer ces derniers dès le début de votre remaniement ne pourra jouer qu’en votre faveur. Après tout, ce sont ces personnes qui utilisent votre site, et qui y sont déjà familières. Bien entendu, vous tomberez toujours sur d’irréductibles internautes, complètement fermé à toutes formes de changements, mais d’autres pourront vous donner un aperçu intéressant de comment ceci pourrait être amélioré, ou bien comment cela aurait besoin d’être modifié.

Il est important de tenir compte de la manière dont les internautes utilisent votre site avant la refonte. La façon dont vous voudriez qu’ils utilisent vos outils n’est pas forcément en accord avec la vraie utilisation qu’ils en font. Prenez cela en compte quand vous redesignez et prenez garde de ne pas briser les habitudes de navigation de vos utilisateurs sans une excellente raison.

Testez à la fois pour les futurs et les anciens utilisateurs
On pourrait croire qu’il faut tester votre nouveau design uniquement sur les futurs utilisateurs pour obtenir les meilleurs résultats. Ne connaissant pas le design, ils ne sont justement pas influencés par l’existant. C’est une bonne stratégie si vous redesignez quelque chose comme une fiche produit sur un site e-commerce (le but ici est d’attirer de nouveaux clients). Mais si vous réaménagez un site entier, vous avez besoin du feedback des gens qui utilisent actuellement votre site. La dernière chose dont vous avez besoin, c’est de faire fuir tous vos utilisateurs.

Vous pouvez par exemple laisser entendre que vous testez un nouveau site. Offrez leur le choix de le tester et soumettez-leur un questionnaire non-intrusif, ou un mécanisme similaire pour recueillir ce qu’ils en ont pensé.

Laissez les utilisateurs changer l’interface selon leurs propres envies
Ce point est particulièrement important pour les sites “outils”. Laisser les utilisateurs switcher entre la nouvelle et l’ancienne interface selon leur convenance est la meilleure façon de se prévenir des plaintes. Les sites de médias sociaux sont surement les meilleurs exemples pour illustrer cette facette (comme le fait Twitter avec la possibilité de retourner sur l’ancienne interface). Laisser-les changer à leur rythme, cela évitera les mauvaises surprises et la frustration.

Il est par contre important d’imposer une deadline pour effectuer ce switch. Faites-vous bien comprendre des utilisateurs : ils doivent assimiler qu’ils peuvent changer autant de fois qu’ils le veulent tant que la deadline n’est pas atteinte, mais qu’après, la nouvelle version s’appliquera à tout le monde. Cela évitera à quelques trainards de rester indéfiniment sur l’ancien site.

Facilitez l’envoi de feedback après la refonte
Il existe pléthore d’outils pour collecter les impressions des utilisateurs. Utilisez-les et trouvez ce que vos visiteurs aiment ou n’aiment pas. Ensuite, assurez-vous de relever tout ce qui est soulevé par plus d’une poignée de visiteurs. Rappelez-vous : pour chaque visiteur qui exprime un besoin ou un souci, il pourrait y en avoir des dizaines qui ressentent la même chose sans rien dire.

Exprimez clairement vos raisons
Il est important d’énoncer à vos utilisateurs quelles raisons vous ont poussé à la refonte. Beaucoup d’internautes qui ne sont pas familiarisés avec les aspects techniques liés au fonctionnement, pensent que la refonte existe pour des raisons purement esthétiques. Faites-leur savoir quelles fonctionnalités vous comptez ajouter ou bien ce que les améliorations d’interface utilisateur vont apporter. Un billet de blog, expliquant votre plan de redesign peut être un bon moyen d’ouvrir le dialogue.

Proposez un tutoriel expliquant les changements majeurs
Si vous changez le fonctionnement de votre site ou si vous procédez à des modifications drastiques des éléments des pages, cela serait une bonne idée d’offrir une vidéo, un schéma, ou n’importe quel autre support faisant le tour des nouvelles caractéristiques du site. Cela aidera les utilisateurs à s’adapter plus rapidement aux nouveautés et de ne pas se sentir perdus. De plus, cela donnera l’impression que vous vous souciez d’eux, et que vous voulez que leur expérience soit aussi bonne que possible.

Que faire si votre refonte a déjà échoué ?

Donc, vous venez de mettre en ligne votre design retravaillé, malheureusement à part des plaintes, rien de bon ne ressort, aussi bien de la part des anciens utilisateurs que des nouveaux venus.
Que devez-vous faire ? Devez-vous retourner sur l’ancienne version ?
Que faire si ce n’est pas une option, ou que vous avez investi des milliers d’euros et des mois dans le nouveau site ?

Tout est question de contrôle
La première chose que vous devez faire est de reconnaître que votre refonte n’a pas répondu aux attentes des internautes. Faites savoir aux gens que vous entendez leurs revendications et que vous vous souciez de leurs préoccupations. Que vous le fassiez grâce à Twitter, votre blog, ou tout autre support, dépend essentiellement de l’endroit depuis lequel vous pouvez atteindre le plus grand nombre de vos utilisateurs.

Identifier et traiter les plaintes
Cibler les plaintes spécifiques si vous le pouvez. Si tout le monde se plaint de combien telle ou telle fonction est difficile à trouver, répondez-y immédiatement. Il existe plusieurs façons de le faire : vous pouvez simplement poster sur votre blog ou envoyer un courriel contenant toutes les informations utiles. Vous pouvez également re-procéder à un changement dans l’ergonomie, l’arborescence ou le design pour rendre cette fonction plus facile d’accès. Si c’est vraiment un gros problème, faire un changement est probablement la meilleure solution.

N’ayez pas peur de revenir en arrière
S’il y a des plaintes énormes, ou si vous constatez une baisse de trafic fulgurante, n’ayez pas peur de downgrader tout ou partie de votre site. Du moins jusqu’à ce que des correctifs puissent être appliqués. Si le succès de votre site souffre à cause de la refonte, il n’y a aucun sens à continuer sur cette voie. Il est préférable de faire marche arrière en reconnaissant l’insatisfaction de vos visiteurs  (et donc montrer que vous placez l’expérience utilisateur avant tout) plutôt que d’insister aveuglément.

Surveillez attentivement

Chaque fois que vous lancez un nouveau design, il est important de suivre attentivement tout ce qui « entre » et « émane » de votre site.

Voici les points principaux à ne pas laisser de côté :

• Définissez des objectifs pour les différentes fonctions/pages de votre site (cette page doit avoir X taux de conversion, ne doit pas avoir un taux de rebond supérieur à X %, etc.) et assurez-vous régulièrement que le flux de visiteurs ne chute pas brutalement.
• Les différents outils d’analyse (Google Analytics pour n’en citer qu’un) peuvent vous aider dans ces tâches. Suite à l’analyse, ils permettent d’effectuer des changements proactifs sur votre site, anticipant ce que les visiteurs pourront éventuellement vous reprocher.
• Assurez-vous en permanence de recueillir les informations d’analyse de base pour vous donnez des repères sur l’évolution de ces données.
• Également surveillez le ton des messages postés sur les médias sociaux au sujet de votre restructuration. Si vous voyez beaucoup de plaintes, ou même beaucoup de confusion, il faut être proactif et ne pas hésiter à engager la conversation.
• Laisser couler est le meilleur moyen de provoquer un « bad buzz ». Il est important d’informer au mieux vos utilisateurs pour qu’ils sachent que les changements effectués sont fait en leur faveur et pas dans un but indéfini.

Co-écrit avec Nicolas Bayard.

Au cours de la chaîne de création d’un site internet (ou d’un projet web plus généralement) le webdesigner est amené à interagir avec d’autres métiers. Pour une fluidité dans les échanges, il est important de tenir compte des contraintes des autres intervenants qui vont utiliser votre travail.

Ceci nous amène à notre problématique : comment faciliter le workflow en tant que webdesigner ? À quels niveaux chacune de mes décisions va impacter la chaîne de création d’un site internet ?

Nous nous attarderons principalement sur les interactions avec le référenceur et l’intégrateur (celles avec les autres métiers étant plus réduites, voire inexistantes).

Prise en compte des collaborateurs

Vous remarquerez que souvent nous débordons du cadre du design pur et dur, cela reste pertinent avec le fait que le workflow d’un projet web constitue un ensemble, divisé en multiples interactions. Si le designer interagit avec d’autres personnes, la réciproque est aussi vraie. Certains des points abordés serviront donc également à d’autres rôles.

Interactions avec le référencement

Bien que le design n’impacte pas beaucoup le référencement, il est souvent amené à structurer l’information et à créer une navigation ergonomique. Dans ces cas précis, le designer doit faire attention à ne pas créer de points bloquants pour l’accessibilité et la navigation des internautes ainsi que des moteurs de recherche sur le site.

Cela peut passer par plusieurs aspects :

• L’utilisation de Splash Page (page d’accueil d’un site ne présentant qu’une image ou une animation Flash et un lien d’entrée sur un site Web).  La Splash Page possède un certain nombre d’inconvénients :
  • elle retarde d’une page l’accès à l’information pour les visiteurs, leur proposant une page parfois pauvre en contenu.
  • elle offre également une page d’accueil difficile à référencer pour les moteurs de recherche, car elle ne contient pas ou peu de contenu référençable. Dans le pire des cas, le lien d’entrée est incrusté dans le Flash et il est donc impossible pour les robots de suivre le lien.
  • enfin, si l’image est de grand format ou si l’introduction en Flash est complexe, la page risque d’être longue à charger.

• L’utilisation abusive d’Ajax dans l’interface. Beaucoup d’ergonomes et de développeurs essayent d’impressionner les internautes en utilisant massivement cette technologie pour fluidifier la navigation, mais c’est souvent une erreur, car le contenu Ajax (chargé dynamiquement donc) ne peut pas être lu, donc indexé par les moteurs de recherche. Pour pallier à ce problème il faudrait idéalement créer une alternative à ce contenu, doublant le travail de l’intégrateur.

• L’utilisation de Flash : de la même manière, par souci d’esthétisme ou de navigation, du Flash est parfois implémenté dans la page. Les moteurs de recherche ne pouvant pas lire cette technologie, il est déconseillé d’en abuser, et le cas échéant, créer une alternative (encore une fois, double travail à effectuer).

Interactions avec l’intégrateur

Sans nul doute, c’est envers l’intégrateur que le designer a le plus de responsabilités. En effet, c’est en grande partie du graphisme que va dépendre la charge d’intégration. Bien entendu, le but n’est pas de restreindre son imagination sous prétexte que l’intégrateur aura plus de travail, le principal étant de répondre aux objectifs du site. Cependant, amis designers, gardez en tête que :

• Vous vous devez d’être le plus minutieux possible ! Pas question de maquetter seulement deux pages et de se dire que le reste se déclinera aisément tout seul. Les meilleurs sites sont pensés et dessinés du header de la page d’accueil jusqu’au footer de la plus profonde des pages. Ce souci du détail vous vaudra les louanges des intégrateurs. En effet, le designer fournit souvent la maquette de la page d’accueil et des grandes entrées, mais rarement des pages plus profondes. Il ne faudra pas s’étonner si l’intégrateur comble par lui-même ces « blancs ». Il est donc important d’avoir un design poussé et validé avant de commencer l’intégration. Il est plus facile de retoucher un détail sur Photoshop plutôt que bidouiller « on the fly » pendant la phase de développement.

• Vous devez prendre en compte la charge de temps qui vous est attribuée ! Si vous êtes face à des deadlines assez courtes, ne vous lancez pas dans un webdesign et/ou une navigation trop sophistiqués. La création peut s’avérer très chronophage, et ainsi retarder un planning (pensez au chef de projet, avez-vous déjà essayé de tout décaler sur un Gantt ?). Au bout de la chaîne, ce sont souvent les intégrateurs/développeurs qui trinquent, en devant intégrer et/ou développer vos chefs-d’œuvre en un temps record afin de ne pas cumuler toujours plus de retard. La créativité à outrance joue souvent contre un planning serré. De plus, la simplicité et la sobriété peuvent être tout aussi importantes (pour ne prendre qu’Apple en exemple).

• Soulevons également le problème des typographies. Il est en effet souvent plus sympathique pour un designer d’utiliser des typographies exotiques afin de donner du relief à sa page et de titiller notre rétine en changeant de l’habituel Arial. Seulement voilà, même s’il existe actuellement beaucoup de techniques pour utiliser d’autres polices (font-face, cufont.js, etc.) que les typos web, aucune n’est parfaite, et cela causera toujours des soucis d’intégration selon la configuration et le navigateur de l’internaute. Et là encore on ne parle pas du temps supplémentaire que prendra l’intégrateur : pensez donc à voir avec lui si la police de votre choix est intégrable.

Enfin, voilà quelques détails souvent mis à la trappe mais primordiaux pour que le travail soit fait proprement et pour éviter toutes confusions et aller/retours inutiles :

• évitez d’être trop farfelu ou extravagant pour le design d’un site hyper dynamique qui contiendra de nombreuses pages différentes (site de e-commerce, site immobilier…). Le but de ces sites étant avant tout de convertir, le design ne doit pas prendre le dessus sur le produit. D’autant que le temps de chargement de ce genre de site est un critère déterminant.

• faites attention aux effets difficiles à intégrer et  à rendre cross browser (ombres portées, dégradés, coins arrondis, etc.)

• lorsque vous dessinez des boutons, faites bien attention à fournir à chaque fois les trois états possibles (normal, hover et active). En effet, cela n’incombe pas à l’intégrateur de deviner comment vous auriez dessiné les états manquants.

• triez et nommez vos calques ! Cela fait perdre du temps à l’intégrateur de se plonger dans le découpage d’une maquette où rien n’est nommé et où aucun calque n’est rangé.

Ces listes de conseils sont bien entendu non exhaustives et visent seulement à vous faire comprendre la synergie qu’il existe entre chaque membre d’un projet web.

Conseil ultime : apprenez le CSS !

Voila le point essentiel qui adoucira le passage de votre travail à celui de l’intégrateur. En effet, si vous n’êtes pas familiarisé à coder vos propres design, vous ne pouvez pas comprendre toutes les contraintes s’attachant à ce langage. Apprendre à intégrer changera votre façon d’aborder un design car vous aurez une meilleure compréhension de ce qui est possible ou complexe à réaliser pour l’intégrateur. De cette manière, la transition entre le design et le code se fera plus aisément. De plus, vous serez plus proches et pourrez mieux répondre aux attentes de l’intégrateur, maintenant que vous parlez tous deux le même langage. C’est un point crucial, vous donnant plus de valeur ajoutée et qui fera facilement la différence entre deux designers lors d’un projet web.

Nous finirons cette partie en insistant sur l’importance d’avoir une vision globale d’un projet et de son équipe. C’est en pensant un site internet comme une chaîne où chaque ressource est complémentaire qu’on en fait un lieu plus accessible, attractif et mieux conçu.

Co-écrit avec Nicolas Bayard

Facilité par l’émergence de nouvelles technologies favorisant la création de sites possédant une réelle identité graphique recherchée (HTML5/CSS3, Flash, Jquery…), le webdesign est devenu un outil de marketing efficace et  financièrement accessible.

A la base un outil de mise en forme simple visant à rendre un site « beau » et « agréable », le webdesign est désormais un outil puissant stimulant encore plus la concurrence : il faut avoir un design attirant et original à la « mode », tout en affichant une image de marque forte. Ainsi la majorité des entreprises ont changé leurs stratégies et adoptent une identité graphique recherchée en phase avec leur cible, ainsi que le message à véhiculer pour transformer le visiteur en acheteur.

Ce dossier n’est pas destiné à justifier l’utilisation d’un bon design (inévitable de nos jours), il s’agit plutôt de mettre en exergue les démarches à faire tant vis à vis du client que de l’internaute pour (re)proposer un webdesign adapté à un domaine d’activité.

Nous garderons aussi à l’esprit que le webdesign n’est pas qu’une façade colorée : c’est une activité en synergie avec d’autres métiers liés au web, et il y a donc des habitudes à prendre pour faciliter le workflow.

Gestion du client et prise en compte de l’internaute

Lorsque nous sommes face à une demande de webdesign, il s’agit souvent de proposer une orientation graphique qui plaît au client sans réellement prendre en compte l’internaute. Et si celui-ci est considéré, c’est bien souvent les goûts du client et du designer qui ont plus de poids que l’opinion de l’internaute.

Sensibiliser  et bien comprendre le client

Le client n’a pas forcément les mêmes connaissances que nous, son expérience est différente de la nôtre et il ne sait pas toujours vraiment ce qu’il veut. Il est de notre ressort de définir quel serait la meilleure façon de designer le site sans pour autant ignorer son opinion : si vous voulez faire mouche plus facilement avec vos premières propositions, il peut être très utile de rédiger un brief créatif à l’intention de votre client pour mieux cerner ses propres goûts et faire parfois apparaître de nouvelles problématiques qui ne s’étaient pas posées auparavant.

Ce brief permet de sonder l’esprit du client en posant des questions très simples :

• Quelles philosophie ou valeurs associez-vous à votre concept ?
• Quel est l’objectif (autre que faire des bénéfices) affiché par votre site ?
• Comment décririez-vous votre site en 3 idées ? En 3 adjectifs ? en 3 verbes ?
• A qui parle-t-on ?
• Quel est selon vous votre cœur de cible ?
• Quel serait l’objectif principal, en une phrase, d’un internaute qui utiliserait votre site ?
• Qu’attend en premier un individu, en une phrase, qui utilisera votre site ?
• Quels sont les points faibles, et les points forts de votre site?
• En quelques mots, en quoi votre site se distingue-t-il de ses concurrents ?

Bien entendu le client est toujours roi, mais même si une proposition de webdesign remplit les objectifs donnés et correspond au besoin, il faut garder à l’esprit que c’est le point de vue de l’utilisateur final qui déterminera si un projet web est un échec ou une réussite. C’est pour cela qu’il faut anticiper la réaction de l’internaute dès le moment où il arrive sur le site et sensibiliser le client sur l’importance de la prise en compte du futur utilisateur.

Il faut donc, dans un premier temps, faire comprendre au client que ce sont les goûts de l’internaute qui priment sur ses propres caprices : comment générer du trafic et augmenter les ventes si le visiteur ne s’identifie pas au site, ou pire, le trouve tout simplement laid ?

La rédaction d’un dossier d’étude vous aidera beaucoup dans cette démarche, outre prouver au client par a + b que votre choix est meilleur qu’un autre, il lui permettra aussi de prendre du recul sur son projet et favorisera l’émergence de nouvelles idées (tant au sein de l’équipe de création que du client).

Un dossier d’étude de webdesign classique se construit généralement par des analyses  graphiques et ergonomiques, suivies de recommandations. Pour avoir des bases plus solides, vous pouvez également aller au delà du simple benchmark graphique et analyser la direction artistique prise par vos concurrents pour satisfaire la cible, c’est à dire comment répondre graphiquement à une problématique donnée.

Analyser les gouts de l’internaute

Dans ce dossier, il est d’usage de faire quelques recherches sur la cible, mais celles-ci sont trop souvent centrées sur la tranche d’âge concernée et le type d’internautes (homme, femme, étudiant, cadre…).

Avant toute proposition de webdesign, il est donc préférable d’accompagner votre dossier d’un « profil idéal d’utilisateur » pour justifier vos choix d’orientation graphique.

L’objectif est de dresser un profil psychologique de l’internaute en utilisant des questions simples permettant de mieux cadrer sa personnalité et ses goûts. Soyez inventifs, communiquez sur votre image de marque, posez des questions inattendues et montrez que vous vous intéressez à leurs opinions ! Vous pouvez par exemple leur demander de décrire votre nouveau site en trois adjectifs, de lui associer une ou plusieurs couleurs, qu’est-ce que l’internaute attend du service qui va lui être proposé, qu’est ce qu’il aime (ou n’aime pas) voir et lire sur le site, et quels types de fonctionnalités il préfère voir mis en avant sur le site ? C’est en quelque sorte un brief créatif à l’intention de vos futurs visiteurs.

Le designer doit bien comprendre qui est la cible que désire viser le client et quels sont les besoins réels de l’internaute. Cela permettra au designer de savoir sur quels éléments il devra le plus se concentrer et ceux qu’il devra éviter. On évitera par exemple une identité graphique trop chargée et trop poussée quand c’est le profil même de l’utilisateur qui construit le contenu d’une page (c’est le cas de Facebook ainsi que LinkedIn).

Comme outil d’analyse, n’hésitez pas à proposer au client le lancement de sondages sur les réseaux sociaux afin de déterminer ce qu’attend l’internaute ou bien le lancement d’une version béta pour avoir des retours avant le lancement de la version finale.

Une fois les goûts de l’utilisateur cernés, le designer doit prendre en compte le contenu du site par rapport au message à faire passer à l’internaute : quel est l’intérêt de réaliser un webdesign hyper créatif et très à la mode si l’utilisateur ne trouve même pas ce qu’il est venu chercher ?

Il est ainsi très important de bien hiérarchiser l’information et mettre en exergue les éléments les plus importants aux yeux du visiteur pour l’encourager à explorer le reste du site. Même si ce point est plus apparenté à de l’ergonomie que du design pur, prendre en compte l’accessibilité et la navigation du site lorsque l’on réalise un webdesign évitera plus tard de perdre bêtement un visiteur ayant éprouvé des difficultés à naviguer. Essayez donc d’enrichir le site d’éléments de navigation intuitifs et évitez de surcharger la page d’une pléthore d’éléments graphiques qui ne feront qu’agacer l’internaute.

Au final, en analysant simplement ce qu’aiment voir et lire les internautes et en sensibilisant le client sur l’importance de diriger ses efforts vers l’expérience l’utilisateur, on peut plus facilement proposer des orientations graphiques originales qui rempliront les objectifs initiaux.

Rendez-vous la semaine prochaine pour la deuxième partie du dossier !

Ce dossier s’articulera sur trois parties  :

Partie I : Gestion du client et prise en compte de l’internaute
Partie II : Le webdesign : un travail d’équipe
Partie III : Faire du neuf avec du vieux, le problème de la refonte

Co-écrit avec Geoffrey Mathern

Pour la troisième fois consécutive, Synerg’heTiC proposait aux Junior-Entrepreneurs une formation intitulée « Concevoir et promouvoir son site Internet », animée par Audrey Wermeister, Julien Gouvernet et Adrien Pepin. L’objectif étant de transmettre notre expertise dans la conception et la promotion de site Internet.

Lors de chaque congrès, nous nous efforçons d’adapter le contenu de cette formation de manière à être en phase avec les attentes des Junior-Entrepreneurs. La difficulté qui s’impose à nous est de satisfaire à la fois les personnes issues d’une JE « ingénieur », au profil plus technique, ainsi que les personnes provenant d’une JE « commerciale ».

Au programme :

Concevoir et réaliser son site Internet

• Adopter une démarche réfléchie
• Concevoir : la phase de réflexion
• Réaliser : la phase concrète
• Recetter : la phase finale
• Etendre son offre : pensez mobilité

Promouvoir son site Internet

• Adopter une démarche structurée et cohérente
• Actionner les leviers
• Etudier les résultats et s’adapter

Do it yourself !

• Analyse et conseil en matière de communication online pour chaque Junior-Entreprise

C’est toujours avec grand plaisir que nous faisons cette formation et nous sommes impatients de remettre ça lors du prochain congrès national d’hiver ! D’ici là, n’hésitez pas à nous faire part de vos remarques dans les commentaires, sur Facebook ou Twitter.

La première partie de la conférence était axée sur le modèle ergonomique à respecter pour les applications Android à savoir: l’application Twitter. En effet cette application a été réalisée conjointement par Twitter et Google, avec pour objectif de déterminer un standard, un petit peu comme l’a fait le Google Nexus One au niveau des standards hardware.

Trois éléments principaux sont désormais à considérer comme des standards : L’action Bar, le quick action popup et la présentation de la Home page.

Action bar

L’action bar représente ce que l’on pourrait nommer le header de l’application. En plus de contenir le logo de l’application, servant aussi de retour à la home, l’action bar doit contenir la fonction de recherche sur son extremité droite, si celle-ci à lieu d’exister bien-évidemment. Mais surtout elle doit contenir un bouton d’accès à la fonctionnalité principale de l’application.

Dans le cas de l’application twitter c’est la fonctionnalité permettant de « tweeter » que l’on retrouve.

Le Quick Action Popup

Le Quick Action popup a pour objectif de remplacer le context menu. Le context menu c’est ce menu secondaire qui apparait comme une light box dans les applications Android. Peu esthétique et à l’ergonomie moyenne, on comprend cette volonté de s’en passer.

Le quick action popup se veut bien plus direct et esthétique. Il se symbolise par un menu, lié à un élément, un tweet dans notre cas, contenant plusieurs actions illustrées par des logos. Disposé à l’horizontale celui-ci autorise le scroll horizontal, ce qui permet d’ajouter un nombre conséquent d’options ou d’actions. De plus il faut savoir que les applications Android sont capables de supporter des plugins et c’est dans ces quick action popup que l’on va retrouver ces derniers.

La Homepage

Enfin la Homepage d’une application Android doit se présenter sous une forme simple et explicite : l’action bar est une

série d’îcones explicites et titrées symbolisant les différentes fonctionnalités de l’application. Ceux-ci doivent être de taille conséquente et très réactifs, Google insiste sur cette volonté d’instantanéité.

Ce sont donc les attentes de Google en terme d’application sur leurs système d’exploitation mobile.

La deuxieme conférence a été animée par @ludovic_perrier, co-fondateur de Diota Soft, entreprise qui propose ses savoir-faire en matière de Réalité augmentée, 3D, géolocalisation, temps réel,…

Le sujet de cette seconde partie était plus orienté vers les différents usages d’Android liés à ses spécificitées techniques (boutons physiques par exemple).

La navigation sur le mobile

Afin de ne pas reproduire certaines erreurs présentes sur quelques applications Android, comme le bouton retour inutile, voici un schéma présentant les différents boutons de navigation Android qu’il est important de prendre en compte pour l’utilisabilité de votre application.

En fonction des constructeurs, la position des boutons varie.

De ce fait, lors de la création de jeux mobiles, il est intéressant de laisser la possibilité à l’utilisateur de pouvoir configurer lui même ses touches, problème que l’on ne trouve pas sur iPhone.

Voici quelques règles d’or qu’il est important de connaitre et d’appliquer

• Pouvoir annuler l’action.
• L’appli ne doit pas être en pleine écran, il faut laisser la barre des titres.

En effet, un utilisateur, lorsqu’il utilise une application, aime bien pouvoir avoir accès à l’heure, ou voir ses nouveaux mails. Il ne faut pas non plus abuser de la modularité d’Android, notamment avec la profondeur de navigation (Maximum 4 sous-menu de nav)

Toute action doit avoir une réaction visible :

• Eviter les vues défilantes (Scroll view)
• Quand c’est intuitif, pas besoin d’aide (repensez au petite trombone de notre cher et
• tendre Word !)
• PENSER comme M. TOUT LE MONDE !

Que deviendra Android dans le futur ?

L’avenir est prometteur pour Android, et Google compte bien s’implanter sur les ordinateurs, la Télévision, avec comme exemple récent la Google TV. Un avenir prometteur donc pour le géant américain, qui nous dévoilera encore de nombreux projets dans les mois à venir…

Formation : Réaliser et promouvoir un site internet (V2)

Au programme de cette formation :

Communiquer sur Internet

• Quelques chiffres clés

La création d’un site web, de A à Z

• Objectifs, cibles, concurrence : définir la stratégie de communication
• Arborescence, contenus : la structure générale
• Conception ergonomique : accès à l’information
• Spécifications fonctionnelles : comment ça marche ?
• Spécifications techniques : quelle plateforme ?
• Conception graphique : la première impression
• Intégration et développement : ça prend forme !
• Recette  : debug et finalisation

Le mobile

• Quelques chiffres
• Déterminez votre stratégie
• Application VS site mobile
• Conception : outils et best-practices
• Développement : Web Apps VS Applications

Un site mais pas seulement

• Stratégie de communication globale
• Facebook : l’incontournable
• Twitter : l’instantané
• Blog : un outil à intégrer
• Newsletter
• Quelques pistes à explorer

Plus d’une cinquantaine de Junior-Entrepreneurs étaient présents et nous souhaitons les remercier chaleureusement ! Nous espérons que vous avez pris autant de plaisir à suivre cette formation que nous avons eu à la donner !

Apple : des contraintes salvatrices

Le premier type de contrainte auquel va se confronter l’ergonome/designer sera celui de l’ergonomie imposée par la plateforme. Particulièrement dans le cas d’iOS, le célèbre système d’exploitation mobile d’Apple. En effet Apple impose certaines règles ergonomiques sur la plupart des applications. Les ressources en ligne d’Apple indiquent que l’ergonomie d’une application doit reprendre les usages ergonomiques de la plateforme. Il faut entendre par là qu’il est nécessaire d’utiliser le système de navigation de l’OS comme l’arborescence horizontale ou encore le système de tri par onglets.

Apple autorise bien évidemment une alternative à ce type d’ergonomie, mais celle-ci requiert davantage d’efforts de la part des développeurs. Ce type de design se base sur la métaphore. L’application doit donc se baser sur des éléments visuels présents dans « le monde réel » et reproduire une mécanique d’interaction proche de ce qu’il se ferait dans la vraie vie. Ce choix se fera en fonction de la manière dont est piloté le projet, selon les coûts, la qualité ou les délais.

Android : une liberté à maitriser

Pour la plateforme Android les problématiques sont différentes. Le designer aura une marge de manœuvre bien plus importante au niveau de son interface. Toutefois il devra obligatoirement prendre en compte les contraintes des résolutions multiples dès le début de la conception. En effet la multiplicité des terminaux Android engendre un nombre de résolutions conséquent. Lors de la conception il faudra donc prendre en considération la résolution des écrans des terminaux, leur densité (nombre de pixels par rapport à la surface de l’écran) mais aussi le ratio de l’écran (panoramique ou non).

Ces paramètres influencent l’équipe entière et ne doivent jamais être perdus de vue. Dans les kits de développement fournis par Google il existe une technologie nommée 9-patch qui permet de simplifier cette gestion de résolution via une gestion avancée des fichiers PNG.

Voici donc les premières contraintes auxquelles les designers orientés mobilité devront se confronter. Certains choix graphiques devront être réfléchis avec prudence car ils seront les facteurs déterminants du bon déroulement d’un projet mobile.

Nous rentrerons, au cours d’un prochain billet, dans les détails opérationnels de cette problématique. En attendant, bons tests et n’oubliez pas : soyons mobiles !

Parmi les dix projets présentés lors du carrefour des possibles organisé dans le cadre de Futur en Seine, par la FING, dont Synerg’heTiC est partenaire, un a particulièrement retenu notre attention, et répond à cette problématique, UpShot, service édité par le Studio Melipone.

UpShot vise à faciliter la communication entre un graphiste et son client.

Voici la démarche. Vous uploadez votre création. UpShot envoie alors un email à votre client contenant un lien vers celle-ci. Il peut enfin laisser très facilement des commentaires directement sur votre création.
UpShot a vraiment été conçu pour être simple d’utilisation, les créateurs d’UpShot sachant bien que tout le monde n’est pas à l’aise avec l’outil informatique, notamment les clients, diront les mauvaises langues.

L’offre commerciale se divise de façon naturelle en deux, une pour les free lance (pro) et une autre pour les agences (agence). Nous disposons d’ailleurs d’un compte agence ici à Synerg’heTiC.

En plus d’avoir bien conçu et réalisé ce service, les fondateurs d’UpShot utilisent les outils de webmarketing d’une bonne façon : blog actif et pertinent, vidéos (exemple en fin d’article), concours avec Emob, etc.
Autre preuve de leur bonne utilisation du web, ils ont mis en place un outil de feedback très à la mode, UserVoice, pour remonter les nouvelles fonctionnalités souhaitées par les utilisateurs. On peut d’ailleurs voir qu’une version mobile d’UpShot est en préparation.

UpShot est un service utile et bien réalisé par des fondateurs passionnés et compétents. C’est un bel exemple pour tout ceux qui souhaitent un jour devenir des entrepreneurs du web.
Nous ne pouvons que souhaiter à cette sympathique équipe de réussir.

UpShot et Synerg’heBlog vous offrent 10 codes donnant droit à un plan professionnel UpShot d’une durée d’un mois (valeur 35€ chaque). 2 moyens de jouer :

• Laisser un commentaire sur cet article / 4 gagnants
• Retweeter ce message : « RT@synerghetic Avis aux graphistes, 10 invits à gagner pour le service UpShot http://bit.ly/2TSVzn (RT pour participer) » / 6 gagnants

Vous avez jusqu’au 16 octobre à minuit pour participer. Les gagnants seront tirés au hasard et annoncés ici même.