Il fut un temps, nous n’avions à notre disposition qu’une poignée de typographies utilisables sur le web. Avec l’émergence de nouvelles technologies tels que les font-face kits ainsi que le HTML5/CSS3, elle est devenue une composante importante à prendre en compte lors de la réalisation d’un site internet.

Véritable effet de mode, on voit de plus en plus de sites dont le webdesign est presque essentiellement basé sur la typographie qui, utilisée de manière intelligente, permet de structurer efficacement le contenu.

Nous essaierons dans ce dossier de toucher du doigt plusieurs domaines relatifs à la typographie :

Dans un premier temps, il s’agira de mettre l’accent sur les bases de la typographie (classification, familles, termes techniques…), afin de mieux interagir avec votre webdesigner et de découvrir de nouvelles polices que vous pourrez utiliser dans un projet futur. Nous verrons ensuite comment profiter des nouvelles technologies pour exploiter à 100% la typographie sur le web et nous terminerons sur les tendances actuelles exemples à l’appui.

Savoir parler à votre designer, quelques notions à savoir :

Quelque soit votre profil, il est bon de connaître les bases du jargon typographique. Etant donné que les termes sont utilisés à la fois par les designers mais aussi pour les intégrateurs, apprendre les bases de la typographie vous permettra de mieux interagir avec votre équipe et d’être plus concret sur vos demandes ou recommandations.

L’empattement :

L’empattement désigne les terminaisons d’un caractère, plus ou moins accentuées et de formes différentes. Ils peuvent ajouter un certain style à votre mise en page. On parle donc de polices avec ou sans empattements, également appelées sérif ou sans-sérif. Chacune apporte un style particulier à votre mise en page et il existe plusieurs familles de polices avec des empattements différents.

Hauteur d’X, montantes et descendantes

Ce terme designe la hauteur d’une lettre courte sans les montantes ni les descendantes. Par exemple « x » est une lettre courte. « p » est une lettre avec une descendante et « d » est une lettre avec une montante.

La hauteur d’X ainsi que la prise en compte des montantes et descendantes s’appelle le corps, c’est la valeur que vous retrouvez dans la majorité des logiciels de traitement de l’image gradué en « points », abrégé « pt ». On utilise par exemple la valeur « 14 pt » pour le texte courant sur internet pour une lisibilité optimale. Le corps est utilisé en CSS via la propriété font-size (ex : p {font-size : 1 em; }).

Les capitales et bas de casse

Les termes « majuscules » et « minuscules » ne sont pas utilisés en typographie, on préfèrera l’utilisation de « capitales » (pour un titre, ou un élément à mettre en avant) et « bas de casse » (en général le texte courant).

Il existe également les petites capitales, qui sont des capitales ayant la même hauteur d’X que les bas de casse. Pour y accéder en CSS on utilise la propriété font-variant (ex : h2 {font-variant : small-caps; }).

Les espacements

On distingue deux grands types d’espacements en typographie :

-   l’espacement entre les lettres, appelé « approche de groupe » et défini par la propriété « letter-spacing » en CSS

-   l’espacement entre les lignes de base du texte, défini par la propriété « line-height » en CSS

N’hésitez pas à travailler ces deux types d’espacements (que ce soit sur Photoshop ou dans votre CSS) afin de garder un bon rythme de lecture pour le texte courant !

Il faut cependant garder à l’esprit que l’interlignage favorisant le plus la lecture, doit avoir un ratio de 1.48. C’est à dire que vous devez multiplier la taille d’X (font-size) par 1.48 pour obtenir l’interlignage idéal (ex : p {line-height : (font-size x 1,48)em; }).

Série de police (ou family)

Les polices de caractère sont classée en « séries » (et non en famille, bien que l’on dise « family » en anglais).

Elles sont identifiées par leur nom de série (Helvetica, Arial, Frutiger…), leur graisse (normal, bold, extra-bold…), leur chasse (encombrement vertical d’un caractère) et leur nom de graisse. La dénomination se fait dans cet ordre : nom de série, graisse, chasse et nom de graisse (ex : Helvetica 95 bold).

Classification des typographies

Les typographies sont classées par familles différentes (bien que parfois la différence soit très subtile…). Il est donc utile de reconnaître les grandes familles ainsi que les idées qu’elles véhiculent : cela vous permettra d’avoir une meilleure force de proposition face à un client car vous pourrez justifier vos choix de typographie en fonction du sujet. C’est également un excellent moyen de mieux communiquer avec un graphiste, sauf si vous êtes un fan inconditionnel de la Comic Sans MS (là je ne peux plus rien faire pour vous).

Formes avec sérif

Humanes, Garaldes et Transitionnelles

Originaires des premières machines à imprimer, ces polices de type sérif sont élégantes, intemporelles et très lisibles. Elles sont parfaites pour le texte courant avec un faible corps (entre 12px et 14px) mais peuvent être également utilisées avec parcimonie pour vos titres.

Ex : Georgia, Times, Palatino

Didones (« modern » en anglais)

Plus difficiles à utiliser que les polices précédentes car pratiquement inutilisables sur le web à cause de leurs empattement très fins, les Didones ont un aspect rigide, idéal et rigoureux. C’est par exemple la police utilisée pour le titre du magazine Elle.

Ex : Didot, Century, Bodoni

Mécanes

Très en vogue en ce moment sur internet, elles sont utilisées avec un corps très élevé (en général superieur à 24px). Solides et fiables, elles sont parfaites pour un titre mais peu lisibles en texte courant.

Ex : Rockwell, Holtwood, Bevan

Formes sans serif (dites linéales)

Plus récentes que les polices avec sérif, elles se démarquent par la disparition de l’empattement : fonctionnalistes, directes et efficaces. Elles sont un excellent moyen pour nuancer vos textes lorsque vous utilisez également du sans serif. Du fait qu’elles sont très lisibles tant sur le web que sur support papier, n’hésitez pas à les utiliser pour vos textes courants.

On notera que comme les mécanes, l’utilisation de linéales de très grande taille (au-delà de 30px) est à la mode en ce moment sur le web pour constituer des titres impactants.

Ex : Helvetica, Futura, Bebas Neue

Script

Ces polices, tels que la Mistral ou la Bello sont inspirées de l’écriture courante. Revenant au pas de charge à la mode de nos jours, elles sont utilisées à profusion dans les sites webs « tendances » ou dans la publicité. Faites tout de même attention à leur utilisation, elles peuvent facilement être très peu lisibles sur un écran.

Ex : Mistral, Bello, Candy Script

Diverses

Inscriptions

Les Inscriptions, dont l’un des meilleurs exemples est la Trajan sont des typographies qui se rapprochent le plus des écritures romaines gravées dans la pierre. Ayant un fort passé historique, elles traduisent majoritairement le prestige et l’ancienneté.

Ex : Trajan, Trajan Pro, Perpetua

Gothiques (à ne pas confondre avec « gothic »)

Les Gothiques sont issues des écritures des moines copistes du Moyen-Âge. Ces polices sombres, anciennes et vernaculaires sont adaptées pour un public très spécifique (journaux, Heavy Metal…).

Ex : Augustal, Brietkopf Fraktur

Graphiques

Plus originales, créatives et rapidement peu lisibles, ces polices sont très diverses : déstructurées, groovy, fun, destroy… tout est permis !

Vous pourrez en trouver un très large choix sur dafont.com, prenez cependant garde aux droits d’auteurs, comme pour toutes les typographies.

Ex : Docteur Atomic, Rio Grande, Billo

Bien choisir sa typo

Maintenant que vous avez pris connaissance des différentes familles de typographie, il s’agit de bien savoir les utiliser…

Il n’y a pas de recette miracle, posez vous simplement les bonnes questions :

• Quelle image de marque, valeur ou message vous souhaitez véhiculer ?
• Y’a-t-il déjà une charte graphique mise en place ?
• Quels sont les goûts de mon client ? N’hésitez pas à envoyer un brief créatif avant toute proposition.

Vous pouvez également utiliser ce schéma (en anglais) pour vous guider si vous manquez d’inspiration : http://inspirationlab.wordpress.com/2010/04/16/so-you-need-a-typeface/

Notez qu’il y a tout de même des règles générales. Par exemple, n’utilisez pas des polices qui se font concurrence (par exemple deux serifs) mais essayez de mélanger les familles, les tailles de corps et les graisses (un titre en serif gras accompagné d’un texte courant sans serif sera plus pertinent que d’utiliser uniquement du sans serif). Créez du contraste !

Essayez d’abord de choisir vos typos comme un couple de personnes : deux personnalités qui ne vont pas ensemble ne fonctionneront pas !

Dans la suite de ce dossier nous verrons comment appliquer ces règles et utiliser les nouvelles technologies web pour utiliser au mieux la typographie : effets de texte CSS3, font-face kits, Cùfon… faites la guerre aux pages ennuyeuses et au Comic Sans MS !

Remerciements à Jérémy Viallard pour sa formation sur la typographie.

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

Le design du site s’adapte à l’écran du périphérique utilisé. Tout cela à partir d’une url unique.

Donc fini les sous-domaine inutile m.exemple.com ou bien encore http://www.synerghetic.net/mobile/

Une url unique permet de résoudre les problèmes de référencements liés à la duplication du contenu sur des sous-domaine.

Je vais à présent revenir sur des points plus techniques abordés lors de ma conférence au pôle mobile de Synerg’heTIC.

Media queries

Les medias queries sont des techniques utilisées en CSS3. Elles permettent de définir une feuille de style en fonction de certaines propriétés du navigateur. Pour faire du responsive design nous allons utiliser la propriété max-width, qui permet d’appliquer une taille maximale d’écran, jusqu’où les feuilles de style seront appliquées.

@media screen and (max-width:480px){
    /*code */
}

Ici, on pourra par exemple modifier les différents blocs de note site pour leur appliquer une largeur relative à taille de notre écran.

@media screen and (max-width:480px){
    div{ width:90%;}
}

jQuery mobile

Certains associent directement responsive design avec les media queries. Mais je rappelle que le principe est d’adapter le site en fonction de l’appareil utilisé.

On peut donc utiliser un framework tel que jquery mobile pour réaliser note site. On peut l’utiliser exclusivement pour l’affichage sur iPhone et Android comme dans l’exemple suivant en PHP :

if ( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'Android') )
{
      //On charge jQuery mobile
}

Voici deux exemples de site en responsive design :

• Avec les media queries : Cuisine kawaii le livre
• Avec jQuery Mobile (sur iPhone et Android) : Développeur web mobile

Votre humble serviteur ne disposant pas d’appareil numérique, les rares illustrations seront de piètre qualité. Veuillez accepter ses humbles excuses.

Commençons par placer un petit contexte. L’exposition Pack’ART se tenait tout le mois de Janvier dans la galerie Design Pack Gallery (1er arrondissment). La problématique de l’exposition était la suivante : Le Packaging peut-il être considéré comme un Art à part entière ?

« De nos jours, le Packaging s’inspire de l’Art et l’Art s’inspire du Packaging », suivant ce constat, l’exposition nous livre de nombreuses interactions entre l’Art et le Packaging qui, progressivement, nous fait aller dans ce sens.
Commençons par les informations données par l’exposition. Prenez vos cartables les enfants, tenez la main de votre voisin, nous partons avec Professeur Synerg pour une très courte balade dans le Passé !

Un peu d’histoire.

L’aventure du Packaging débute véritablement aux USA avant la Seconde Guerre Mondiale. Pour la première fois, les agences de communication mixent les méthodes de marketing et les théories de communication pour parvenir à des créations originales et efficaces. Picasso est l’un des premiers grands artistes à participer à l’expérience du Packaging en amenant avec lui l’Art Moderne pour les nouveaux verres et bouteilles de Suze.
De son côté, Warhol sublime le Packaging avec l’emballage des soupes Campbell.

Grâce aux arrivées nombreuses d’artistes, on peut penser que le Packaging devient peu à peu un Art et permet aux emballages d’être plus attractifs, mettant un terme aux packaging ‘ancienne génération’, trop axés sur la communication ou sur le fonctionnel.
La collaboration entre agences de communication et artistes serait le seul élément permettant au Packaging d’être consacré Art ? On peut dire qu’il est le principal, mais nous pouvons aller plus loin dans la recherche de similitudes.

Des rapprochements Packaging/Art.

Aspect intéressant, autrefois les peintres vivaient peu de leurs ventes. Ils étaient entretenus par des personnes haut placées, les artistes étaient une forme d’investissement. Dans la société actuelle, les entreprises ont remplacés ces riches propriétaires pour devenir à leur tour les mécènes des artistes. Les artistes deviennent les concepteurs des nouveaux packagings et la valeur de leur production nait des partenariats, des séries limitées ou encore des concours de création. Comme toute œuvre d’Art « classique », les packagings deviennent de véritables pièces de collection et certaines prennent de la valeur avec le temps.

Ainsi Dark Dog et Desesperados, par exemple, font couramment appelle à des artistes de la nouvelle génération ou à qui le veut, pour réaliser des séries limitées de leurs packagings et ainsi améliorer leur image et lui donner ainsi un côté « jeune » et « spontané ».

Le détournement des emballages permet une nouvelle exploration du support Packaging. Comme l’Art et ses courants, le Packaging voit sa fonction première détournée par des créatifs.
Dran, par exemple, propose une autre vision du packaging. Il n’utilise pas l’emballage (dans son cas les emballages cartons) pour communiquer sur le contenu mais dénoncer le contenu ou un aspect de la Société.
Le Packaging s’est donc inspiré de l’Art et des Artistes proposent désormais leurs visions par le biais du Packaging, la boucle semble bouclée.

Oui … mais demain ?

Donc, si nous résumons, l’Art s’est très souvent inspiré des faits historiques ou des avancées technologiques pour proposer des idées, des visions et des créations. L’ère de la Machine et le Futurisme, le Packaging avec nos artistes contemporains et bien d’autres exemples.

Mais maintenant, quel pourrait être le nouveau support d’expression dominant des décennies à venir ? Le mix de plusieurs médias/technologies semble être la possibilité la plus évidente, mais avec les créas, nous ne pouvons jurer de rien, juste admirer ce que leur message et leur moyen d’expression vont nous délivrer.

« Le logo est à gauche », « le menu en haut ou sur le côté », « le contenu est au centre »…tels sont des éléments qui reviendraient de façon régulière car effectivement, une large majorité des sites est basée sur ces standards (admis par l’internaute et donc maîtrisés, pour la plupart).

Cela dit, de nombreuses expérimentations montrent qu’il est possible d’envisager de nouveaux modèles de naviguation (avec plus ou moins de succès).

Quelques exemples :

Songza

Songza est un moteur de recherche de musique doté d’une ergonomie originale et innovante. Ici on laisse de côté les traditionnels symboles « play » à gauche du titre ou les petites étoiles pour voter. Un pointeur/cible permet d’effectuer toutes ces actions très simplement mais surtout de manière tout à fait intuitive. Dès la première utilisation et sans effort intellectuel particulier l’utilisateur devient à l’aise avec cette nouvelle interface.

Pour en savoir plus sur Songza, je vous invite à consulter une analyse détaillée sur le blog Ergophile.

Sekisuihem

Une expérience intéressante pour promouvoir une société Japonaise de maisons préfabriquées.

Il faut ici déplacer son personnage en drag’n drop au sein des pièces de la maison pour accéder aux contenus dus ite. Ce n’est pas toujours très simple mais l’originalité est là !

Publicis Stockholm

J’ai découvert le site de la branche Suédoise de Publicis un peu par hasard mais sa navigation aussi inhabituelle qu’étrange ne laisse pas indifférent. Ici pas de menu, pas d’espace reservé au contenu, seulement des cases menant à d’autres pages à la façon d’un tableau de bord.

Le design est minimaliste et forcément déroutant du fait de l’occupation totale de l’espace du navigateur. (waaa, on étouffe un peu ici…)

Si l’originalité est là, l’efficacité est loin d’être évidente.

Dans la même veine, voici Marumushi qui permet une autre forme de visualisation de l’information au travers de blocs de couleurs de différentes tailles.

Dont Click It

Le célèbre site dans lequel aucun clic n’est nécessaire pour naviguer.

Un vrai défi pour l’internaute qui doit résister à son instinct premier. Toute l’intéraction se fait par des jeux de survol pour obtenir l’information désirée.

D’autres interfaces intéressantes à découvrir :

• Playersrepublic
  
• Shematic
  

Au travers de ces exemples, on se rend compte que de nombreuses voies restent à explorer quant à la façon de présenter ou d’accéder à l’information.

Pour aller plus loin :

• Connaissez-vous l’ergonomie artistique ? par Frédéric Cavazza

C’est sans doute partant de ce constat que l’univers netvibes ErgoIHM est né.

Au menu, plusieurs onglets : « Ergo IHM », « Conférences », « Facteur humain » avec de nombreux flux RSS en français et en anglais.

Une mine d’or pour l’ergonome classique (au sens industriel), et donc également une bonne source pour la veille informationnelle de l’architecte de l’information web. A ce titre, je vous recommande l’excellent Usernomics, qui publie moult analyses et conseils pour l’optimisation de votre site.