Que faut-il améliorer dans les commentaires des blogs ?

Voilà de nombreuses années que les blogs existent, et pourtant ils n’ont que très peu évolués dans leur structure (billets, catégories, tags) et dans leur fonctionnement (flux RSS, commentaires). Mais s’il y a bien une fonctionnalité qui fait défaut, ce sont les commentaires. Ils ont largement participés au succès des blogs mais montrent maintenant leurs limites face à des solutions plus vieilles (les forums) ou plus récentes (les tweets). Il n’empêche que le futur des commentaires de blog est déjà là (authentification unique, centralisation…), mais nécessairement implémenté sur les grandes plateformes de blog (cf. Les commentaires au centre de votre graph social ?).

C’est donc tout naturellement que je vous propose ce très bon article sur l’évolution nécessaire des commentaires : Blog comments design considerations. L’auteur liste ainsi quelques pistes d’amélioration :

  • Adopter un format “conversation” pour les réponses entre commentaires ;

    Les commentaires en mode "conversation"
    Les commentaires en mode "conversation"
  • Mettre en avant les commentaires de l’auteur du blog ;
  • Séparer les commentaires des trackbacks ;
  • Améliorer la mise en page (vous noterez l’effort de réalisé sur les commentaires de ce blog).

L’auteur pose également les bonnes questions :

  • Faut-il dissocier les commentaires de l’article ?

    Séparation des commentaires et de l'article
    Séparation des commentaires et de l'article
  • Faut-il paginer les commentaires ?
  • Faut-il inclure les avatars des commentateurs ?

Bref, les grandes idées sont là, reste encore à les mettre en oeuvre. Je suis à ce sujet très impatient de voir comment le rachat d’IntenseDebat va faire évoluer le système de commentaires de WordPress…

Soignez vos extrémités (menu et pied de page)

J’avais constaté il y a quelque temps la prolifération de menus de navigation au format XL (cf. Est-ce la mode des menus déroulants surdimensionnés ?) mais c’est un article de Jakob Nielsen qui me pousse à aborder à nouveau le sujet : Mega Drop-Down Navigation Menus Work Well.

L’auteur nous explique ainsi que les menus de navigation surdimensionnés peuvent mieux fonctionner qu’un menu traditionnel :

  • Ils proposent une meilleur lisibilité avec un espace mieux exploiter et un guidage renforcé à l’aide de séparateurs et de pictos ;
  • Ils permettent d’afficher la totalité de l’arborescence d’une section.

Ces menus doivent par contre respecter quelques  règles d’utilisabilité :

  • Pas trop de choix à la fois ;
  • Un temps de latence d’1/2 seconde à l’ouverture et à la fermeture du panneau ;
  • Pas de contrôle trop complexes ;
  • Une navigation au clavier pour assurer une meilleure utilisabilité.

Sur ce dernier point je suis ravi de la position adoptée par le Dr Nielsen : même si les menus de navigation surdimensionnés ne sont pas accessibles (ou peuvent difficilement l’être), il suffit d’assurer l’accès au rubrique de premier niveau.

Deux très bon exemples sont cités dans l’article : Food Network (avec une excellente hiérarchisation de l’information) et Action Envelopes (avec une utilisation astucieuse des pictos).

Le menu de Food Network
Le menu de Food Network
Le menu d'Action Envelopes
Le menu d'Action Envelopes

Dans le même esprit mais à l’autre bout de la page, j’avais également abordé il y a deux ans cette pratique élégante qui consistait à mettre le plan du site dans le pied de page (cf. Un plan du site dans votre pied de page). Et c’est un article publié sur Web Designer Wall qui me fait aborder le sujet à nouveau : Modern Sitemap and Footer.

L’auteur liste ainsi les avantages de mettre le plan du site dans le footer :

  • Cela permet d’économiser un clic pour les utilisateurs et d’autoriser les sauts de section ;
  • Cela donne plus d’espace à la promotion interne (pour mettre en valeur des fonctions ou contenus clés) ;
  • Cela réchauffe le pied de page.

Un certain nombre d’exemples sont cités dont celui de Mozilla :

Le pied de page de Mozilla.com
Le pied de page de Mozilla.com

Mention spéciale au “site à Barak” (WhiteHouse.gov) qui cumule à la fois un menu de navigation surdimensionné et un plan du site en pied de page.

Tout savoir sur les chemins de navigation (breadcrumb)

Très largement ignorés par les utilisateurs, les chemins de navigation (breadcrumb en anglais, également appelé “fil d’Ariane”) sont néanmoins un élément d’interface essentiel pour venir compléter un système de navigation. Je ne me lancerais pas dans un long argumentaire sur l’intérêt (ou non) d’implémenter un chemin de navigation car je préfère plutôt vous rediriger vers ce très bon article publié sur Smashing Magazine : Breadcrumbs In Web Design: Examples And Best Practices.

L’auteur y détail ainsi les différents types de breadcrumbs (selon la localisation, les attributs et l’historique de navigation) ainsi que les bénéfices à l’usage : ils offrent une alternative à la barre de navigation, ils permettent de minimiser le nombre de clics pour remonter aux pages de premier niveau, ils ne prennent pas trop de place et ils peuvent prolonger la visite.

L’article propose ensuite une impressionnante liste d’exemples ainsi que des utilisations enrichies des chemins de navigation comme par exemple Lonely Planet qui propose un menu déroulant à chaque niveau :

Le chemin de navigation enrichi de Lonely Planet
Le chemin de navigation enrichi de Lonely Planet

Ou encore cet astucieux système à mi-chemin entre breadcrumb et onglets : Tabcrumbs.

Breadcrumb + Tabs = Tabcrumbs
Breadcrumb + Tabs = Tabcrumbs

Je reste personnellement un adepte des chemins de navigation et suis persuadé qu’ils sont encore largement sous-exploités (cf. Peut-on se passer des menus de navigation ?).

Et on reparle des bibliothèques de modèles de conception

Pour compléter ma précédente liste de User Interface Patterns Library (cf. Vive les librairies de modèles de conception d’interfaces) je vous propose de découvrir une nouvelle bibliothèque qui s’illustre par son interface : Quince.

Les modèles sont ainsi répartis par tâches, tags et types de wireframe. À chaque mode de classement correspond une interface, ici la recherche par tâches :

La recherche par xx chez Quince
La recherche par tâches chez Quince

Là, la recherche par tags :

La recherche par tag de Quince
La recherche par tag de Quince

Et voici enfin à quoi ressemble la fiche d’un modèle de conception :

Un modèle de conception sur Quince
Un modèle de conception sur Quince

C’est donc une interface très originale que nous propose cette bibliothèque de modèles de conception, un peu perturbante au départ mais finalement assez simple d’utilisation. Voici en tout cas un bon moyen de faire évoluer les mentalités et notamment les à priori vis à vis des interfaces riches. (via Usability Post)

Un effet en CSS pour faciliter la lecture des liens distants.

J’ai récemment pris connaissance d’une technique en CSS sur le blogue de Mr Xhark. Cette technique permettrait, en quelque sorte, de diminuer le poids d’une page Web. Elle éviterait ainsi l’utilisation de Flash ou de Javascript pour ce genre d’effet. Le résultat n’a rien d’impressionnant, mais sur le plan de la simplicité je le trouve intéressant. À mon avis cet effet facilite la lecture.

Source de l’image : http://blogmotion.fr

Par contre, pour diminuer le risque d’erreur sur les photos j’aurais tendance à jouer avec l’opacité de celles-ci…  :

remote_link_css.jpg


Qu’en pensez-vous ?