Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous soulignerons les deux domaines qui sont bien faits en plus de ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site actuel est Sonic Electronix, une entreprise d'électronique grand public. Faisons un saut et voyons ce que nous pensons!
Si vous souhaitez soumettre votre site Web pour qu'il soit présenté dans une future Critique de conception, cela ne prend que quelques minutes. Nous facturons 49 $ pour la critique de votre conception - bien moins que le coût d'un consultant pour consulter votre site! Vous pouvez en savoir plus ici.
À propos de Sonic Electronix
Sonic Electronix est l’un des principaux détaillants mondiaux d’audio automobile et d’autres produits électroniques grand public. Notre entrepôt contient plus de 15 000 appareils électroniques de haute qualité. Nous fournissons un service inégalé à des prix imbattables. Commencez dès aujourd'hui à construire le système audio de voiture de vos rêves et profitez d'un service de qualité et d'une expédition rapide. Nous proposons également une large sélection de produits audio professionnels, d’équipement pour DJ et de produits karaoké pour des applications allant du niveau débutant au spécialiste du son le plus sérieux.
Voici une capture d'écran de la page d'accueil:
Évaluez-le!
Premières impressions
Sonic Electronix ressemble à un détaillant en ligne assez typique. En un coup d’œil, il ya plusieurs aspects de la conception qui, à mon avis, sont bien faits. Je peux dire que des efforts ont été déployés pour donner au site un attrait esthétique, ce qui est formidable. J'ai vu d'innombrables autres sites de ce genre avec un véritable fouillis de page d'accueil.
Dès le départ, ce qui me plaît le plus, ce sont les clichés de produits propres et cohérents. Chaque produit est présenté sur un fond blanc et a l’air professionnel. Cette dédicace à la cohérence est tentée à travers le site sous différentes formes, par la répétition de couleurs, de styles de boutons, etc.
"Il y a des points où la page semble vraiment lutter avec le fouillis" ?Tout cela étant dit, il y a des endroits où la page semble être vraiment en train de lutter avec l'encombrement, comme le font la grande majorité des boutiques en ligne. En outre, divers ajustements et modifications peuvent être exécutés pour améliorer la convivialité et le flux de la page. En fin de compte, je pense que d’importantes améliorations pourraient être apportées. Décomposons-le et voyons comment.
Le commerce électronique est différent
La plupart des conceptions Web peuvent être abordées sous un angle similaire. Je peux prendre quelques principes de base de la conception et refondre le plus laid des sites Web. Ce qui est intéressant à propos du commerce électronique, c’est que c’est un domaine étrange où, à l’occasion, les sites avec la pire conception semblent être les plus performants.
"Nous devons garder à l'esprit lors de la critique d'un site comme celui-ci que ce genre fonctionne selon ses propres règles."Cela signifie-t-il que nous devrions intentionnellement rendre les sites de commerce électronique laids? Absolument pas. Cependant, lors de la critique d’un site comme celui-ci, nous devons garder à l’esprit que ce genre fonctionne selon ses propres règles et que certaines choses qui peuvent sembler vraiment importantes pour la conception d’un portefeuille sont presque sans importance dans cette situation.
C'est une bonne idée de regarder constamment dans l'industrie et de décider qui va bien et pourquoi. Lorsqu'une entreprise a des centaines de milliers de dollars à investir dans la recherche des schémas de présentation et des flux d'achats les plus efficaces, que propose-t-elle? En donnant les conseils ci-dessous, je vais essayer de saisir des références extérieures pour nous aider à rester sur la bonne voie.
Titre de la page
L'une des premières choses que je fais quand je visite un site est de regarder la barre de titre. Ceci est entièrement instinctif, le web m'a formé à penser que cela va me dire ce qu'est un site. Voici ce que je vois sur la page Sonic Electronix.
Comme vous pouvez le constater, la barre de titre se concentre uniquement sur le son de la voiture. Maintenant, je suis prêt à parier que c'est à des fins de référencement et qu'il s'agit davantage de bourrage de mots-clés que de transmettre des informations à l'utilisateur. Je suis tout à fait pour optimiser votre page pour les moteurs de recherche, mais pas si cela réduit l'utilité pour l'utilisateur, et c'est exactement ce qui se passe ici.
"Je suis tout pour optimiser votre page pour les moteurs de recherche, mais pas si cela réduit l'utilité pour l'utilisateur."Le problème ici est que, dès que je lis ceci, si je ne cherche pas de matériel audio pour voiture, je suis parti. Je ne regarderai probablement même pas le reste de la page, surtout si j'ai cinq onglets ouverts à partir d'une recherche Google et que je les parcoure rapidement pour voir quels produits contiennent les produits dont j'ai besoin.
Même si le système audio de voiture est votre plus gros vendeur, et il semble bien que ce soit le cas, je pense que cela pourrait être retravaillé pour offrir quelque chose de plus représentatif des produits que vous vendez. Par exemple: "Autoradio, GPS, sécurité, téléphones portables, etc.". Quelque chose comme cela frappe ces mots-clés que vous aimez tout en fournissant une description précise du site.
Entête
L’en-tête est l’un des principaux endroits sur la page où je vois des problèmes d’encombrement. Il s’agit d’un problème extrêmement courant sur tous les types de sites Web, car vous souhaitez en faire autant dans cette première impression très importante.
Alors que nous réfléchissons à la façon d’améliorer cet en-tête pour le rendre un peu plus convivial, voyons un peu en dehors de la perspective. Dès que j'ai commencé à parcourir divers sites de commerce électronique populaires, j'ai remarqué quelque chose de très intéressant sur la façon dont ils traitent l'espace dans leurs en-têtes. Voici deux exemples, le premier d'Amazon et le second d'Overstock.
Regardez la taille de ces barres de recherche! De toute évidence, ils considèrent que la fonction de recherche est probablement la destination principale des utilisateurs visitant leur site et souhaitent s'assurer de la mettre en évidence de manière aussi visible que possible.
"Je suggère définitivement de tester une page dont l'en-tête a été retravaillé afin de rechercher la fonctionnalité par-dessus tout."Sur Sonic Electronix, il existe une marge importante pour un vaste champ de recherche, mais elle est sacrifiée à la recherche d’autres idées. Je suggère certainement de tester une page dont l'en-tête a été retravaillé pour mettre en avant la recherche par fonctionnalité.
La navigation
Je suis retourné sur ce que je ressens à propos des méga-menus qui fourmillent dans un million de liens, mais cela semble bien fonctionner, par exemple, sur les sites de commerce électronique qui ont une tonne de contenu à parcourir. Les menus de navigation de Sonic Electronix sont bien organisés et permettent de repérer rapidement tout ce que je cherche à acheter.
Encore une fois cependant, je pense que l'encombrement des en-têtes travaille contre nous dans ce domaine. Si nous attirons nos yeux là où nous nous attendions au menu de navigation, nous le trouvons effectivement, mais il est un peu perdu dans un océan de liens, de dégradés, de coches, de menus déroulants, etc.
Un bon design consiste à prendre des décisions. Vous devez décider de ce qui est important et comment vous allez le souligner. Si vous vous efforcez de tout rendre important, vous ne faites rien d’important.
Articles en vedette
Ensuite, passons à la partie des éléments en vedette de la page. C'est ici que vous obtenez votre première dose visuelle réelle de la variété et de la qualité des produits proposés sur le site. Les éléments sont soigneusement disposés dans une grille et, comme je l’ai indiqué ci-dessus, utilisez un joli fond d’arrière-plan de studio avec beaucoup d’espace.
J'aime beaucoup ce domaine, mais j'ai quelques problèmes à résoudre. Tout d’abord, du point de vue de la convivialité, il est assez ennuyant que chaque zone entière ne soit pas une zone cliquable. Vous pouvez cliquer sur l'image, ainsi que sur le nom du produit et? Shop Now? bouton, mais si vous regardez sur divers autres sites, la tendance est de faire en sorte que je puisse cliquer n'importe où dans les limites de la zone pour accéder à la page du produit dédié. Avec la configuration actuelle, une personne peut prendre quelques clics pour bien faire les choses.
"Vous constaterez que les utilisateurs hésitent à appuyer sur les boutons des sites de commerce électronique, par crainte d'acheter quelque chose par inadvertance."En outre, je me sens comme le? Shop Now? les boutons sont vagues. Je ne suis pas tout à fait sûr de ce que cela signifie et comment cela se rapporte à ce qui se passe lorsque j'appuie sur le bouton. Est-ce que je ne fais pas mes courses à partir de la seconde, la page se charge? Ce bouton achètera-t-il l'article? Est-ce simplement quelque chose que je clique pour plus d'informations?
Vous constaterez que les utilisateurs hésitent à appuyer sur les boutons des sites de commerce électronique, par crainte d'acheter quelque chose par inadvertance. Lorsque vous créez un bouton, assurez-vous qu'il me prépare adéquatement à ce qui va se passer lorsque j'appuie dessus.
Pourquoi magasiner Sonic?
Ma partie la moins préférée de la page est la? Pourquoi magasiner Sonic? section près du bas. Cette section est simplement une boîte avec quatre gros paragraphes. Ce n'est pas vraiment? Conçu? tellement que jeté dedans. Il se sent comme si c'était une grande quantité de contenu que le concepteur n'avait juste aucune idée de quoi faire:
C’est un bloc important d’informations ennuyeuses que je ne lirai jamais en tant qu’utilisateur, à moins que vous ne le rendiez plus intéressant. Alors, comment pouvons-nous résoudre ce problème? Il s'avère que le contenu ici est vraiment une liste de fonctionnalités: expédition rapide, paiements sécurisés, etc. Avec ces informations en tête, il n'est pas difficile de trouver une inspiration solide. Découvrez comment l'Apple Store en ligne résout ce problème:
Vous voyez à quel point c'est mieux? Dans la section Sonic Electronix, tout est jeté dans une colonne longue et fastidieuse, dépourvue d’images ou de visuels attrayants. Apple a adopté une approche très différente en divisant le contenu en quatre colonnes, en réduisant le texte à un paragraphe et en attirant votre attention avec de superbes icônes et des photos.
Bas de page
Un dernier commentaire avant de terminer cette critique: Je pense que le pied de page est un peu ennuyeux:
Je ne suis pas sûr que vous ayez besoin des points soulignés ni du lien souligné, mais je suis persuadé que l’un et l’autre rendent simplement difficile la lecture de cette zone. Si je devais abandonner un, je jetterais les soulignements pour que le pied de page ressemble davantage à celui de Newegg.com:
Les différences entre ces deux pieds de page sont subtiles pour l'œil non averti, mais celle de Newegg a l'air tellement plus nette et plus facile à parcourir.
Conclusion
Globalement, je pense que le site Sonic Electronix a bien démarré, mais ils doivent repenser la hiérarchie des informations. C’est le problème que nous avons rencontré maintes et maintes fois en parcourant la page.
«Présenter le contenu de manière logique, navigable et attrayante est l’un des principaux objectifs de la conception Web.Présenter le contenu de manière logique, navigable et attrayante est l’un des principaux objectifs de la conception Web. Des informations surchargées et un peu de paresse de la part du concepteur dans des cas comme le "Why Shop Sonic"? section retiennent le site de ce qu’il pourrait être.
En fin de compte, je suggère quelques études de suivi des clics pour voir ce que les utilisateurs aiment / ont besoin. Utilisez ces informations pour réduire ce qui n’est pas efficace et souligner ce qui est. Je soupçonne fortement que des éléments tels que la barre de recherche pourraient être beaucoup plus efficaces s'ils étaient plus visibles.
À ton tour!
Maintenant que vous avez lu mes commentaires, apportez votre contribution en donnant quelques conseils supplémentaires au concepteur. Dites-nous ce que vous pensez être génial à propos de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons d'être également respectueux du concepteur du site et d'offrir des conseils clairs et constructifs, sans aucune insulte dure.