Améliorations cosmétiques et ergonomiques sur ce blog

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Améliorations cosmétiques et ergonomiques sur ce blog

Article en plusieurs parties : 1 2 3

Améliorations cosmétiques et ergonomiques sur ce blog ? Après mon petit tour sur les questions relatives à l’ergonomie des blogs, je me suis décidé à repenser la navigation sur css4design qui en avait bien besoin. Quelques commentaires plus tard sur la navigation par tag vs catégorie, je suis descendu de mon petit nuage… J’en ai même profité pour harmoniser les couleurs en diminuant la part du rose au profit du vert. Sans connotation politique aucune ;)

Ceux qui ne connaissent pas l’ancienne version peuvent se faire une idée de l’ancien design. Pour faciliter la comparaison, j’ai ajouté un capture d’écran de la version en cours.

But : mettre en avant les catégories et la recherche sur le blog

Outre le champ de recherche, j’ai envie de mettre en avant les catégories pour en faire l’élément de navigation privilégié, sans pour autant remplacer la navigation horizontale située en haut de la page. Cette dernière ne devrait pas compter plus de deux ou trois autres liens supplémentaires. Comme le nombre d’items dans les catégories peut augmenter dans une plus large mesure, une disposition horizontale mènerait vite dans une impasse.

J’ai pensé ensuite aux menus déroulant. Mais bon… la finalité est d’améliorer l’ergonomie, pas le contraire ;) Je trouve particulièrement gênant de ne pas pouvoir accéder au contenu d’un clic. C’est peut-être sur cette question que l’on peut faire une distinction entre le site et le blog : si on a besoin de plus de sept rubriques ou catégories avec des sous-rubriques en nombre important (ou pire des sous sous-rubriques), alors c’est un site qu’il faut faire. Même si pour cela on peut utiliser une plate-forme de blog !

Objectif : faire de la place dans la sidebar

Je ne veux pas non plus sacrifier le calendrier, les archives ou le nuage de tags. Seulement leur donner l’importance qu’ils méritent : une navigation accessoire, sans être superflue pour autant :

  • Le calendrier et les archives.

    Personnellement, je ne m’en sers pratiquement jamais pour naviguer sur un blog. Néanmoins, ces deux éléments donnent assez rapidement des informations sur le rythme de publication et l’ancienneté du blog. Quoique cette dernière pourrait être précisée sous la forme d’un online since 1967 ;)
  • Le nuage de tag

    C’était à l’origine un élément important pour se déplacer dans le blog, de manière peu structurée, au gré de l’impulsion. Et de fait, les tags étaient plus utilisés que les catégories. Le problème ? Je suis moins rigoureux pour tagger un billet que pour lui associer une catégorie : les billets affichés en cliquant sur un tag nuageux sont parfois éloignés du sujet. Et celà impacte peut-être le nombre de pages vues ou le temps passé sur le blog. Et même si j’aimais bien mon tagcloud dans la sidebar, je l’ai quand même déplacé en bas de la page : sa vocation étant d’augmenter, il prendra ses aises dans toute la largeur.

Moyens : Javascript, CSS et déplacements de bloc »

Articles sur le même sujet

Article en plusieurs parties : Page suivante

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



12 commentaires pour “Améliorations cosmétiques et ergonomiques sur ce blog”

  1. Jérôme dit :

    "l’utilisation des catégories à plus que doublée (au détriment des liens présents dans le nuage de tags)"

    Normal :

    "Et même si j’aimais bien mon tagcloud dans la sidebar, je l’ai quand même déplacé en bas de la page"

    C’est domage. Avec des articles longs, on hésite avant de prendre l’ascenseur pour cliquer sur un lien qui nous emmenera ailleurs. Un nuage de tags en bas de page n’a de sens que s’il apporte des liens complétant l’article. Un nuage contextuel par exemple.

  2. br1o dit :

    Oups ! j’ai du oublier les tags contextuels pour ce billet. Je répare ça tout de suite ;)

    Bon, en même temps l’intérêt des nuages de tags est aussi à voir du côté des moteurs de recherche : ça leur donne du grain à moudre…

    Pour ce qui est d’avoir doublé les visites par catégories, c’est pas si normal que ça en fait, car elles étaient tout de même bien visibles et placées avant le tagcloud ^^

  3. loïc m. dit :

    "Je vais faire un test avec le scroll sur le calendrier mais pas sur les archives. Vous pourrez ainsi vous faire une idée sur la question, et me donner votre avis à l’usage."

    Et bien pour ma part je n’ai pas du tout aimé le scroll forcé sur le calendrier. Quand tu parle du calendrier et des archives, et bien j’ai testé pour voir. J’ai donc été scrollé au calendrier, puis obligé de scrollé vers le haut pour reprendre la lecture du billet. J’aurai dû continuer de le lire depuis mon Google Reader tien :p

    Sinon pour le cloud tags : pourquoi ne pas appliquer le même principe que pour les links archives et calendrier ? Car je trouve que le mettre en bas de page n’est pas très pratique.

    Quand quelqu’un arrive sur ta page d’accueil comme porte d’entrée, il est intéressant de voir rapidement les catégories principales (mises en évidence chez toi) ainsi que les thèmes abordés (cloud tags). Là pour les thèmes et sujets traités, faut descendre de 5 pages pour avoir une idée… et même pas un petit edito pour rapidement savoir le thème du blog. Bonne refonte, mais comme toujours une perpetuelle recherche d’optimisation. Courage :)

  4. Eric dit :

    j’ai toujours aimé la présentation de ce blog :)

  5. Aguillem dit :

    j’aime bien lire tes articles… toujours très intéressant ;) Je compte depuis un petit moment refaire mon thème de blog, et ton article vient de porter mon attention sur la necessité d’étudier également une refonte ergonomique.

    Quand à tes modifications : – comme loic, je ne suis pas DU TOUT fan du scroll forcé sur le calendrier. Je prefere largement l’afficher/cacher des archives. Ca m’enerve beaucoup que la page bouge sans que je le lui ai demandé. Et puis ça peut faire perdre le fil d’une lecture comme le souligné loic. – c’est une bonne idée de cacher le calendrier et les archives, et de les afficher que "a la demande". Moi mon calendrier me gonfle de plus en plus (surtout a cause de son bug). Je pensais le supprimer mais comme tu le souligne, cela donne une indication sur la fréquence de publication du blog. – j’aime bien aussi le nuage de tags en bas de la page. Cela permet de l’aérer davantage et d’augmenter sa lisibilité. Néanmoins il est vrai que ça peut etre dommage de ne pas y avoir accès plus rapidement. Mais bon il y a bien la mode du big foot, qui oblige également à scroller un max pour avoir accès à la navigation du blog. – graphiquement tes modifs me plaisent bien (comme le fond zebré sur la sidebar) sauf pour le changement de couleur de la navigation horizontale. Meme si cela accentue le contraste, la barre s’en trouve moins discernable. Pour dire, je n’avais meme pas remarqué le changement de couleur avant de le lire, car j’avais l’impression qu’elle faisait partie du bandeau. Une petite bande de couleur rose pourrait aider a la distinction. Par contre la distinction de la "current page" est une très bonne chose, que j’ai également mis en place il y a peu sur un site en cours de dev. – un dernier conseil ergonomique : une zone pour le commentaire un petit peu plus haute, car dès que le commentaire dépasse 8 lignes, il devient pénible de scroller pour relire le commentaire avant de le poster.

    Sinon très bonne initiative que je vais m’empresser de suivre…

  6. megathud dit :

    Salut, pour moi gros souci d’affichage de la sidebar, problème qui vient apparemment de la taille du div de ton calendrier qui déborde à droite. C’est juste pas très esthétique sous Firefox 2.0.0.3. Par contre sous IE 6.0 ça renvoie carrément ta sidebar en dessous de ta colonne principale…

  7. megathud dit :

    Oups, j’ai rien dit, problème de cache… ;)

  8. br1o dit :

    Merci à vous tous pour ces commentaires riches d’enseignements. J’ai déjà intégré certaines suggestions sur le blog, et d’autres sont en cours de réflexion. Bon, sinon, pour la liste des modifications et le pourquoi du comment, j’ai allongé le billet de quelques lignes ;)

  9. Rémi dit :

    Beau travail sur l’ergonomie du site. Juste une chose concernant le fond du menu horizontal en vert plutôt qu’en rose, je trouve que ca perd de son charme visuel, le tout devient trop vert, monotone.

    Je veux bien que ca augmente la lisibilité (quoique le gris sur du vert c’est pire que tout.. :P) mais ma préférence (à moi) revient tout de même au rose.

  10. Je n’ai pas pris le temps de lire les commentaires, mais vu que tu parles d’ergonomie, d’accessibilité, alors voici ce qui me gène :

    • les couleurs fluos, ce rose et vert fatigue rapidement.
    • le contraste du noir et rose pour le formulaire de commentaire n’est pas assez important
    • de même je trouve que le contraste des commentaires sur fond gris violet pas des plus heureux, il existe une extension pour firefox juicystudio.com/
    • la barre de navigation vertical, avant on ne voyait qu’elle, maintenant elle est trop discrète
    • les rayures partout sur ton blog, je trouve également que ça fatigue les yeux car, nous lisant de gauche à droite, et les ligne qui convergent vers le haut (ou vers le bas ;) ) parasite la lecture.

      …. je fait une pause, ce fluo est vraiment fatiguant.

      tient, tu devrais faire en sorte que le formulaire s’agrandissent quand on écris trop de commentaire, je trouve ça plus ergonomique que l’ascenseur, d’ailleurs si tu sais faire ça, j’aimerais bien mettre ça en place sur mon blog, tout comme le fait de pouvoir masquer/afficher les catégories :D

      … je reviens sur l’effet fluo, je vient de regarder une feuille blanche résultat, je voyais ton formulaire dessus :s tres tres énervant

      Voila, dès que j’ai de nouvelles remarques je t’en fait part ;)

  11. br1o dit :

    Rémi > tu as peut-être raison sur le rose qui donnait du peps sur le menu horizontal, mais pour le moment je vais laisser passer un peu de temps pour voir à l’usage.

    Greg > Merci pour toutes ces remarques. Quand tu parles des couleurs fluo qui fatiguent, c’est sur l’ensemble du site ou seulement sur le formulaire ?

    Au sujet du textarea qui s’agrandit j’ai vu passer un tuto qui explique comment faire la même chose que sur WordPress quand on saisit un billet. Faudrait que je remette la souris dessus ;)

    Concernant la persistance rétinienne de mon formulaire sur la feuille blanche… c’est pour que tu te souvienne de moi :p

    Ceci dit, comme je saisis souvent mes propres commentaires via l’interface admin… A l’usage, là, c’est vrai que le background me colle les yeux !!!

  12. xk_liber dit :

    Et bien, en voilà un autre article intéressant avec des bonnes explications, des liens, …

    Effectivement, c’est du boulot tout ces changements !

    Mais le résultat escompté est là. :)



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site