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

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.

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

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».

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.

    Source: Les Menuires

Toujours plus de fonctionnalités utiles:

• recherche multicritère: nombre de voyageurs, type de séjour ou d’hébergement, durée du voyage, etc. Les sites de Tourisme Montréal, d’Alpes-Ski-Resa.com, d’Air Transat, de Thalasseo ou de Travel Alberta fournissent de bons exemples.

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.

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».