UX : L’importance de l’expérience utilisateur dans l’e-commerce

L’UX prend une place prépondérante aujourd’hui et peut fortement influer sur les résultats d’un site e-commerce. Découvrez en 15 chiffres-clés pourquoi la prise en compte de l’expérience utilisateur est désormais incontournable.

 

Comportement du visiteur, éléments de réassurance, adaptation au mobile, présentations des produits et services … l’agence Youand, spécialisée en ergonomie et en UX/UI design, livre 15 statistiques en infographie qui rappellent concrètement pourquoi la prise en compte de l’UX est désormais devenue indispensable pour tout site e-commerce.

Tout d’abord, il faut savoir que 1$ investit en UX peut rapporter jusqu’à 100$ de business généré. Le prix de production d’un produit diminue de 25% grâce à l’intégration de l’UX dans ses projets. 93% des dirigeants pensent d’ailleurs que l’amélioration de l’expérience utilisateur est une priorité stratégique.

Cette prise de conscience s’explique par plusieurs raisons : 68% des utilisateurs quittent un site en raison de leur mauvaise expérience, et 44% des acheteurs en ligne partageront avec des amis cette mauvaise aventure.
En effet, près de la moitié des visiteurs regardent les produits et services de l’entreprise avant même de regarder les autres sections.
44% quittent le site s’ils n’y trouvent pas informations de contact et 61% n’achèteront pas s’il manque des éléments tels que le support client live (34%) ou des témoignages (20%.)

Pour rassurer l’utilisateur, une stratégie de mobile first doit être mise en place, car 50% des utilisateurs se connectent depuis un smartphone. En 2 ans, la consommation online sur smartphone a augmenté de 78%. Avec une logique mobile first, on constate -50% de taux de rebond et 30% d’augmentation des ventes sur une page produit mobile optimisée .
Enfin, le design d’expérience est une démarche qui permet de réunir autour d’une même table l’utilisateur, le client et son agence pour réfléchir ensemble aux améliorations à mettre en place grâce à des outils tels que l’A/B testing, les personas ou les tests utilisateurs.

infographie-ux-ecommerce

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

Tendances graphiques de l’été 2016

Bientôt arrivés à la moitié de l’année, nous nous devions de refaire un point sur les tendances graphiques de l’année 2016. Parce que ce qui est à la mode l’hiver dernier ne l’est plus forcément l’été suivant, le site DesginMantic a réalisé une infographie sur les tendances printemps/été 2016 en matière de design. Faites défiler !

 

Les couleurs

Comme les saisons, les tendances graphiques changent ! Pour cet été, l’utilisation de couleurs saisonnières dans vos créations peut les rendre plus attrayantes. Utilisez notamment l’association de couleurs bien tranchées, des couleurs tramées, le noir, ou des motifs. À éviter absolument : les bleus ennuyant, des couleurs pastel, l’aplat de couleurs monotones.

Typographie

Il est également important de se rappeler que les tendances qui sont populaires en une saison pourraient ne pas être aussi à la mode la saison suivante. Par exemple, les polices sans serif, slab serif ou grasses sont délaissées au profil des typographies découpées, avec des détails géométriques ou en ribbon art.

Icônes

Enfin, si vous êtes dans un processus de conception d’un logo, un site Web ou tout autre graphique, cette infographie peut aussi vous donner un peu d’inspiration pour créer des icônes. Privilégiez les icônes non figuratives, dynamiques et avec des traits fins, aux icônes avec des ombres, symétrique ou flat.

Vous voilà fin prêt à braver la tendance automne/hiver pour laisser place au graphisme estival !

 

Graphic-Design-Guide-book-2016

Outil : Tester le design responsive de votre site grâce à Google Resizer

L’équipe design de Google vient de lancer un nouvel outil vous permettant de tester si le design de votre site s’adapte bien sur différents écrans : bureau, tablette et mobile. Découvrez Google Resizer.

 

L’outil est assez simple mais il fallait y penser ! Et qui d’autre que Google qui a quasiment obligé tous les sites web a passé en responsive l’année dernière pour aujourd’hui les aider à optimiser l’apparence d’un site sur plusieurs écrans.

resize-design-google05

La prise en main de Google Resizer est donc elle aussi assez simpliste : entrez l’url du site web que vous souhaitez vérifier, puis constatez le résultat sur desktop, tablette et mobile. Si vous souhaitez voir les résultats plus en détail, cliquez sur l’icône « ordinateur » en haut à droite, vous pourrez ainsi tester les différents tailles d’écran Windows allant de xsmall à xlarge (480, 600, 840, 960, 1280, 1440 et 1600 pixels).

L’autre icône « mobile » vous permet de constater le résultat sur différentes tailles d’écrans de smartphones et tablettes en mode portrait et paysage.

resize-design-google03

resize-design-google02

 

Petit plus, le site de test design déployé par Google permet également de tester toutes les pages de votre site à l’intérieur de leur outil. N’hésitez donc pas à passer en revue toutes vos pages pour être certain d’obtenir un site totalement responsive design.

design.google.com/resizer/

 

resize-design-google01

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

Stock Up : le moteur de recherche de photos libres de droit

Vous bossez dans le web et notamment dans la rédaction de contenu et le community management ? On parie que vous ajouterez très prochainement Stock Up à votre barre de favoris. Stock Up est un moteur de recherche de photos libres de droit en haute définition. A découvrir de toute urgence !

 

Les images sont désormais au cœur de la création de contenu, elles permettent d’attirer l’attention de vos lecteurs et d’illustrer vos propos. Nous vous avions récemment fournis une liste de 15 banques d’images gratuites et légales, mais il est parfois fastidieux de devoir éplucher tous ces sites à la recherche de l’image parfaite. Aujourd’hui, grâce Stock up, accédez à près de 10 000 photos libres de droit et de qualités, issues de 26 sites spécialisés : Unsplash (notre préféré), mais aussi Picjumbo, Tookapic, Free Nature Stock, The stockpile, SplitShire, Skitterphoto, Goog Fee Photos …

Dans la barre de recherche, tapez vos mots clés, les résultats de votre recherche s’affichent en temps rééel. Précisez votre demande en indiquant si vous souhaitez une photo en couleurs ou noir et blanc (in english please !) Accédez également aux photos les plus populaires et aux nouveautés en un seul clic.

stockup-mostpopular

 

Sur chaque photo, les détails de la licence sont disponibles. La plupart des photos sont Creative Commons 0, certaines sont même du domaine public.
Pour récupérer la photo sélectionnée, cliquez dessus pour être automatiquement redirigé vers le site qui héberge cette photo libre de droit et pouvoir la télécharger en haute définition.

 

 

stockup-selection

 

 

6 outils pour choisir les couleurs de votre site web

Les goûts et les couleurs, on ne dispute pas ! Voici un thème qui est toujours sujet à polémique : les couleurs. Lorsque vous souhaitez créer un site web, vous devez avant tout faire appel à un graphiste pour qu’il définisse votre charte graphique. Comme vous ne partagez pas forcément ses goûts, et vice-versa, il est préférable de l’aiguiller pour composer la palette de couleurs de votre futur site web. Les couleurs définissent l’identité visuelle de votre marque, véhiculent un message et plongent l’utilisateur dans une ambiance. Comme il n’est pas toujours évident de composer cette palette de couleurs avec harmonie, découvrez 6 outils qui vous permettront de choisir les couleurs de votre site.

 

1. Paletton.com

Cet outil vous permet de partir d’une couleur primaire pour en définir les nuances en fissent bouger des curseurs le long d’un cercle chromatique. Vous avez également un mode « random » qui vous suggère des couleurs à associer entre elles. Vous pourrez ensuite tester votre palette sur site internet et exporter les codes couleurs. Un outil très complet !

palleton-couleurs01 palleton-couleurs02

palleton-couleurs03

 

2. Adobe Kuler

A l’image de Paletton, Adobe Kuler affiche sur roue chromatique sur laquelle on déplace les curseurs pour obtenir une palette de 5 teintes. On peut également créer une palette de couleurs à partir d’une image.

Adobecolor01 adobecolor02

 

3. Colourco

Contrairement aux deux outils précédents, Colourco n’a pas de roue chromatique. Il suffit de passer le curseur sur son écran pour ajouter couleur par couleur. Vous pouvez ajouter de une à dix couleurs.

colourcode

 

4. Flat UI Colors

Vous cherchez un rendu d’assez simple et minimaliste dans une ambiance flat design ? C’est Flat UI Colors qu’il vous faut ! Vous avez le choix parmi 20 couleurs, cliquez sur la couleur de votre choix pour copier son code et le tour est joué !

flatuicolors

 

5. UIcolors

L’alternative, Uicolors vous offre davantage de choix, mais le principe reste le même.

uicolors

 

6. Colour lovers

si vous cherchez encore l’inspiration, ColoursLovers.com est fait pour vous ! Il s’agit d’un site communautaire ou les utilisateurs partagent leurs créations hautes en couleurs ! Petit plus de ce site, l’outil Photocopa vous permet de trouver une palette de couleurs à partir d’une photo.

colourslovers

 

10 choses à ne pas dire à un graphiste

Pièce maitresse d’une communication réussie, les graphistes ont l’art de sublimer un message au premier regard. Cependant, leur travail est souvent soumis aux critiques et remarques des yeux plus ou moins avisés. Afin d’améliorer les relations entre les graphistes et leurs clients, nous vous proposons une liste de 10 phrases exaspérantes qu’il ne faut absolument pas dire à un graphiste, le tout réalisés et illustrés par Shruti Gupta, basée en Inde.

 

Il est très probable que vous ayez besoin un jour ou l’autre de faire appel aux services d’un graphiste ou d’une agence de publicité pour concevoir un logo, développer un site, faire une affiche … Faire appel à un professionnel est le plus souvent la meilleure solution pour arriver au résultat recherché.
Cependant, il est nécessaire que vous connaissiez un peu mieux cette profession qui soigne l’image de votre entreprise, au risque de vous voir repartir avec votre projet sous le bras !

 

1. Ça a l’air un peu vide, tu pourrais pas grossir le tout pour remplir l’espace ?

10-Things-Not-To-Say-To-A-Graphic-Designer1

2. Tu n’as qu’à utiliser le logo qui est sur ma page Facebook

10-Things-Not-To-Say-To-A-Graphic-Designer2

3. De toutes façons c’est toi le graphiste, tu sais quoi faire !

10-Things-Not-To-Say-To-A-Graphic-Designer3

4. On n’a pas terminé le brief, mais tu peux quand même dessiner un brouillon ?

10-Things-Not-To-Say-To-A-Graphic-Designer4

5. Fais juste ce à quoi tu penses ! Je te fais confiance !

10-Things-Not-To-Say-To-A-Graphic-Designer5

6. Allez, ça va juste te prendre une minute à faire !

10-Things-Not-To-Say-To-A-Graphic-Designer6

7. Le noir c’est pas un peu déprimant ?

10-Things-Not-To-Say-To-A-Graphic-Designer7

8. Tu peux le mettre dans un format qu’on pourra modifier ensuite ?

10-Things-Not-To-Say-To-A-Graphic-Designer8

9. Je t’ai envoyé le logo dans un fichier Word

10-Things-Not-To-Say-To-A-Graphic-Designer9

10. Je voudrais quelque chose avec la police Impact

10-Things-Not-To-Say-To-A-Graphic-Designer10

Guide des interactions tactiles sur smartphones et tablettes

Webdesignledger a référencé tous les gestes effectués par les utilisateurs de mobile et tablette et a établi un guide des interactions tactiles à destination des designers et des développeurs pour  les appareils reposant sur le toucher : iPhone, Android, Windows Phone 7, Magic Mouse Apple, Trackpad ou encore la tablette Wacom.

 

Le guide établi par webdesignledger.com contient quatre types de ressources pour le design d’interactions tactiles :

– Les gestes de base effectués pour la plupart des commandes tactiles (Core Gestures)
– Comment utiliser ces gestes pour appuyer les principaux gestes de l’utilisateur (Major User Actions : Basic Actions)
– Les représentations visuelles de chaque geste et leurs résultats. (Object-related actions)
– La façon dont certains systèmes d’exploitations utilisent les principaux gestes (Platform support : android, windows phone7)

 

Gesture-cards-1 Gesture-cards-3 Gesture-cards-2 Gesture-cards-4

 

Une seconde étude, de terrain cette fois-ci, intitulée “Smartphone Street Observer” et menée par le laboratoire Personae User Lab, nous en apprend davantage sur les 5 principales manières d’utiliser son smartphone. En effet, les résultats dépendent du type d’activités menées par l’utilisateur : la consultation, la recherche, la rédaction de messages, l’écoute de musique, l’utilisation d’un jeu ou la prise de photos / videos.

5-Manieres-utilisation-smartphone2

Cette illustration nous montre que 37% des utilisateurs tiennent leur téléphone seulement de la main droite en utilisant le pouce droit.

Autres faits intéressants de l’étude, l’usage du mode paysage est très peu utilisé (1,75%), surtout en extérieur. Dans 90% des cas, il est utilisé pour les photos et vidéos. Les novices ont tendance à calquer l’usage en fonction d’observation d’autres utilisateurs et n’utilisent pas de doigts non usuels. L’index est beaucoup plus utilisé, avant l’adoption de l’utilisation du pouce après 3 mois.
À noter également que l’utilisateur peut tenir autre chose dans sa main (cigarette, café, document, parapluie…) ce qui l’oblige à utiliser sa main faible pour interagir. Ainsi 25% des droitiers utilisent leur main gauche et 37% des gauchers leur main droite, lorsqu’ils ont une main occupée, ce qui traduit ainsi la capacité d’adaptation des utilisateurs.