18 sites de commerce électronique avec une conception UX sans faille (et 3 grands noms qui craignent)

Si vous nous avez rejoints pour notre article UX plus tôt ce mois-ci, vous savez que nous avons discuté des 25 éléments de conception UX essentiels pour votre site Web..


L’idée de base est la suivante: la conception UX consiste à pénétrer dans la tête de votre visiteur. Il s’agit de créer une expérience simple, transparente et agréable pour vos utilisateurs. L’idée est de livrer des informations rapidement et même de les faire sourire.

Un bon design UX déclenche la dopamine et le bonheur de vos visiteurs. Et cela les rend plus susceptibles de vous faire confiance. Surtout, cela les rend plus susceptibles d’acheter chez vous.

Après avoir passé en revue les 25 principes de base de notre dernier article sur la conception UX, voyons comment cela fonctionne en action. Plus précisément, nous examinons la conception UX des sites Web de commerce électronique.

Comment ces sites Web utilisent-ils des astuces de conception UX intelligentes pour encourager leurs visiteurs à acheter?

1. Asos

J’utilise beaucoup l’exemple d’Asos, mais il y a une bonne raison à cela. Leur design UX est brillant.

Tout commence par une proposition de valeur éliminatoire. Grande image, explication simple, la garantie de «livraison gratuite» et les appels évidents à l’action vous orientant vers la section hommes ou femmes.

asos2

L’une des fonctionnalités UX les plus remarquables est la passerelle vidéo, afin que les visiteurs puissent réellement voir à quoi ressemble une tenue. Il donne aux clients la meilleure vue possible des articles et leur donne la confiance d’acheter.

Ils ont également une excellente nouvelle fonctionnalité appelée «vue rapide». Sur leur page produit, vous cliquez sur «aperçu rapide» et une petite fenêtre contextuelle apparaît avec des images supplémentaires et toutes les informations dont vous avez besoin. Il évite au client de cliquer d’avant en arrière sur différentes pages. Conception simple et intuitive.

asos

2. Zara

Le site Web de Zara est une masterclass de simplicité. Propre, intuitif et limité. C’est une ode à Loi de Hick: un principe de conception qui limite le choix de navigation et offre à l’utilisateur des options claires mais restreintes.

L’idée est que trop d’options submergeront votre visiteur. En offrant moins de choix, ils se sentent plus en confiance. Nous verrons une navigation plus excellente tout au long de ce post, mais Zara est l’un des meilleurs.

zara

3. Abof

Abof (All About Fashion) utilise une astuce UX incroyablement intelligente sur leur site Web. Accédez à la page d’accueil et cela ne ressemble pas à un site de commerce électronique traditionnel. Au lieu de cela, cela ressemble plus à un blog. Il est plein de contenu juteux qui inspire son public.

abof

Dans leurs histoires et articles, ils mettent ensuite en évidence les vêtements dans une section importante intitulée «Achetez l’histoire». Dans notre précédent article UX, nous avons parlé de l’importance de créer une relation avec votre public. Abof le fait parfaitement avec des histoires et du contenu relatables.

sur 2

Ce n’est qu’une fois que le client est inspiré qu’il essaie de vendre quelque chose.

Sur leur page de produit, ils ont des notes utiles de «conseils de style», qui sont de parfaits exemples de «micro-interactions» – de petites pépites qui atteignent et engagent votre public.

sur 3

Notez qu’ils ont également un «guide des tailles» pour aider les clients à obtenir leurs bonnes mesures exactes (la peur que les vêtements ne correspondent pas est l’une des principales raisons pour lesquelles nous abandonnons les paniers d’achat). Ils utilisent également une section «livraison estimée» pour donner aux clients encore plus d’informations.

4. Berghaus

Berghaus est une marque de vêtements d’extérieur, mais vous saurez que dans la première seconde de l’atterrissage sur leur site.

berghaus

Il s’agit d’une marque qui comprend intimement son public cible et s’assure de se connecter avec eux le plus rapidement possible. Le premier coup de héros est une invitation inspirante. Il se connecte avec la communauté et vous incite à.

Le seul inconvénient? Un appel à l’action plus fort scellerait vraiment l’accord ici.

5. Apple

Vous vous attendez à ce qu’une entreprise qui place le design et l’innovation au cœur de l’excellence dans la conception UX, et ils le font. Consultez leurs pages de produits pour commencer.

Ils utilisent défilement parallaxe pour rendre les images dynamiques, en attirant l’utilisateur et en éliminant tout point de sortie. Vous êtes plongé dans le monde d’Apple.

Capture d'écran du 28/07/2016 à 8h43

Des animations intelligentes vous montrent exactement comment fonctionnent les produits, comme la nouvelle touche 3D. Les galeries défilantes vous invitent à interagir et à explorer, et une copie intelligente vous indique exactement comment le nouvel iPhone améliorera votre vie (plutôt qu’une longue liste de caractéristiques).

Leur navigation est simple et propre, et j’aime leur utilisation d’images pour différencier davantage les options (nous scannons le Web, donc les mots ont l’habitude de se fondre les uns dans les autres)

pomme 2

Pendant le processus de paiement, ils vous donnent la possibilité de discuter avec un spécialiste lors de l’achat. C’est une astuce simple mais utile. Cela donne aux débutants un peu d’aide sur la ligne, mais n’empêche pas les acheteurs confiants de sortir leur carte de crédit.

6. Bellroy

En tant que vendeur de commerce électronique relativement nouveau, votre première tâche consiste à montrer aux clients à quel point vous êtes différent des autres. Bellroy le fait parfaitement avec sa gamme de portefeuilles minces et compacts.

bellroy 3

Mieux encore, sur ses pages produits, chaque portefeuille a sa propre vidéo, montrant aux clients toutes les fonctionnalités uniques.

bellroy 4

7. Louez la piste

Rent The Runway a un concept assez unique: vous empruntez une robe ou une tenue pour quelques jours, plutôt que de l’acheter. C’est idéal pour les mariages ou les événements où vous ne voulez pas débourser pour une tenue que vous ne pourrez plus jamais porter.

Le site Web présente le concept simplement, puis invite l’interaction des utilisateurs, les incitant à choisir l’occasion.

location de piste

Des marques supplémentaires pour leur calendrier de livraison, permettant aux clients de savoir exactement quand la tenue arrivera et quand elle devra être retournée.

location de piste 2

Si simple mais si rassurant.

8. Amazon

Amazon est le plus grand site de commerce électronique au monde, et franchement l’un des meilleurs. Vous pourriez choisir l’une de leurs fonctionnalités comme exemple de conception UX.

De leurs offres intelligentes aux recommandations de leurs clients, ils anticipent les besoins de leurs utilisateurs et livrent. Cependant, c’est leur système de commande en un clic que nous mettons en évidence aujourd’hui.

amazone

C’est toujours le meilleur exemple d’efficacité de paiement sur le Web. Au cœur de la conception UX du commerce électronique se trouve le processus de panier et de paiement. Le plus lisse sera le mieux. Et cela ne se fait pas plus facilement que la commande en un clic!

9. Brouter

Une image qui vous dit tout ce que vous devez savoir. Libellé et design avec une personnalité. Une remise immédiate pour les nouveaux utilisateurs et un appel à l’action audacieux et audacieux.

pâturer

Ceci est une masterclass simple dans la conception UX.

10. TopShop

Les magasins qui vendent beaucoup de produits ont un travail beaucoup plus difficile en matière de conception UX. Comment organiser chaque paire de jeans et les présenter?

Heureusement, TopShop a un excellent plan. Avec un grand cadran de filtre volumineux qui flotte avec la page, vous pouvez constamment modifier et changer le style, la couleur, l’ajustement et le prix de vos produits.

Topshop 2

Encore plus cool, chaque produit passe à une image du modèle qui les porte lorsque vous survolez avec votre souris. Il encourage l’interaction et donne aux clients un meilleur aperçu des articles.

11. Protestation

Protest pourrait bien avoir la navigation la plus grande et la plus grasse du Web.

P

C’est clair, succinct et épuré. Cela réduit également les risques d’errance du client. La couleur bleue maintient l’attention du client là où il le souhaite.

Protest utilise également une tonne de minuscules animations sur leur site. Chacun se déclenche lorsque vous le faites défiler. Il retient l’attention du client, encourage l’interaction et rend l’ensemble du site dynamique.

12. nouveau look

New Look obtient une place sur la liste pour son panier innovant. Il se trouve sur leur barre de navigation à tout moment avec un indicateur en gras pour vous rappeler qu’il est là.

New Look 2

Lorsque vous cliquez dessus, il ne vous fait pas glisser vers une autre page. Au lieu de cela, vous obtenez un panneau coulissant se déplaçant vers le côté pour vous montrer ce qu’il y a dans votre sac. Cela signifie que les clients ne se perdent jamais et qu’ils peuvent facilement commander quand ils le souhaitent.

Nouveau look

13. Crayon, par 53

Si vous allez vendre un stylet à près de 60 $, vous devez vraiment le vendre! Heureusement, ‘Pencil’, par 53, fait un excellent travail, en utilisant un certain nombre d’astuces de conception UX.

Ils utilisent une longue page de défilement parallaxe pour expliquer toutes les fonctionnalités et vous montrer exactement ce que vous pouvez en faire.

crayon 2

Ils capitalisent également sur d’excellentes critiques pour expliquer pourquoi ils sont tellement meilleurs que les autres options disponibles. Utiliser une citation de «Wired» est une astuce brillante pour donner de la crédibilité au produit et souligner ses avantages.

Crayon

14. Farmdrop

Dans notre dernier article sur la conception UX, nous avons expliqué combien il est important de sympathiser avec votre public cible et de vous connecter avec lui. Farmdrop le fait en mettant son énoncé de mission au premier plan.

ferme

Ils sont «malades et fatigués de voir de la nourriture provenant de kilomètres». C’est quelque chose que la plupart des clients peuvent intégrer. Avant d’essayer de vous vendre quoi que ce soit, ils communiquent avec vous et vous donnent une raison d’acheter.

15. Sid Mashburn

Juste un autre grand menu déroulant, complet avec de petites icônes. C’est une astuce simple qui nous aide à donner un sens à un menu complet. De plus, cela donne au site un peu plus de personnalité.

Icônes

16. Montres lentes

Ceci est une montre avec une seule main. C’est un concept assez unique, il faut donc l’expliquer! Slow Watches le fait très bien avec une vidéo d’explication en plein écran.

montres lentes

En plus d’expliquer le concept, ils parlent également de leur philosophie derrière la création (idéal pour se connecter avec le client), et ils utilisent de belles images qui mettent en évidence et ciblent leur public idéal.

17. Firebox

Lorsque vos articles ne rentrent pas dans les catégories normales, faites preuve de créativité! Firebox est spécialisé dans les cadeaux insolites et les articles irrévérencieux. Leur top 50 est le moyen idéal pour découvrir leurs produits les plus populaires.

images

La disposition de la boîte est idéale pour parcourir rapidement les produits, et de nombreuses images sont dynamiques, en mouvement et en interaction avec le client.

Puisqu’ils se spécialisent dans les cadeaux, ils ont également un «chercheur de cadeaux» sur leur barre de navigation, un moyen fantastique pour affiner les options.

18. Lazy Oaf

Les achats en ligne sont souvent similaires, et beaucoup manqueront l’ancien processus consistant à feuilleter un magazine ou un catalogue.

Lazy Oaf ramène cela avec sa section «lookbooks» sympa. Plutôt que de disposer les vêtements un par un, ils montrent les tenues dans différentes combinaisons à la fois. Après tout, c’est comme ça qu’ils regardaient dans un catalogue.

paresseux

Cliquez sur les images et vous obtenez une boîte «achat rapide» pour choisir chacun des trois articles exposés. C’est une façon plus old-school et immersive de faire du shopping.

Ce qu’il ne faut pas faire!

Nous n’aimons pas déchirer d’autres sites Web, mais il y a de grands noms qui se trompent… Voici un ou deux des pires contrevenants.

1. Maison de Fraser

Ils sont l’un des plus grands magasins au monde, mais ils font une énorme erreur dès que vous chargez leur site Web.

Tout de suite, vous êtes frappé par une fenêtre contextuelle pleine page vous demandant de vous abonner à leur newsletter.

Hourse of Fraser

Même s’ils sont un grand magasin de noms, c’est une tactique très insistante qui découragera la plupart des acheteurs. N’oubliez pas, c’est la première impression. Il est préférable de créer un parcours utilisateur qui éduque et inspire votre visiteur avant de demander une adresse e-mail.

Non seulement cela, mais il n’y a aucune réelle incitation à s’inscrire à leur newsletter. Une remise du code de réduction serait une excellente option ici, et pourrait aider les clients à pardonner la fenêtre contextuelle invasive.

2. Wal Mart

Wal Mart a un défi difficile à relever. Ils vendent à peu près tout, alors comment procéder pour le catégoriser et le simplifier? Eh bien, je ne suis pas sûr… mais pas comme ça…

Wall Mart

Malheureusement, ce n’est qu’un gâchis de catégories qui est presque impossible de trouver ce que vous cherchez.

Il y a tout simplement trop d’informations en cours ici. Lorsque vous présentez à vos utilisateurs trop d’options, ils paniquent souvent et quittent.

3. Ray-Ban

C’est un choix un peu méchant, car la plupart du site Web de Ray-Ban est très convivial. En fait, il a une tonne de fonctionnalités intéressantes.

Cependant, ils font quelque chose que beaucoup de sites de commerce électronique font qui agace vraiment les clients. Cette:

interdiction des rayons

Vous avez probablement vu une page comme celle-ci cent fois. Cela ne semble pas si mal, mais cela crée en fait un obstacle de plus à la vente.

Si vous êtes un ancien client, vous vous demandez maintenant quel mot de passe vous avez créé. Si vous ne vous en souvenez pas, vous devrez suivre tout le processus de “mot de passe oublié”. Vous pourriez perdre ce client à tout moment…

Si vous êtes un nouveau client, il y a une caisse d’invité, bien sûr, mais tout ce que vous avez fait est de leur donner un autre bouton à cliquer. Une autre chance de cliquer.

À ce stade, votre client est complètement déconnecté de son panier et du processus d’achat. Ne le faites pas glisser, verrouillez simplement la vente!

Un excellent design UX concerne les petits ajustements qui facilitent les choses pour vos clients. Ces 18 sites Web le font parfaitement.

Quelles fonctionnalités utiliserez-vous sur votre propre site Web?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map