Post #48

A visual guide to navigating blog comments

12th November 2003, lunch time | Comments (40)

I’ve made another improvement to the comments system, and this time I think it’s pretty innovative (well, I think the last one was as well, but I do like this one).

This only works 100% correctly in Mozilla, and I’m not sure why. IE and Opera get 90% of the way there, and that’ll do until I figure out what the problem is. Anyway, on to the idea…

The comments system on this site allows you to send alerts to the authors of comments that you are in some way responding to. A sort of ‘Hey, look what I said about what you said’ interaction can take place. This helps people keep up-to-date with what people think about their comments, while avoiding everyone else’s conversations.

So, an individual poster will hopefully have a good idea of what’s going on as regards his comments. But what about everyone else’s comments? And what about the general, uninvolved, lurking public?

The difficulty of navigating blog comments

When it comes to following the ebb and flow of comments on blogs, it’s easy to get lost; they’re not laid out in the thread format we see in forums, but in a linear hoppity-skip way that makes a consistent flow of discussion almost impossible to maintain. One comment might not draw a response for a month, by which time fifty other comments may separate the initial post and its follow up.

This is the issue I think I’ve dealt with.

Let’s see some examples.

The image below shows three comments made on this blog. (For demonstration purposes I have chosen three together, but bear in mind they could easily be separated from each other by many other comments.) You can see in the smaller text below each comment the words ‘Commentors inspired by this post’ and/or ‘Commentors that inspired this post’. These are inter-comment links and are built using the information stored when a comment was posted and the author chose to alert a previous poster. In this case Peter posted his comment first. Then David posted his and alerted Peter. Then Dunstan posted his and alerted both Peter and David.

These relationships are echoed in the ‘inspiration’ links.

Screen shot of three comments made on this blog

However, if every comment relates to at least one other comment it would be very difficult to keep track of things just using those links; so what else have I got to make things easier for you? Well, we have colours and borders, and sugar and spice, and all things nice…

Adding visual elements to guide our path

So, we’ve established relationships between our comments, but we've also established that these relationships are confusing to pick out from the mass of text on screen. What we need are some visual clues to guide us, to appeal to the simple bit of our brain. To this end, let’s see what happens when we take a closer look at Peter’s comment.

This next image is the result of one of four events:

  1. Someone has clicked directly on the <li> that contains the comment;
  2. Someone has clicked an external link to the comment;
  3. Someone has clicked on either of the links to David in Peter and Dunstan’s comments;
  4. Someone has tabbed through the links on the page.
Screen shot of three comments made on this blog

You can see that, as the element in focus, Peter’s comment has a red border around it. The other two comments, as children, have blue borders. So, having clicked on Peter’s comment, it would be a breeze to whiz up and down the list of comments and pick out those that had been posted as a direct result of Peter putting fingers to keyboard and posting a message.

Now, what happens when focus is brought to David’s comment?

Screen shot of three comments made on this blog

We have a new colour — Peter’s comment now has a green border, indicating that it is a parent comment of David’s. Dunstan’s still shows blue, as a child comment should.

And finally, on to Dunstan’s comment:

Screen shot of three comments made on this blog

This comment has no child comments as yet, but it does have two parent comments, and both of them show the green border we know signals this.

These colour and position relationships will remain constant — green, parent comments will always be above the comment in focus, because comments are displayed in date order. Similarly, blue, child comments will always appear below the comment in focus.

And that’s about it. I hope this system that will provide a graphical pathway through a blog post’s comments, enabling users to follow disparate threads of conversation in a simple way.

What do you think? Does it work?

Jump up to the start of the post

Comments (40)

Jump down to the comment form ↓

  1. Matt:

    Why not just have a threaded comment hierarchy?

    Posted -1 years, 12 months after the fact
    Inspired: ↓ Dunstan, ↓ Roberto Almeida, ↓ Craig C, ↓ Test, ↓ Andy Hail
  2. Dunstan:

    Ha! So that's my great idea down the pan, eh?
    Well, that didn't last long :oD

    Um, why, why, because, a) I already had this system in place I just thought it needed improving, b) I thought it would be cool to do something different, and c) really one thing led to another and I ended up in the car on the way to tennis thinking "Hey, I think I might have something here".

    I don't know really - why doesn't everyone use a threaded system? Maybe the display of it would be space-consuming and not offer instant access like the common blog-comment system does at the moment?
    Maybe we all just followed the lead of the first blog design to show comments in this way and never really improved it.

    Will you be implementing a threaded system in Wordpress [1], Matt?
    Or aren't you bothered by the linear system?


    Posted -1 years, 12 months after the fact
    Inspired by: ↑ Matt
    Inspired: ↓ Matt, ↓ Roberto Almeida, ↓ Dave, ↓ RADo, ↓ Craig C
  3. Matt:

    I'm currently trying to think where threaded comments fit in the roadmap right now, but it is something that is definitely planned. We're not going to say people *have* to use threaded comments, but the system shouldn't restrict people who want to have that option. Plus for larger conversations I think threaded comments make everything easier to follow.

    Posted -1 years, 12 months after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dave, ↓ Jacob Wolfsheimer
  4. Cam:

    I like it. Very much. And I can see how it has grown organically from where you where yesterday (and from before that too) which is cool.

    But - I had the same thought as Matt: just thread it! When I read, "... they’re not laid out in the thread format we see in forums ...", I immediately thought about CodeProject [1] and MSDN [2]. Granted neither is a blog, but they're pretty close to the 'read something then intereact' idea of a blog entry. If usability is a primary concern, threading would be the next improvement.

    Having said that, it is innovative and unique (that I've seen) and that's to be applauded. And, I strongly think that your solution is good enough. We're talking about a personal blog here!!

    Well done.

    Posted -1 years, 12 months after the fact
    Inspired: ↓ Cam, ↓ Dave
  5. Cam:

    Oh, yeah. The references:

    [1] Code Project: An example of an article with some comments (shockingly broken in anything but IE), but you can see the threading:

    [2] MSDN (couldn't find an example - oops!):

    Posted -1 years, 12 months after the fact
    Inspired by: ↑ Cam
  6. Tom:

    Dunstan you sly dog. I've said it before and I'll say it again - yer the man. Seriously, its a sweet idea, I like the fact that you try and think of things outside the norm. I'd post this to css-d for comments myself, especially to get the last 10% working in IE (unless its a JS issue).

    Also, haven't had a chance to tell you yet, but this site roxxors. :)


    Posted 1 hour, 49 minutes after the fact
    Inspired: ↓ Dunstan
  7. Dunstan:

    Thanks Tom, I think it is a JS issue, and hopefully something the wonderful lads and lasses of thelist can help me with.

    "...but this site roxxors."

    For some reason that reminds me of Strongbad [1], I think I'll go and catch up on all the latest emails.


    Posted 3 hours, 34 minutes after the fact
    Inspired by: ↑ Tom
    Inspired: ↓ Tom
  8. Tom:

    Ah yes...homestarr! I am on my way as well.. ;)


    Posted 4 hours, 29 minutes after the fact
    Inspired by: ↑ Dunstan
  9. Roberto Almeida:

    I think a great difference between this system and a threaded comment hierarchy -- if I got understood it correctly -- is that here a comment can have more than one parent.

    Posted 1 day, 2 hours after the fact
    Inspired by: ↑ Matt, ↑ Dunstan
    Inspired: ↓ Dunstan, ↓ Matt, ↓ Craig C
  10. Dunstan:

    Oh yes, that's very true. You know, you'd think I would have spotted that, having written the damn thing :op

    Posted 1 day, 2 hours after the fact
    Inspired by: ↑ Roberto Almeida
    Inspired: ↓ Matt, ↓ Craig C
  11. Matt:

    Yes, but it seems to me that you wouldn't need to have multiple direct parents if the system wasn't flat. With a hierarchical system you could easily follow a post back to its parent and grandparents. With this you have to "recurse" for lack of a better term.("D***," *click click click*, "d***.")

    Posted 1 day, 3 hours after the fact
    Inspired by: ↑ Roberto Almeida, ↑ Dunstan
    Inspired: ↓ Dunstan
  12. Dunstan:

    Ah, I think what Roberto is saying is that I could respond to two 'unrelated' comments in one post, marking them both as parents.

    So I could comment on Tom and Homestarr, and also on your post, Matt, regarding this system.

    But, yes, if you were really focusing on threads of conversation then you'd be better implementing a threaded system (I see that now).

    I think this will do for me for now, it gives a bit of both worlds and let me make something a bit different.

    Thanks for the comments guys, it's been very interesting :o)

    Posted 1 day, 4 hours after the fact
    Inspired by: ↑ Matt
    Inspired: ↓ Matt
  13. Matt:

    Well I do agree that it is an unique and novel idea. Perhaps as it develops it could present a viable and richer alternative to traditional threading.

    Posted 1 day, 5 hours after the fact
    Inspired by: ↑ Dunstan
  14. David:

    Nice system. Intuitive, and different, and ultimately useful :)

    Posted 4 days, 4 hours after the fact
  15. Macewan:

    excellent work

    Posted 5 days after the fact
  16. Dris:

    Very intuitive system. However, it may yet be a little confusing.

    As a preference, I would simplify it by "grouping" comments together and listing them chronologically instead of the parent-child system. Click the checkbox for the comments you're responding to, and your post will be linked to them all through the database. Then, clicking a comment will hide (or dim) those that aren't connected, showing only related posts. There'd need to be a mechanism for showing the others again.

    In theory, this would build a sort of concept map. In practice, it could turn out to be a mess. I don't know. I'd have to try it.

    Anyways, an "inspiring" system you've worked out here. I wouldn't be surprised to see a lot of piggybacking on the idea, eventually becoming standard on blogs by permeating MovableType (and Überblog, my publishing system, not that it's in widespread use).

    Posted 1 week, 1 day after the fact
    Inspired: ↓ Eoin Dubsky
  17. Brahm:

    Just came across your site from the nether regions of the 'net...

    I like the experimentation that you're playing with, but I can't say I find it highly intuitive. There's nothing inherent about the colors that make me think "that's the parent" or "that's a child"'s something that would/will have to be learned.

    Also, quite a bit of scrolling can potentially be involved in order to track down the related comments. Something that might be a little more quick to understand and navigate: clicking on the post could bring up a floating menu under the cursor similar to the floating comment that shows up when hovering over a link (or maybe display a menu to the side of the a drawer) that displays links to parent and children posts. Clicking one of the links would take the user to the respective comment and dismiss the floating menu. Alternatively, if the user decided they didn't want to follow the link, they could move the cursor outside of the menu's boundry and it would get dismissed. Just brainstorming... take it for what it's worth. :) It would probably involve a bit of work...

    Anyway, keep up the good work. I like a lot of the design bits you've put into this site. If only I had more time to devote to my own. I'll keep digging around and will surely stop by again.

    Posted 1 week, 2 days after the fact
    Inspired: ↓ Dunstan, ↓ Dunstan
  18. Dunstan:

    Hi Brahm - thanks for your comments - what you suggest is already in place, if you look at the foot of each comment it gives you links to all the other related comments (its parents and children) - just click on any of those and you'll jump straight to your selection.

    It doesn't hover, but it's in place :o)

    Posted 1 week, 2 days after the fact
    Inspired by: ↑ Brahm
    Inspired: ↓ Brahm
  19. Dunstan:

    Brahm: "There's nothing inherent about the colors that make me think 'that's the parent' or 'that's a child'"

    You biggest clue is, of course, that child comments will always appear below the comment you selected, and parents above it.

    Posted 1 week, 2 days after the fact
    Inspired by: ↑ Brahm
    Inspired: ↓ Brahm
  20. Brahm:

    Heh. Leave it to me to miss something hidden in plain sight and make something more complex than it needs to be. :P I guess I should have looked at your comment format a little longer. In the immortal words of Officer Barbrady [1], "OK, people, move along. There's nothing to see here."

    Regarding the colors & parents/children above/below, the more I play around with the system, the more I like it. It just wasn't obvious to me initially.


    Posted 1 week, 2 days after the fact
    Inspired by: ↑ Dunstan, ↑ Dunstan
  21. Richard Soderberg:

    Works great in Safari 1.1.

    Posted 2 weeks, 6 days after the fact
  22. Dave:

    I've been thinking about the nature of comment systems recently as well (though I lack any programming knowledge to implement my ideas.) I run my own TypePad page, manage a few MT pages, and interact with a large group of friends on LiveJournal. LiveJournal uses threading for their comments, and I've found that threading works very poorly for large, sweeping discussion on weblogs where the conversation may move along a few different tangents.

    Threading adds a physical map to a conversation that's false. Conversations are linear, and even if you want to respond to a particular post, you have to aknowledge that there may have been subsequent comments on the issue. Allowing multiple parents as you do solves part of this problem. The main issue is that if you try to come into a conversation after 75 comments have already been made, you're probably dealing with five or six very large threads, and the flow of the conversation gets all broken up. Earlier comments appear high up on the page even though they may partly address threads that are lower down. It all becomes a mess.

    I like where your system is going better. Comments are still all in order, but it is possible to group them according to parent/child.

    More on my thoughts:

    Posted 1 month after the fact
    Inspired by: ↑ Dunstan, ↑ Matt, ↑ Cam
    Inspired: ↓ Jacob Wolfsheimer, ↓ Eoin Dubsky
  23. Jacob Wolfsheimer:

    This is an innovative way to display comments and seems more like actual live interaction would be than threaded comments or other weblog commenting systems.

    I was inspired to write my own thoughts on it here:

    Posted 2 months, 1 week after the fact
    Inspired by: ↑ Matt, ↑ Dave
  24. Tom:


    Posted 2 months, 2 weeks after the fact
  25. Eoin Dubsky:

    Excellent work!
    This is my first visit to your website, and though I've missed the date to enter your blog into that competition (by 23 hours!), I've bookmarked you for next year (you've got my vote!!). :-)

    I'm with Dave and others above who have pointed out that threaded discussions aren't necessarily what's needed for the comments section of a personal blog. Threaded discussions are great I suppose for Question and Answer situations, like a FAQ-o-matic.

    Posted 2 months, 3 weeks after the fact
    Inspired by: ↑ Dris, ↑ Dave
  26. DarkBlue:

    A very interesting post with some insightful comments.

    I too am working to add a useful, easy-to-comprehend comments system on my website. I think the "inspired by" idea is great and unique as far as I can tell.

    For myself, I am heading towards a threaded model. But I still have questions I need answers to: what is the best way to present a threaded conversation? Is indentation enough to visually illustrate the ebb and flow of a thread? Should a thread be collapsible / expandable? Should a thread be rendered in full?

    With useability foremost in my mind I am leaning towards the following:

    Threads shown fully expanded with indentation to group comments. However, I'm not convinced that this is the best way - yet.

    I like your concept Dunstan but following a thread does seem to involve rather a lot of jumping around which is anathema to me (unless I'm not using the system properly).

    My quest continues...

    Posted 2 months, 3 weeks after the fact
  27. RADo:

    Great idea, Dunstan :)

    I was so inpsired by it yesterday (yeah, reading it pretty late, but..), that I went ahead and implemented something similar for Nucleus CMS as well.

    This is what it looks like:

    Posted 4 months after the fact
    Inspired by: ↑ Dunstan
  28. Wahyu Wijanarko:

    Anyone having free commenting system?

    Posted 4 months, 2 weeks after the fact
    Inspired: ↓ RADo
  29. RADo:

    Nucleus CMS, based on PHP/MySQL, is GNU, it contains comments similar to (and inspired by) Dunstan's idea:

    Posted 4 months, 3 weeks after the fact
    Inspired by: ↑ Wahyu Wijanarko
  30. Holger Kreis:

    interesting thoughts and nicely visualised. i had two discussions features in my script. i distinguished between active notification (like here) and the passive one, that is still implemented in the current version. i made the experience that bloggers never used the feature of giving commenters the possibility to discuss beyond the post, to open a discussion space outside the post. seems like most of them want a guestbook for every new day ..

    Posted 5 months after the fact
  31. Zaecus:

    I've been looking over your comment system, and I'm really impressed. It might not be intuitive for everyone, but I think it does a really good job of reflecting how Internet conversations tend to happen.

    I am curious though if there isn't a way to tweak it for a something I found myself wanting while checking it out.

    Can it be organized to allow you to, essentially, thread the comments by hiding any comments that aren't parents or children of the one you have selected? That way, if there's 10,000 comments (or even 30, as there are here), but only five are related to the one you're interested in, you don't have to scroll through screen after screen of comments looking for the telltale border.

    Just a thought. Again, really nice work. (Even if I am wandering in here months later.)

    Posted 5 months, 1 week after the fact
  32. Jay:

    Excellent improvement. Thumbs up.

    Posted 6 months, 2 weeks after the fact
  33. Marcos:

    :-) yeah, very good

    Posted 7 months, 2 weeks after the fact
  34. Sam:

    Ohh, look very nice (I use Opera), good work!

    Posted 8 months after the fact
  35. Yanin:

    I love it!
    It's innovative, intuitive and not an overkill, great for a blog.

    Posted 1 year, 9 months after the fact
  36. Craig C:

    I love the comment system on this site!

    Another distinction of this system over a threaded system is that inherently all comments should be about the initial post. A threaded system has a tendency to promote getting off topic.

    Posted 1 year, 10 months after the fact
    Inspired by: ↑ Matt, ↑ Dunstan, ↑ Roberto Almeida, ↑ Dunstan
  37. Hans Roth:

    I like the idea about notification specifically on comments. Where would I download or purchase a blog like yours? I also like the way your URLs are re-written. I would like to install it on our homepage at instead of our forum which does not really pick up and we would rather use a blog to bring together content which might be interested to our community.

    Posted 2 years after the fact
  38. Johan Sundström:

    Interesting take on threading. I would find the presentation more helpful to the eye if it collapsed all unrelated posts, and if clicking a comment link would bring the new link into focus. To not make that latter change confusing to the visitor I would suggest coupling it with the Fade Anything Technique (, having it ease from "comment" to "focus" colouring over some fraction of a second.

    Posted 2 years, 2 months after the fact
  39. Test:

    just testing

    Posted 2 years, 5 months after the fact
    Inspired by: ↑ Matt
  40. Andy Hail:

    Good points, but make it more generally

    Posted 2 years, 5 months after the fact
    Inspired by: ↑ Matt

Jump up to the start of the post

Add your comment

I'm sorry, but comments can no longer be posted to this blog.