Retour

Retour
Analyse - 18 mars 2014

Filtres

Filtres

Type de contenu

Tous les types

Thématique

Toutes les thématiq...

Analyste

Tous les analystes

Chronologie

mars 2014

Recherche

L
Imprimer e-tourisme et technologies,

La conception des sites Web sous le signe de la mobilité

Les internautes consultent de plus en plus les sites Web sur leur téléphone intelligent ou leur tablette. Cet usage influence considérablement leurs comportements (lecture rapide, consultation sur différents supports à la fois, etc.). Les entreprises doivent s’adapter et prendre en considération ces changements dans la conception de leurs sites.

 

Sur le plan technique

Les sites Web adaptatifs (responsive design): L’affichage s’ajuste à tous les types d’écrans. Tourisme Îles de la Madeleine a été la première association touristique québécoise à lancer son site Web adaptatif, en avril 2013 (voir l’image). Il est possible de vérifier l’adaptabilité de son site en utilisant Piresponsive.

 

 

 

CN_site_WEB_image1

Source: Adviso

L’utilisation de visuels pour s’adapter à des écrans où le texte est difficile à lire et présenter les informations de manière plus attirante. Place à l’image, aux pictogrammes, aux illustrations, à la vidéo et à la datavisualisation. Cette dernière permet la présentation de données brutes (chiffrées, par exemple) sous forme de contenu visuel, de manière à ce que certaines informations, comme une infographie, ressortent plus que d’autres.

L’image est au cœur des nouveaux sites Web:

  • en arrière-plan et en plein écran;
  • floue, elle colore et remplit le site tout en apportant une touche épurée, mais surtout, elle prend moins de temps à charger (voir l’image);
  • en 3D pour mettre de l’avant l’univers de la marque;
  • rappelant les images Instagram avec des filtres

CN_site_WEB_image2

Source: Hipstamatic

La vidéo prend une place de plus en plus importante, elle représenterait 90% du trafic Web en 2017. Sa production et son partage sur les médias sociaux sont toujours plus faciles avec le temps, et on la trouve souvent en pleine page pour remplacer du texte explicatif.

Le design plat (flat design): Il encourage la simplicité et la clarté. Le design épuré et minimaliste se concentre sur l’essentiel pour faciliter la navigation. Un des principaux objectifs du design plat est l’amélioration de la compréhension et de la lisibilité de sites toujours plus complexes et aux fonctionnalités plus nombreuses, en optimisant ainsi l’expérience utilisateur. De plus, une interface au design simplifié se chargera plus vite sur tous les terminaux, notamment sur les appareils mobiles. Finies les fioritures: pas de dégradés, d’ombres ou de textures, mais beaucoup d’aplats de couleurs sur des mises en page aérées, associées à des icônes au design épuré et de grandes typos; un design «à la Windows 8».

CN_site_WEB_image3

Source: windows.microsoft.com

Le défilement parallaxe: Cette technique s’inspire des jeux vidéo des années 1980 et 1990. Elle donne l’illusion d’un site en 3D et d’une certaine profondeur, grâce à des images d’arrière-plan qui bougent plus vite que celles d’avant-plan. L’interaction est produite par le défilement ou le déplacement de la souris. Utilisé de façon intelligente, le défilement parallaxe permet de scénariser l’apparition des divers éléments d’une page pour créer une histoire (storytelling) sur une seule page, avec des photos très larges. Précurseur de la tendance, Tourism New Zealand exploitait à fond cette technique dans l’ancienne version de son site Web (voir la vidéo ci-dessous). La Haute-Savoie http://www.savoie-mont-blanc.com/en et ses stations de sports d’hiver offrent également un très bon exemple de cette technique.

 

Le défilement infini: Il invite les utilisateurs à faire défiler la page de haut en bas de façon à accéder aux informations qu’ils recherchent de façon intuitive. La page Web, toute en longueur, se consulte dans son intégralité à l’aide d’un simple geste du doigt. Son principal atout réside dans la présentation d’une foule de résultats sans préchargement. Les réseaux sociaux comme Facebook, Twitter, Tumblr ou Instagram l’utilisent depuis longtemps.

Les présentations sous forme de grille: Ces rectangles superposés de différentes tailles créent des sites dynamiques, dont la mise en page offre aux utilisateurs une navigation unique. La grille condense tout dans un format facile à lire.

CN_site_WEB_image4

    Source: Les Menuires

Toujours plus de fonctionnalités utiles:

CN_site_WEB_image5

Source: Alpes ski Resa

  • menus riches pour conserver la clarté de la page d’accueil, valoriser tous les produits et améliorer l’expérience utilisateur.

Sur le plan du graphisme

La typographie est de plus en plus importante. Sa taille grossit à vue d’œil: de 10 à 12 points, elle se rapproche régulièrement des 20 points. Elle se personnalise au fur et à mesure qu’elle devient compatible avec les navigateurs Web pour créer des univers particuliers et exprimer le branding d’une marque. Les polices de caractères se mélangent pour concevoir des effets artistiques.

CN_site_WEB_image6

Source: dribbble.com

La couleur dans des schémas très simples: une ou deux seulement. L’utilisation d’une palette de couleurs moins élaborée semble venir de pair avec un design plat (voir ci-dessus), mais pas toujours.

Ces quelques tendances illustrent bien toute l’importance du phénomène de la mobilité, qui dicte ses lois afin d’optimiser l’expérience de l’internaute. Le mot de la fin revient à Solange Derrey, chargée de communication et des études digitales pour le groupe Vanksen: «Il faut donc constamment rester à l’écoute de l’environnement technologique et des tendances créatives pour répondre aux besoins des internautes en matière de contenu, de navigation, d’adaptabilité et d’esthétisme».

Source(s)

− Cisco. «Cisco Visual Networking Index: Forecast and Methodology, 2012-2017 », cisco.com, 29 mai 2013.

− Derrey, Solange. «Les 10 tendances webdesign de 2014», vanksen.fr, 20 février 2014.

− Frenchweb.fr. «Web design: 6 tendances fortes pour 2014», 15 janvier 2014.

− Ginet, Vincent. «30 webdesign tendances pour janvier 2014», blogduwebdesign.com, 31 janvier 2014.

− Leigh Turner, Amber. «10 Web design trends you can expect to see in 2014», thenextweb.com, 29 décembre 2013.

− Pereira, Vincent. «Sites Internet: les tendances pour 2014», inaativ.com, 31 janvier 2014.

− Robert-Nicoud, John. «Les tendances 2014 du webdesign», medium.com,18 décembre 2013.

− Taheri, Maryam. «Web Design Trends for 2014», webdesignledger.com, 14 janvier 2014.

− Wix Blog. «Parlons Web design: 15 notions à assimiler pour assurer comme un pro», fr.wix.com, 17 février 2014.

Site Web:

- Webdesigner Trends

 

Consultez notre Netiquette