WEB DESIGN : what’s up ?
Ce billet a été rédigé par Laurence Tranchand-Granger et Chloé Demarbaix.
Vous êtes débutant en web design et vous aimeriez construire votre site Internet ? Vous ne connaissez ni les termes de flat design, design responsive, ni la bonne utilisation des couleurs et des images ? Ce billet est fait pour vous ! Nous allons retracer ensemble les grandes tendances du web commercial de 2014.
Les tendances du web design
Le responsive design est aujourd’hui un incontournable pour répondre à la mobilité des individus. La majorité des sites sont dorénavant adaptés à tous nos écrans : ordinateur, tablette, smartphone. Qui n’a jamais changé de site lorsque ce dernier s’avère non optimisé pour son support ? Le designer doit penser en amont les informations mises à disposition suivant les canaux privilégiés. Les sites destinés aux smartphones doivent être davantage minimalistes en donnant les informations essentielles afin de ne pas surcharger l’écran.
Mais une deuxième manière de naviguer est en train de s’installer. A l’instar du fil de tweets sur Twitter, les pages sont de plus en plus longues. On appelle ceci le long scrolling, défilement continu ou infini. Cette tendance a débuté pour les sites de smartphone où il est plus évident pour nous de faire défiler les informations verticalement plutôt que de naviguer dans un menu.
Connaissez-vous le nouveau menu démarrer du système d’exploitation Microsoft Windows 8 ? Il résume lui même les caractéristiques du flat design ou design « plat » : un style épuré et simplifié. L’internaute est guidé dans sa navigation à travers des icônes géométriques de différentes couleurs. Ceci peut nous rappeler les infographies qui pullulent sur le net : transmettre un maximum d’informations à l’aide d’images afin d’éviter la lecture d’un long texte rébarbatif.
Les designers s’amusent également avec les images. Celles-ci se retrouvent soit en arrière-plan pour captiver l’attention de l’utilisateur, soit de chaque côté de l’écran partagé en deux. C’est ce que l’on appelle le split screen. Cependant, attention aux images ! Celles-ci peuvent surcharger le site web et le ralentir. Pensez à la création pour accroître l’originalité de votre site et réfléchissez aux émotions que votre site peut susciter.
Jouer sur les émotions
Il existe un langage commun et universel : les émotions. Celles-ci sont utilisées depuis longtemps par le marketing. Depuis plus d’un siècle, la publicité véhicule un message visant à accroître le nombre de ventes. Ces ventes sont plus importantes lorsque l’acheteur potentiel ressent une émotion à la vue de la publicité. C’est le cas du marketing traditionnel nourri par la dernière tendance du storytelling qui en racontant une histoire permet aux acheteurs de s’identifier puis d’acheter. La dernière vidéo de Noël des magasins John Lewis est pour cela emblématique. Ce concept est de nos jours adapté au design sur Internet.
Dans le web design, ces émotions sont utilisées pour échanger avec l’utilisateur, c’est que l’on appelle le design émotionnel. Le design émotionnel est une tendance forte pour la création des interfaces numériques car il permet tour à tour de créer chez l’utilisateur plaisir, satisfaction implication et confiance. Quels sont les outils permettant de susciter des émotions chez l’utilisateur ?
Le premier est l’utilisation de la couleur. Comme l’indique Marie-Laure Bernadac, conservatrice au Musée du Louvre, “la couleur est plus forte que le langage”. Dianne Cyr nous le prouve dans son ouvrage Emotion and Website design. En effet la couleur a le pouvoir d’obtenir des émotions de la part des utilisateurs. Suivant leur maniement, les couleurs peuvent provoquer de la confiance, de la satisfaction et même développer un sentiment de fidélité envers un site internet !
Mais que recouvre la couleur ? Celle-ci se définit en plusieurs critères : le ton (une couleur chaude ou froide), une dominante primaire ou pastel et la brillance. Sur les sites internet, les couleurs de fond des interfaces et l’organisation des couleurs sont aussi à prendre en compte.
Alors, quelles couleurs choisir ? Majoritairement, ce ne sont pas les couleurs chaudes qui sont les préférées des utilisateurs. Le bleu remporte la palme d’or entre toutes les cultures. Deux enquêtes montrent que les achats sont plus importants avec des sites à dominante bleue qu’à dominante rouge.
Quelles sont les autres préférences suivant les continents ? Diane Cyr précise que peu d’études rigoureuses ont étudié la comparaison des sites suivant les cultures. Mais une enquête a porté sur le même site avec ses versions indienne et américaine. Elle montre que l’impact culturel est fondamental pour le webdesigner. Les utilisateurs indiens sont bien plus attirés par le foisonnement de couleurs que les américains habitués au bleu et rouge.
Développer design émotionnel et social
Un second outil pour créer de l’émotion est l’utilisation de l’image. Pour rappel, la publicité véhicule son message par l’image. Dans le contexte des sites Internet, au milieu d’un ensemble textuel, l’image capte l’attention tout en suscitant de l’émotion. Il est donc important pour un site de développer son esthétique et sa recherche émotionnelle.
Pourtant, toutes les images ne se valent pas. L’étude de Dianne Cyr est instructive. L’internaute est attiré par des images représentant des humains. Une nuance s’ajoute puisque nous sommes attirés plus spécialement par des sites possédant des images de visages humains.
Ce constat repose un concept créé dans les années 1940 par le psychologue Abraham Maslow. Celui-ci distingue les besoins physiologiques et les besoins de sécurité et de protection comme des fondamentaux. Puis viennent les besoins d’appartenance : des besoins sociaux qui reflètent la volonté de faire partie d’une famille, d’un groupe, d’une tribu. Ensuite, en haut de la pyramide, se situent les besoins d’estime de soi et d’auto-accomplissement.
Cette pyramide reprise par le marketing est décriée pour avoir d’autres objectifs que ceux du management. Toutefois elle permet de définir les besoins humains. Sans entrer dans les batailles de la classification des besoins, l’homme a besoin de rapports sociaux. Ce sont eux qui le définissent.
L’appel aux images représentant l’homme et ses émotions est un critère important pour le web design puisque ces images produisent un sentiment d’appartenance à une communauté. Il est donc important de personnaliser les sites commerçants. L’objectif est que l’utilisateur puisse s’identifier plus aisément.
Après la couleur, les images de visage, quelles sont les autres composantes du design émotionnel ? La notion de présence sociale est importante. Celle-ci est représentée par l’assistance en ligne. Que l’aide soit le chat avec un conseiller ou avec une voix de synthèse vocale, l’internaute se sent guidé et peut développer une relation reposant sur le plaisir et la confiance. Il développe de fait ses achats sur le net.
Mais existe-t-il des différences de comportements entre les hommes et les femmes ? Les femmes sont beaucoup plus critiques à l’égard des interfaces web recherchant l’esthétique d’abord. Dans les enquêtes résumées par Dianne Cyr, les internautes hommes restent attirés par les sites conçus par des hommes et les internautes féminines par des sites développées par des femmes. Sachant que plus de la moitié des sites internet sont créés par des développeurs masculins, le propriétaire d’un site internet peut s’interroger sur sa cible de consommateurs et privilégier l’emploi d’une designer web.
Pour les e-marketeurs, l’avenir du Web de demain se situe autour du “care”, du soin et de l’attention autour du visiteur. “Travailler son image pour créer de la proximité et de la préférence”, mais aussi “travailler son expérience client, pour offrir un relationnel de qualité”, “travailler sur le social commerce : introduire du social et de la recommandation dans la chaîne d’achat” sont déjà recommandés par la FEVAD depuis 2011. Retenons que pour concevoir ou refondre un site web et rester dans la tendance, les émotions et le “care” constituent les maîtres mots du web designer d’aujourd’hui.
Enfin pour terminer, si vous comparez les règles édictées par cet article et le web design du “Bon Coin” vous allez sans doute vous dire que ce billet est inutile. Lorsqu’on pense au Bon Coin, on pense “bonnes affaires” mais surtout design moche et très peu ergonomique ! Son directeur revient sur cet aspect dans une interview et assurre que sa volonté est de privilégier une navigation intuitive et une couleur qui ne fatigue pas l’oeil : le beige. Encore une fois, la couleur a été mûrement réfléchie avant de créer le site !
Pour approfondir voir : l’historique de la couleur.
OpenEdition vous propose de citer ce billet de la manière suivante :
cdemarbaix (8 décembre 2014). WEB DESIGN : what’s up ? Introduction à l'architecture de l'information. Consulté le 7 décembre 2024 à l’adresse https://doi.org/10.58079/be62
Ce billet éclaire vraiment les différentes facettes du web design, pour un novice il est simple et agréable à lire.
L’introduction est plutôt accrocheuse, on a bien envie de savoir de quoi il s’agit. Chaque nouvelle notion est accompagnée d’une référence. Celles-ci ne sont pas forcément institutionnelles ou professionnelles (Article par Raphael (Intégrateur du Dimanche, Strasbourg) mais claires et accessibles.
Le déroulement est fluide et nous amène peu à peu au lien entre publicité, marketing et web design. Je trouve ce lien intéressant car, généralement le but d’un site est de « vendre » un produit ou une idée.
Cette idée se transmet en effet plus facilement quand on peut s’identifier à un environnement ou à un besoin. Ce qui est parfaitement induit par l’évocation du storytelling et de la pyramide de Maslow. Peut-être aurait-il était intéressant de développer du moins expliciter cette pyramide, car aucun lien ne renvoi à une description plus précise, avec des exemples plus clairs de ce qu’est l’accomplissement ou l’estime. (Prenons ex avec des moyens de locomotion : Survie = Nos pieds ; Accomplissement = un hélicoptère)
L’article du manuel est bien intégré au billet. Cependant ce n’est pas vraiment l’ouvrage de Diane Cyr, mais plutôt une partie (contribution) à un ouvrage plus volumineux et complet qui est The Encyclopedia of Human-Computer Interaction, 2nd Ed.
L’impact des couleurs, est comme pour celui du langage dans l’accessibilité web, à nuancer avec le contexte et les cultures. Ce qui est très bien explicité ici.
L’image et l’émotion me font penser au travail de Louise Merzeau (http://merzeau.net/) sur l’image, la mémoire et le numérique. Les images racontent elles aussi souvent à elles seules, une histoire, qui se renforce à travers le temps pouvant créer ainsi un attachement ou une émotion. (lien vers différents travaux de Louise Merzeau
http://merzeau.net/archives-editorialisation-memorielle/
http://merzeau.net/mediation-representation-information/)
Les émotions, couleurs, et différentes notions explicitées dans ce billet, pourraient être reliées aux besoins d’accessibilité (http://archinfo01.hypotheses.org/1372) notamment les notions de confort, sécurité, et d’aide. Si la notion de « care » devient essentielle au marketing, qu’attendent les développeurs et les commanditaires pour porter leurs efforts sur l’accessibilité de leurs sites?
Je trouve la conclusion abordant l’exemple du « bon coin » assez pertinente, car tout le monde connait plus ou moins ce site, et même s’il est considéré comme « moche » il attire énormément d’utilisateurs. Le confort n’est pas toujours ce qu’il y a de plus “beau” mais bien ce qui est de plus simple et de moins fatiguant pour garder l’attention de l’utilisateur.
Quel plaisir de lire votre billet. Il est très clair et tellement agréable à lire. On y apprend beaucoup de choses autour de différentes pratiques de design qui existent et qui sont aujourd’hui à la mode. Le tout dans un billet succinct et dépourvu de contenus superflus, merci !
Votre première partie met l’accent sur les tendances actuelles telles que le responsive design, le flat design et le long scrolling, on y comprend très clairement les différents intérêts et enjeux de chacune de ces pratiques. L’accessibilité sur les supports mobiles (tablettes et smartphone), le design minimaliste favorisant la clarté, l’usage éclairé des couleurs en fonction des émotions et des cultures, etc.
Finalement on comprend que le design n’est pas uniquement le dada des designers, que l’on connait pour avoir un sens créatif très développé. Mais penser le design fait intervenir plusieurs professions : on pense aux couleurs, on pense à la forme de lecture, on pense à l’émotion, on pense à « prendre soin » comme vous le précisez en parlant de « care », c’est-à-dire prendre soin des utilisateurs afin de leur proposer un design en adéquation avec leurs besoins et leurs intérêts.
Et c’est bien la grande tendance qui résume l’évolution globale du Web design, on est passé d’un design quasi inexistant où l’important reposait sur la mise en ligne de l’information, à un design mettant en valeur le site internet, puis mettant en valeur les contenus et enfin on met en valeur l’accessibilité, le repérage de l’utilisateur, la facilité de navigation et de compréhension. C’est les sites Internet qui doivent s’adapter aux différents utilisateurs et supports utilisés, et non l’inverse.
Ce n’est pas la seule dimension du design qui cherche à s’orienter de plus en plus du côté des utilisateurs, le design pour tous évoqué dans le chapitre « Design4all » écrit par Constantine Stephanidis, s’adresse à tous les utilisateurs que l’on a tendance à oublier, les personnes qui ont des limitations tant physiques que contextuelles. Ici certaines techniques mettent en avant l’empathie, les tests utilisateurs, les interviews, etc. afin de comprendre les limitations.
On se retrouve ici très bien dans les compétences d’un architecte de l’information, être empathique, structurer l’information, comprendre les besoin des différents utilisateurs, etc.
Merci de cet article très enrichissant.
Ainsi le web design s’attache exclusivement à l’esthétisme d’un site internet, il cherche : à équilibrer espaces et textes, établir une cohérence des couleurs et de la typographie, la pertinence de l’iconographie, et hiérarchisation de l’information. Tous ces éléments devant être au service de l’expérience utilisateur.
Cette expérience utilisateur était jusqu’à présent centrée sur l’expérience d’un usager avec un objet (site web, application…). Pour certains, dans une société qu’ils pensent post-matérialiste, le défi de la conception de produits interactifs est de concevoir l’expérience avant le produit. (Voir l’article de Marc Hassenzahl : https://www.interaction-design.org/encyclopedia/user_experience_and_experience_design.html).
Le web design s’effacerait alors pour laisser la place à l’expérience produite, le design ne serait plus au centre de la conception d’un produit mais ce serait uniquement l’expérience. Certains objets, dont le design n’a été que peu travaillé, ont commencé à faire leur apparition, par exemple la Buddha Machine : http://fr.wikipedia.org/wiki/Buddha_Machine ou le réveil de Philips : http://www.philips.fr/c-m-li/luminotherapie/eveil-lumiere/dernier?origin=|mckv|solmDh7qV_dc&pcrid=28445176134|plid|#filters=WAKEUP_LIGHT_SU2&sliders=&support=&price=&priceBoxes=&page=&layout=12.subcategory.p-grid-icon
Le produit interactif, dans une société post- matérialiste, ne serait donc plus tant un objet tangible , mais une histoire racontée à travers un objet ou un voyage. Le design (web ou d’un objet) s’effaçant devant l’expérience proposée à l’utilisateur.
Vous évoquez dans votre article le flat design du menu démarrer chez Windows 8. Rappelons le nom de ce style : “Metro” qui a en effet suscité une nouvelle vague dans les tendances du webdesign. Comme l’indique l’article de Arnaud STECKLE, webdesigner : “L’univers Metro est reconnaissable par quatre caractéristiques fondamentales : la typographie, la mouvement, la mise en page de type grille et la simplicité.”
Concernant les tendances dans le webdesign, on peut aussi évoquer le Material Design. Je vous conseil ces deux articles : le premier sur les spécificités de ce webdesign ici par Matthieu Bousendorfer, webdesigner et développeur front-end, et le second sur au titre évocateur : “What webdesigners can learn from googles material design” (Ce que les webdesigners peuvent apprendre du material desgin de Google) par Paula Borowska, ux designer.
Vous parlez également de Storytelling, qui n’est pas une part du webdesign, en effet cet aspect se rapprocherait plus du domaine de l’expérience utilisateur. Il semblerait que dans votre article, vous mélangiez souvent le webdesigner à plusieurs métiers différents. Entre-autre celui de l’ergonomme web (vous trouverez ici un article sur l’énonciation des différents métiers approchant qui peut facilement y être assimilé) et de l’ux designer.
Vous évoquez également le design émotionnel qui n’est lui non plus pas spécifique du webdesign en tant que tel. Le webdesigner s’occupant de la “surface” du site. Grâce au schéma de Jesse James Garrett que vous trouverez ici, on peut facilement mettre en évidence la séparation qui existe entre les différents domaines, mais aussi la façon dont elles sont intimement liées.
Concernant le site LeBonCoin il n’est en effet pas très beau esthétiquement parlant, mais est très ergonomique contrairement à ce que vous dîtes. Votre phrase suivante le soulève : “Son directeur revient sur cet aspect dans une interview et assurre que sa volonté est de privilégier une navigation intuitive”. Une navigation intuitive fait forcément lieu d’une bonne ergonomie.