[5mn de lecture]

 » Le design n’est pas de l’art, c’est une méthodologie avant tout. « 

La question revient souvent avec nos clients lorsque nous faisons une refonte de site. « Quel design allons-nous adopter ? A quoi va ressembler notre site après ? Est-ce qu’il va plaire ? Est-ce que nous allons l’aimer ? » sont parfois les questions qu’ils se posent.

Contrairement à une croyance qui semble profondément ancrée, le design de site n’est pas la résultante d’une inspiration réussie d’un designer, mais le fruit d’un travail qui mêle plateforme de marque, expérience utilisateurs, et tendances.

Concevoir un design : une fusée à quatre étages

La base : la plateforme de marque

Son rôle est majeur dans la définition du design de votre site. Soit vous l’avez déjà défini et elle servira de base de départ à la conception d’un persona-site. Soit, avant de vous livrer à quelque travail de conception graphique, vous aurez à la définir. Ce n’est pas le propos de cet article, mais il est important de rappeler à quel point cette plateforme joue un rôle essentiel dans la réussite du design d’un site. Sans plateforme de marque, vous risquez de passer à côté des fondamentaux qui bâtiront votre succès.

Pour nous, elle permet de nous poser les bonnes bases pour la conception graphique d’une interface, et notamment la création du persona site, comme vous allez le voir après.

Le premier étage de la fusée : le persona design

Lorsque la plateforme de marque est parfaitement définie, il est alors possible de passer à la définition du persona design qui définira l’ensemble des éléments de langage visuels et textuels (voire sonores) du site. C’est un outil extrêmement important de la conception d’interface et qui est souvent négligé par les agences.

L’intérêt du persona design est de pouvoir générer un outil collaboratif définissant un ensemble de règles sur la manière de communiquer d’un site (cela est vrai aussi pour une app, bien sûr).

Le travail de référence pour les persona design est celui réalisé par le designer Aarron Walter, responsable du design de la société Mailchimp, une solution d’emailing grand public.

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

Comme il le propose lui même, un persona design se décline en 7 éléments clés :

• Une image personnalisée
• Une vue d’ensemble
• Les traits de caractères de la marque
• La carte de personnalité
• La voix
• Des exemples de textes
• Les méthodes d’engagement

Le persona design : un travail collaboratif

Pour chaque marque, ces règles sont déterminées par un travail d’atelier ou les équipes marketing, les clients parfois, et des experts interagissent ensemble pour créer un persona, un véritable personnage, qui sera la personnalité du site.

Faire ce travail permet d’avoir une approche beaucoup plus riche de la conception. A l’intérieur d’un persona design sont définis tout ce que voit, entend, lit et écoute un utilisateur. La manière de s’exprimer du site, par exemple… son apparence physique, son caractère : est-il gai, léger ? Ou sérieux ? Rassurant ? Ou tout cela à la fois ? Il définit en quelque sorte l’image que l’on veut projeter de soi à ses clients et à ses prospects.

Le persona design devrait être le premier travail pour réaliser un site ou une application avant même toute phase de conception.

Avantages du persona design

• Un outil simple pour définir les règles de gestion des éléments du langage visuel et textuel
• Une vision partagée de ce que doit être le site, mais aussi de tous les éléments qui vont permettre de communiquer avec vos clients et prospects : email et réseaux sociaux
• Une homogénéisation des contenus (cet outil vient vraiment en complément du design system)
• Un outil marketing qui permet de créer plus d’affinité avec votre marque en donnant une véritable personnalité à votre site

 » Le persona design donne une véritable personnalité à votre site, renforçant le lien de proximité avec vos clients et vos prospects « 

Ces éléments étant entièrement définis, il devient dès lors beaucoup plus simple de savoir quel ton adopter sur votre site et comment communiquer avec vos clients.

Dans les maquettes de conception (wireframes), il devient possible de détailler les différents textes de l’interface et de pouvoir dès lors les tester auprès de vos utilisateurs finaux

Dans la phase de conception graphique, les éléments de charte seront définis sur des éléments tangibles (couleurs choisies en fonction des intentions de la marque, de l’image qu’elle veut véhiculer / pictogrammes en accord avec le ton du site). Créer un persona permet aussi aux équipes en charge du site de mieux se projeter dans l’ADN de la marque et de mieux la retransmettre.

Le deuxième étage de la fusée : la conception UX

Je ne m’étendrai pas inutilement sur cette partie qui constitue le coeur de notre métier et que Wexperience pratique au quotidien avec ses clients.

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

Brièvement : la conception UX se décline alternativement entre deux activité. Celle de l’audit par les utilisateurs et celle de la conception par un UX Designer.

La conception se matérialisant par des wireframes (maquettes fil de fer de conception détaillée). Elles permettent de positionner et de définir rapidement tous les éléments d’une interface. Durant cette phase, un expert technique de la plateforme de développement, un expert SEO et un UX Writer (personne chargée de la rédaction de textes de l’interface) viennent apporter chacun leur compétence afin de répondre à toutes les contraintes de la conception.

Souvent, un prototype est livré à mi-parcours et un test utilisateur réalisé sur un nouveau panel afin de parfaire la conception.

Troisième et dernier étage : la conception graphique

La conception graphique sera la résultante de tous les éléments précédents. Elle s’appuiera à la fois sur la plateforme de marque, le persona site et les maquettes UX. Souvent, elle comprend également une réflexion issue d’un benchmark de sites concurrents ou inspirants.

De ce travail ressort le design du site, et, plus concrètement, exactement ce que verront les utilisateurs futurs du site. C’est à ce point qu’il devient possible de répondre à la question de départ. Ce design, sur lequel nous nous sommes longuement interrogé, va ressortir naturellement et s’imposer comme une évidence étayée et argumentée par les nombreux travaux de recherche et de conception en amont.

En fonction de cela, un site pourra ressembler à un Amazon ou un Zara, sans que personne n’ait à discuter son apparence. La notion d’esthétique, vous le voyez bien, prend beaucoup moins d’importance à ce stade. Au final, l’important, puisque l’on parle de e-commerce, est d’être arrivé à conjuguer des facteurs psychologiques d’appréciation d’une marque, de son offre, à des facteurs commerciaux ou marketing qui en feront « une machine de guerre ».

Conclusion

Le design de site n’est pas un art, mais une science, un métier, dont le produit est un design graphique répondant à un cahier des charges business mêlant ADN de marque, UX, offre, et spécifications techniques. Pour y réussir, un projet doit, selon une méthodologie et une organisation rodée, faire collaborer un ensemble de compétences et de métiers, conduit par un chef de projet polyvalent, capable de les comprendre tous. Chacun des projets livrés par Wexperience répond à cette exigence.

Aujourd’hui, après le cas Walmart, Electrodépôt ou celui d’Asos, nous allons avoir comment construire une app en relation avec une stratégie business.

Il s’agit de Hopper, une app de réservation de billets d’avion, dont la société mère vient de lever 100 millions de dollars et qui est désormais valorisée à 780 millions de dollars !!!

La promesse d’Hopper (qui n’est pas originale) est d’aider ses utilisateurs à trouver les meilleurs prix sur des billets d’avion. Vous entrez une ville de départ, une destination, et hop ! L’application se décarcasse et vous trouve tous les tarifs de toutes les compagnies en mettant en avant les meilleures offres.

Gros avantage de Hopper : pendant que vous êtes occupé à faire autre chose, l’app continue à chercher les prix les moins chers et vous alerte quand une offre à ne pas manquer apparait.

Respecter les 4 objectifs d’une app e-business

Construire une telle app doit se faire en définissant des objectifs clairs et simples. Pour Hopper, ce sont les suivants :

• Séduire : attirer l’attention par le design, au delà de l’offre, pour obtenir le plus de téléchargement possible
• Convertir : ne pas décevoir à la première utilisation, permettre d’obtenir un résultat rapidement afin de convaincre l’utilisateur d’employer plus d’une fois l’app
• Retenir : l’expérience utilisateur, grâce à une bonne ergonomie, doit être la plus fluide possible, et ne pas créer de freins pendant les usages
• Fidéliser : créer de nouveaux besoins, suggérer des destinations pertinentes, pour faire revenir aussi souvent que possible l’utilisateur sur l’app

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

1 – Séduire par l’apparence graphique

La séduction passe essentiellement par le design graphique, sous-tendu par une organisation de l’information simple et facile à comprendre.

L’apparence de de votre app dans l’appstore sont exactement comme le packaging d’une boîte de Corn Flakes dans un rayon de supermarché. Non seulement, vous devez être à hauteur des yeux, mais aussi sortir du lot, et enfin, plaire. Cela fait beaucoup !

2 éléments sont à noter sur la présentation de Hopper dans l’App Store d’Apple : le logo et les écrans présentés

Le logo n’est pas un élément à négliger dans le design d’une app. Non seulement, il est votre identité de marque, mais il est aussi un vecteur de la décision de téléchargement. Un logo peu dynamique, ou trop compliqué visuellement, réduira l’attention de vos utilisateurs potentiels. Et, point tout aussi, important, sera plus difficile à mémoriser ou à retrouver sur l’écran de votre smartphone au milieu de nombreuses icônes d’application.

Le choix de la couleur n’est pas anodin non plus. Ici, c’est le rouge corail, désigné comme la couleur Pantone de 2019 qui est utilisé. Ce n’est pas un hasard, car il y a des chances que cette couleur ait un potentiel de séduction plus important que d’autres couleurs. Pour une marque qui n’existe qu’online, ce n’est pas un problème de céder aux tendances.

Les screenshots (capture d’écran de l’app) reflète les promesses de l’offre… Surtout que ce ne sont pas les screenshots de l’application ! En réalité, il s’agit d’un montage destiné à promouvoir la promesse de l’app. En 4 écrans, sont déclinés 4 sous-promesses de l’offre :

• le prix : « Payez le moins cher possible »
• la découverte : « Nous allons vous vendre des choses que vous ne connaissiez même pas »
• le contrôle : « Achetez quand vous voulez »
• la primauté : « Soyez notifiés en temps réel des meilleurs offres et profitez-en immédiatement »

Comme vous le voyez : plutôt que montrer l’app elle même, Hopper a créé de faux écrans qui encouragent l’internaute à agir et à télécharger l’app grâce à des messages incitatifs excitants (sur la version desktop).

• Un mot sur le choix du design graphique pour finir. Vous aurez remarqué qu’il est presque enfantin. Ne soyez pas étonné : la cible visée par Hopper sont les jeunes millenials. Comme pour le reste, ce parti-pris participe à la décision de l’internaute de télécharger ou pas l’app.

2 – Convertir à l’utilisation par la simplicité

C’est un précepte absolu. Si vous ne voulez pas que votre app soit rejetée après la première application, il faut arriver le plus vite possible à fournir un résultat satisfaisant à l’utilisateur. C’est le meilleur moyen de l’encourager à revenir.

Comme vous pouvez le voir dans la vidéo ci-dessus, la conversion à l’utilisation se fait de deux manières :

1. Par la présentation d’écrans d’introductions à l’app qui n’ont pour but que de vous faire accepter les notifications (onboarding)
2. Par l’incitation à agir grâce à une interface simple, coloriée et incitatives

Les règles de la conversion à l’utilisation sont :

• la rapidité : il faut que ça aille vite, moins d’une minute pour obtenir une premier résultat et une preuve que le concept marche
• la simplicité évidemment : tous vos écrans doivent être clairs et parfaitement compréhensibles sans que l’utilisateur ait besoin de réfléchir. C’est le fameux Don’t make me think de Steve Krug
• la qualité du résultat : il faut non seulement qu’il soit pertinent, mais, comme c’est le cas ici avec Hopper, qu’il y en ait beaucoup, de manière à provoquer une sensation d’abondance infinie dans l’esprit de l’utilisateur. N’oubliez pas que le choix, c’est la liberté.

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

3 – Retenir grâce à une bonne ergonomie

Une telle app est destinée à être utilisée le plus souvent possible. Pour que cela se fasse, il faut éviter toute friction dans la navigation, tout doute, toute interrogation dans l’usage de l’interface, et bien sûr, tout temps d’attente.

Mais une bonne ergonomie, ne se décrète pas ! Elle se travaille en permanence ! Pour l’améliorer, vous devez mettre en place un processus d’observation/amélioration continu où chaque itération améliorera l’UX de votre app.

Pour y parvenir, fixez vous des objectifs :

• Mesurez la satisfaction de vos utilisateurs grâce à un outil comme UX.care à chaque test
• Fixez des kpi spécifiques à l’UX. Par exemple, comptez le nombre d’erreurs de taps de l’utilisateur lorsqu’il doit trouver un billet et tentez en permanence de diminuer ce nombre d’erreurs
• Diminuez tous les temps de latence (comme je vous l’ai expliqué dans l’article : 11 conseils pour optimiser la vitesse de votre site mobile). Rappelez-vous : 1/10e de seconde est déjà considéré comme lent par le cerveau humain.
• Introduisez une note de « fun », surtout si votre cible est appétente à cela. La recherche a démontré que l’UX et la performance d’une app étaient améliorées si, en plus d’une bonne ergonomie, il y avait de l’amusement à l’utilisation d’une app.
• Intégrez le parcours au maximum à votre app : contrairement à d’autres apps du même type, l’achat de billet se fait directement dans Hopper et l’utilisateur n’est pas renvoyé sur un site tiers

4 – Fidéliser en stimulant l’utilisateur

Une bonne ergonomie est un vecteur de fidélisation, mais ne suffit pas, si votre offre ne se renouvelle pas suffisamment. Mais comment le faire quand on vend du voyage ?

Utilisation de l’IA

Tout comme Netflix (voir l’article à ce sujet), Hopper fait un usage intensif de l’IA pour suggérer des voyages auxquels les utilisateurs n’auraient pas pensé. Et, d’après Frédéric Lalonde, le fondateur de Hopper, c’est plutôt une réussite :

Le taux de conversion des offres suggérées par l’IA est 2,6 fois supérieur à celles cherchées par les utilisateurs

25% des commandes sont le fruit de suggestions faites par l’IA

Conseiller l’utilisateur

Une fonctionnalité particulièrement appréciable de Hopper est la manière dont il pousse les offres. Si le tarif n’est pas assez attractif ou s’il peut y avoir une meilleure affaire à faire, il vous le signale. Ainsi, Hopper vous transforme en client intelligent qui ne se jette pas sur la première offre venue.

Notifier

Vous ne découvrirez rien si je vous dis que Hopper utilise les notifications pour faire revenir ses utilisateurs et que cela fait évidemment partie du système de stimulation. Hopper encourage l’abonnement aux notifications au moment de la phase d’onboarding.

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

Conclusion : une app presque parfaite grâce à l’ergonomie et l’IA

Dans l’interview qu’il a accordé récemment à Techcrunch USA, Frédéric Lalonde apportait une précision très intéressante. Hopper n’est accessible qu’à travers une app. Pas de site web, ni de site mobile. Cela montre à quel point  sur continent Nord Américain le mobile est en train d’effacer presqu’entièrement le commerce sur ordinateur de bureau. Une tendance qui va atteindre aussi l’Europe. Et une option qui n’est pas si folle quand on connaît le coût de développement et de maintenance d’un site web et d’une app en même temps.

Reste une question quand même : pourquoi ne pas s’être alors tourné vers la technologie des PWA qui réunit le meilleur des deux mondes ? Cela aurait été sans doute une solution encore meilleure. Mais qui est peut-être dans les cartons de Hopper.

Excellente journée !

Appsteel nous avait confié le redesign graphique de son application d’apprentissage en vidéo de la guitare. Voici le résultat ! Si vous aussi, vous cherchez un prestataire pour le design graphique et UX d’une app, contactez-nous !

(Application disponible sur l’appstore)

Analyse du cas Electrodepot.fr

Refondre une page unique de site est toujours une mission complexe, car il est toujours difficile de s’attaquer à une seule partie d’un site sans avoir la tentation d’en modifier d’autres. C’était pourtant bien la demande d’Electrodépôt, une marque du groupe Mulliez, spécialisée dans la distribution de produits électroniques grand public.

Avant une refonte, toujours faire un test utilisateur !

La première chose à faire est de soumettre cette page à un test utilisateur. 12 personnes ont donc été convoquées par nos soins pour utiliser le site d’Electrodépôt sous notre oeil sagace. Ce test, qui a duré 2 jours, nous a permis d’établir une cartographie complète complète de l’UX sur la fiche produit, ainsi que d’autres éléments du site (la navigation, la page liste, etc.).

12 testeurs représentent environ 12h d’enregistrements vidéos qui sont ensuite analysés, minute par minute, pour déterminer les points forts et les points faibles de l’objet de l’étude.

Plus de cent pages de rapport ont été rédigées suite à ce test. Dans les grandes lignes, le principal défaut que nous avons pu relever sur l’ancienne fiche produit d’Electrodépot.fr était un manque d’organisation et de hiérarchisation de l’information. Dans le domaine de l’électronique/électroménager, ce peut être très pénalisant. Les produits techniques nécessitent beaucoup d’informations pour satisfaire, intéresser, rassurer l’utilisateur. Et quand il y a beaucoup d’informations, le risque est grand de créer de la confusion et de perdre l’utilisateur. C’était le cas ici.

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

Parmi les défauts relevés :

• Des codes couleurs non cohérents (le rouge est utilisé avec plusieurs sens sémiologiques)
• Des photos produits trop petites
• Pas d’incitation à aller en magasin
• 1 affichage 3 colonnes lourds et compliquant la lecture

Décryptage de la nouvelle version

Il existe beaucoup de moyens d’organiser et de hiérarchiser l’information sur une page. L’important, pour pouvoir bien le faire, est de déterminer quels sont les éléments les plus primordiaux pour la majorité des utilisateurs et de les mettre correctement en avant sans rendre, pour autant, leur lecture compliquée.

3 améliorations principales

1) Une meilleure prototypie

En ecommerce, sur une marque généraliste, il ne faut pas réinventer la poudre. Tous les sites d’électronique/éléctroménager obéissent à peu près à la même organisation. C’est normal : en utilisant ainsi une prototypie (un squelette général) similaire, ils font gagner du temps à leurs utilisateurs, qui « s’y retrouvent ». La photo produit est toujours à gauche, le bouton « Ajouter » en bas à droite, etc… Ainsi, le site ne prend pas le risque de dérouter les utilisateurs, de les obliger à apprendre une nouvelle organisation d’interface.

2) Plus de clarté grâce à 4 principes de l’UX

Premier principe : Réduire le nombre d’éléments visibles

En ces temps de surinformation et de saturation visuelle, les internautes sont à la recherche de simplicité et de clarté. Pour les satisfaire, il faut arriver à essentialiser l’interface, réduire le nombre d’éléments visibles en même temps, aérer la page en les espaçant suffisamment.

Deuxième principe : bien regrouper ensemble les éléments en sous-groupes facilement identifiables. Ce principe fait appel à deux lois de l’ergonomie qui veut que des éléments proches et similaires forment un tout cohérent. Dans la nouvelle fiche produit d’Electrodépôt, surtout pour la version desktop, nous avons essayé de faire qu’il y ait un minimum de zones visibles et qu’elles soient rapidement identifiables : le bloc photos, le bloc prix et choix des options, le bloc description, etc.

Organiser la page en blocs clairs permet à l’internaute d’aller plus vite dans la lecture de la page. Cela n’a l’air de rien à l’échelle d’une page, mais à l’échelle d’une navigation, comprenant plusieurs pages, cela lui fait gagner beaucoup de secondes et de minutes.

Troisième principe : utiliser des codes couleurs conventionnels et limiter leur nombre.

Plus il y a de couleurs à l’écran, plus d’efforts cognitifs sont demandés au cerveau. Pour cette raison, une interface doit limiter au maximum leur nombre. Pour les textes, elles doivent respecter les règles d’accessibilité (être suffisamment grandes et suffisamment contrastées avec le fond pour être bien lues). Pour les couleurs ayant un sens symbolique (comme le vert et le rouge) : ne pas induire l’utilisateur en erreur en lui envoyant de faux signaux (le rouge ici est utilisé pour mettre en avant un élément et signaler son importance). Le vert vient ici donner un sens positif à certains textes (« LIVRÉ SOUS 2 JOURS »). Ces couleurs viennent jouer dans un sens positif sur les impressions de l’utilisateur. Notez que le bouton d’ajout au panier n’a pas de couleur, mais sa position dans la page, conventionnelle, sa taille assez importante, l’espace qui l’entoure le rendent proéminent et indiquent qu’il est le point principal de l’action de la page.

Quatrième principe : placer les éléments importants en haut de page

Les tests nous ont permis de faire des choix sur la hiérarchie de l’information. Sur écran d’ordinateur, les avis clients ou le descriptif produit sont renvoyés plus bas dans la page. Au dessus, ils auraient été en trop. Le bouton « Ajouter » doit donc toujours apparaître au dessus de la ligne de flottaison. Le choix du mode de livraison a également été renforcé. Et le mode « retrait en magasin » est « forcé ». Visuellement, il apparait plus fortement que le mode de livraison à domicile (gris sur fond gris, au lieu de noir sur fond blanc).

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

3) Une meilleure mise en avant du visuel produit

Au cours du test, plusieurs personnes nous ont fait remarquer que les photos produits n’étaient pas assez grande et ne permettaient pas de voir assez de détails sans zoomer. Nous avons donc décidé d’agrandir la zone dédiée à la photo produit et nous avons également simplifié l’interaction du zoom, qui n’était pas assez instinctive.

Version mobile

Bien évidemment, le mobile a été une de nos préoccupations principales. La conception s’est faite en même temps  pour tous les types d’écran. Contrairement à ce qu’on entend souvent, on ne conçoit pas d’abord pour le mobile et ensuite pour le desktop. Cela permet d’avoir une réflexion plus approfondie et plus globale sur les deux types de taille d’écran.

Et le SEO ?

1. La première étape était de s’assurer que l’on conservait bien des points SEO importants dans cette nouvelle fiche : fil d’ariane, titre du produit, avis clients, cross-selling, etc.
2. La deuxième étape consistait à vérifier que les nouveautés apportées n’allaient pas à l’encontre des recommandations Google : par exemple l’utilisation d’un bouton « Voir plus » au niveau des caractéristiques du produit pouvait cacher du contenu à Google (ce qu’il déteste !).

Conclusion :

Refondre une page ne se fait pas uniquement par une analyse d’expert, mais passe systématiquement par un test utilisateur. Celui-ci nous aide à comprendre ce qui est important où ne l’est pas pour eux. Et cela au delà des règles ergonomiques standards.

Plusieurs métiers sont également intégrés à la conception afin d’assurer le succès de la mise en production du point de vue SEO, mais aussi du point de vue technique (un développeur front-office est systématiquement intégré aux réunions de conception afin d’apporter son point de vue technique sur la faisabilité des éléments d’interface).

Enfin, il est essentiel de pouvoir mesurer le succès de nos actions. Ici cela a été fait en interne par l’équipe d’Electrodepot.fr, même si, dans d’autres cas, ce sont les équipes de notre partenaire Digitaleez qui s’en chargent.

ASOS a remporté le trophée du meilleur site ecommerce hier soir à la Nuit des Favor’i 2019, organisée par la FEVAD (Fédération du E-commerce et de la Vente à Distance). Et son ergonomie n’y est sans doute pas pour rien. Mais qu’est-ce qui fait qu’un site pour la mode est meilleur que d’autres à ce niveau ? Essayons de voir cela avec ASOS.

ASOS est taillé pour le mobile

C’est assez évident lorsqu’on regarde le site sur un écran d’ordinateur. Beaucoup de place (sur la page d’accueil) est mal utilisée ou perdue pour convenir à une organisation de l’information plus adapté au mobile. Et, en effet, lorsqu’on regarde le site sur un écran de smartphone, tout semble rentrer dans l’ordre. Les choses sont beaucoup plus construites, structurées et cohérentes. C’est un défaut que l’on retrouve souvent sur les sites pensés « mobile first » : la version mobile est plus cohérente que la version « desktop ». Est-ce un problème ? Disons que cela dépend de votre ROI par canal et de vos coûts de maintenance. Il est tout à fait possible de ne pas optimiser à 100% sa version « desktop » si plus de 70% de votre trafic passe par le mobile.

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

De la couleur et de la gaité

C’est une tendance qu’on avait déjà repéré sur certains sites hors de France (lire notre article : Tous les sites de ecommerce doivent-ils nécessairement se ressembler ?).On n’est plus obligé de faire du noir et blanc dans la mode. Loin de là ! Pour arriver à se distinguer, c’est même le contraire ! Il faut oser la couleur, les tons décalés, les graphismes à la main et les animations « inutiles ». On n’en est pas encore là chez ASOS, mais force est de constater que la page d’accueil a pris le chemin de cette nouvelle orientation graphique. Phase encore transitoire, sans doute, car le reste du site demeure encore assez classique à cet égard.

De la belle photo et de la vidéo

Depuis longtemps, ASOS a misé sur la photo et la vidéo. On retrouve là un de ses points forts en terme d’expérience client. Et sur un bel écran de smartphone, ça marche très bien. Les mannequins sont « shootées » de plein pied, on voit leur visage. Les vidéos sont simples, rapides, et donnent vraiment de l’information supplémentaire sur le produit. C’est une vieille recette, mais qui marche. De ce point de vue, on a une grande homogénéité sur toute l’offre, ce qui donne des pages listes agréables à regarder et crée une cohérence qui manque souvent à d’autres sites. Ici, l’ensemble des photos homogènes, de qualité, et donnent la même impression que lorsque vous entrez dans un magasin et que les rayons sont bien rangés. Et c’est un véritable plus !

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

En conclusion

On peut toujours améliorer l’ergonomie et l’expérience utilisateur d’un site de ecommerce. Surtout dans la mode où la prototypie des sites est très déterminée (beaucoup de sites se ressemblent et fonctionnent avec la même architecture d’information). Classique, ASOS utilise pourtant de vieilles recettes bien éprouvées et qui marchent. Un exemple à suivre, donc !