vendredi 4 juillet 2014

Webdesign : 8 tendances incontournables illustrées

En 2013, les chiffres de l’Observatoire des sites internet français de l'agence web 1min30 nous révélaient que près de 2 entreprises sur 3 possédaient son site internet. Parmi les secteurs les plus concernés, on note l’information et la communication mais aussi l’hôtellerie-restauration avec un taux respectif de 91,2% et 89,2%. 

Début 2014, une étude réalisée par Email-Brokers nous apprend que 81% des entreprises françaises ayant fait faillite en 2013 ont « omis de parier sur le net en n'ayant pas de site ou/et en n'étant pas présentes sur les réseaux sociaux ». Elle établit ainsi une corrélation entre la présence sur le web et la probabilité de réussite d’une entreprise.


S’il est donc indispensable d’avoir son propre site web, il est également primordial de proposer aux visiteurs une interface moderne et ergonomique. D’une part, car ce site reflète l’image de votre entreprise, et d’autre part, parce qu’il est un moyen de vous démarquer de votre concurrence elle aussi présente sur le web. 

***

Dans ce premier article nous aborderons uniquement le design d’un site web, avant de nous intéresser à l’aspect technique et l’expérience de l’utilisateur.

Pour ceux qui ne seraient pas encore convaincus de l’importance de l’aspect visuel et esthétique dans la perception d’un site web par l’internaute, ces chiffres tirés d’une infographie réalisée par KISSmetrics tendent à le prouver : 


Source : Infographie KISSmetrics


Cet article répertorie les dernières tendances observables en webdesign et les avantages et intérêts que celles-ci apportent à un site web :

  1. Au pays des sites web, le « flat design » est roi
  2. Moins de textes, plus d’images
  3. L’avènement des pictogrammes
  4. La « long shadow » fait de l’ombre à la « drop shadow »
  5. « Webfonts » et « Mix and match », quand le web joue avec sa plume  
  6. La « Blurred image », le flou pour y voir plus clair
  7. Duel géométrique : ronds VS triangles
  8. Les « call to action » arrondissent les angles

1. Au pays des sites web, le "flat design est roi"... 


Probablement la tendance la plus adoptée à l’heure actuelle, le flat design se définit par une interface très épurée et minimaliste. Adieu les textures, motifs, dégradés et ombres portées. Comme son nom l’indique, ce nouveau design se compose d’aplats. Le site en tire deux avantages : il gagne en clarté et facilite la lecture du visiteur et le temps de chargement des pages en est grandement réduit


Interface Windows 8

Interface iOS7


La nouvelle interface du iOS 7 d’Apple ou celle de Windows 8 sont l’illustration parfaite du flat design. On remarque aussi l’adoption d’une nouvelle palette de couleurs moins « acidulées ». Ce site répertorie les couleurs les plus utilisées en flat design : http://flatuicolors.com

2. Moins de textes, plus d'images


Les images occupent aujourd’hui une place prépondérante dans les sites web puisque elles apparaissent désormais en « full screen » (= plein écran). Une tendance qui évolue en parallèle du développement de nombreux réseaux sociaux basés sur l’image (Instagram, Pinterest, Tumblr…). De plus en plus, on remarque que les photos font office de « backgrounds » (= arrière-plan), notamment dans le secteur des hôtels. La qualité de ses photos doit donc être impérativement élevée. 


Hôtel 3* Pré Saint-Michel à Manosque

A l’inverse, les textes se raccourcissent et s’aèrent pour se fondre dans le « minimalisme » qu’insuffle le flat design. Toutefois, le contenu textuel reste primordial au vu des exigences actuelles de Google concernant le référencement web. 


3. L’avènement des pictogrammes


Avec le développement de l’utilisation d’internet sur smartphone, le design des sites web est réalisé de façon à faciliter au maximum la navigation de l’inter(mobi)naute (= Responsive design). Parce qu’il est plus facile d’appuyer sur un icône ou un bouton que sur un petit bout de phrase, les sites web se parent de pictogrammes : la rubrique « Contact » se matérialise par un téléphone ou une enveloppe, celle des « Chambres » par un lit, etc. 

Mais pour éviter toute confusion, ces pictogrammes sont accompagnés d’un intitulé. Une étude de Nielsen Norman montre d’ailleurs qu’une inadéquation entre un pictogramme et son libellé peut rendre l’expérience de navigation encore plus complexe. 

Hôtel du Château 4* à Carcassonne

Le registre des pictogrammes voit apparaître de nouveaux venus, notamment le « hamburger » (3 barres horizontales superposées, voir exemple ci-dessous). Ce symbole représente le menu du site et permet d’en dévoiler les différentes rubriques. Si la plupart des mobinautes est déjà familière de ce petit symbole, ce n’est pas le cas de tous les internautes. Une étude montre que l’apprentissage de ce nouveau pictogramme n’est pas encore totalement acquis : les utilisateurs cliqueraient plus rapidement sur un menu classique que sur le « hamburger ». Il est donc important de libeller le « hamburger » par « menu ».

Hôtel 5* Impérial Garoupe au Cap d'Antibes


4. La « long shadow » fait de l’ombre à la « drop shadow » 



En marge du développement du flat design, de nouvelles modes émergent dans les graphismes, notamment dans les ombres. Les ombres portées (drop shadow) qui donnaient aux éléments du site une impression de relief sont abandonnées au profit d’ombres plus longues (long shadow) apportant de la profondeur à ce nouveau design « plat ». 


Exemple de "long shadow"

5. « Webfonts » et « Mix and match », quand le web joue avec sa plume 


Au diable Arial, Verdana ou Times New Roman. Les sites web arborent désormais des typographies de plus en plus personnalisées, d’une part grâce à l’amélioration de la compatibilité sur les navigateurs et d’autre part, par la croissance des « webfonts » qui offrent un choix pléthorique de typographies. La typographie occupe en effet une place importante dans la perception du site par l’utilisateur. Si l’originalité d’une typo est un vecteur de l’image et de la personnalité d’une marque ou d’une entreprise, elle doit toutefois rester facilement lisible

Le « Mix and match » consiste à combiner plusieurs typographies aux styles souvent opposés au sein d’un même message. Cette technique déjà adoptée par certains tend à croître. Elle apporterait au site plus de dynamisme et un côté « artistique » (notamment grâce aux typos « handwriting »*), ce qui s’inscrit également dans la quête de la personnalisation du site web.

Jacqui Co., spécialiste de cakes et cupcakes à Singapour

Par ailleurs, on remarque que la taille des caractères est de plus en plus grande, frôlant les 20 points contre 10 à 12 auparavant.

*Typographie « handwriting » : typographie où les caractères semblent écrits à la main, exemple : Dancing Script

6. La « Blurred image », le flou pour y voir plus clair


La « blurred image » est une photo à l’aspect floutée, apparaissant généralement en « full screen », sur laquelle on superpose un autre élément (texte, produit…) dans le but de le mettre en avant. Elle a pour avantage de réduire le temps de chargement de la page, en plus de lui apporter de la profondeur. 


Hélène Darroze, Chef de restaurants gastronomiques

Piction, application de retouche photo

7. Duel géométrique : ronds VS triangles


Tout comme dans le prêt-à-porter ou la décoration intérieure, on remarque en webdesign une tendance massive aux formes géométriques. Les éléments du site adoptent des formes angulaires ou arrondies, qui nous rappellent l’art abstrait porté par Mondrian, associés à un jeu de couleurs et de transparence. Cette tendance confère une fois de plus au site web un aspect « artistique ». 


NeoLab, agence de publicité en Norvège

RendezVous, restaurant aux Pays-Bas

8. Les « call to action » arrondissent les angles 


Littéralement « appels à agir », les « call to action » prennent la forme d’un bouton ou d’un lien encourageant l’internaute à accomplir une action : s’inscrire à la newsletter, réserver une chambre, ajouter au panier… Pour l’entreprise ils sont synonymes de conversion, c’est pourquoi une attention toute particulière est apportée à leur apparence. 

Une récente étude de Conversion IT démontre que la couleur a un impact sur l’incitation à cliquer pour l’internaute : le rouge et le vert totalisent le plus grands nombres de clics (respectivement 27% et 24%), 12 points devant le bleu et l’orange. Or pour préserver une harmonie visuelle, la couleur du bouton doit avant tout se marier avec la charte graphique de votre site tout en contrastant avec les autres couleurs qui l’entourent pour être mis en valeur. La forme exerce également une influence. Les boutons aux angles arrondis gagnent 62% des clics contre 32% pour les formes carrées. Quant au bouton en forme de pilule, il est à proscrire. 

Le texte a évidemment son importance, il doit être clair et si possible concis, et comprendre un verbe pour « pousser à l’acte ». Evitez toute originalité pour ne pas créer de confusion dans l’esprit du visiteur. En hôtellerie-restauration, « réservez » et « vérifiez les disponibilités » restent les plus efficaces.  


Hôtel 5* Napoléon Paris, à Paris VIIIème 


Vous l’aurez compris, le design des sites web est fortement sujet aux modes et aux tendances, de même que les technologies web connaissent des avancées, c’est pourquoi il convient de faire évoluer régulièrement son site web. D’autre part, on constate que des normes et habitudes se sont instaurées chez les internautes quant à la disposition des différents éléments (accueil, numéro de téléphone, formulaire de contact…). Ces repères doivent rester inchangés pour permettre une navigation optimale.

Sources :