Post #48
You are currently only viewing posts within the category: Site news
You are here: Home → Archive → Site news → 2003 → November → 12th → this post
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.
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:
- Someone has clicked directly on the
<li>that contains the comment; - Someone has clicked an external link to the comment;
- Someone has clicked on either of the links to David in Peter and Dunstan’s comments;
- Someone has tabbed through the links on the page.
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?
Jump up to the start of the post ↑
Blogmarks
A collection of miscellaneous links that don't merit a main blog posting, but which are interesting none-the-less.
Our enemies are innovative and resourceful, and so are we. They never stop thinking about new ways to harm our country and our people, and neither do we.
— George W Bush (9)- What WordPress is doing to combat comment spam. (1)
- Mobile web tools, from Pukupi. (1)
- Pukupi’s top 10 hints for building interoperable mobile Web sites. (3)
- The photography of E.J. Peiker. (4)
Stuff from the intersection of design, culture and technology.
(3)- Some handy tips for advanced Google use. (35)
- Make your own church signs, or view some real ones. (8)
- Michael Heilemann is doing a great job with his new WordPress theme; Kubrick. (1)
- I’m late to the party, but Dan has a book out. (1)
- What a crazy concept for laying out housing estates. (3)
- In San Francisco, I live here. (Try the zoom feature.) (1)
- Spider-Man reviews crayons. [Via] (3)
- Some beautiful images from photographer Greg Downing. (2)
- Lots of links, from the Link Bunnies. (1)
- Nice “when I was a child” sort of post from Stuart. (1)
- How much does SafariSorter cost? (4)
- Some handy maintenance tips for Mac owners running Panther. (2)
- Alex King launches Use Tasks: a hosted service for Tasks and Tasks Pro™. (2)
- Min Jung, Anil Dash, and I get interviewed for HBO’s Real Sex. (10)
Blog-roll
A selection of blogs I read on a regular basis.
- Hmm, the blog-roll seems to be a little bit broken right now (it may be that the blo.gs service is having problems). I’ve sent myself an email about this problem, and will try to fix it ASAP.