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?
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.
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…
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:
<li>that contains the comment;
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?
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:
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?