10 tendances UX & Web Design pour booster les conversions de votre site

Chaque année apporte son lot de changement et de nouvelles tendances. L’année 2016 est déjà bien entamée, mais c’est l’occasion de réviser ses classiques pour la rentrée et se mettre à jour sur les tendances web design de cette année. Découvrez 10 concepts UX & Web Design en infographie, afin d’accélérer les conversions de votre site, grâce à cette infographie réalisée par l’agence design de Chicago, The Deep End. Sortez vos cahiers !

 

1. Des grandes images

Certaines études ont démontré que de larges images attiraient davantage l’attention des internautes et qu’ils avaient plus tendance à s’arrêter devant. Cet arrêt contribue à augmenter les conversions sur votre site, notamment s’il s’agit de photos de personnes souriantes, de vidéos d’ambiance ou bien de cinémagraphes.

2. Le « split screen » (écran partagé)

Si votre site propose différents produits, services ou catégories, vous pouvez diviser l’écran en deux parties afin de proposer des landing pages plus adaptées aux différents clics de vos prospects. En utilisant le split screen, vous encouragez votre audience à choisir sa propre aventure et les diriger là où ils sont les plus susceptibles de cliquer.

3. Les couleurs monochromatiques avec un CTA contrasté

Si votre site web est en grande partie en noir et blanc, ou de couleurs tamisées, placez un bouton Call-To-Action lumineux de façon à ce qu’il ressorte et obtienne davantage de clics. Votre CTA sera simplement beaucoup plus visible et c’est ce que les internautes le verront plus facilement !

4. Prioriser la navigation

Si on laisse trop de choix aux internautes, ils sont susceptibles de ne rien choisir du tout. Pour résoudre cela, cachez dans un menu toutes les pages secondaires (qui ne sont pas dans votre top), puis stylisez votre principal CTA comme vu dans le point précédent. Vous établirez ainsi des priorités et dirigerez votre audience exactement là ou vous souhaitez qu’elle aille.

5. Réduire le champ de collecte d’une adresse e-mail

Si vous souhaitez créer une page dédiée à la collecte d’adresses e-mails, il est plus efficace d’avoir un petit champ de formulaire, avec de bons titre et sous-titre. De cette façon, les internautes savent ce qu’ils sont censés faire, et vous êtes plus susceptible de collecter des adresses e-mails.

6. Les vidéos

Le format vidéo a explosé ces deux dernières années. La plus grande difficulté est de gagner la confiance de votre prospect afin de créer une conversion. Une vidéo bien réalisée permet aux gens de mieux connaître la personnalité de votre entreprise. C’est le format idéal pour souhaiter la bienvenue, récolter des témoignages ou faire des démonstrations produits.

7. Les boutons call-to-actions « collants »

Une fois que vous avez déterminé votre CTA le plus important, il doit rester visible. En restant, par exemple, en haut à droite de votre écran, même si vous faites défiler une page. Vous pouvez également le mettre dans une barre latérale « collante » ou sur mobile.

8. Une mise en page en cartes

Inspiré de Pinterest, une mise en page façon « cartes » est très visuelle et permet aux internautes d’aller rapidement à tout ce qui les intéresse, le noter, le garder en favori, ou d’aller sur une page où ils sont susceptibles de convertir.

9. Un CTA de colonne

Si un site comporte plusieurs colonnes, des études ont montré que vous pouvez interrompre ce flux de colonne en plaçant u CTA au titre convaincant. Les internautes seront ainsi plus enclins à cliquer.

10. Une expérience utilisateur personnalisée

A chaque fois que vous allez à Amazon, le site vous montre ce que vous avez regardé la dernière fois. La plupart des gens n’achètent pas du premier coup, et Amazon le sait ! Voilà pourquoi il vous montre à plusieurs reprises les derniers articles que vous avez consultés. Cette expérience est très personnalisée, Amazon connaît vos habitudes de navigation, sait ce que vous avez consulté, et en vous le montre à nouveau afin de conclure une vente.

 

Infographic-2016-Web-design-trends

10 tendances web design en 2016

Ça y est on a tourné la page de 2015 et on regarde dans le futur pour voir ce qu’il se fera de mieux en Web Design en 2016. Quelles tendances se dessinent pour cette nouvelle année ? Les tendances design 2015 vont-elles être révolues ou bien ré-adoptées ? Découvrez les 10 tendances web design de 2016.

 

1. Le retour de la typographie

La typographie fait son grand retour, et sera l’élément graphique incontournable de 2016. Les grandes images en tête de page disparaissent au profit de typographies. La typographie se suffit parfois à elle-même grâce à une mise en page élégante et graphique sans autre artifice que du texte. La tendance en 2016 reste mobile, les internautes consultent les sites depuis leur smartphone, il convient alors de leur proposer des typographies aérées et lisibles sur petit écran. Un effort conséquent est ainsi fait pour améliorer la lecture avec des textes plus gros et des interlignages favorisant la lecture.

Pour preuve également, la liste des typographies proposées par GoogleFont qui ne cesse de s’allonger de jour en jour ! Ces polices tendances permettent aux graphistes d’offrir un design moderne à leurs créations.

JBDLW-10things

 

2. Le Flat design et style minimaliste perdurent

Le Flat Design et le style minimaliste ne sont pas seulement un effet de mode, ces tendances se confirment pour la troisième année consécutive. Le flat design correspond aux exigences de légèreté, de rapidité, de simplification, de lisibilité, d’accessibilité, de mobilité liées au web d’aujourd’hui. Plus que jamais, l’heure est aux sites épurés, avec une charte graphique qui laisse pleinement la place aux textes et éléments visuels.

ifft-minimaliste

 

3. Les éléments photographiques en HD

Les résolutions et les tailles des écrans augmentant, l’utilisation de belles photos en HD va de pair. En 2016, les images de grande qualité en haute résolution devront captiver l’attention de l’internaute. Pour cela les entreprises font appel à des banques d’images payantes. Si leur budget est moindre, elles font l’effort de produire leurs propres visuels ou se rabattent sur des banques d’images de photos HD gratuite et libre de droit.

stockup-selection

 

4. Des GIF partout !

Ces petites images en boucle, très courte, permettent d’être très pédagogique et ludique à la fois. L’utilisation de GIF permet d’agrémenter un site Web ou un post sur les réseaux sociaux, il amène une note dynamique ou humoristique qui le rend plus accrocheur.

09-Future-1-v2

 

5. Le story telling

La nouvelle interface design 2016 devra séduire l’internaute en lui racontant une histoire. Les sites peuvent désormais tracer un récit linéaire et interactif. En scrollant, l’internaute fait défiler des éléments graphiques et participe à l’évolution de l’histoire. Le plus étant de créer une action qui force l’internaute à s’inclure dans l’animation pour accaparer son attention.

 

6. Le responsive design

Pour la troisième année, le responsive est au tableau des tendances de l’année. Capital depuis le déploiement de la mise à jour Google Mobile-Friendly, le responsive design permet d’offrir une meilleure expérience utilisateur aux internautes et mobinautes.
En effet, les notions d’interface utilisateur et d’expérience utilisateur sont au centre de l’approche design. La multiplication des appareils, des formats et des résolutions impose de s’adapter à l’utilisateur.

shutterstock_217125406

 

7. L’information par l’image : infographie, data visualisation et vidéo

Les informations sont aujourd’hui communiquées de la façons plus minimaliste et compréhensible possible afin d’accrocher l’attention du lecteur. On a coutume de dire « trop d’information, tue l’information », la tendance est désormais à la clarification.
La vidéo peut-être utilisée comme vecteur principal d’un message ou combiné avec du texte qui se superpose à cette dernière.
L’infographie et la data visualisation donnent quant à elles, la possibilité d’afficher efficacement des données complexes en une forme compréhensible et ludique.

Infographie-human-coders-salaires

 

8. Le slideout, menu réduit, ou menu hamburger

Le slideout est le menu sortant à gauche au passage du curseur, par effet recouvrant ou poussant le contenu.
Ce n’est pas vraiment une nouveauté, mais plutôt un retour à la navigation verticale, notamment avec le changement de nos habitudes et la massive navigation sur mobile.
Ce menu communément appelé « menu hamburger » permet de cacher les différents liens pour laisser plus de place à la page d’accueil et aux informations importantes. Ce type de menu réduit est notamment utilisé par des sites d’informations qui doivent gérer un grand nombre de thématiques.

slideout

 

9. Le split screen

Ce petit dernier fait son apparition cette année avec l’utilisation du double scroll. Le split screen permet de réaliser une mise en page mettant les éléments en contraste et en vis-à-vis.
Dans la dernière mise à jour de son OS, Apple a d’ailleurs inclut le split screen dans El Capitan afin d’afficher deux fenêtres en vis-à-vis.

18

 

10. Le long scrolling

Le site web basé sur le défilement, que ce soit parallaxe, horizontal, vertical, ou à l’infini, s’est imposé en 2015 et va perdurer en 2016. Il surprend les visiteurs par l’animation, mais permet également de renvoyer directement les visiteurs vers des « call to action », et encourage les visiteurs à rester plus longtemps sur la page.
Le long scrolling évite de charger d’autres pages pour obtenir l’information souhaitée. Ce design est très intuitif sur mobile et booste la vitesse de chargement.

Dropbox

 

 

Sources :  my-web-garden.fr et graphiste.com

13 différences entre Photoshop et Illustrator

Même si les logiciels de la Creative Suite d’Adobe sont complémentaires, ils n’en restent pas moins différents et voués à des utilisations bien distinctes. Un graphiste indien, M.A. Kather, a crée une série de 13 visuels illustrant ces différences entre Photoshop et Illustrator. Au delà de ces illustrations, il nous semblait donc important de faire un rappel sur les fonctions et utilisations de ces deux logiciels.

 

L’éditeur du célèbre pack de logiciels, Adobe, a su s’imposer parmi la concurrence avec sa Creative Suite. On retrouve au sein de ce pack 3 outils principaux destinés au graphisme : Photoshop, Illustrator et InDesign. InDesign étant destiné à la mise en page, les chances de se tromper sur son utilisation sont plus faibles. Nous allons donc nous intéresser plus particulièrement à Photoshop et Illustrator.

 

Photoshop : pour les photographies

Toute la différence entre ces deux logiciels est résumé dans les titres ! Photoshop est un logiciel de traitement d’images utilisé pour la retouche photo ou le photomontage. Le résultat est composé d’images bitmap (images matricielles), ce que signifie que votre image ou photo est une accumulation de pixels sur laquelle vous allez intervenir avec de nouveaux pixels. Plus vous agrandirez votre image, plus vous perdrez en qualité car l’image sera de plus en plus pixelisée. On appelle cela un effet d’escalier ou crénelage.

Photoshop permet aussi aux graphistes de créer une affiche pour le print, une bannière web, mais aussi la maquette d’un site Internet. Le force de Photoshop est de générer n’importe quelle image, mais gare aux pixels qui ne se laissent pas apprivoiser facilement !

Prenons un exemple, votre client vous demande de réaliser une affiche publicitaire en 4×3, sauf que son logo a été crée sous Photoshop pour du A4. Si vous l’utilisez en l’agrandissant, le résultat sera très pixelisé et très lourd (sur Photoshop le fichier contient, pixel par pixel, toutes les informations de l’image.) C’est là qu’intervient Illustrator !

Illustrator : pour les illustrations

llustrator est un logiciel de créations graphiques, c’est-à-dire composées de courbes et de droites créées par des formules mathématiques. Le résultat est composé d’images vectorielles qui ne subissent pas de perte de qualité lorsqu’on les agrandit. Le résultat est donc précis, net (non pixélisé) et s’adapte à tous les formats.

C’est le logiciel idéal pour réaliser des illustrations, ou bien scanner puis vectoriser vos dessins. Vous pourrez ainsi les agrandir autant que vous souhaitez, ces derniers seront toujours de bonne qualité. Illustrator est également utilisé pour réaliser des logos ou autres graphismes qui doivent s’adapter à toutes tailles de supports.

 

Pour illustrer nos propos d’une manière originale, découvrez les 13 illustrations du graphiste indien M.A. Kather :

 

photoshop-illustrator-makather01

 

photoshop-illustrator-makather02

photoshop-illustrator-makather03

photoshop-illustrator-makather04

photoshop-illustrator-makather05

photoshop-illustrator-makather06

photoshop-illustrator-makather07

photoshop-illustrator-makather08

photoshop-illustrator-makather09

photoshop-illustrator-makather10

photoshop-illustrator-makather11

photoshop-illustrator-makather12

photoshop-illustrator-makather13