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 d'aujourd'hui est Peter and James, un détaillant de bijoux en ligne.
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 34 $ pour critiquer votre conception, ce qui est nettement moins que ce que vous paieriez pour qu'un consultant examine votre site! Vous pouvez en savoir plus ici.
A propos de Peter et James
«En matière de haute joaillerie, Peter & James ne vend que le meilleur. Des magnifiques pierres précieuses serties dans de superbes argent sterling et or blanc à notre éblouissante collection de bracelets de diamants en maille italienne, chaque pièce que vous trouverez sur notre site Web est vraiment exceptionnelle. Nous nous engageons à fournir à nos clients le meilleur rapport qualité-prix, qualité, service et sélection de bijoux de créateurs disponibles. Nous suivons les styles et les tendances de la mode les plus en vogue pour nous assurer de toujours proposer en ligne les bijoux les plus récents et les plus demandés.
Voici une capture d'écran de la page d'accueil:
Impression initiale
Mon impression initiale ici est définitivement positive. Peter et James est un superbe site web. La page d'accueil est extrêmement simple, ce qui est excellent pour attirer votre attention sur la photo percutante de la femme avec les bracelets.
Les changements que je proposerai aujourd'hui sont assez minimes compte tenu de la conception générale. Même les grands concepteurs peuvent toujours utiliser un ensemble supplémentaire d'yeux pour se peigner et suggérer des moyens d'affiner la conception et la convivialité d'un projet.
Commençons par fouiller dans l'en-tête pour voir ce que nous pouvons améliorer.
Alignements d'en-tête
Le premier problème que je remarque lorsque je regarde en haut de la page est que l’alignement horizontal des objets des côtés gauche et droit est un peu aléatoire.
En vérité, je vois ce que fait le concepteur et c'est en fait tout à fait intentionnel. Les éléments inférieurs sont censés être légèrement en retrait, ce qui est une pratique courante dans la mise en page. Le problème avec cela ici cependant, c'est que la page est si simple qu'il n'y a que quelques objets sur la page. Si vous aviez plus à aligner ci-dessous, cela pourrait fonctionner mieux, mais dans sa version actuelle, chaque article semble avoir sa propre position horizontale unique, ce qui conduit à une sensation légèrement encombrée.
La solution simple consiste à utiliser l'image principale comme un avantage fort pouvant être suivi des deux côtés. Les boutons en haut à droite peuvent probablement rester là où ils se trouvent, mais je vous recommande de déplacer la navigation à gauche et le champ de recherche à droite afin que les éléments d'en-tête ressemblent approximativement à l'image ci-dessous.
Survol de navigation
Un autre changement minime consiste à ajouter un effet de survol notable sur les liens de navigation. Ce n'est pas tant un changement esthétique qu'un coup de pouce dans la convivialité. Voir un changement significatif se produire en vol stationnaire fournit un retour positif à l'utilisateur et lui garantit qu'il fait ce qu'il convient de faire. Vous voulez qu'ils survolent la navigation et cliquent plus loin sur le site, ajoutez donc un petit effet qui renforce cette action.
Actuellement, le curseur change mais je ne suis pas sûr que cela soit suffisant. La couleur est toujours une autre option, mais je ne suis pas sûre que ce soit approprié ici. Un simple soulignement peut être mis en œuvre avec un minimum de CSS et préservera l'intégrité de la conception tout en ajoutant un retour visuel clair.
Image primaire
Le véritable attrait esthétique de cette page peut être attribué à la grande image vue ci-dessus. Cela donne parfaitement le ton au site et donne à la page un point central clair. Mon seul problème avec cette image est que j'en veux plus!
Ce site Web vend des boucles d'oreilles, des colliers, des bracelets et des bagues. Cette image montre seulement les bracelets. Je pense qu'il y a beaucoup de potentiel ici pour rendre le site plus dynamique et pour accrocher certains clics vers d'autres sections.
Je vous recommande d'imiter ce style et de le créer en quatre images différentes, une pour chaque section. De là, vous avez deux choix. Le premier est un simple diaporama. Rien d'extraordinaire ou de gênant, juste une lente dissolution dans l'image suivante après plusieurs secondes. Si vous n'êtes pas un fan des diaporamas, une alternative possible consiste à faire apparaître aléatoirement l'une des quatre images lors du chargement de la page. Je préfère la première option, mais la dernière pourrait donner lieu à des tests A / B intéressants pour voir quel scénario conduit à de meilleurs résultats d'achat.
produits présentés
La section des produits en vedette apparaît directement sous l'image principale. Il y a beaucoup de choses à aimer dans cette section, mais c'est aussi un peu difficile dans certains domaines. Tout d'abord, l'effet de vol stationnaire avec les bracelets est excellent. Lorsque vous survolez un bracelet, la photo se retourne pour vous montrer l'autre côté. Il s'agit d'une solution fantastique et amusante pour afficher un produit en trois dimensions dans un espace en deux dimensions.
Comme vous pouvez le voir dans l'image ci-dessus, le survol apparaît également dans cette petite boîte d'informations sur les prix. J'aime cette idée, mais l'exécution semble un peu décalée. Dans l’ensemble, l’espace disponible est mal utilisé. Le prix et la description sont poussés trop loin sur les bords et n'ont pas beaucoup de place pour respirer. De plus, les deux boutons du bas sont étrangement poussés vers la droite, pas assez, mais assez loin pour ne pas être exactement à droite ou centrés.
Ma recommandation ici est de passer un peu de temps à jouer avec ces éléments pour voir comment vous pouvez mieux utiliser cet espace. Réorganisez chaque élément, ajustez la taille de quelques éléments et voyez si vous ne pouvez pas proposer quelque chose d'un peu plus attrayant et lisible.
L'image ci-dessous est ma tentative rapide de deux minutes. Ce n'est pas le meilleur mais cela montre au moins une bonne idée générale de la façon d'utiliser l'espace de manière plus efficace.
Photos du produit
Mon dernier commentaire dans ce domaine concerne également les pages produits. Je ne suis pas un grand fan de la façon dont les produits sont actuellement affichés. Il y a plusieurs raisons à cela. Tout d'abord, les ombres portées de Photoshop sont un peu rugueuses. Je ne sais pas s'ils sont trop sombres, ni assez mous, ni les deux, mais ils pourraient sembler beaucoup plus réalistes avec un peu de temps investi. Pour l'instant, ils ont juste l'air un peu ringard et réduisent un peu la qualité de la page.
Les gradients sont aussi un peu maladroits. Ils semblent violer le schéma visuel global de la page. Il est difficile de déterminer exactement pourquoi, mais je pense qu'il est peut-être tout simplement trop sombre au bas du dégradé. Essayez d’atténuer cela et de rendre le dégradé plus subtil.
En outre, la photographie sur le site n’est vraiment pas aussi attrayante qu’elle devrait l’être. Ce sont des produits haut de gamme qui coûtent des centaines, voire des milliers de dollars. Pourtant, les photos sont un peu sombres et laides. Heureusement, je ne pense pas que la séance photo doive être refaite. Je suis presque certain que les images ont simplement besoin d'un peu d'amour après le traitement.
La conception du site ici appelle à la photographie haute définition, et ces images sont tout simplement en deçà de cela. Bien qu'il y ait une tonne de choses que vous pouvez et devriez faire pour habiller chaque photo, mais même un simple ajustement des niveaux va un long chemin en éclaircissant les tons moyens et en ajoutant un peu de contraste. Voici un autre aperçu rapide et sale avec des dégradés et des images plus claires.
Comparez maintenant cela à ce que nous avons commencé et vous pouvez voir clairement l’effet des changements que nous avons apportés.
Voyez quelle différence quelques ajustements ont été faits? Imaginez combien chaque produit serait meilleur avec un sérieux effort d'amélioration de la qualité esthétique. La plupart des images sont si similaires que vous pouvez enregistrer un flux de travail Photoshop sur l’une d’elles et l’appliquer rapidement à toutes en quelques secondes au lieu de jouer à tour de rôle pendant des heures sur chaque prise de vue.
Conclusion
Comme je l'ai mentionné ci-dessus, la plupart des modifications suggérées sont plutôt minimes. Nudging des alignements, ajout d'effets de survol, ce sont simplement des améliorations possibles qui ne sont pas nécessairement des urgences.
Si vous avez seulement le temps et les ressources nécessaires pour résoudre l’un des problèmes mentionnés ci-dessus, je vous recommande d’aller après la présentation des produits. Je crois fermement que les images dans leur état actuel entraînent inutilement la qualité du site, bien au-dessous de son potentiel. Dans une boutique en ligne, les photos de produits sont l’une des choses les plus importantes à faire et pourtant je pense que c’est le domaine qui manque le plus.
Vous ne devez pas nécessairement suivre mes modifications avec exactitude, vous devez simplement essayer de comprendre quels sont les principaux problèmes de l'apparence des produits et trouver vos propres solutions pour améliorer la qualité perçue dans ces domaines.
À 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.