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"
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
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…
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 NetworkLe 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
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.
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
Ou encore cet astucieux système à mi-chemin entre breadcrumb et onglets : 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 ?).
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 tâches chez Quince
Là, la recherche par tags :
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
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)
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.