Les sites de commerce électronique sont notoirement occupés et surpeuplés.
Aujourd'hui, nous allons examiner une tonne de magasins en ligne qui rompent cette tendance en étant à la fois fonctionnels et attrayants. Chacun des exemples ci-dessous présente une leçon unique à nous apprendre sur la bonne conception du commerce électronique. Commençons!
D'abord, le problème
Avant de pouvoir apprécier des sites bien conçus, nous devons réfléchir à ce qui ne va pas avec le format de commerce électronique traditionnel. Une personne sage a déjà fait remarquer qu'un chameau est un cheval conçu par un comité. Cette blague intelligente s’applique certainement aux sites de commerce électronique. Les boutiques en ligne de grands noms ont souvent beaucoup trop de commentaires de la part de trop de personnes, ce qui entraîne un fouillis de bonnes intentions et de superbes idées de fonctionnalités qui n'ont jamais été correctement intégrées les unes aux autres de manière synergique.
La capture d'écran ci-dessus ne représente qu'une petite partie de la page d'accueil de Kmart.com. Comme vous pouvez le voir, c'est une épave de train. Naviguez sur le site et vous verrez que la page prise dans son ensemble est encore pire. Comme Kmart.com, de nombreux sites de commerce électronique souffrent d'un fouillis immense. Il y a tellement de concurrence pour attirer votre attention que le résultat final est que vos yeux se balancent d'un endroit à l'autre sans but réel ni concentration.
Maintenant, la solution
Examinons en détail certains sites qui ont bien fonctionné. En examinant chacun des sites ci-dessous, comparez l'interface avec celle de Kmart pour voir à quel point une mise en page propre et simple peut être plus efficace.
Xtreme Mac
Xtreme Mac offre l'expérience de magasinage la plus originale et la plus innovante que j'ai trouvée lors de ma recherche (Icon Dock ci-dessous était une seconde près). Vous êtes présenté avec une simple grille de photos de produits avec des effets de survol lumineux et colorés. Lorsque vous cliquez sur un élément, au lieu d'être redirigé vers une page dédiée, l'ensemble de la grille se déplace de manière fluide afin que la cellule sélectionnée puisse être agrandie jusqu'à huit fois sa taille normale. Vous recevez ensuite une photo plus grande du produit, une brève description et l'option d'en savoir plus ou d'acheter maintenant. Cliquez sur un autre élément et la présentation dynamique change à nouveau pour inclure cet élément.
J'ai trouvé l'interface Xtreme Mac magnifique et amusante à jouer. Faire en sorte que vos visiteurs soient non seulement impressionnés par la conception de votre site, mais aussi par l'expérience de magasinage, est le saint graal de la conception de commerce électronique. Plus ils apprécient votre site, plus ils y consacrent du temps. Ce qui les rend théoriquement plus susceptibles d’acheter quelque chose (le but ultime de tout site de commerce électronique!).
Station d'accueil Icon
Dès le départ, vous pouvez voir que Icon Dock est un magnifique site regorgeant d’illustrations de premier ordre. Ce que je préfère à Icon Dock, c’est la façon dont ils ont géré les paniers. Certains sites Web rendent difficile la visualisation et la modification du contenu de votre panier, mais Icon Dock vous offre un "dock" visuel. d'icônes qui reste avec vous pendant que vous magasinez. Lorsque vous souhaitez ajouter quelque chose, faites simplement glisser l'icône vers le dock pour le déposer. Ensuite, si vous souhaitez supprimer quelque chose du dock, appuyez simplement sur le petit? X? sur l'icône.
Ceci est conçu de manière si intuitive que vous n'avez vraiment besoin d'aucune instruction. Cela fonctionne exactement comme vous vous en doutez. Et pour ceux qui ne l’ont pas tout de suite, il ya toujours l’ancienne option de cliquer sur un? Ajouter au panier? bouton. C'est une caractéristique importante. Lorsque vous concevez une interface interactive unique, demandez-vous toujours s'il convient d'inclure la méthode traditionnelle pour ceux qui ne comprennent peut-être pas votre nouvelle idée fantaisie. Cela vous permet de tracer votre propre chemin en interactivité tout en préservant la convivialité.
Nike
Désolé, je déteste Flash, mais j'aime beaucoup ce site. Pour concéder un peu, les temps de chargement pour chaque page sont assez pénibles. Cependant, l’ensemble du site est un régal visuel impressionnant. Comme Kmart, ils ont une tonne d’articles à vendre (peut-être pas autant, mais l’argument est toujours valable), mais au lieu d'encombrer la page d'accueil d'éléments incompatibles, Nike a intégré tous les éléments visuels de la page. manière transparente. Ils ont plus de dix sections uniques sur une seule page, mais leur apparence est parfaitement cohérente. Regardons quelques-unes des choses qu'ils ont faites pour accomplir cela.
La première chose qu'ils ont faite pour réduire l'encombrement est assez simple. Au lieu d'empiler des bannières de tailles aléatoires faisant la promotion de différents éléments les unes sur les autres, comme Kmart, Nike propose une bannière principale qui effectue la rotation entre trois messages. Ce n’est sûrement pas révolutionnaire, mais c’est un facteur trop peu pris en compte par les concepteurs confrontés au chargement d’une page à ras bord avec du contenu. Des bibliothèques préconfigurées telles que jQuery simplifient considérablement ce type de contenu en rotation et permettent de donner vie à une page par ailleurs statique, de manière subtile et non gênante.
La prochaine chose que Nike a faite pour réduire l’encombrement consiste à placer toutes les sections situées sous la bannière principale sur une couleur de fond continue afin d’éviter les chutes. regardez vous obtenez avec les boîtes d'articles de vente dans la conception de Kmart. Cela donne à la page entière le même aspect que si elle avait été construite au même moment par les mêmes concepteurs, par opposition à un ancien design dans lequel vous écrasez de plus en plus d'éléments mal assortis au fil du temps. Tout est une question de synergie.
Dyson
La leçon que nous pouvons tirer de Dyson est que vous pouvez faire du shopping pour un aspirateur une sensation comparable à celle d’une Mercedes. Peu importe ce que vous vendez, si vous voulez que votre produit ait l'air haut de gamme, inspirez-vous des sites Web vendant des voitures de luxe, des yachts ou tout ce qui coûte plus cher que le mois précédent. Le fond noir et gris est vraiment complété par des touches de blanc et / ou de bleu qui sortent vraiment de la page avec contraste. Ce qui vole vraiment la vedette, ce sont les photographies de produits (autant de Photoshop que de photos réelles), qui capturent vraiment l’essence de la conception attrayante du produit. Notez également la bannière en rotation comme dans l'exemple Nike.Vous verrez cela à maintes reprises dans les exemples ci-dessous pour une bonne raison: il s'agit simplement d'un excellent moyen de placer une tonne de contenu dans un petit espace sans aucune image de fond.
SkinBox
Skinbox simplifie énormément l'achat de skins de forum. La page d'accueil est principalement composée d'une grande section présentant leurs thèmes. Les catégories logiques (clair, foncé, professionnel, etc.) facilitent la recherche immédiate du type de peau que vous recherchez. Les peaux de chaque catégorie sont affichées dans une grande grille avec la possibilité d’acheter maintenant ou de voir plus d’informations sur la peau. La dernière option est importante. Les sites de commerce électronique remplissent trop souvent une page avec des informations de produit ennuyeuses, ce qui entraîne une mise en page lourde en texte qui tente de vendre quelque chose qui est vraiment tout à fait visuel (du moins dans ce cas). Si vous vendez le design d'un article, envisagez de placer les détails de fonctionnalité derrière un? Plus d'infos? bouton pour que les utilisateurs qui veulent cette information puissent facilement la trouver et que ceux qui ne font que naviguer ne soient pas distraits.
DropBags
Honnêtement, je n'ai aucune idée de ce que vend ce site. Le? Comment utiliser? La section dit quelque chose sur le fait de mettre le sac dans un seau, de le remplir avec des plantes et de la glace et de le remuer, mais je ne peux pas imaginer pourquoi je voudrais jamais geler la vie végétale. Ils voudront peut-être que je pense que c'est scientifique, mais je suis sûr que c'est de la sorcellerie.
Le fait est que c'est un produit génial. Ils vendent un sac que vous mettez dans un seau. C'est pas grave? Cependant, ils ont créé le site autour du sac seau fou si attrayant que j'étais presque convaincu que j'en avais besoin. En tant que concepteur Web, vous ne pouvez pas toujours accéder au compte Nike. Parfois, vous obtenez un client qui veut vendre un kit d'extraction polyvalent? c’est essentiellement une doublure de seau trop chère. Dans ces circonstances, vous devriez déployer le même effort et la même créativité que si vous travailliez pour un client renommé. Rendez l'expérience de magasinage aussi simple et directe que possible et rendez l'environnement du produit attrayant et attrayant.
IKEA
Ikea remporte le prix de l'expérience de magasinage la plus interactive. Lorsque je reçois le catalogue Ikea par la poste, mon épouse et moi-même adorons nous asseoir ensemble et le parcourir ensemble pour trouver des idées de design et voir quels nouveaux produits cool ils ont mis au point. Cela est agréable car l'expérience Ikea a été soigneusement structurée pour que parcourir le catalogue soit comme une promenade dans leur salle d'exposition. Au lieu d'être présentés avec des éléments individuels, vous voyez la photographie personnalisée de toute une pièce entièrement composée de produits Ikea. Ils vous fournissent des informations utiles sur le coût de chaque élément, ainsi que sur le coût d'achat de l'ensemble de la pièce. Cela aide les personnes normales qui ne connaissent pas bien la décoration d'intérieur à créer de belles pièces.
Ikea a récemment transféré cette expérience dans sa boutique en ligne. Ce que vous obtenez est une expérience qui ressemble beaucoup à parcourir le catalogue, mais beaucoup plus interactive et dynamique. Vous pouvez cliquer sur les icônes situées à côté de certains produits pour voir de plus près ou afficher les fonctions masquées, modifier les vues pour parcourir la pièce ou ignorer la vue de la pièce et consulter une simple grille de produits. Comme certains des exemples ci-dessus, Ikea vise une expérience de magasinage non seulement agréable, mais qui pourrait même être considérée comme amusante. Si vous construisez un site de commerce électronique, réfléchissez à la façon dont vous pouvez animer l'expérience en ajoutant quelque chose d'un peu plus interactif que votre magasin en ligne moyen.
Voleur de cave
Cellar Thief est juste un bon exemple de création web créative. Les concepteurs ont mélangé les tendances actuelles de la conception Web avec des textures riches et des couleurs vives de l'industrie du vin pour créer un magasin en ligne incroyablement attrayant. Notez qu'ils ne vendent en réalité que trois vins distincts, ce qui représente un ensemble de produits plus petit que celui que vous envisagez probablement dans vos projets, mais cet exemple est riche en enseignements.
Tout d’abord, mis à part les vins à la vente, il y a un contenu secondaire sur la page, comme des conseils sur les vins, un blog, etc. Notez que chacune de ces petites sections a été placée à droite d’une page remplie avec texte aligné. Ceci est structuré de sorte que la première chose que vous voyez (en regardant la page de gauche à droite) soit le contenu principal: le produit à vendre. Ce n'est qu'après avoir regardé la page pendant quelques secondes que vous avez remarqué le contenu secondaire. Sur cette page particulière, cela ne serait pas vrai si ce contenu était placé à gauche. Aligner à gauche ce contenu secondaire pourrait lui donner une position primaire non méritée dans la hiérarchie visuelle. Essayez toujours d'imaginer l'ordre dans lequel un visiteur verra les objets sur la page et structurera votre contenu en conséquence.
Une dernière chose à propos de l'organisation de l'information. Vérifiez la quantité de contenu associé à chaque vin. Imaginez maintenant à quoi ressemblerait la page si le concepteur n’avait pas pensé à diviser cette information en onglets. À l'instar de la bannière de contenu pivotante évoquée ci-dessus, les onglets constituent un moyen élégant et efficace de stocker une quantité ridicule de contenu dans un espace restreint et convivial. Lors de la conception de supports imprimés, je supplie constamment mes clients de réduire les informations requises en raison de contraintes spatiales. En revanche, la conception de sites Web vous donne beaucoup plus de liberté pour fournir la richesse d'informations souhaitée par votre client, de la manière contenue que requiert une bonne conception.
Sites de commerce électronique plus attrayants
Voici d'autres exemples de concepteurs qui ont surmonté la stigmatisation encombrante et encombrante du commerce électronique en mettant l'accent sur l'aspect esthétique et la fonctionnalité. Arrêtez-vous à chaque exemple et recherchez les choses que nous avons mentionnées ci-dessus.Il existe de nombreux exemples d'achats simples mais amusants, de photographies / illustrations étonnantes et d'organisation de contenu créatif pour vous inspirer à la grandeur du commerce électronique.
Bébé quasar
Ooga Zone
ShoeGuru
Madsen Bicycles
i / denti / tee
Abercrombie & Fitch
Sucr?
ADN11
MacStylez
Un + seulement
Douze sud
Sony
Conclusion
Maintenant que nous avons examiné ce que je considère être la bonne et la mauvaise façon de concevoir un site de commerce électronique, j'aimerais connaître votre opinion. Dites-nous ce qui vous énerve au sujet des achats en ligne et ce que vous aimez ou ce que vous détestez des exemples ci-dessus.
Pour encore plus d’inspiration pour le commerce électronique, consultez Cart Frenzy, une galerie consacrée à la conception de magasins en ligne.