Anatomie d'une barre latérale parfaite - Les nuances d'un bon design

Dans la partie précédente de la série, nous avons examiné la définition et l’importance de l’élément "sidebar" sur les blogs WordPress et avons vérifié les mises en page avec un, deux, trois et quatre sidebars (et pas de barres latérales).

Dans cette seconde partie, nous allons voir comment concevoir une barre latérale et ordonner les éléments - en particulier les widgets - à l'intérieur de celle-ci..


Concevoir la barre latérale parfaite

L'une des principales raisons pour lesquelles les visiteurs ne prêtent pas attention aux barres latérales est le manque de choix en matière de conception. D'autres raisons peuvent être d'utiliser trop ou trop peu d'éléments, d'afficher un contenu terne et sans intérêt et de ne pas ordonner les éléments correctement, etc..

Négliger de concevoir votre barre latérale signifie moins de pages vues, moins de clics, moins de taux de conversion et moins de ventes. Même si vous ne vous attendez à aucun revenu de votre site Web WordPress et attendez-vous à ce que les gens lisent votre contenu, vous devez quand même bien concevoir votre barre latérale pour pouvoir guider vos visiteurs avec vos éléments de barre latérale de navigation..

Nous allons passer en revue trois facteurs principaux d’une bonne conception de la barre latérale: dimensions de base, couleurs et bases de la typographie..

Largeur et hauteur de la barre latérale

Le bon sens pour la largeur de la barre latérale est de réduire la largeur de la ou des barres latérales par rapport à la zone de contenu principale. C’est une approche judicieuse, car le contenu principal est presque toujours l’élément le plus important d’une page Web et une zone de contenu étroite dotée de larges barres latérales minimise l’accent mis sur le contenu..

Une largeur comprise entre 20% et 40% est généralement le meilleur choix pour une barre latérale unique. Si vous envisagez d’utiliser plusieurs barres latérales, je vous suggère de ne pas dépasser une largeur totale de 50% (20% + 20%). 15% + 35%, par exemple).

Pour une barre latérale unique, vous pouvez également utiliser l'approche du nombre d'or, dans laquelle la largeur de la barre latérale correspond à environ 38% de la largeur de la zone de contenu principale. Vous pouvez trouver plus d’informations sur le rapport d’or chez Jarel Remick Le nombre d'or dans la conception Web article chez Nettuts+.

Quant à la hauteur, il n'y a pas grand chose à discuter d'autre que "le pli". Le pli est la dernière ligne de l'écran du visiteur, où le visiteur doit faire défiler avant de voir le reste de la page. J'avais l'habitude de conseiller à mes clients d'essayer de rester "au-dessus du pli", mais comme il existe de nombreux appareils différents (ainsi, les dimensions de l'écran) et que les gens sont très habitués au défilement, la vie en dessous du pli n'est plus aussi effrayante.

Cela dit, gardez à l'esprit que les éléments au-dessus du pli sont les premiers éléments que les visiteurs verront. Nous en reparlerons dans le dernier sujet, "Commander les éléments de la barre latérale".

Oh, au fait, vous devriez vraiment, vraiment, faire attention de ne pas dépasser la hauteur de la zone de contenu principale. Si les barres latérales sont plus long que le contenu, il semble très laid.

Utilisation de couleurs et d'images

Rappelez-vous la devise de conception, "moins est plus"? Eh bien, nous pouvons le lire comme "plus est moins", aussi.

Les couleurs pourraient à la fois attirer et distraire. Si vous utilisez autant de couleurs que la barre latérale ci-dessus, aucun de ces éléments colorés et laids n'attireront plus d'attention. Ils attireront moins d'attention..

Mais si vous utilisez seulement quelques couleurs pour seulement quelques éléments (dont vous avez besoin pour attirer le plus de visiteurs), elles attireront le plus l’attention. Vous devez garder à l'esprit que pour sortir un widget, vous devez décaler les autres. "Contraste" est le mot clé ici.

Les images peuvent être une exception, cependant. Bien que tout ce que j'ai dit ci-dessus s'applique également aux graphiques numériques, vous pouvez utiliser des photos pour attirer l'attention séparément des éléments colorés. Mais comme vous pouvez l’imaginer, trop d’images distraient également le visiteur - c’est la raison pour laquelle les publicités peuvent ne pas être remarquées en fonction de la conception de votre barre latérale..

Je suggère que, si vous le pouvez, vous devriez utiliser des images estompées (qui apparaissent en survol) dans les widgets de la barre latérale. Essayez de voir si cela a l'air bien ou pas.

Tailles de police et alignement des éléments

La typographie est toujours importante pour une bonne conception. Avec une bonne typographie, vous n'avez peut-être besoin de rien d'autre pour que votre page Web soit belle..

Avec les barres latérales que je conçois, j'aime bien définir une taille de police légèrement supérieure (10% à 20%) au contenu principal. Cela attire l'attention mais ne détourne pas le visiteur du contenu principal - les visiteurs voient ce qu'ils veulent voir et c'est ce que nous voudrions faire. N'oubliez pas que des textes parfois plus petits peuvent aussi être attrayants.

J'aime aussi aligner les titres au centre et le texte à droite mais vous pouvez - et vous devrait - faites tout ce que vous jugez bon pour votre design. Tant qu'ils n'ont pas l'air en désordre et sans lien, c'est bon pour vous.


Commande des éléments de la barre latérale

Même si vous ne disposez que de deux éléments de la barre latérale, voire de dix, vous devez envisager de les classer comme une pratique cruciale. Faire les choses correctement augmentera sûrement les clics et les ventes et faire les choses mal peut les dégringoler!

Pensez au important éléments qui devraient absolument être vus par tous les visiteurs, et la Pas si important ceux qui ne doivent pas nécessairement être vus par chaque personne visitant votre site Web.

Par exemple: bien que les formulaires d’abonnement et les boutons ou les listes de publications les plus récentes / populaires soient considérés comme "importants", nous ne pouvons pas en dire autant des listes de commentaires les plus récentes ou des blogs. Une fois que vous avez identifié les éléments "importants", vous pouvez les ordonner entre eux et disposer d'une barre latérale bien ordonnée..

Aussi, vous devriez considérer le pli: Quels éléments devraient être en haut et lesquels pourraient être en bas de la barre latérale? Le fait d'avoir les éléments les plus importants (un formulaire d'abonnement par e-mail, une liste de publications populaires et éventuellement une publicité) au-dessus du repli sera bénéfique pour vous et vos visiteurs..


Conclusion

Je ne crois pas que vous deviez suivre des règles strictes pour un bon design mais il y a toujours des "directives" pour vous permettre de créer de meilleurs designs. Cette série est l’une de ces directives et j’espère que vous l’avez appréciée.

Avez-vous quelque chose à ajouter ou à améliorer? Partagez vos idées avec nous en laissant un commentaire!