Critique de conception Web # 15: nous pouvons entretenir votre voiture
Chaque semaine, nous examinons un nouveau site Web et analysons le design. Nous soulignerons à la fois les domaines qui sont bien réalisés ainsi que ceux qui pourraient utiliser un certain travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est We Can Service Your Car.
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 24 $ pour critiquer votre conception - considérablement moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de «Nous pouvons entretenir votre voiture»
«Nos clients sont au cœur de ce que nous faisons. Nous sommes ici pour enlever toute la fumée et les miroirs qui font la réputation du commerce automobile. L'entretien automobile a changé et notre activité est complètement alignée sur la nouvelle approche de l'entretien automobile. Nous nous efforçons d'économiser de l'argent à nos clients, de fournir le meilleur service possible et de leur donner confiance dans nos paroles. »
Voici la page d'accueil du site:
Ceci est un site intéressant et devrait nous donner beaucoup de points à discuter. Jetons un coup d'œil et analysons le site morceau par morceau.
Contexte
Le fond du site Web est cette illustration de pignon de plan. Il est principalement couvert par le contenu, mais il parcourt suffisamment pour que vous puissiez dire ce qui se passe.
Les voitures ne sont pas la première chose qui me vient à l'esprit quand je pense aux plans, mais la référence aux machines le fait fonctionner. J'adore le graphique en tant que pièce autonome, mais je pense qu'il pourrait être atténué un peu sur le site Web pour éviter toute confusion visuelle. Je recommande de réduire un peu plus l'opacité pour qu'elle soit à peine visible. Vous pourriez également envisager de le réduire un peu.
Entête
Lorsque nous regardons l'en-tête, nous pouvons immédiatement voir le thème qui va porter sur tout le site. Coins arrondis avec des ombres portées, alternant des nuances de bleu avec du blanc et une typographie audacieuse.
Ma première impression a été que la navigation semblait énorme. Ceci, combiné avec le logo de la voiture, donne soudain l'impression d'être un site pour enfants. Cependant, votre marché cible peut inclure des personnes âgées qui ne peuvent plus travailler elles-mêmes sur une voiture ou d'autres types non techniques. Si tel est le cas, les gros boutons seront probablement appréciés par vos utilisateurs. Parfois, la convivialité l'emporte sur l'esthétique. Assurez-vous simplement de savoir pour qui vous concevez principalement et essayez de répondre à leurs besoins.
Retour au logo de la voiture. J'aime le concept, il a beaucoup de personnalité. Cependant, l'exécution n'est pas la meilleure. Je ne sais pas comment le corriger sans le repenser complètement, mais vous pourriez avoir la personne qui a créé le logo avec quelques croquis alternatifs. Si vous décidez de vous en tenir au logo actuel, assurez-vous simplement de nettoyer les bords. Ils sont actuellement un peu dentelés et pixélisés, en particulier autour de la zone du pare-brise.
Bienvenue
La zone suivante de la page communique efficacement beaucoup d'informations dans un petit espace. Les puces sont à la fois efficaces et efficientes ici et les noms des constructeurs automobiles qui défilent continuellement en bas renforcent l'aspect «toute voiture».
Le designer a choisi d'apporter ici du rouge pour mettre l'accent. Il viole la palette de couleurs et attire donc immédiatement votre attention. J'aime la citation tirée et comment elle est parfaitement alignée en haut et en bas avec la copie à puce.
Le problème avec cette zone, et en fait une grande partie du site, est la hiérarchie visuelle. Comme je l'ai dit, le rouge aide à souligner les points appropriés, mais tout le reste ici est toujours en compétition pour attirer l'attention plutôt que pour avoir une délimitation claire d'importance.
Par exemple, tout le texte du site est en gras… tout. Le texte en gras est idéal pour ajouter de l'emphase là où c'est nécessaire, mais un problème survient lorsque vous allez trop loin: si tout est spécial, alors rien n'est spécial. Je recommande de repenser vos choix typographiques et de réduire le poids sur la plupart du texte, ne laissant que les parties les plus importantes en gras.
De plus, le concept de hiérarchie s'applique également à la taille. Remarquez à quel point le titre «Bienvenue» est de la même taille (ou proche) que la copie à puce. Encore une fois, nous voyons un cas de compétition pour attirer l'attention. Puisque le titre définit et introduit la section, augmentez sa taille tout en diminuant celle des puces.
Voici une maquette rapide et sale de cette section repensée avec une meilleure utilisation de la hiérarchie visuelle. Vous n'avez pas à le faire exactement comme cela, concentrez-vous simplement sur la façon dont les informations sont divisées de manière beaucoup plus propre.
Contenu
La zone de contenu est attrayante et apporte une photographie conviviale, mais souffre du même problème avec tout le texte en gras.
Une autre suggestion clé ici est de faire des photos et du texte immédiatement en dessous d'eux une unité visuelle. À l'heure actuelle, vous avez deux éléments visuels distincts empilés les uns sur les autres lorsqu'ils peuvent facilement être liés de manière plus cohérente. Encore une fois, c'est rapide et sale, mais vous avez l'idée.
Bas de page
Enfin, regardons le pied de page. Le contenu ici est assez simple, mais il a été conçu pour paraître beaucoup plus complexe et déroutant qu'il ne l'est vraiment.
Tout d'abord, le rouge a travaillé sur le blanc ci-dessus, mais le rouge ne fonctionne certainement pas sur le bleu. Les deux couleurs vives les unes sur les autres sont en conflit au lieu de contraste. De plus, le texte a vraiment besoin d'un peu de travail. Encore une fois, modifiez un peu l'audace, réduisez la visibilité de la ligne du droit d'auteur et corrigez le bouton de recherche maladroit qui est beaucoup plus long que le mot contenu à l'intérieur (réduisez la largeur, centrez le texte dans le bouton).
Le pied de page collant qui garde le numéro de téléphone avec vous lorsque vous faites défiler est une belle touche. Souvent, lorsque quelqu'un visite le site Web d'une entreprise physique, il ne veut qu'une chose: le numéro de téléphone. Le numéro de téléphone reste avec vous lorsque vous faites défiler le site, ce qui le rend presque impossible à manquer.
À ton tour!
Maintenant que vous avez lu mes commentaires, lancez-vous et aidez-moi en donnant au designer quelques conseils supplémentaires. Faites-nous savoir ce que vous pensez de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons également d'être respectueux envers le concepteur du site et d'offrir des conseils constructifs clairs, sans insultes.
Intéressé à faire critiquer votre propre site? Vous pouvez en savoir plus ici.
