Critique de conception Web # 45: Optimized Cable Company
Chaque semaine, nous examinons un nouveau site Web et analysons le design. Nous soulignerons à la fois les domaines qui sont bien réalisés en plus de ceux qui pourraient utiliser un peu de travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est Optimization-World.com, siège de la société Optimized Cable Company.
Explorez les ressources de conception
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 critiquer votre conception - beaucoup moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos d'Optimized Cable Company
Chaque câble vendu chez Optimized Cable Company est garanti à vie. Si votre câble tombe en panne, il vous suffit de nous le retourner pour un remplacement sans tracas. Nous sommes très fiers d'offrir des câbles de haute qualité à des prix très raisonnables. Ne payez pas trop cher vos câbles dans les grands magasins. Commandez chez nous et profitez de notre offre de livraison gratuite. Nous ne vous nickelons pas. Le prix que vous voyez est le prix que vous payez.
Voici une section de la page d'accueil:
Impression initiale
Il y a quelques bonnes idées à l'œuvre ici, cependant, dans l'ensemble, le design reflète de très près quelque chose qui aurait été assez courant il y a une dizaine d'années. Les tendances en matière de conception Web méritent une attention particulière lorsque vous envisagez de concevoir un site Web. Non pas pour arnaquer les idées des autres, mais pour vous assurer que votre produit final est moderne et pertinent.
En tant que concepteurs, il est trop facile pour nous de rester coincés dans la façon dont nous abordons un projet. L'effet négatif de cela est que le monde change alors que nous restons les mêmes. Avoir un site Web qui semble obsolète est particulièrement dangereux pour les magasins en ligne car il peut être directement lié à une baisse des ventes. Les visiteurs s'arrêtent et ne savent pas du tout si le site est un endroit sûr pour dépenser de l'argent. Est-ce une société légitime qui protégera mes informations de carte de crédit? Ou la sécurité de leur site est-elle obsolète? Dans ce cas, je pourrais passer à Best Buy indépendamment du coût et de la qualité des produits simplement parce que le site se sent plus sûr.
Certes, il est difficile de déterminer exactement ce qui distingue un design moderne d'un design obsolète, alors aujourd'hui, nous allons passer au peigne fin et voir si nous pouvons identifier les aspects qui affectent directement nos impressions sur la période.
Entête
La première chose qui attire notre attention ici est le logo. C'est un élément fortement glacé qui semble provenir du début de la période Web 2.0. La brillance peut toujours fonctionner dans de nombreuses conceptions Web si elle est effectuée correctement, mais ici, cet élément particulier ne semble pas à sa place. Presque rien d'autre sur la page ne correspond à cette apparence, y compris le texte sur le logo, qui ressemble plus à quelque chose d'une annonce de voiture ancienne (plus de confusion de période).
Ensuite, nous passons au dégradé jaune. Cette couleur viole vraiment le schéma du reste du site. Les spécialistes du marketing aiment cela parce qu'il se démarque, mais d'un point de vue design, il se sent tout simplement mal. Les couleurs qui se complètent peuvent se démarquer et attirer l'attention sans se heurter. De plus, même sans considération pour le reste du site, le dégradé jaune est une autre chose qui ne reflète pas les tendances actuelles.
Pour voir ce que je veux dire, comparons la bannière d'expédition sur le site ci-dessus au même élément sur le site Web de Staples.
Nous pouvons apprendre beaucoup de cela. Tout d'abord, la disposition est beaucoup plus spacieuse et spacieuse, tout n'est pas encombré si serré. Nous constatons également des alignements à gauche solides, par opposition à des alignements centraux relativement faibles. Notez que la clé ici est subtilement. Il y a des dégradés et même une texture créée à partir de lignes fines, que nous voyons tous les deux sur le site Web optimisé. Cependant, sur le site Staples, ces éléments sont beaucoup plus discrets. Les dégradés et les lignes sont faciles à manquer si vous ne faites pas attention, ce qui signifie qu'ils ajoutent à l'esthétique sans être gênant.
Couleurs et textures
Au fur et à mesure que nous descendons sur le site, nous pouvons penser que les couleurs et les textures jouent un grand rôle dans l'impression d'une période. Dans la capture d'écran ci-dessous, nous voyons cela en jeu avec une forte utilisation des coins durs avec des traits noirs d'un pixel les bordant. Cela crée une sensation carrée qui me rappelle un travail que j'ai fait pour un client une fois dans un CMS appelé Plone.
Encore une fois, comparons cela à certains des traitements que nous voyons dans une zone similaire du site d'un concurrent majeur. La capture d'écran ci-dessous montre la barre latérale de la page d'accueil de Radio Shack. Cette entreprise n'est pas exactement une image parfaite des pratiques commerciales modernes, mais elle essaie de garder son site frais et pertinent.
Photos et texte
En plus des éléments graphiques sur la page, vous devez également regarder comment vous structurez vos traitements d'image. La photo ci-dessous n'a vraiment pas de bonne zone de couleur unie sur laquelle placer le texte, donc le texte a été traité avec une ombre fantôme maladroite pour l'aider à se démarquer.
Parfois, vous avez une photo qui ne fonctionne vraiment pas avec du texte. Plutôt que d'essayer de coller les deux ensemble lorsque cela ne fonctionne tout simplement pas, envisagez un autre itinéraire. Nous avons un article entier consacré à la conception avec des photos qui partage quelques astuces impressionnantes pour combiner texte et photographie de manière attrayante et lisible.
Texte et logos
La dernière partie de cette page que je veux aborder est montrée dans l'image ci-dessous. Ici, nous avons toute une panoplie de logos, dont certains sont sans doute nécessaires, mais je ne suis certainement pas convaincu qu'ils doivent tous être là. L'accréditation du BBB est bonne, mais ai-je vraiment besoin de savoir que le site utilise le service postal américain? Il est à peu près acquis que si j'achète un produit en ligne, il me sera expédié d'une manière ou d'une autre et la plupart d'entre nous considérons le service postal américain comme signifiant «ancien courrier ordinaire».
De plus, les logos des cartes de crédit pourraient probablement être déplacés vers la page de paiement. La plupart des consommateurs suffisamment à l'aise pour effectuer un achat en ligne vont supposer que vous prenez les principales cartes de crédit.
Enfin, ce qui vient ensuite est un énorme bloc de texte uniforme. Il n'y a pas d'en-têtes, d'icônes, de traitements de texte différenciés (à part les liens) ou d'autres astuces utilisées pour casser cela et le rendre plus lisible. En un coup d'œil, je ne sais même pas de quoi il s'agit, alors pourquoi devrais-je prendre plusieurs minutes pour le lire?
Dans la conception Web, vous ne pouvez tout simplement pas vous attendre à ce que les visiteurs s'attaquent à un morceau de texte pur comme celui-ci. Un visiteur sur cent pourrait en fait parcourir le premier paragraphe, mais c'est optimiste. Cela signifie-t-il que vous ne pouvez pas avoir beaucoup de texte sur une page Web? Absolument pas. Il vous suffit d'apprendre à le décomposer en morceaux significatifs et gérables qui peuvent être parcourus rapidement pour des informations pertinentes.
Les concepteurs de MailChimp sont brillants à ce sujet et je me réfère toujours à leur travail lors de la discussion de ce sujet. Leur récente refonte du site s'attaque à une page de fonctionnalités pleine de texte, mais découvrez comment ils l'ont gérée:
Des en-têtes forts, de courts blocs de texte et des images qui font allusion au contenu sont tous utilisés ici pour rendre tout ce contenu facilement digestible.
Recommandations
Pour amener ce site en 2011, je recommande aux créateurs de regarder attentivement d'autres sites Web, à la fois dans leur domaine et à l'extérieur (notre Design Gallery a été créée exactement dans ce but). Enquêter davantage sur ce qui distingue les sites modernes des tendances et des tactiques vues sur le site optimisé.
À 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.
